文件预览统一组件封装

src/views/details/index/index.vue

@@ -8,6 +8,7 @@ import { getColorWithOpacity, tagTextColor, tagBgColor, tagBorderColor } from '@
 import { AiError, aiTypeJudge } from "@/service/api/ai";
 import { systemConfigApi } from '@/service/api/system';
 import { getChangeDetailApi } from '@/service/api/change';
+import previewComponent from '@/components/previewFile/index.vue'
 
 const themeStore = useThemeStore();
 const { routerPushByKey } = useRouterPush();
@@ -53,6 +54,10 @@ const pssrlist = ref<{ g: string; type:number; na_flag:number; items: any[] }[]>
 ]);
 // 验收评价
 const acceptList = ref<any>([]);
+// 当前预览文件
+const previewFile = ref<any>(null);
+// 预览文件弹框
+const previewModal = ref<boolean>(false);
 // 等级判断问题
 const questions = ref<any>([
   {
@@ -252,8 +257,9 @@ const downloadFile = (type: string) => {
     }
 };
 // 变更附带资料预览
-const previewFile = () => {
-    window.$message?.info('还没导入插件');
+const openPreview = (file:any) => {
+    previewFile.value = file;
+    previewModal.value = true;
 }
 
 // 催办
@@ -536,7 +542,7 @@ onMounted(async () => {
                         </td>
                         <td>
                             <div class="flex items-center justify-center gap-2">
-                                <NButton text type="primary" class="text-xs" @click="previewFile">预览</NButton>
+                                <NButton text type="primary" class="text-xs" @click="openPreview(doc)">预览</NButton>
                                 <NButton text type="primary" class="text-xs" @click="downloadFile('single')">下载</NButton>
                             </div>
                         </td>
@@ -958,6 +964,30 @@ onMounted(async () => {
                 </div>
             </NDrawerContent>
         </NDrawer>
+        <!-- 附件在线预览弹窗 -->
+        <NModal
+            v-model:show="previewModal"
+            preset="card"
+            :auto-focus="false"
+            :style="{ width: '80%', height: 'auto' }"
+            :segmented="{ content: true, footer: true }"
+        >
+            <template #header>
+                <div class="flex items-center gap-2 text-base font-semibold text-slate-800">
+                <Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
+                </div>
+            </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>
+                    <previewComponent v-if="previewFile" :previewFile="previewFile" />
+                </div>
+            </template>
+        </NModal>
     </NSpin>
 </NSpace>
 </template>