✨ 异常上报弹窗附件支持在线预览

src/views/business/components/waybill-manage-page.vue

@@ -2726,8 +2726,7 @@
                       :key="index"
                       type="primary"
                       class="waybill-manage-page__exception-attachment-link"
-                      :href="file.url"
+                      @click="previewWaybillExceptionAttachment(file, row)"
-                      target="_blank"
                     >
                       {{ file.name || '附件' + (index + 1) }}
                     </el-link>
@@ -5578,6 +5577,9 @@ export default {
         return [];
       }
     },
+    previewWaybillExceptionAttachment(file, row) {
+      this.previewAttachment(file, this.parseWaybillExceptionAttachments(row.attachmentsJson));
+    },
     async submitWaybillExceptionEdit() {
       await this.$refs.waybillExceptionEditFormRef.validate();
       this.waybillExceptionDialog.submitting = true;

src/views/transit/exception-disposal.vue

@@ -399,8 +399,7 @@
                       :key="index"
                       type="primary"
                       class="exception-disposal-page__attachment-link"
-                      :href="file.url"
+                      @click="previewAttachment(file, parseAttachments(row.attachmentsJson))"
-                      target="_blank"
                     >
                       {{ file.name || '附件' + (index + 1) }}
                     </el-link>
@@ -440,6 +439,47 @@
         <el-button @click="dialog.visible = false">取消</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog
+      v-model="attachmentDocumentPreviewVisible"
+      :title="attachmentPreviewFile.name || '附件预览'"
+      append-to-body
+      destroy-on-close
+      width="90%"
+      top="4vh"
+    >
+      <pdf-preview
+        v-if="
+          attachmentDocumentPreviewVisible &&
+          attachmentPreviewFile.url &&
+          attachmentPreviewFile.isPdf
+        "
+        :source="attachmentPreviewFile.url"
+        @error="handleAttachmentPreviewError"
+      />
+      <open-file-viewer
+        v-else-if="attachmentDocumentPreviewVisible && attachmentPreviewFile.url"
+        :file="attachmentPreviewFile.url"
+        :file-name="attachmentPreviewFile.name"
+        :mime-type="attachmentPreviewFile.mimeType"
+        width="100%"
+        height="72vh"
+        fit="contain"
+        theme="auto"
+        locale="zh-CN"
+        :toolbar="attachmentViewerToolbar"
+        :plugins="attachmentViewerPlugins"
+        @unsupported="handleAttachmentPreviewUnsupported"
+        @error="handleAttachmentPreviewError"
+      />
+    </el-dialog>
+
+    <el-image-viewer
+      v-if="attachmentImagePreviewVisible"
+      :url-list="attachmentImagePreviewUrls"
+      :initial-index="attachmentImagePreviewIndex"
+      @close="attachmentImagePreviewVisible = false"
+    />
   </basic-container>
 </template>
 
@@ -460,8 +500,36 @@ import {
 } from '@/option/transit/exception-disposal';
 import { getUploadHeaders } from '@/utils/upload';
 import * as api from '@/api/transit/exception-disposal';
+import PdfPreview from '@/components/pdf-preview/main.vue';
+import { ElImageViewer } from 'element-plus';
+import { OpenFileViewer } from '@open-file-viewer/vue';
+import { fallbackPlugin, imagePlugin, officePlugin, textPlugin } from '@open-file-viewer/core';
+import '@open-file-viewer/core/style.css';
+import pdfWorkerSrc from 'pdfjs-dist/build/pdf.worker.mjs?url';
+
+const attachmentName = row => row?.originalName || row?.name || row?.fileName || '附件';
+const attachmentUrl = row =>
+  row?.url || row?.link || row?.fileUrl || row?.downloadUrl || row?.domain || '';
+const attachmentExtension = row => {
+  const source = String(attachmentName(row) || attachmentUrl(row)).split('?')[0];
+  const index = source.lastIndexOf('.');
+  return index > -1 ? source.slice(index + 1).toLowerCase() : '';
+};
+const isAttachmentImage = row =>
+  ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(attachmentExtension(row));
+const isAttachmentPdf = row => {
+  const mimeType = String(row.mimeType || row.contentType || '').toLowerCase();
+  return mimeType.includes('application/pdf') || attachmentExtension(row) === 'pdf';
+};
+const attachmentViewerPlugins = [
+  imagePlugin(),
+  officePlugin({ pdf: { workerSrc: pdfWorkerSrc, useFetchData: true } }),
+  textPlugin(),
+  fallbackPlugin(),
+];
 
 export default {
+  components: { ElImageViewer, OpenFileViewer, PdfPreview },
   data() {
     return {
       Rank,
@@ -501,6 +569,19 @@ export default {
           { max: 500, message: '上报说明不能超过500个字符', trigger: 'blur' },
         ],
       },
+      attachmentImagePreviewVisible: false,
+      attachmentImagePreviewUrls: [],
+      attachmentImagePreviewIndex: 0,
+      attachmentDocumentPreviewVisible: false,
+      attachmentPreviewFile: {},
+      attachmentViewerPlugins,
+      attachmentViewerToolbar: {
+        download: true,
+        fullscreen: true,
+        print: true,
+        rotate: true,
+        zoom: true,
+      },
     };
   },
   computed: {
@@ -675,6 +756,38 @@ export default {
         return [];
       }
     },
+    previewAttachment(row, rows = []) {
+      const url = attachmentUrl(row);
+      if (!url) {
+        this.$message.warning('附件地址为空，无法预览');
+        return;
+      }
+      if (isAttachmentImage(row)) {
+        this.attachmentImagePreviewUrls = (rows || [])
+          .filter(item => isAttachmentImage(item) && attachmentUrl(item))
+          .map(item => attachmentUrl(item));
+        this.attachmentImagePreviewIndex = Math.max(
+          this.attachmentImagePreviewUrls.indexOf(url),
+          0
+        );
+        this.attachmentImagePreviewVisible = true;
+        return;
+      }
+      const isPdf = isAttachmentPdf(row);
+      this.attachmentPreviewFile = {
+        name: attachmentName(row),
+        url,
+        mimeType: isPdf ? 'application/pdf' : row.mimeType || row.contentType || '',
+        isPdf,
+      };
+      this.attachmentDocumentPreviewVisible = true;
+    },
+    handleAttachmentPreviewUnsupported() {
+      this.$message.warning('当前文件暂不支持在线预览');
+    },
+    handleAttachmentPreviewError() {
+      this.$message.error('附件预览失败');
+    },
     async completeRow(row) {
       await this.$confirm('确认完成该异常处置？', '提示', { type: 'warning' });
       await api.complete({ id: row.id });