1、调整合同

2、调整项目
3、调整付款管理

src/views/business/temporary-credit-limit.vue

@@ -93,7 +93,7 @@
             <el-table-column type="index" label="序号" width="70" align="center" />
             <el-table-column label="文件名" min-width="240" show-overflow-tooltip>
               <template #default="{ row }">
-                <el-link type="primary" @click="downloadAttachment(row)">
+                <el-link type="primary" @click="previewAttachment(row)">
                   {{ attachmentName(row) }}
                 </el-link>
               </template>
@@ -169,6 +169,38 @@
       @load="onLoad(page, query)"
     />
 
+    <el-dialog
+      v-model="attachmentDocumentPreviewVisible"
+      :title="attachmentPreviewFile.name || '附件预览'"
+      append-to-body
+      destroy-on-close
+      width="90%"
+      top="4vh"
+      class="temporary-credit-limit-page__attachment-viewer-dialog"
+    >
+      <open-file-viewer
+        v-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"
+    />
+
     <flow-design-step
       v-if="website.design.designMode"
       v-model:is-display="flowBox"
@@ -191,6 +223,17 @@ import {
 import { config, option } from '@/option/business/temporary-credit-limit';
 import { getToken } from '@/utils/auth';
 import { downloadFileByUrl, downloadXls } from '@/utils/util';
+import { ElImageViewer } from 'element-plus';
+import { OpenFileViewer } from '@open-file-viewer/vue';
+import {
+  fallbackPlugin,
+  imagePlugin,
+  officePlugin,
+  pdfPlugin,
+  textPlugin,
+} from '@open-file-viewer/core';
+import '@open-file-viewer/core/style.css';
+import pdfWorkerSrc from 'pdfjs-dist/build/pdf.worker.mjs?url';
 import { mapGetters } from 'vuex';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
@@ -212,6 +255,14 @@ const attachmentFileTypes = [
   'zip',
 ];
 
+const attachmentViewerPlugins = [
+  imagePlugin(),
+  pdfPlugin({ workerSrc: pdfWorkerSrc, useFetchData: true }),
+  officePlugin({ pdf: { workerSrc: pdfWorkerSrc, useFetchData: true } }),
+  textPlugin(),
+  fallbackPlugin(),
+];
+
 const extractRecords = res => {
   const data = res?.data?.data || res?.data || {};
   return Array.isArray(data) ? data : data.records || [];
@@ -219,6 +270,10 @@ const extractRecords = res => {
 
 export default {
   name: 'TemporaryCreditLimit',
+  components: {
+    ElImageViewer,
+    OpenFileViewer,
+  },
   data() {
     return {
       api,
@@ -242,6 +297,19 @@ export default {
       projectLoading: false,
       attachmentRows: [],
       selectedAttachments: [],
+      attachmentImagePreviewVisible: false,
+      attachmentImagePreviewUrls: [],
+      attachmentImagePreviewIndex: 0,
+      attachmentDocumentPreviewVisible: false,
+      attachmentPreviewFile: {},
+      attachmentViewerPlugins,
+      attachmentViewerToolbar: {
+        download: true,
+        fullscreen: true,
+        print: true,
+        rotate: true,
+        zoom: true,
+      },
       attachmentFileTypes,
       flowBox: false,
       flowUrl: '',
@@ -587,6 +655,46 @@ export default {
     attachmentUrl(row = {}) {
       return row.url || row.link || row.fileUrl || row.downloadUrl || row.domain || '';
     },
+    attachmentExtension(row = {}) {
+      const source = String(this.attachmentName(row) || this.attachmentUrl(row)).split('?')[0];
+      const index = source.lastIndexOf('.');
+      return index > -1 ? source.slice(index + 1).toLowerCase() : '';
+    },
+    isAttachmentImage(row) {
+      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(
+        this.attachmentExtension(row)
+      );
+    },
+    previewAttachment(row) {
+      const url = this.attachmentUrl(row);
+      if (!url) {
+        this.$message.warning('附件地址为空，无法预览');
+        return;
+      }
+      if (this.isAttachmentImage(row)) {
+        this.attachmentImagePreviewUrls = this.attachmentRows
+          .filter(item => this.isAttachmentImage(item) && this.attachmentUrl(item))
+          .map(item => this.attachmentUrl(item));
+        this.attachmentImagePreviewIndex = Math.max(
+          this.attachmentImagePreviewUrls.indexOf(url),
+          0
+        );
+        this.attachmentImagePreviewVisible = true;
+        return;
+      }
+      this.attachmentPreviewFile = {
+        name: this.attachmentName(row),
+        url,
+        mimeType: row.mimeType || row.contentType || '',
+      };
+      this.attachmentDocumentPreviewVisible = true;
+    },
+    handleAttachmentPreviewUnsupported() {
+      this.$message.warning('当前文件暂不支持在线预览');
+    },
+    handleAttachmentPreviewError() {
+      this.$message.error('附件预览失败');
+    },
     downloadAttachment(row) {
       const url = this.attachmentUrl(row);
       if (!url) {
@@ -597,7 +705,16 @@ export default {
     },
     batchDownload() {
       const rows = this.selectedAttachments.length ? this.selectedAttachments : this.attachmentRows;
-      rows.forEach(this.downloadAttachment);
+      const downloadableRows = rows.filter(row => this.attachmentUrl(row));
+      if (!downloadableRows.length) {
+        this.$message.warning(
+          this.selectedAttachments.length ? '所选附件暂无可下载地址' : '暂无可下载附件'
+        );
+        return;
+      }
+      downloadableRows.forEach((row, index) => {
+        window.setTimeout(() => this.downloadAttachment(row), index * 300);
+      });
     },
     formatFileSize(size) {
       const value = Number(size);