|
|
@@ -31,6 +31,27 @@
|
|
|
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
|
|
</el-dialog>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="问题视频：" prop="videos">
|
|
|
+ <p>(仅支持上传1条视频，大小50M以内)</p>
|
|
|
+ <el-upload v-if="videoUrl.length === 0" class="avatar-uploader" action="/skyeye-admin-api/issue/uploadPicture"
|
|
|
+ :show-file-list="false" :on-success="handleUploadVideo" :headers="getHeaders()"
|
|
|
+ :data="{ bizType: 'PROBLEM_REPORT' }" :before-upload="beforeUploadVideo">
|
|
|
+ <el-icon class="avatar-uploader-icon">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <div class="upload-success" v-else>
|
|
|
+ <img src="@/assets/images/alert/video-play.png" @click="videoDialogVisible = true" />
|
|
|
+ <el-icon class="clear-video" @click="videoUrl = []" :size="25">
|
|
|
+ <CloseBold />
|
|
|
+ </el-icon>
|
|
|
+ <el-dialog v-model="videoDialogVisible" width="500">
|
|
|
+ <video width="320" height="200" type="video/mp4" muted="true" preload="auto" :controls="true" autoplay>
|
|
|
+ <source :src="videoUrl[0]" />
|
|
|
+ </video>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="问题地点：" prop="workspaceId" :rules="{ required: true, message: '请完成必填项' }">
|
|
|
<el-cascader v-model="workLocation" :options="locationOptions" :props="location" placeholder="请选择问题地点"
|
|
|
clearable @change="handleCascaderChange" />
|
|
|
@@ -57,8 +78,8 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { computed, onBeforeMount, onMounted, reactive, ref } from 'vue';
|
|
|
-import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus';
|
|
|
-import { Plus } from '@element-plus/icons-vue';
|
|
|
+import { ElMessage, type FormInstance, type UploadProps, type UploadUserFile } from 'element-plus';
|
|
|
+import { Plus, CloseBold } from '@element-plus/icons-vue';
|
|
|
import { IssueState, sourceOptions, issueStateOptionsAdd } from './constant.question';
|
|
|
import { useIssueType } from '../../hooks/useIssueType';
|
|
|
import { useWorkLocation } from '../../hooks/useWorkLocation';
|
|
|
@@ -110,6 +131,7 @@ const formData = reactive<FormModel>({
|
|
|
const location = { expandTrigger: 'hover' as const };
|
|
|
const workLocation = ref<[number | undefined, number | undefined] | []>([]);
|
|
|
|
|
|
+
|
|
|
const handleSelectChange = () => {
|
|
|
formData.issueType = undefined;
|
|
|
};
|
|
|
@@ -145,7 +167,6 @@ const handleCopyData = () => {
|
|
|
formData.workshopId = props.initialData?.workshopId;
|
|
|
formData.workspaceId = props.initialData?.workspaceId;
|
|
|
formData.createdAt = props.initialData?.createdAt;
|
|
|
- console.log(props.initialData?.issueState);
|
|
|
switch (props.initialData?.issueState) {
|
|
|
case IssueState.toAuth0:
|
|
|
formData.issueState = 2;
|
|
|
@@ -163,7 +184,6 @@ const handleCopyData = () => {
|
|
|
formData.issueState = props.initialData?.issueState;
|
|
|
break;
|
|
|
}
|
|
|
- console.log(formData.issueState);
|
|
|
|
|
|
workLocation.value = [props.initialData?.workshopId, props.initialData?.workspaceId!];
|
|
|
fileList.value = props.initialData?.pictures?.map(str => ({ name: str, url: str })) || [];
|
|
|
@@ -208,6 +228,24 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
|
|
dialogVisible.value = true;
|
|
|
};
|
|
|
|
|
|
+// 视频上传
|
|
|
+const videoUrl = ref<string[]>([]);
|
|
|
+const videoDialogVisible = ref(false);
|
|
|
+const handleUploadVideo = (res) => {
|
|
|
+ videoUrl.value.push(res.data.url);
|
|
|
+ console.log(videoUrl.value);
|
|
|
+};
|
|
|
+const beforeUploadVideo: UploadProps['beforeUpload'] = (rawFile) => {
|
|
|
+ if (rawFile.type !== 'video/mp4') {
|
|
|
+ ElMessage.error('上传视频仅支持mp4格式');
|
|
|
+ return false
|
|
|
+ } else if (rawFile.size / 1024 / 1024 > 50) {
|
|
|
+ ElMessage.error('上传视频大小不能超过50MB');
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
handleCopyData();
|
|
|
});
|
|
|
@@ -248,10 +286,43 @@ onBeforeMount(() => {
|
|
|
:deep(.el-form-item__content) {
|
|
|
display: block;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- p {
|
|
|
- font-size: 10px;
|
|
|
- color: #A8ABB2;
|
|
|
+p {
|
|
|
+ font-size: 10px;
|
|
|
+ color: #A8ABB2;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.avatar-uploader .el-upload) {
|
|
|
+ border: 1px dashed #cdd0d6;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+ background-color: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.avatar-uploader .el-upload:hover) {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #909399;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-success {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .clear-video {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
bxy
