feat(contract): 优化合同变更及车辆认证审核弹窗

- 合同变更页「其它附件」上传按钮样式调整，与变更材料区按钮统一 - 新增分区标题必填星号样式，改用 ::after 避免冲突 - 变更页 load() 强制清空表单关键字段，避免带入旧数据 - 实现 mergeChangeAttachments() 合并上次变更附件，去重并格式化大小 - 合同变更记录表格新增「变更内容」列，支持单行摘要显示与悬浮全量提示 - 操作列由单「流程」改为「详情 + 流程」按钮，详情文字统一 - 变更记录值格式化增强，支持方案名、支付比例、结算规则等摘要展示 - buildDetailChangeRecordRows 过滤条件更新，前后均为空时跳过展示 - 车辆认证审核弹窗样式及结构重构，使用 section-card 白卡分组，内容补全证件图片区 - 证件图片实现只读大图展示，复用全局样式，无需新增规则 - label 单位统一为中文全角括号，提升界面一致性 - 新增长期有效显示逻辑，避免日期未填「-」与长期有效混淆 - 删除无用计算属性 auditDetailItems，改用简洁 auditValue 方法返回展示值 - 全站弹窗标题统一增加 4px 主色竖条，符合设计规范，且对无标题弹窗进行排除处理 - 客户端临时额度申请期限字段拆分为两个独立字段，清晰明了 - 统一合同变更页变更原因必填标识及上传按钮样式 - 修正 EP 表单项标签高度和对齐，完善星号方案兼容性设计
2026-09-09 11:57:52 +08:00
parent f3021d4bae
commit 4d5b99da82
6 changed files with 468 additions and 59 deletions
@@ -120,15 +120,252 @@

    <vehicle-ledger v-model="vehicleLedgerBox" :vehicle="ledgerVehicle" />

