fix: 安全文化材料图片上传功能

src/views/production-safety/safety-culture/safetyCultureMaterialManagement/components/safetyCultureMaterialManagementDetail.vue

@@ -1,7 +1,11 @@
 <template>
   <main class="safety-platform-container__main">
-    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="isViewMode ? undefined : formRules"
-      :formConfig="computedFormConfig">
+    <BasicForm
+      ref="basicFormRef"
+      :formData="ruleFormData"
+      :formRules="isViewMode ? undefined : formRules"
+      :formConfig="computedFormConfig"
+    >
       <template #fileFormat>
         <el-radio-group v-model="ruleFormData.fileFormat" :disabled="isViewMode">
           <el-radio value="PDF">PDF</el-radio>
@@ -12,55 +16,69 @@
         <!-- <UploadFiles label="上传文件" :maxCount="1" :file-list="ruleFormData.fileUrlList" :disabled="isViewMode"
           :allow-all-file-types="true" @uploadSuccess="handleUploadSuccess" /> -->
 
-          <UploadFiles
-            v-if="!isViewMode"
-            label="上传文件"
-            :maxCount="1"
-            :file-list="ruleFormData.attachmentUrl"
-            :disabled="isViewMode"
-            :allow-all-file-types="true"
-            @uploadSuccess="(list: FileItem[]) => handleUploadSuccess(list)"
-          />
-          <div class="file-list" v-else>
-            <div class="file-item" v-for="file in ruleFormData.attachmentUrl" :key="file.fileId">
-              <span class="file-item--name">{{ file.fileName }}</span>
-              <div class="file-item--footer">
-                <el-button link type="primary" @click="previewOnline(file.fileUrl, file.fileType)"
-                  >预览</el-button
-                >
-                <!-- <el-button link type="primary" @click.stop="downloadFile(file.fileUrl, file.fileName)"
+        <UploadFiles
+          v-if="!isViewMode"
+          label="上传文件"
+          :maxCount="1"
+          :file-list="ruleFormData.attachmentUrl"
+          :disabled="isViewMode"
+          :allow-all-file-types="true"
+          @uploadSuccess="(list: FileItem[]) => handleUploadSuccess(list)"
+        />
+        <div class="file-list" v-else>
+          <div class="file-item" v-for="file in ruleFormData.attachmentUrl" :key="file.fileId">
+            <span class="file-item--name">{{ file.fileName }}</span>
+            <div class="file-item--footer">
+              <el-button link type="primary" @click="previewOnline(file.fileUrl, file.fileType)">预览</el-button>
+              <!-- <el-button link type="primary" @click.stop="downloadFile(file.fileUrl, file.fileName)"
                   >下载</el-button
                 > -->
-              </div>
             </div>
           </div>
+        </div>
       </template>
       <template #content>
         <div class="editor-container">
           <Toolbar style="border-bottom: 1px solid #dcdfe6" :editor="editorRef" />
-          <Editor style="height: 400px; overflow-y: auto" v-model="ruleFormData.content" mode="default"
-            :defaultConfig="editorConfig" @on-created="handleEditorCreated" @on-change="handleEditorChange" />
+          <Editor
+            style="height: 400px; overflow-y: auto"
+            v-model="ruleFormData.content"
+            mode="default"
+            :defaultConfig="editorConfig"
+            @on-created="handleEditorCreated"
+            @on-change="handleEditorChange"
+          />
         </div>
       </template>
       <template #imageFileUrl>
-        <!-- <el-upload class="image-uploader" action="/api/admin/minio/uploadFile" :file-list="ruleFormData.imageFileUrl"
-          :disabled="isViewMode" :limit="5" :on-success="handleImageUploadSuccess" :on-remove="handleImageRemove"
-          list-type="picture-card">
-          <el-icon>
-            <Plus />
-          </el-icon>
-          <template #tip>
-            <div class="el-upload__tip">
-              支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB
+        <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.url" 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> -->
-        <UploadImages
-          ref="uploadImagesRef"
-          :maxCount="1"
-          :image-list="approvalImageList"
-          @upload-success="handleApprovalUploadChange"
-        />
+        </el-upload>
       </template>
       <template #status>
         <el-radio-group v-model="ruleFormData.status" :disabled="isViewMode">
