Quellcode durchsuchen

fix: 修复院级文件管理附件内容乱码,无法预览,上传文件没有必填等问题

lixuan vor 2 Monaten
Ursprung
Commit
8bef8834b8

+ 57 - 32
src/views/production-safety/productionSafetySystem/collegeFileManagement/components/collegeFileManagementDetail.vue

@@ -14,13 +14,27 @@
       </template>
       <template #fileUrl>
         <UploadFiles
+          v-if="!isViewMode"
           label="上传文件"
           :maxCount="1"
           :file-list="ruleFormData.fileUrlList"
           :disabled="isViewMode"
           :allow-all-file-types="true"
-          @uploadSuccess="handleUploadSuccess"
+          @uploadSuccess="(list: FileItem[]) => handleUploadSuccess(list)"
         />
+        <div class="file-list" v-else>
+          <div class="file-item" v-for="file in ruleFormData.fileUrlList" :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>
       </template>
       <template #content>
         <div class="editor-container">
@@ -45,6 +59,7 @@
         </el-radio-group>
       </template>
     </BasicForm>
+    <PreviewOnline ref="previewOnlineRef" />
   </main>
   <footer class="safety-platform-container__footer">
     <el-button @click="router.back()">返回</el-button>
@@ -72,6 +87,7 @@
   } from '@/api/production-safety-system';
   import type { FileItem } from '@/components/UploadFiles/types';
   import { formatAttachmentList } from '@/components/UploadFiles/utils';
+  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
 
   const router = useRouter();
   const route = useRoute();
@@ -83,6 +99,8 @@
   const isEditMode = computed(() => operate.value === 'college-file-edit');
   const isViewMode = computed(() => operate.value === 'college-file-view');
 
+  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
+
   const { ruleFormData, formRules, ruleFormConfig, cloneRuleFormData, beforeRouteLeave } =
     useFormConfigHook(ACADEMY_FILE_FORM_CONFIG, ACADEMY_FILE_FORM_DATA, ACADEMY_FILE_FORM_RULES);
 
@@ -124,6 +142,7 @@
   // 文件上传
   const handleUploadSuccess = (files: FileItem[]) => {
     ruleFormData.fileUrlList = files;
+    ruleFormData.fileUrl = JSON.stringify(files) || '';
   };
 
   // 将逗号分隔的URL字符串转换为FileItem数组
@@ -182,9 +201,7 @@
         ruleFormData.fileUrl = res.fileUrl || '';
         ruleFormData.content = res.content || '';
         ruleFormData.status = res.status ?? 1;
-        
-        // 如果有文件URL,转换为FileItem格式
-        ruleFormData.fileUrlList = convertFileUrlToFileItems(res.fileUrl || '');
+        ruleFormData.fileUrlList = JSON.parse(res.fileUrl || '[]');
       }
       cloneRuleFormData();
     } catch (e) {
@@ -205,35 +222,37 @@
     
     try {
       // 处理文件上传:先上传文件获取 URL,然后提取 fileUrl
-      let fileUrl = '';
-      if (ruleFormData.fileUrlList && ruleFormData.fileUrlList.length > 0) {
-        // 分离已有URL的文件和新上传的文件
-        const existingFiles: string[] = [];
-        const newFiles: FileItem[] = [];
+      // let fileUrl = '';
+      // if (ruleFormData.fileUrlList && ruleFormData.fileUrlList.length > 0) {
+      //   // 分离已有URL的文件和新上传的文件
+      //   const existingFiles: string[] = [];
+      //   const newFiles: FileItem[] = [];
         
-        ruleFormData.fileUrlList.forEach((file: FileItem) => {
-          // 如果文件已经有 fileUrl 且没有 file 对象,说明是已有文件
-          if (file.fileUrl && !file.file) {
-            existingFiles.push(file.fileUrl);
-          } else {
-            // 否则是需要上传的新文件
-            newFiles.push(file);
-          }
-        });
+      //   ruleFormData.fileUrlList.forEach((file: FileItem) => {
+      //     // 如果文件已经有 fileUrl 且没有 file 对象,说明是已有文件
+      //     if (file.fileUrl && !file.file) {
+      //       existingFiles.push(file.fileUrl);
+      //     } else {
+      //       // 否则是需要上传的新文件
+      //       newFiles.push(file);
+      //     }
+      //   });
 
-        // 上传新文件
-        let uploadedUrls: string[] = [];
-        if (newFiles.length > 0) {
-          const uploadedFiles = await formatAttachmentList(newFiles);
-          uploadedUrls = uploadedFiles
-            .map((file: any) => file.fileUrl || file.url || '')
-            .filter((url: string) => url);
-        }
+      //   // 上传新文件
+      //   let uploadedUrls: string[] = [];
+      //   if (newFiles.length > 0) {
+      //     const uploadedFiles = await formatAttachmentList(newFiles);
+      //     uploadedUrls = uploadedFiles
+      //       .map((file: any) => file.fileUrl || file.url || '')
+      //       .filter((url: string) => url);
+      //   }
 
-        // 合并已有URL和新上传的URL,取第一个作为fileUrl
-        const allUrls = [...existingFiles, ...uploadedUrls].filter((url: string) => url);
-        fileUrl = allUrls.length > 0 ? allUrls[0] : '';
-      }
+      //   // 合并已有URL和新上传的URL,取第一个作为fileUrl
+      //   const allUrls = [...existingFiles, ...uploadedUrls].filter((url: string) => url);
+      //   fileUrl = allUrls.length > 0 ? allUrls[0] : '';
+      // }
+
+      const uploadedFileList = await formatAttachmentList(ruleFormData.fileUrlList);
 
       const basePayload: ProductionSafetyFile = {
         fileName: ruleFormData.fileName,
@@ -242,7 +261,7 @@
         fileVersion: ruleFormData.fileVersion,
         fileFormat: ruleFormData.fileFormat,
         releaseDate: ruleFormData.releaseDate,
-        fileUrl: fileUrl || undefined,
+        fileUrl: JSON.stringify(uploadedFileList) || undefined,
         content: ruleFormData.content || undefined,
         status: ruleFormData.status ?? 1,
       };
@@ -257,7 +276,7 @@
         });
         ElMessage.success('保存成功');
       }
-
+      cloneRuleFormData();
       router.back();
     } catch (e) {
       console.error('保存院级文件失败:', e);
@@ -265,6 +284,12 @@
     }
   };
 
+  const previewOnline = (url: string | undefined, type) => {
+    if (url) {
+      previewOnlineRef.value?.open(url, type);
+    }
+  };
+  
   onMounted(() => {
     cloneRuleFormData();
     beforeRouteLeave();

+ 1 - 0
src/views/production-safety/productionSafetySystem/collegeFileManagement/configs/form.ts

@@ -89,4 +89,5 @@ export const ACADEMY_FILE_FORM_RULES = {
   fileVersion: [{ required: true, message: '请输入文件版本号', trigger: 'blur' }],
   fileFormat: [{ required: true, message: '请选择文件格式', trigger: 'change' }],
   releaseDate: [{ required: true, message: '请选择发布日期', trigger: 'change' }],
+  fileUrl: [{ required: true, message: '请上传文件', trigger: 'change' }],
 };