1、完善配载

2、调整客商
3、调整临时额度
4、新增表头拖拽排序

src/views/vehicle/customer-archive.vue

@@ -147,9 +147,9 @@
         :model="archiveForm"
         :rules="formRules"
         label-position="right"
-        label-width="auto"
+        label-width="calc(6em + 24px)"
         :disabled="readonly"
-        class="archive-form"
+        class="archive-form dialog-form-label-fixed"
       >
         <section-card title="工商信息">
           <el-row :gutter="18">
@@ -614,7 +614,7 @@
           </el-table-column>
           <el-table-column label="文件名称" min-width="180">
             <template #default="{ row }">
-              <span>{{ row.originalName || row.name || '-' }}</span>
+              <el-link type="primary" :disabled="!row.url" @click="previewQualificationFile(row)">{{ row.originalName || row.name || '-' }}</el-link>
             </template>
           </el-table-column>
           <el-table-column label="附件描述" min-width="220">
@@ -664,6 +664,11 @@
         </div>
       </section-card>
 
+      <el-dialog v-model="qualificationDocumentPreviewVisible" :title="qualificationPreviewFile.name || '附件预览'" append-to-body destroy-on-close width="90%" top="4vh">
+        <open-file-viewer v-if="qualificationDocumentPreviewVisible && qualificationPreviewFile.url" :file="qualificationPreviewFile.url" :file-name="qualificationPreviewFile.name" :mime-type="qualificationPreviewFile.mimeType" width="100%" height="72vh" fit="contain" theme="auto" locale="zh-CN" :toolbar="qualificationViewerToolbar" :plugins="qualificationViewerPlugins" @unsupported="handleQualificationPreviewUnsupported" @error="handleQualificationPreviewError" />
+      </el-dialog>
+      <el-image-viewer v-if="qualificationImagePreviewVisible" :url-list="qualificationImagePreviewUrls" :initial-index="qualificationImagePreviewIndex" @close="qualificationImagePreviewVisible = false" />
+
       <section-card title="变更记录">
         <el-table :data="changeRecordPage.records" border>
           <el-table-column
@@ -1230,6 +1235,11 @@ import { getToken } from '@/utils/auth';
 import { getUploadHeaders } from '@/utils/upload';
 import { normalizeSearchRangeParams } from '@/utils/search-range';
 import { ArrowRight } from '@element-plus/icons-vue';