@@ -71,6 +89,11 @@
     </BasicForm>
     <PreviewOnline ref="previewOnlineRef" />
   </main>
+  <el-dialog v-model="dialogVisible" width="30%">
+    <div class="dialog-content">
+      <img :src="dialogImageUrl" alt="Preview Image" />
+    </div>
+  </el-dialog>
   <footer class="safety-platform-container__footer">
     <el-button @click="router.back()">返回</el-button>
     <el-button v-if="!isViewMode" type="primary" @click="handleSubmit">
@@ -80,282 +103,347 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, shallowRef, onBeforeUnmount } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { ElMessage } from 'element-plus';
-import BasicForm from '@/components/BasicForm.vue';
-import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
-import '@wangeditor/editor/dist/css/style.css';
-import { useFormConfigHook } from '@/hooks/useFormConfigHook';
-import { ACADEMY_FILE_FORM_CONFIG, ACADEMY_FILE_FORM_DATA, ACADEMY_FILE_FORM_RULES } from '../configs/form';
-import {
-  queryAcademyFileById,
-  saveAcademyFile,
-  updateAcademyFile,
-  type safetyCultureFile,
-} from '@/api/safety-culture';
-import type { FileItem } from '@/components/UploadFiles/types';
-import { formatAttachmentList } from '@/components/UploadFiles/utils';
-import { Plus, Delete } from '@element-plus/icons-vue';
-import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
-import UploadImages from '@/components/UploadImages/UploadImages.vue';
-
-const router = useRouter();
-const route = useRoute();
-
-const operate = computed(() => (route.query.operate as string) || 'safety-culture-material-create');
-const currentId = computed(() => Number(route.query.id));
-
-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 previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
-const uploadImagesRef = ref<InstanceType<typeof UploadImages>>();
-const approvalImageList = ref([])
-
-const { ruleFormData, formRules, ruleFormConfig, cloneRuleFormData, beforeRouteLeave } =
-  useFormConfigHook(ACADEMY_FILE_FORM_CONFIG, ACADEMY_FILE_FORM_DATA, ACADEMY_FILE_FORM_RULES);
-
-// 查看模式下，所有字段设为只读
-const viewFormConfig = ref(
-  ACADEMY_FILE_FORM_CONFIG.map((item) => ({
-    ...item,
-    componentProps: {
-      ...item.componentProps,
-      disabled: true,
-    },
-  })),
-);
-
-const computedFormConfig = computed(() => {
-  if (isViewMode.value) {
-    return viewFormConfig.value;
-  }
-  return ruleFormConfig.value;
-});
+  import { computed, onMounted, ref, shallowRef, onBeforeUnmount } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { ElMessage } from 'element-plus';
+  import BasicForm from '@/components/BasicForm.vue';
+  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+  import '@wangeditor/editor/dist/css/style.css';
+  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
+  import { ACADEMY_FILE_FORM_CONFIG, ACADEMY_FILE_FORM_DATA, ACADEMY_FILE_FORM_RULES } from '../configs/form';
+  import {
+    queryAcademyFileById,
+    saveAcademyFile,
+    updateAcademyFile,
+    type safetyCultureFile,
+  } from '@/api/safety-culture';
+  import { uploadFileApi, UPLOAD_BIZ_TYPE } from '@/api/minio';
+  import type { FileItem } from '@/components/UploadFiles/types';
+  import { formatAttachmentList } from '@/components/UploadFiles/utils';
+  import { Plus, Delete, ZoomIn } from '@element-plus/icons-vue';
+  import { genFileId, type UploadProps, type UploadUserFile, type UploadRawFile, type UploadInstance } from 'element-plus';
+  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
+
+  const router = useRouter();
+  const route = useRoute();
+
+  const operate = computed(() => (route.query.operate as string) || 'safety-culture-material-create');
+  const currentId = computed(() => Number(route.query.id));
+
+  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 previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
+  const approvalUploadRef = ref<UploadInstance>();
+  const approvalImageFileList = ref<UploadUserFile[]>([]);
+  const approvalUploadKey = ref(0);
+  const dialogImageUrl = ref('');
+  const dialogVisible = ref(false);
+
+  const { ruleFormData, formRules, ruleFormConfig, cloneRuleFormData, beforeRouteLeave } = useFormConfigHook(
+    ACADEMY_FILE_FORM_CONFIG,
+    ACADEMY_FILE_FORM_DATA,
+    ACADEMY_FILE_FORM_RULES,
+  );
+
+  // 查看模式下，所有字段设为只读
+  const viewFormConfig = ref(
+    ACADEMY_FILE_FORM_CONFIG.map((item) => ({
+      ...item,
+      componentProps: {
+        ...item.componentProps,
+        disabled: true,
+      },
+    })),
+  );
+
+  const computedFormConfig = computed(() => {
+    if (isViewMode.value) {
+      return viewFormConfig.value;
+    }
+    return ruleFormConfig.value;
+  });
 