-    <el-dialog v-model="certificationAuditBox" title="车辆认证审核" width="92%" top="4vh">
-      <el-descriptions :column="3" border>
-        <el-descriptions-item v-for="item in auditDetailItems" :key="item.label" :label="item.label">
-          {{ formatAuditValue(item) }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <el-form v-if="showRejectReason" class="certification-audit__reason" label-position="right" label-width="auto">
+    <el-dialog
+      v-model="certificationAuditBox"
+      title="车辆认证审核"
+      width="92%"
+      top="4vh"
+      class="certification-audit-dialog"
+    >
+      <el-form label-position="right" label-width="auto" class="certification-audit archive-form">
+        <section-card title="基础信息">
+          <el-row :gutter="18">
+            <el-col :span="24">
+              <el-form-item label="所属组织">
+                <span class="certification-audit__value">{{ auditValue('organizationName') }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <el-form-item label="车牌号">
+                <span class="certification-audit__value">{{ auditValue('plateNo') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="车牌颜色">
+                <span class="certification-audit__value">{{ auditValue('plateColor') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="车辆类型">
+                <span class="certification-audit__value">{{ auditValue('vehicleType') }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <el-form-item label="业务关系">
+                <span class="certification-audit__value">{{ auditValue('businessRelation') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="能源类型">
+                <span class="certification-audit__value">{{ auditValue('energyType') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="强制报废日期">
+                <span class="certification-audit__value">
+                  {{ auditValue('compulsoryScrapDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section-card>
+
+        <section-card title="尺寸重量">
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <el-form-item label="外廓长度（毫米）">
+                <span class="certification-audit__value">{{ auditValue('outerLength') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="外廓宽度（毫米）">
+                <span class="certification-audit__value">{{ auditValue('outerWidth') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="外廓高度（毫米）">
+                <span class="certification-audit__value">{{ auditValue('outerHeight') }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <el-form-item label="核定载质量（KG）">
+                <span class="certification-audit__value">{{ auditValue('approvedLoadKg') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="准牵引总质量（KG）">
+                <span class="certification-audit__value">{{ auditValue('tractionMassKg') }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section-card>
+
+        <section-card title="证件信息">
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <el-form-item label="海关备案号">
+                <span class="certification-audit__value">{{ auditValue('customsRecordNo') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="行驶证档案编号">
+                <span class="certification-audit__value">{{ auditValue('drivingLicenseNo') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="行驶证有效期起">
+                <span class="certification-audit__value">
+                  {{ auditValue('drivingLicenseStartDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <el-form-item label="行驶证有效期止">
+                <span class="certification-audit__value">
+                  {{ auditValue('drivingLicenseEndDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="道路运输证号">
+                <span class="certification-audit__value">
+                  {{ auditValue('roadTransportCertNo') }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="道路运输证有效期起">
+                <span class="certification-audit__value">
+                  {{ auditValue('roadTransportCertStartDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <el-form-item label="道路运输证有效期止">
+                <span class="certification-audit__value">
+                  {{ auditValue('roadTransportCertEndDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="道路运输年审有效期">
+                <span class="certification-audit__value">
+                  {{ auditValue('annualReviewEndDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="机动车登记编号">
+                <span class="certification-audit__value">{{ auditValue('registrationNo') }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <el-form-item label="机动车登记日期">
+                <span class="certification-audit__value">{{ auditValue('registrationDate') }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <span class="certification-audit__value">{{ auditValue('remark') }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section-card>
+
+        <section-card title="证件图片">
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <image-upload-field
+                label="行驶证主页正面"
+                prop="drivingLicenseImage"
+                :value="certificationAuditForm.drivingLicenseImage"
+                readonly
+                large
+                class-prefix="vehicle"
+              />
+            </el-col>
+            <el-col :span="8">
+              <image-upload-field
+                label="行驶证主页反面"
+                prop="drivingLicenseMainBack"
+                :value="certificationAuditForm.drivingLicenseMainBack"
+                readonly
+                large
+                class-prefix="vehicle"
+              />
+            </el-col>
+            <el-col :span="8">
+              <image-upload-field
+                label="行驶证副页正面"
+                prop="drivingLicenseViceFront"
+                :value="certificationAuditForm.drivingLicenseViceFront"
+                readonly
+                large
+                class-prefix="vehicle"
+              />
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="8">
+              <image-upload-field
+                label="行驶证副页反面"
+                prop="drivingLicenseViceBack"
+                :value="certificationAuditForm.drivingLicenseViceBack"
+                readonly
+                large
+                class-prefix="vehicle"
+              />
+            </el-col>
+            <el-col :span="8">
+              <image-upload-field
+                label="道路运输证图片"
+                prop="roadTransportCertImage"
+                :value="certificationAuditForm.roadTransportCertImage"
+                readonly
+                large
+                class-prefix="vehicle"
+              />
+            </el-col>
+            <el-col :span="8">
+              <image-upload-field
+                label="机动车登记本"
+                prop="registrationImage"
+                :value="certificationAuditForm.registrationImage"
+                readonly
+                large
+                class-prefix="vehicle"
+              />
+            </el-col>
+          </el-row>
+        </section-card>
+      </el-form>
+      <el-form
+        v-if="showRejectReason"
+        class="certification-audit__reason"
+        label-position="right"
+        label-width="auto"
+      >
        <el-form-item label="驳回原因" required>
-          <el-input v-model="certificationRejectReason" type="textarea" maxlength="200" show-word-limit />
+          <el-input
+            v-model="certificationRejectReason"
+            type="textarea"
+            maxlength="200"
+            show-word-limit
+          />
        </el-form-item>
      </el-form>
      <template #footer>
@@ -731,18 +968,6 @@ export default {
      }
      return this.vehicleForm.id ? '修改车辆' : '新增车辆';
    },
-    auditDetailItems() {
-      return [
-        ['所属组织', 'organizationName'], ['车牌号', 'plateNo'], ['车牌颜色', 'plateColor'],
-        ['车辆类型', 'vehicleType'], ['外廓长度(mm)', 'outerLength'], ['外廓宽度(mm)', 'outerWidth'],
-        ['外廓高度(mm)', 'outerHeight'], ['核定载质量（KG）', 'approvedLoadKg'], ['准牵引总质量（KG）', 'tractionMassKg'],
-        ['业务关系', 'businessRelation'], ['能源类型', 'energyType'], ['强制报废日期', 'compulsoryScrapDate'],
-        ['海关备案号', 'customsRecordNo'], ['行驶证档案编号', 'drivingLicenseNo'], ['行驶证有效期起', 'drivingLicenseStartDate'],
-        ['行驶证有效期止', 'drivingLicenseEndDate'], ['道路运输证号', 'roadTransportCertNo'], ['道路运输证有效期起', 'roadTransportCertStartDate'],
-        ['道路运输证有效期止', 'roadTransportCertEndDate'], ['道路运输年审有效期', 'annualReviewEndDate'],
-        ['机动车登记编号', 'registrationNo'], ['机动车登记日期', 'registrationDate'], ['备注', 'remark'],
-      ].map(([label, prop]) => ({ label, prop }));
-    },
    expiryTagOptions() {
      return [
        { label: '全部', value: '', statKey: 'total' },
@@ -849,8 +1074,19 @@ export default {
        this.certificationAuditBox = true;
      });
    },
-    formatAuditValue(item) {
-      const value = this.certificationAuditForm[item.prop];
+    auditValue(prop) {
+      // 长期有效字段：勾选后显示「长期有效」，避免与未填写的「-」混淆
+      const longTermMap = {
+        drivingLicenseEndDate: 'drivingLicenseLongTerm',
+        roadTransportCertEndDate: 'roadTransportCertLongTerm',
+        annualReviewEndDate: 'annualReviewLongTerm',
+        compulsoryScrapDate: 'compulsoryScrapLongTerm',
+      };
+      const longTermProp = longTermMap[prop];
+      if (longTermProp && this.certificationAuditForm[longTermProp] === 1) {
+        return '长期有效';
+      }
+      const value = this.certificationAuditForm[prop];
      return value === undefined || value === null || value === '' ? '-' : value;
    },
    handleCertificationApprove() {
@@ -1422,6 +1658,19 @@ export default {
  }
 }

+// 车辆认证审核弹窗：与编辑弹窗一致，灰底 + section-card 白卡分组
+.certification-audit {
+  &__value {
+    display: block;
+    color: #303133;
+    word-break: break-all;
+  }
+
+  &__reason {
+    margin-top: 12px;
+  }
+}
+
 .vehicle-form {
  :deep(.el-date-editor.el-input),
  :deep(.el-date-editor.el-input__wrapper),