文件预览统一组件封装

src/views/details/closeDoc/index.vue

@@ -9,10 +9,7 @@ import { uploadFileApi, deleteFileApi, fileListApi } from "@/service/api/file";
 import { systemConfigApi } from '@/service/api/system';
 import { getChangeDetailApi } from '@/service/api/change';
 import { myTasksCloseMaterialApi } from '@/service/api/myTasks';
-
-import PDF from 'pdf-vue3'
-import { VueOfficeDocx, VueOfficeExcel, VueOfficePptx } from 'vue3-office-preview'
-import 'vue3-office-preview/lib/style.css'
+import previewComponent from '@/components/previewFile/index.vue'
 
 const themeStore = useThemeStore();
 const { routerPushByKey } = useRouterPush();
@@ -150,32 +147,6 @@ const removeFile = (index:number, fileIndex:number) => {
         }
     }
 }
-
-// 判断文件类型
-const handleFileType = (type:string) => {
-  if(type){
-    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
-    const wordExtensions = ['docx']
-    const excelExtensions = ['xlsx']
-    const pptExtensions = ['pptx']
-    if(imageExtensions.includes(type)){
-      return 'image'
-    }
-    if(wordExtensions.includes(type)){
-      return 'word'
-    }
-    if(excelExtensions.includes(type)){
-      return 'excel'
-    }
-    if(pptExtensions.includes(type)){
-      return 'ppt'
-    }
-    if(type==='pdf'){
-      return 'pdf'
-    }
-  }
-  return ''
-}
 // 打开预览
 const preview = (file:any) => {
     previewFile.value = file;
@@ -630,37 +601,12 @@ onMounted(async () => {
                 </template>
                 <template #default>
                     <div class="space-y-3">
-                    <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
-                        <span>上传人：{{ previewFile?.uploader_name }}</span>
-                        <span>上传时间：{{ previewFile?.created_at }}</span>
-                        <span v-if="previewFile?.version">{{ `版本：${previewFile?.version}（受控）` }}</span>
-                    </div>
-                    <div v-if="previewFile" class="max-h-[70vh] overflow-x-auto rounded-lg border">
-                        <!-- 图片预览 -->
-                        <template v-if="handleFileType(previewFile?.file_type) === 'image'">
-                        <div class="flex items-center justify-center py-2">
-                            <NImage :src="previewFile?.file_url" />
+                        <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
+                            <span>上传人：{{ previewFile?.uploader_name }}</span>
+                            <span>上传时间：{{ previewFile?.created_at }}</span>
+                            <span v-if="previewFile?.version">{{ `版本：${previewFile?.version}（受控）` }}</span>
                         </div>
-                        </template>
-                        <!-- Word 预览 -->
-                        <template v-if="handleFileType(previewFile?.file_type) === 'word'">
-                        <VueOfficeDocx :src="previewFile?.file_url" class="w-full items-center" />
-                        </template>
-                        <!-- Excel 预览 -->
-                        <template v-if="handleFileType(previewFile?.file_type) === 'excel'">
-                        <VueOfficeExcel :src="previewFile?.file_url" class="w-full items-center" />
-                        </template>
-                        <!-- Ppt 预览 -->
-                        <template v-if="handleFileType(previewFile?.file_type) === 'ppt'">
-                        <VueOfficePptx :src="previewFile?.file_url" class="w-full items-center" />
-                        </template>
-                        <!-- PDF 预览 -->
-                        <template v-if="handleFileType(previewFile?.file_type) === 'pdf'">
-                        <div class="h-[68vh]">
-                            <PDF :src="previewFile?.file_url" class="w-full h-full items-center" />
-                        </div>
-                        </template>
-                    </div>
+                        <previewComponent v-if="previewFile" :previewFile="previewFile" />
                     </div>
                 </template>
             </NModal>