-const basicFormRef = ref<InstanceType<typeof BasicForm>>();
+  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
 
+  // 富文本编辑器
+  const editorRef = shallowRef();
+  const editorConfig = computed(() => ({
+    placeholder: '请输入文档内容',
+    MENU_CONF: {},
+  }));
+
+  const handleEditorCreated = (editor: any) => {
+    editorRef.value = editor;
+    if (isViewMode.value) {
+      editor.disable();
+    }
+  };
 
-// 富文本编辑器
-const editorRef = shallowRef();
-const editorConfig = computed(() => ({
-  placeholder: '请输入文档内容',
-  MENU_CONF: {},
-}));
+  const handleEditorChange = () => {
+    // 编辑器内容变化时的处理
+  };
 
-const handleEditorCreated = (editor: any) => {
-  editorRef.value = editor;
-  if (isViewMode.value) {
-    editor.disable();
-  }
-};
+  // 文件上传
+  const handleUploadSuccess = (files: FileItem[]) => {
+    ruleFormData.attachmentUrl = files;
+  };
 
-const handleEditorChange = () => {
-  // 编辑器内容变化时的处理
-};
+  const handleApprovalPictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+    dialogImageUrl.value = uploadFile.url || '';
+    dialogVisible.value = true;
+  };
 
-// 文件上传
-const handleUploadSuccess = (files: FileItem[]) => {
-  ruleFormData.attachmentUrl = files;
-};
+  const resetApprovalImageUpload = () => {
+    approvalUploadRef.value?.clearFiles();
+    ruleFormData.imageUrls = [];
+    approvalImageFileList.value = [];
+    approvalUploadKey.value += 1;
+  };
 
