|
|
@@ -28,6 +28,36 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ <template #imageFileUrl>
|
|
|
+ <el-upload
|
|
|
+ :key="approvalUploadKey"
|
|
|
+ ref="approvalUploadRef"
|
|
|
+ v-model:file-list="approvalImageFileList"
|
|
|
+ :auto-upload="false"
|
|
|
+ list-type="picture-card"
|
|
|
+ :limit="1"
|
|
|
+ :disabled="isViewMode"
|
|
|
+ :on-change="handleApprovalImageChange"
|
|
|
+ :on-exceed="handleApprovalImageExceed"
|
|
|
+ :on-preview="handleApprovalPictureCardPreview"
|
|
|
+ :on-remove="handleApprovalImageRemove"
|
|
|
+ >
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
+ <template #file="{ file }">
|
|
|
+ <div>
|
|
|
+ <img class="el-upload-list__item-thumbnail" :src="file.fileUrl" alt="" />
|
|
|
+ <span class="el-upload-list__item-actions" v-if="!isViewMode">
|
|
|
+ <span class="el-upload-list__item-preview" @click="handleApprovalPictureCardPreview(file)">
|
|
|
+ <el-icon><ZoomIn /></el-icon>
|
|
|
+ </span>
|
|
|
+ <span class="el-upload-list__item-delete" @click.stop="handleApprovalDeleteClick()">
|
|
|
+ <el-icon><Delete /></el-icon>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </template>
|
|
|
<template #content>
|
|
|
<div class="editor-container">
|
|
|
<Toolbar style="border-bottom: 1px solid #dcdfe6" :editor="editorRef" />
|
|
|
@@ -38,7 +68,7 @@
|
|
|
<template #status>
|
|
|
<el-radio-group v-model="ruleFormData.status" :disabled="isViewMode">
|
|
|
<el-radio :value="1">启用</el-radio>
|
|
|
- <el-radio :value="0">禁用</el-radio>
|
|
|
+ <el-radio :value="2">禁用</el-radio>
|
|
|
</el-radio-group>
|
|
|
</template>
|
|
|
</BasicForm>
|
|
|
@@ -55,7 +85,7 @@
|
|
|
<script setup lang="ts">
|
|
|
import { computed, onMounted, ref, shallowRef, onBeforeUnmount } from 'vue';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
-import { ElMessage } from 'element-plus';
|
|
|
+import { ElMessage , ElIcon, genFileId, type UploadProps, type UploadUserFile, type UploadRawFile, type UploadInstance } from 'element-plus';
|
|
|
import BasicForm from '@/components/BasicForm.vue';
|
|
|
import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
|
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
|
|
@@ -71,17 +101,17 @@ import {
|
|
|
import type { FileItem } from '@/components/UploadFiles/types';
|
|
|
import { formatAttachmentList } from '@/components/UploadFiles/utils';
|
|
|
import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
|
|
|
-
|
|
|
+import { uploadFileApi, UPLOAD_BIZ_TYPE } from '@/api/minio';
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
-
|
|
|
+const approvalUploadKey = ref(0);
|
|
|
const operate = computed(() => (route.query.operate as string) || 'safety-culture-material-create');
|
|
|
const currentId = computed(() => Number(route.query.id));
|
|
|
-
|
|
|
+const approvalImageFileList = ref<UploadUserFile[]>([]);
|
|
|
const isCreateMode = computed(() => operate.value === 'safety-culture-material-create');
|
|
|
const isEditMode = computed(() => operate.value === 'safety-culture-material-edit');
|
|
|
const isViewMode = computed(() => operate.value === 'safety-culture-material-view');
|
|
|
-
|
|
|
+const approvalUploadRef = ref<UploadInstance>();
|
|
|
const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
|
|
|
|
|
|
const { ruleFormData, formRules, ruleFormConfig, cloneRuleFormData, beforeRouteLeave } =
|
|
|
@@ -180,6 +210,8 @@ const getDetail = async () => {
|
|
|
ruleFormData.status = res.status ?? 1;
|
|
|
ruleFormData.description = res.description || '';
|
|
|
ruleFormData.attachmentUrl = JSON.parse(res.attachmentUrl || res.fileUrl || '');
|
|
|
+ approvalImageFileList.value = JSON.parse(res.imageUrl || '[]');
|
|
|
+ ruleFormData.imageUrl = res.imageUrl || '';
|
|
|
}
|
|
|
cloneRuleFormData();
|
|
|
} catch (e) {
|
|
|
@@ -208,6 +240,7 @@ const handleSubmit = async () => {
|
|
|
description: ruleFormData.description,
|
|
|
attachmentUrl:JSON.stringify(uploadedFileList),
|
|
|
status: ruleFormData.status,
|
|
|
+ imageUrl: JSON.stringify(approvalImageFileList.value),
|
|
|
};
|
|
|
if (isCreateMode.value) {
|
|
|
await saveAccidentCase(basePayload);
|
|
|
@@ -233,6 +266,60 @@ const previewOnline = (url: string | undefined, type) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const handleApprovalImageChange = (uploadFile: UploadUserFile) => {
|
|
|
+ if (!uploadFile.raw) return;
|
|
|
+
|
|
|
+ uploadFileApi({
|
|
|
+ file: uploadFile.raw,
|
|
|
+ bizType: UPLOAD_BIZ_TYPE['DICTIONARY'],
|
|
|
+ fileName: uploadFile.raw.name,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ ruleFormData.imageUrl = [res.url];
|
|
|
+ approvalImageFileList.value = [
|
|
|
+ {
|
|
|
+ fileName: uploadFile.name || res.url.split('/').pop() || 'image',
|
|
|
+ fileUrl: res.url,
|
|
|
+ fileId: res.uid
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ ElMessage.error('图片上传失败，请重试');
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const handleApprovalImageExceed: UploadProps['onExceed'] = (files) => {
|
|
|
+ const uploadInstance = approvalUploadRef.value;
|
|
|
+ if (!uploadInstance) return;
|
|
|
+
|
|
|
+ uploadInstance.clearFiles();
|
|
|
+ const file = files[0] as UploadRawFile;
|
|
|
+ file.uid = genFileId();
|
|
|
+ uploadInstance.handleStart(file);
|
|
|
+};
|
|
|
+
|
|
|
+const handleApprovalPictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
|
|
+ // dialogImageUrl.value = uploadFile.url || '';
|
|
|
+ // dialogVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const resetApprovalImageUpload = () => {
|
|
|
+ approvalUploadRef.value?.clearFiles();
|
|
|
+ ruleFormData.imageUrl = [];
|
|
|
+ approvalImageFileList.value = [];
|
|
|
+ approvalUploadKey.value += 1;
|
|
|
+};
|
|
|
+
|
|
|
+const handleApprovalDeleteClick = () => {
|
|
|
+ resetApprovalImageUpload();
|
|
|
+};
|
|
|
+
|
|
|
+const handleApprovalImageRemove: UploadProps['onRemove'] = () => {
|
|
|
+ resetApprovalImageUpload();
|
|
|
+};
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
cloneRuleFormData();
|
|
|
// beforeRouteLeave();
|
xiaweibo