+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';
@@ -1241,10 +1251,19 @@ const createTimeRangeMap = {
 const AMAP_KEY = '653b7cf105ad7fb8ec9b2f5198ade315';
 const AMAP_SECURITY_CODE = '5aab65c632e48ebae0d0e28f5b28e21a';
 let amapLoader;
+const qualificationViewerPlugins = [
+  imagePlugin(),
+  pdfPlugin({ workerSrc: pdfWorkerSrc, useFetchData: true }),
+  officePlugin({ pdf: { workerSrc: pdfWorkerSrc, useFetchData: true } }),
+  textPlugin(),
+  fallbackPlugin(),
+];
 
 export default {
   components: {
     ArrowRight,
+    ElImageViewer,
+    OpenFileViewer,
   },
   data() {
     const nonNegativeLabelMap = {
@@ -1363,6 +1382,19 @@ export default {
       qualificationFiles: [],
       qualificationUploadFiles: [],
       selectedQualificationFiles: [],
+      qualificationImagePreviewVisible: false,
+      qualificationImagePreviewUrls: [],
+      qualificationImagePreviewIndex: 0,
+      qualificationDocumentPreviewVisible: false,
+      qualificationPreviewFile: {},
+      qualificationViewerPlugins,
+      qualificationViewerToolbar: {
+        download: true,
+        fullscreen: true,
+        print: true,
+        rotate: true,
+        zoom: true,
+      },
       deptTree: [],
       deptOptions: [],
       regionOptions: [],
@@ -2748,10 +2780,53 @@ export default {
         files: [file],
       });
     },
+    getQualificationFileUrl(file = {}) {
+      return file.url || file.link || file.domain || '';
+    },
+    getQualificationFileExtension(file = {}) {
+      const name = String(file.originalName || file.name || this.getQualificationFileUrl(file) || '')
+        .split('?')[0];
+      const index = name.lastIndexOf('.');
+      return index > -1 ? name.slice(index + 1).toLowerCase() : '';
+    },
+    isQualificationImage(file) {
+      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(
+        this.getQualificationFileExtension(file)
+      );
+    },
+    previewQualificationFile(file) {
+      const url = this.getQualificationFileUrl(file);
+      if (!url) {
+        this.$message.warning('附件地址为空，无法预览');
+        return;
+      }
+      if (this.isQualificationImage(file)) {
+        this.qualificationImagePreviewUrls = this.qualificationFiles
+          .filter(item => this.isQualificationImage(item) && this.getQualificationFileUrl(item))
+          .map(item => this.getQualificationFileUrl(item));
+        this.qualificationImagePreviewIndex = Math.max(
+          this.qualificationImagePreviewUrls.indexOf(url),
+          0
+        );
+        this.qualificationImagePreviewVisible = true;
+        return;
+      }
+      this.qualificationPreviewFile = {
+        name: file.originalName || file.name || '附件',
+        url,
+        mimeType: file.mimeType || file.contentType || '',
+      };
+      this.qualificationDocumentPreviewVisible = true;
+    },
+    handleQualificationPreviewUnsupported() {
+      this.$message.warning('当前文件暂不支持在线预览');
+    },
+    handleQualificationPreviewError() {
+      this.$message.error('附件预览失败');
+    },
     resolveQualificationType(fileName) {
       const name = String(fileName || '').toLocaleLowerCase();
-      return (
-        [...this.qualificationTypeOptions]
+      const matchedType = [...this.qualificationTypeOptions]
           .filter(item => item?.label || item?.value)
           .sort(
             (a, b) =>
@@ -2760,8 +2835,14 @@ export default {
           .find(item => {
             const typeText = String(item.label || item.value || '').toLocaleLowerCase();
             return typeText && name.includes(typeText);
-          })?.value || ''
+          });
+      if (matchedType?.value) return matchedType.value;
+      const otherType = this.qualificationTypeOptions.find(item =>
+        String(item.label || item.value || '').includes('其他')
       );
+      if (otherType?.value) return otherType.value;
+      this.qualificationTypeOptions.push({ label: '其他附件', value: '其他附件' });
+      return '其他附件';
     },
     downloadAttachments() {
       const source = this.selectedQualificationFiles.length
@@ -3617,12 +3698,26 @@ export default {
 }
 
 .archive-form {
-  :deep(.el-input-number),
-  :deep(.el-select),
-  :deep(.el-cascader),
-  :deep(.el-date-editor) {
-    width: 100%;
+  :deep(.el-form-item__label) {
+    flex: 0 0 calc(6em + 24px) !important;
+    width: calc(6em + 24px) !important;
+    height: auto;
+    min-height: 32px;
+    white-space: normal !important;
+    word-break: break-all;
+    overflow-wrap: anywhere;
+    line-height: 18px;
   }
+
+  :deep(.el-form-item__content > .el-input),
+  :deep(.el-form-item__content > .el-select),
+  :deep(.el-form-item__content > .el-cascader),
+  :deep(.el-form-item__content > .el-input-number),
+  :deep(.el-form-item__content > .el-date-editor) {
+    width: 220px;
+    max-width: 100%;
+  }
+
 }
 
 business-term-field,
@@ -3635,7 +3730,8 @@ business-term-field,
 
 .business-term-field {
   :deep(.el-date-editor) {
-    flex: 1;
+    flex: 0 0 220px;
+    width: 220px;
     min-width: 0;
   }
 
@@ -3646,14 +3742,15 @@ business-term-field,
 }
 
 .archive-form__address {
-  .el-input,
+  :deep(.el-input),
   :deep(.el-cascader) {
-    flex: 1;
+    flex: 0 0 220px;
+    width: 220px;
     min-width: 0;
   }
 
   :deep(.el-cascader) {
-    flex: 0 0 36%;
+    flex-basis: 220px;
   }
 }