-// 将逗号分隔的URL字符串转换为FileItem数组
-const convertFileUrlToFileItems = (fileUrl: string): FileItem[] => {
-  if (!fileUrl || !fileUrl.trim()) {
-    return [];
-  }
-  
-  // 按逗号分割URL
-  const urls = fileUrl.split(',').map(url => url.trim()).filter(url => url);
-  
-  return urls.map((url, index) => {
-    // 从URL中提取文件名
-    const urlParts = url.split('/');
-    const fileName = urlParts[urlParts.length - 1] || `附件${index + 1}`;
-    
-    // 根据文件扩展名判断文件类型
-    const extension = fileName.split('.').pop()?.toLowerCase() || '';
-    let fileType = 'pdf';
-    if (extension === 'doc' || extension === 'docx') {
-      fileType = 'word';
-    } else if (extension === 'xls' || extension === 'xlsx') {
-      fileType = 'excel';
-    } else if (extension === 'ppt' || extension === 'pptx') {
-      fileType = 'ppt';
+  const handleApprovalDeleteClick = () => {
+    resetApprovalImageUpload();
+  };
+
+  const handleApprovalImageRemove: UploadProps['onRemove'] = () => {
+    resetApprovalImageUpload();
+  };
+
+  const handleApprovalImageChange = (uploadFile: UploadUserFile) => {
+    if (!uploadFile.raw) return;
+
+    uploadFileApi({
+      file: uploadFile.raw,
+      bizType: UPLOAD_BIZ_TYPE['DICTIONARY'],
+      fileName: uploadFile.raw.name,
+    })
+      .then((res) => {
+        ruleFormData.imageUrls = [res.url];
+        approvalImageFileList.value = [
+          {
+            name: uploadFile.name || res.url.split('/').pop() || 'image',
+            url: res.url,
+          },
+        ];
+      })
+      .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);
+  };
+
+  // 将逗号分隔的URL字符串转换为FileItem数组
+  const convertFileUrlToFileItems = (fileUrl: string): FileItem[] => {
+    if (!fileUrl || !fileUrl.trim()) {
+      return [];
     }
-    
-    return {
-      fileId: Date.now() + index,
-      fileName,
-      fileType,
-      fileSize: '0',
-      fileUrl: url,
-    };
-  });
-};
-
-const handleValidate = async () => {
-  if (!basicFormRef.value) return;
-  const res = await basicFormRef.value.validateForm();
-  return res;
-};
-
-const getDetail = async () => {
-  if (!currentId.value) return;
-  try {
-    const res = await queryAcademyFileById(currentId.value);
-    if (res) {
-      // 映射接口字段到表单字段
-      ruleFormData.fileName = res.fileName || '';
-      ruleFormData.categoryName = res.categoryName || '';
-      ruleFormData.fileCode = res.fileCode || '';
-      ruleFormData.fileVersion = res.fileVersion || '';
-      ruleFormData.fileFormat = res.fileFormat === 1 ? 'PDF' : 'WORD';
-      ruleFormData.publishDate = res.publishDate || '';
-      ruleFormData.content = res.content || '';
-      ruleFormData.status = res.status ?? 1;
-      ruleFormData.imageUrls = JSON.parse(res.imageUrls);
-      approvalImageList.value = ruleFormData.imageUrls;
-      
-
-      // 如果有文件URL，转换为FileItem格式
-      ruleFormData.attachmentUrl = JSON.parse(res.attachmentUrl || res.fileUrl || '');
+
+    // 按逗号分割URL
+    const urls = fileUrl
+      .split(',')
+      .map((url) => url.trim())
+      .filter((url) => url);
+
+    return urls.map((url, index) => {
+      // 从URL中提取文件名
+      const urlParts = url.split('/');
+      const fileName = urlParts[urlParts.length - 1] || `附件${index + 1}`;
+
+      // 根据文件扩展名判断文件类型
+      const extension = fileName.split('.').pop()?.toLowerCase() || '';
+      let fileType = 'pdf';
+      if (extension === 'doc' || extension === 'docx') {
+        fileType = 'word';
+      } else if (extension === 'xls' || extension === 'xlsx') {
+        fileType = 'excel';
+      } else if (extension === 'ppt' || extension === 'pptx') {
+        fileType = 'ppt';
+      }
+
+      return {
+        fileId: Date.now() + index,
+        fileName,
+        fileType,
+        fileSize: '0',
+        fileUrl: url,
+      };
+    });
+  };
+
+  const handleValidate = async () => {
+    if (!basicFormRef.value) return;
+    const res = await basicFormRef.value.validateForm();
+    return res;
+  };
+
+  const getDetail = async () => {
+    if (!currentId.value) return;
+    try {
+      const res = await queryAcademyFileById(currentId.value);
+      if (res) {
+        // 映射接口字段到表单字段
+        ruleFormData.fileName = res.fileName || '';
+        ruleFormData.categoryName = res.categoryName || '';
+        ruleFormData.fileCode = res.fileCode || '';
+        ruleFormData.fileVersion = res.fileVersion || '';
+        ruleFormData.fileFormat = res.fileFormat === 1 ? 'PDF' : 'WORD';
+        ruleFormData.publishDate = res.publishDate || '';
+        ruleFormData.content = res.content || '';
+        ruleFormData.status = res.status ?? 1;
+        ruleFormData.imageUrls = JSON.parse(res.imageUrls || '[]');
+        approvalImageFileList.value = (ruleFormData.imageUrls || []).map((url, index) => ({
+          name: `图片${index + 1}`,
+          url,
+        }));
+
+        // 如果有文件URL，转换为FileItem格式
+        ruleFormData.attachmentUrl = JSON.parse(res.attachmentUrl || res.fileUrl || '');
+      }
+      cloneRuleFormData();
+    } catch (e) {
+      console.error('获取院级文件详情失败:', e);
+      ElMessage.error('获取详情失败');
     }
-    cloneRuleFormData();
-  } catch (e) {
-    console.error('获取院级文件详情失败:', e);
-    ElMessage.error('获取详情失败');
-  }
-};
+  };
 
-  const handleApprovalUploadChange = async () => {
-    ruleFormData.imageUrls = uploadImagesRef.value!.getUploadedImages();
+  const handleSubmit = async () => {
+    const res = await handleValidate();
+    if (!res) return;
+
+    // 验证文件上传（必填）
+    if (!ruleFormData.attachmentUrl || ruleFormData.attachmentUrl.length === 0) {
+      ElMessage.warning('请上传文件');
+      return;
+    }
+    try {
+      const uploadedFileList = await formatAttachmentList(ruleFormData.attachmentUrl);
+
+      const basePayload: any = {
+        fileName: ruleFormData.fileName,
+        classifyName: ruleFormData.classifyName,
+        categoryName: ruleFormData.categoryName,
+        fileCode: ruleFormData.fileCode,
+        fileVersion: ruleFormData.fileVersion,
+        fileFormat: ruleFormData.fileFormat === 'PDF' ? 1 : 2,
+        publishDate: ruleFormData.publishDate,
+        attachmentUrl: JSON.stringify(uploadedFileList),
+        content: ruleFormData.content || undefined,
+        status: ruleFormData.status ?? 1,
+        releaseDate: ruleFormData.publishDate,
+        description: '',
+        caseName: '',
+        imageUrls: JSON.stringify(ruleFormData.imageUrls),
+      };
+      if (isCreateMode.value) {
+        await saveAcademyFile(basePayload);
+        ElMessage.success('创建成功');
+      } else if (isEditMode.value && currentId.value) {
+        await updateAcademyFile({
+          id: currentId.value,
+          ...basePayload,
+        });
+        ElMessage.success('保存成功');
+      }
+
+      router.back();
+    } catch (e) {
+      console.error('保存院级文件失败:', e);
+      ElMessage.error('保存失败，请重试');
+    }
   };
 
-const handleSubmit = async () => {
-  const res = await handleValidate();
-  if (!res) return;
+  const previewOnline = (url: string | undefined, type) => {
+    if (url) {
+      previewOnlineRef.value?.open(url, type);
+    }
+  };
 
-  // 验证文件上传（必填）
-  if (!ruleFormData.attachmentUrl || ruleFormData.attachmentUrl.length === 0) {
-    ElMessage.warning('请上传文件');
-    return;
-  }
-  try {
-    const uploadedFileList = await formatAttachmentList(ruleFormData.attachmentUrl);
-
-    const basePayload: any = {
-      fileName: ruleFormData.fileName,
-      classifyName: ruleFormData.classifyName,
-      categoryName: ruleFormData.categoryName,
-      fileCode: ruleFormData.fileCode,
-      fileVersion: ruleFormData.fileVersion,
-      fileFormat: ruleFormData.fileFormat === 'PDF' ? 1 : 2,
-      publishDate: ruleFormData.publishDate,
-      attachmentUrl:JSON.stringify(uploadedFileList),
-      content: ruleFormData.content || undefined,
-      status: ruleFormData.status ?? 1,
-      releaseDate: ruleFormData.publishDate,
-      description: '',
-      caseName: '',
-      imageUrls: JSON.stringify(ruleFormData.imageUrls)
-    };
-    if (isCreateMode.value) {
-      await saveAcademyFile(basePayload);
-      ElMessage.success('创建成功');
-    } else if (isEditMode.value && currentId.value) {
-      await updateAcademyFile({
-        id: currentId.value,
-        ...basePayload,
-      });
-      ElMessage.success('保存成功');
+  onMounted(() => {
+    cloneRuleFormData();
+    // beforeRouteLeave();
+    if (isEditMode.value || isViewMode.value) {
+      getDetail();
     }
+  });
 
-    router.back();
-  } catch (e) {
-    console.error('保存院级文件失败:', e);
-    ElMessage.error('保存失败，请重试');
-  }
-};
+  onBeforeUnmount(() => {
+    const editor = editorRef.value;
+    if (editor == null) return;
+    editor.destroy();
+  });
+</script>
+
+<style scoped lang="scss">
+  @use '@/styles/page-details-layout.scss' as *;
 
-const previewOnline = (url: string | undefined, type) => {
-  if (url) {
-    previewOnlineRef.value?.open(url, type);
+  .editor-container {
+    width: 100%;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    overflow: hidden;
   }
-};
 
-onMounted(() => {
-  cloneRuleFormData();
-  // beforeRouteLeave();
-  if (isEditMode.value || isViewMode.value) {
-    getDetail();
+  .content-display {
+    min-height: 200px;
+    padding: 12px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    background-color: #f5f7fa;
   }
-});
 
-onBeforeUnmount(() => {
-  const editor = editorRef.value;
-  if (editor == null) return;
-  editor.destroy();
-});
-</script>
+  .file-display {
+    .file-link {
+      color: #409eff;
+      text-decoration: none;
 
-<style scoped lang="scss">
-@use '@/styles/page-details-layout.scss' as *;
-
-.editor-container {
-  width: 100%;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.content-display {
-  min-height: 200px;
-  padding: 12px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  background-color: #f5f7fa;
-}
-
-.file-display {
-  .file-link {
-    color: #409eff;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
-}
 
-.no-file {
-  color: rgba(0, 0, 0, 0.65);
-}
+  .no-file {
+    color: rgba(0, 0, 0, 0.65);
+  }
 
-.image-uploader {
-  :deep(.el-upload--picture-card) {
-    width: 80px !important;
-    height: 80px !important;
-    line-height: 80px;
+  .image-uploader {
+    :deep(.el-upload--picture-card) {
+      width: 80px !important;
+      height: 80px !important;
+      line-height: 80px;
+    }
+
+    :deep(.el-upload-list--picture-card .el-upload-list__item) {
+      width: 80px !important;
+      height: 80px !important;
+    }
   }
 
-  :deep(.el-upload-list--picture-card .el-upload-list__item) {
-    width: 80px !important;
-    height: 80px !important;
+  .dialog-content {
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
-}
 </style>
 
-
 <style lang="scss">
-.w-e-full-screen-container {
-  inset: 0 !important;
-  z-index: 3000 !important;
-}
-
-.w-e-full-screen-container .w-e-text-container {
-  height: calc(100vh - 42px) !important;
-}
+  .w-e-full-screen-container {
+    inset: 0 !important;
+    z-index: 3000 !important;
+  }
+
+  .w-e-full-screen-container .w-e-text-container {
+    height: calc(100vh - 42px) !important;
+  }
 </style>