|
|
@@ -1,28 +1,73 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-drawer v-model="visible" title="问题编辑" direction="rtl" size="30%" :close-on-click-modal="false"
|
|
|
- @close="handleCancel">
|
|
|
+ <el-drawer
|
|
|
+ v-model="visible"
|
|
|
+ title="问题编辑"
|
|
|
+ direction="rtl"
|
|
|
+ size="30%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @close="handleCancel"
|
|
|
+ >
|
|
|
<el-form ref="formRef" :model="formData">
|
|
|
- <el-form-item label="问题来源:" prop="source" :rules="{ required: true, message: '请完成必填项' }">
|
|
|
- <el-select v-model="formData.source" placeholder="请选择问题来源" clearable @change="handleSelectChange">
|
|
|
- <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ <el-form-item
|
|
|
+ label="问题来源:"
|
|
|
+ prop="source"
|
|
|
+ :rules="{ required: true, message: '请完成必填项' }"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="formData.source"
|
|
|
+ placeholder="请选择问题来源"
|
|
|
+ clearable
|
|
|
+ @change="handleSelectChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in sourceOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="问题类型:" prop="issueType" :rules="{ required: true, message: '请完成必填项' }">
|
|
|
+ <el-form-item
|
|
|
+ label="问题类型:"
|
|
|
+ prop="issueType"
|
|
|
+ :rules="{ required: true, message: '请完成必填项' }"
|
|
|
+ >
|
|
|
<el-select v-model="formData.issueType" placeholder="请选择问题类型" clearable>
|
|
|
<el-option v-for="item in options" :label="item.name" :value="item.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="问题描述:" prop="description" :rules="{ required: true, message: '请完成必填项' }">
|
|
|
- <el-input v-model="formData.description" type="textarea" maxlength="100" autosize show-word-limit
|
|
|
- placeholder="请输入问题描述,不超过100个字"></el-input>
|
|
|
+ <el-form-item
|
|
|
+ label="问题描述:"
|
|
|
+ prop="description"
|
|
|
+ :rules="{ required: true, message: '请完成必填项' }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="formData.description"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="100"
|
|
|
+ autosize
|
|
|
+ show-word-limit
|
|
|
+ placeholder="请输入问题描述,不超过100个字"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item class="pic-form-item" label="问题图片:" prop="pictures"
|
|
|
- :rules="{ required: true, message: '请完成必填项' }">
|
|
|
+ <el-form-item
|
|
|
+ class="pic-form-item"
|
|
|
+ label="问题图片:"
|
|
|
+ prop="pictures"
|
|
|
+ :rules="{ required: true, message: '请完成必填项' }"
|
|
|
+ >
|
|
|
<p>(建议尺寸192*108,大小10M以下)</p>
|
|
|
- <el-upload v-model:file-list="fileList" action="/skyeye-admin-api/issue/uploadPicture"
|
|
|
- list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
|
|
|
- :on-success="handleAvatarSuccess" :headers="getHeaders()" :data="{ bizType: 'PROBLEM_REPORT' }">
|
|
|
+ <el-upload
|
|
|
+ v-model:file-list="fileList"
|
|
|
+ :action="actionUrl"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :headers="getHeaders()"
|
|
|
+ :data="{ bizType: 'PROBLEM_REPORT' }"
|
|
|
+ >
|
|
|
<el-icon>
|
|
|
<Plus />
|
|
|
</el-icon>
|
|
|
@@ -34,39 +79,84 @@
|
|
|
<el-form-item class="pic-form-item" label="问题视频:" prop="videos">
|
|
|
<p>(仅支持上传1条视频,大小50M以内)</p>
|
|
|
<el-upload
|
|
|
- v-if="formData.videos === undefined || formData.videos === null || formData.videos && formData.videos.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">
|
|
|
+ v-if="
|
|
|
+ formData.videos === undefined ||
|
|
|
+ formData.videos === null ||
|
|
|
+ (formData.videos && formData.videos.length === 0)
|
|
|
+ "
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="actionUrl"
|
|
|
+ :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"
|
|
|
- style="cursor: pointer;" />
|
|
|
+ <img
|
|
|
+ src="@/assets/images/alert/video-play.png"
|
|
|
+ @click="videoDialogVisible = true"
|
|
|
+ style="cursor: pointer"
|
|
|
+ />
|
|
|
<el-icon class="clear-video" @click="handleDeleteVideo" :size="15" color="#fff">
|
|
|
<CloseBold />
|
|
|
</el-icon>
|
|
|
<el-dialog v-model="videoDialogVisible">
|
|
|
- <video type="video/mp4" muted="true" preload="auto" :controls="true" autoplay
|
|
|
- style="height: 500px;object-fit: fill;">
|
|
|
+ <video
|
|
|
+ type="video/mp4"
|
|
|
+ muted="true"
|
|
|
+ preload="auto"
|
|
|
+ :controls="true"
|
|
|
+ autoplay
|
|
|
+ style="height: 500px; object-fit: fill"
|
|
|
+ >
|
|
|
<source :src="formData.videos![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" />
|
|
|
+ <el-form-item
|
|
|
+ label="问题地点:"
|
|
|
+ prop="workspaceId"
|
|
|
+ :rules="{ required: true, message: '请完成必填项' }"
|
|
|
+ >
|
|
|
+ <el-cascader
|
|
|
+ v-model="workLocation"
|
|
|
+ :options="locationOptions"
|
|
|
+ :props="location"
|
|
|
+ placeholder="请选择问题地点"
|
|
|
+ clearable
|
|
|
+ @change="handleCascaderChange"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="问题时间:" prop="createdAt" :rules="{ required: true, message: '请完成必填项' }">
|
|
|
- <el-date-picker v-model="formData.createdAt" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- placeholder="请选择问题时间" />
|
|
|
+ <el-form-item
|
|
|
+ label="问题时间:"
|
|
|
+ prop="createdAt"
|
|
|
+ :rules="{ required: true, message: '请完成必填项' }"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData.createdAt"
|
|
|
+ type="datetime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ placeholder="请选择问题时间"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="问题状态:" prop="issueState" :rules="{ required: true, message: '请完成必填项' }">
|
|
|
+ <el-form-item
|
|
|
+ label="问题状态:"
|
|
|
+ prop="issueState"
|
|
|
+ :rules="{ required: true, message: '请完成必填项' }"
|
|
|
+ >
|
|
|
<el-select v-model="formData.issueState" placeholder="请选择问题状态" clearable>
|
|
|
- <el-option v-for="item in issueStateOptionsAdd" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ <el-option
|
|
|
+ v-for="item in issueStateOptionsAdd"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
@@ -81,277 +171,293 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { computed, onBeforeMount, onMounted, reactive, ref } from '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';
|
|
|
-import { useUserStore } from '@/store/modules/user';
|
|
|
-
|
|
|
-enum SourceType {
|
|
|
- ai = 1,
|
|
|
- manual = 2
|
|
|
-};
|
|
|
-
|
|
|
-interface Props {
|
|
|
- initialData?: FormModel
|
|
|
-};
|
|
|
-
|
|
|
-interface FormModel {
|
|
|
- id?: number,
|
|
|
- source?: number, // 来源
|
|
|
- issueType?: number, // 类型
|
|
|
- description?: string, // 描述
|
|
|
- pictures?: string[], // 图片
|
|
|
- videos?: string[],
|
|
|
- workshopId?: number, // 车间id
|
|
|
- workshopName?: string,
|
|
|
- workspaceId?: number, // 工位id
|
|
|
- workspaceName?: string,
|
|
|
- createdAt?: string, // 时间
|
|
|
- issueState?: number, // 状态
|
|
|
-};
|
|
|
-
|
|
|
-const visible = ref(true);
|
|
|
-const { aiOptions, manualOptions, getAIOptions, getManualOptions } = useIssueType();
|
|
|
-const { locationOptions, getLocationOptions, getNameByWorkid } = useWorkLocation();
|
|
|
-
|
|
|
-const props = defineProps<Props>();
|
|
|
-const emits = defineEmits(['saveForm', 'closeForm']);
|
|
|
-
|
|
|
-const formRef = ref<FormInstance>();
|
|
|
-const formData = reactive<FormModel>({
|
|
|
- id: undefined,
|
|
|
- source: undefined,
|
|
|
- issueType: undefined,
|
|
|
- description: '',
|
|
|
- pictures: [],
|
|
|
- videos: [],
|
|
|
- workshopId: undefined,
|
|
|
- workspaceId: undefined,
|
|
|
- createdAt: '',
|
|
|
- issueState: undefined
|
|
|
-});
|
|
|
-
|
|
|
-const location = { expandTrigger: 'hover' as const };
|
|
|
-const workLocation = ref<[number | undefined, number | undefined] | []>([]);
|
|
|
-
|
|
|
-
|
|
|
-const handleSelectChange = () => {
|
|
|
- formData.issueType = undefined;
|
|
|
-};
|
|
|
-const options = computed(() => {
|
|
|
- if (Number(formData.source) === SourceType.ai && aiOptions.value.length > 0) {
|
|
|
- return aiOptions.value;
|
|
|
- }
|
|
|
- if (Number(formData.source) === SourceType.manual && manualOptions.value.length > 0) {
|
|
|
- return manualOptions.value;
|
|
|
+ import { computed, onBeforeMount, onMounted, reactive, ref } from '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';
|
|
|
+ import { useUserStore } from '@/store/modules/user';
|
|
|
+ import urlJoin from 'url-join';
|
|
|
+ import { useGlobSetting } from '@/hooks/setting';
|
|
|
+
|
|
|
+ enum SourceType {
|
|
|
+ ai = 1,
|
|
|
+ manual = 2,
|
|
|
}
|
|
|
- return []
|
|
|
-});
|
|
|
-const handleCascaderChange = () => {
|
|
|
- if (workLocation.value != null) {
|
|
|
- formData.workshopId = workLocation.value[0];
|
|
|
- formData.workspaceId = workLocation.value[1];
|
|
|
- const tempString = getNameByWorkid(formData.workshopId, formData.workspaceId, locationOptions.value);
|
|
|
- const strFlag = tempString?.indexOf('-');
|
|
|
- formData.workshopName = tempString?.slice(0, strFlag);
|
|
|
- formData.workspaceName = tempString?.slice(strFlag! + 1);
|
|
|
- } else {
|
|
|
- Reflect.deleteProperty(formData, "workshopId");
|
|
|
- Reflect.deleteProperty(formData, "workspaceId");
|
|
|
+
|
|
|
+ interface Props {
|
|
|
+ initialData?: FormModel;
|
|
|
}
|
|
|
-};
|
|
|
-
|
|
|
-const handleCopyData = () => {
|
|
|
- formData.id = props.initialData?.id;
|
|
|
- formData.source = props.initialData?.source;
|
|
|
- formData.issueType = props.initialData?.issueType;
|
|
|
- formData.description = props.initialData?.description;
|
|
|
- formData.pictures = props.initialData?.pictures;
|
|
|
- formData.videos = props.initialData?.videos;
|
|
|
- formData.workshopId = props.initialData?.workshopId;
|
|
|
- formData.workspaceId = props.initialData?.workspaceId;
|
|
|
- formData.createdAt = props.initialData?.createdAt;
|
|
|
-
|
|
|
- switch (props.initialData?.issueState) {
|
|
|
- case IssueState.toAuth0:
|
|
|
- formData.issueState = 2;
|
|
|
- break;
|
|
|
- case IssueState.toAuth1:
|
|
|
- formData.issueState = 2;
|
|
|
- break;
|
|
|
- case IssueState.toDeal6:
|
|
|
- formData.issueState = 4;
|
|
|
- break;
|
|
|
- case IssueState.hasDone7:
|
|
|
- formData.issueState = 8;
|
|
|
- break;
|
|
|
- default:
|
|
|
- formData.issueState = props.initialData?.issueState;
|
|
|
- break;
|
|
|
+
|
|
|
+ interface FormModel {
|
|
|
+ id?: number;
|
|
|
+ source?: number; // 来源
|
|
|
+ issueType?: number; // 类型
|
|
|
+ description?: string; // 描述
|
|
|
+ pictures?: string[]; // 图片
|
|
|
+ videos?: string[];
|
|
|
+ workshopId?: number; // 车间id
|
|
|
+ workshopName?: string;
|
|
|
+ workspaceId?: number; // 工位id
|
|
|
+ workspaceName?: string;
|
|
|
+ createdAt?: string; // 时间
|
|
|
+ issueState?: number; // 状态
|
|
|
}
|
|
|
|
|
|
- workLocation.value = [props.initialData?.workshopId, props.initialData?.workspaceId!];
|
|
|
- fileList.value = props.initialData?.pictures?.map(str => ({ name: str, url: str })) || [];
|
|
|
-};
|
|
|
-
|
|
|
-// 取消
|
|
|
-const handleCancel = () => {
|
|
|
- emits('closeForm');
|
|
|
-};
|
|
|
-
|
|
|
-// 保存
|
|
|
-const handleSubmit = async (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return
|
|
|
- await formEl.validate((valid, fields) => {
|
|
|
- if (valid) {
|
|
|
- console.log('submit!', formData);
|
|
|
- emits('saveForm', formData);
|
|
|
+ const visible = ref(true);
|
|
|
+ const { aiOptions, manualOptions, getAIOptions, getManualOptions } = useIssueType();
|
|
|
+ const { locationOptions, getLocationOptions, getNameByWorkid } = useWorkLocation();
|
|
|
+
|
|
|
+ const props = defineProps<Props>();
|
|
|
+ const emits = defineEmits(['saveForm', 'closeForm']);
|
|
|
+
|
|
|
+ const formRef = ref<FormInstance>();
|
|
|
+ const formData = reactive<FormModel>({
|
|
|
+ id: undefined,
|
|
|
+ source: undefined,
|
|
|
+ issueType: undefined,
|
|
|
+ description: '',
|
|
|
+ pictures: [],
|
|
|
+ videos: [],
|
|
|
+ workshopId: undefined,
|
|
|
+ workspaceId: undefined,
|
|
|
+ createdAt: '',
|
|
|
+ issueState: undefined,
|
|
|
+ });
|
|
|
+
|
|
|
+ const location = { expandTrigger: 'hover' as const };
|
|
|
+ const workLocation = ref<[number | undefined, number | undefined] | []>([]);
|
|
|
+
|
|
|
+ const { urlPrefix } = useGlobSetting();
|
|
|
+
|
|
|
+ const handleSelectChange = () => {
|
|
|
+ formData.issueType = undefined;
|
|
|
+ };
|
|
|
+ const options = computed(() => {
|
|
|
+ if (Number(formData.source) === SourceType.ai && aiOptions.value.length > 0) {
|
|
|
+ return aiOptions.value;
|
|
|
+ }
|
|
|
+ if (Number(formData.source) === SourceType.manual && manualOptions.value.length > 0) {
|
|
|
+ return manualOptions.value;
|
|
|
+ }
|
|
|
+ return [];
|
|
|
+ });
|
|
|
+ const handleCascaderChange = () => {
|
|
|
+ if (workLocation.value != null) {
|
|
|
+ formData.workshopId = workLocation.value[0];
|
|
|
+ formData.workspaceId = workLocation.value[1];
|
|
|
+ const tempString = getNameByWorkid(
|
|
|
+ formData.workshopId,
|
|
|
+ formData.workspaceId,
|
|
|
+ locationOptions.value,
|
|
|
+ );
|
|
|
+ const strFlag = tempString?.indexOf('-');
|
|
|
+ formData.workshopName = tempString?.slice(0, strFlag);
|
|
|
+ formData.workspaceName = tempString?.slice(strFlag! + 1);
|
|
|
} else {
|
|
|
- console.log('error submit!', fields)
|
|
|
+ Reflect.deleteProperty(formData, 'workshopId');
|
|
|
+ Reflect.deleteProperty(formData, 'workspaceId');
|
|
|
}
|
|
|
- })
|
|
|
-};
|
|
|
-
|
|
|
-// 图片上传
|
|
|
-const userStore = useUserStore();
|
|
|
-const getHeaders = () => {
|
|
|
- return { Satoken: userStore.getToken, Tenantid: userStore.getTenantId };
|
|
|
-};
|
|
|
-const handleAvatarSuccess = (res) => {
|
|
|
- if (!formData.pictures) formData.pictures = [];
|
|
|
- formData.pictures.push(res.data.url);
|
|
|
-};
|
|
|
-const fileList = ref<UploadUserFile[]>([]);
|
|
|
-const dialogImageUrl = ref('');
|
|
|
-const dialogVisible = ref(false);
|
|
|
-const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
|
|
|
- const index = formData.pictures?.indexOf(uploadFile.url || '')!;
|
|
|
- if (index !== -1) formData.pictures?.splice(index, 1);
|
|
|
-};
|
|
|
-const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
|
|
- dialogImageUrl.value = uploadFile.url!;
|
|
|
- dialogVisible.value = true;
|
|
|
-};
|
|
|
-
|
|
|
-// 视频上传
|
|
|
-const videoDialogVisible = ref(false);
|
|
|
-const handleUploadVideo = (res) => {
|
|
|
- if (!formData.videos) formData.videos = [];
|
|
|
- formData.videos.push(res.data.url);
|
|
|
-};
|
|
|
-const handleDeleteVideo = () => {
|
|
|
- formData.videos = [];
|
|
|
-}
|
|
|
-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();
|
|
|
-});
|
|
|
-
|
|
|
-onBeforeMount(() => {
|
|
|
- getAIOptions();
|
|
|
- getManualOptions();
|
|
|
- getLocationOptions();
|
|
|
-});
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleCopyData = () => {
|
|
|
+ formData.id = props.initialData?.id;
|
|
|
+ formData.source = props.initialData?.source;
|
|
|
+ formData.issueType = props.initialData?.issueType;
|
|
|
+ formData.description = props.initialData?.description;
|
|
|
+ formData.pictures = props.initialData?.pictures;
|
|
|
+ formData.videos = props.initialData?.videos;
|
|
|
+ formData.workshopId = props.initialData?.workshopId;
|
|
|
+ formData.workspaceId = props.initialData?.workspaceId;
|
|
|
+ formData.createdAt = props.initialData?.createdAt;
|
|
|
+
|
|
|
+ switch (props.initialData?.issueState) {
|
|
|
+ case IssueState.toAuth0:
|
|
|
+ formData.issueState = 2;
|
|
|
+ break;
|
|
|
+ case IssueState.toAuth1:
|
|
|
+ formData.issueState = 2;
|
|
|
+ break;
|
|
|
+ case IssueState.toDeal6:
|
|
|
+ formData.issueState = 4;
|
|
|
+ break;
|
|
|
+ case IssueState.hasDone7:
|
|
|
+ formData.issueState = 8;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ formData.issueState = props.initialData?.issueState;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ workLocation.value = [props.initialData?.workshopId, props.initialData?.workspaceId!];
|
|
|
+ fileList.value = props.initialData?.pictures?.map((str) => ({ name: str, url: str })) || [];
|
|
|
+ };
|
|
|
+
|
|
|
+ // 取消
|
|
|
+ const handleCancel = () => {
|
|
|
+ emits('closeForm');
|
|
|
+ };
|
|
|
+
|
|
|
+ const actionUrl = computed(() => {
|
|
|
+ return urlJoin(urlPrefix!, `/issue/uploadPicture`);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 保存
|
|
|
+ const handleSubmit = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ await formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('submit!', formData);
|
|
|
+ emits('saveForm', formData);
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 图片上传
|
|
|
+ const userStore = useUserStore();
|
|
|
+ const getHeaders = () => {
|
|
|
+ return { Satoken: userStore.getToken, Tenantid: userStore.getTenantId };
|
|
|
+ };
|
|
|
+ const handleAvatarSuccess = (res) => {
|
|
|
+ if (!formData.pictures) formData.pictures = [];
|
|
|
+ formData.pictures.push(res.data.url);
|
|
|
+ };
|
|
|
+ const fileList = ref<UploadUserFile[]>([]);
|
|
|
+ const dialogImageUrl = ref('');
|
|
|
+ const dialogVisible = ref(false);
|
|
|
+ const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
|
|
|
+ const index = formData.pictures?.indexOf(uploadFile.url || '')!;
|
|
|
+ if (index !== -1) formData.pictures?.splice(index, 1);
|
|
|
+ };
|
|
|
+ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
|
|
+ dialogImageUrl.value = uploadFile.url!;
|
|
|
+ dialogVisible.value = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 视频上传
|
|
|
+ const videoDialogVisible = ref(false);
|
|
|
+ const handleUploadVideo = (res) => {
|
|
|
+ if (!formData.videos) formData.videos = [];
|
|
|
+ formData.videos.push(res.data.url);
|
|
|
+ };
|
|
|
+ const handleDeleteVideo = () => {
|
|
|
+ formData.videos = [];
|
|
|
+ };
|
|
|
+ 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();
|
|
|
+ });
|
|
|
+
|
|
|
+ onBeforeMount(() => {
|
|
|
+ getAIOptions();
|
|
|
+ getManualOptions();
|
|
|
+ getLocationOptions();
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-:deep(.el-drawer__header) {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- >:first-child {
|
|
|
- margin-left: 32px;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 16px;
|
|
|
- color: rgba(0, 0, 0, 0.88);
|
|
|
+ :deep(.el-drawer__header) {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ > :first-child {
|
|
|
+ margin-left: 32px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(0, 0, 0, 0.88);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-drawer__close-btn {
|
|
|
+ position: absolute;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .el-drawer__close-btn {
|
|
|
- position: absolute;
|
|
|
- color: #000;
|
|
|
+ .btn-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.btn-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.pic-form-item {
|
|
|
- :deep(.el-form-item__content) {
|
|
|
- display: block;
|
|
|
+
|
|
|
+ .pic-form-item {
|
|
|
+ :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 {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 129px;
|
|
|
+
|
|
|
+ :deep(.avatar-uploader .el-upload) {
|
|
|
+ border: 1px dashed #cdd0d6;
|
|
|
+ border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
- background-color: #000;
|
|
|
- border-radius: 0 0 0 25px;
|
|
|
- opacity: 0.7;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+ background-color: #fafafa;
|
|
|
}
|
|
|
|
|
|
- :deep(.el-dialog) {
|
|
|
- width: 960px;
|
|
|
- height: 540px;
|
|
|
- padding: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: #000;
|
|
|
+ :deep(.avatar-uploader .el-upload:hover) {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
}
|
|
|
|
|
|
- :deep(.el-dialog__header) {
|
|
|
- display: none;
|
|
|
+ .el-icon.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #909399;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-success {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .clear-video {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 129px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #000;
|
|
|
+ border-radius: 0 0 0 25px;
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-dialog) {
|
|
|
+ width: 960px;
|
|
|
+ height: 540px;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-dialog__header) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|