文件预览统一组件封装

src/views/my/initiateChange/modules/changeApply.vue

@@ -9,10 +9,7 @@ import { useChangeStore } from '@/store/modules/change';
 import { AiError, aiTypeJudge, aiLevelScore, aiApplication } from "@/service/api/ai";
 import { uploadFileApi, deleteFileApi } from "@/service/api/file";
 import Footer from './footer.vue'
-
-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 changeStore = useChangeStore();
@@ -364,32 +361,6 @@ const renderSwitcherIcon = (node:any) => {
   });
 }
 
-// 判断文件类型
-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 onUploadFile = async (e:any) => {
   const file = e.target.files[0];
@@ -818,32 +789,7 @@ defineExpose({form, questions, applyAiResult, generateLevel: useAiLevel})
         <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>
-        </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>
   <template #footer>