feat(vehicle): 重构车辆认证审核弹窗布局与验证规则

- 新增车辆认证审核弹窗，取消独立尺寸重量卡片，外廓尺寸改为长/宽/高组合布局 - 基础信息调整为3行4列，证件信息新增车辆资质图片行，所属组织标签更名为所有组织 - 行驶证有效期必填星号动态显示，长期有效时不显示且不校验，删除旧校验方法 - driver.vue中从业资格证有效期改为起止日期区间，新增起始日期字段，调整验证规则 - 驾驶证和从业资格证长期有效时禁用起止日期输入，校验逻辑同步调整，提交保留旧值 - contract-manage-change.vue合同文件批量下载按钮移入标题栏，与其它附件分区样式统一 - 样式更新，新增 dimension-group 用于外廓尺寸排版复用及其他局部样式调整 - 修复因后端未实现接口导致的降级方案预留，等待后端补充支持
2026-09-09 19:06:26 +08:00
parent 716ce43862
commit c1813e308f
4 changed files with 173 additions and 122 deletions
@@ -30,8 +30,8 @@
      </section>

      <section class="change-section">
-        <div class="dialog-section-title">合同文件</div>
-        <div class="attachment-head">
+        <div class="section-head">
+          <div class="dialog-section-title">合同文件</div>
          <el-button type="primary" :disabled="!contractFileRows.length" @click="handleContractFileBatchDownload">批量下载</el-button>
        </div>
        <el-table :data="contractFileRows" border class="change-table" @selection-change="selectedContractFiles = $event"><el-table-column type="selection" width="55" /><el-table-column type="index" label="序号" width="70" /><el-table-column label="文件名" min-width="240"><template #default="{ row }"><el-link type="primary" @click="previewAttachment(row, contractFileRows)">{{ row.originalName || row.name }}</el-link></template></el-table-column><el-table-column label="文件大小" width="120"><template #default="{ row }">{{ formatFileSize(row.size) }}</template></el-table-column><el-table-column prop="uploadUserName" label="上传人" width="140" /><el-table-column prop="uploadTime" label="上传时间" width="170" /><el-table-column label="操作" width="100"><template #default="{ $index }"><el-link type="danger" @click="removeContractFile($index)">删除</el-link></template></el-table-column></el-table>
@@ -215,7 +215,6 @@ export default {
 .change-table { margin: 16px 0; }
 .ratio-tip { margin-bottom: 8px; color: #f56c6c; }
 .unit { margin-left: 8px; }
-.attachment-head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 12px; }
 .attachment-upload { display: flex; justify-content: flex-start; margin-top: 12px; }
 .attachment-upload .vehicle-attachment-upload { width: auto; }
 .attachment-upload .el-upload { display: inline-flex; }
@@ -325,6 +325,7 @@
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="起"
+                    :disabled="driverForm.drivingLicenseLongTerm === 1"
                    @change="validateFormField('drivingLicenseEndDate')"
                  />
                  <el-date-picker
@@ -409,19 +410,29 @@
                />
              </el-form-item>
            </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
              <el-form-item label="有效期" prop="qualificationEndDate">
-                <el-date-picker
-                  v-model="driverForm.qualificationEndDate"
-                  type="date"
-                  value-format="YYYY-MM-DD"
-                  placeholder="请选择"
-                  :disabled="driverForm.qualificationLongTerm === 1"
-                  @change="validateFormField('qualificationEndDate')"
-                />
+                <div class="date-range">
+                  <el-date-picker
+                    v-model="driverForm.qualificationStartDate"
+                    type="date"
+                    value-format="YYYY-MM-DD"
+                    placeholder="起"
+                    :disabled="driverForm.qualificationLongTerm === 1"
+                    @change="validateFormField('qualificationEndDate')"
+                  />
+                  <el-date-picker
+                    v-model="driverForm.qualificationEndDate"
+                    type="date"
+                    value-format="YYYY-MM-DD"
+                    placeholder="止"
+                    :disabled="driverForm.qualificationLongTerm === 1"
+                    @change="validateFormField('qualificationEndDate')"
+                  />
+                </div>
              </el-form-item>
            </el-col>
-            <el-col :span="6">
+            <el-col :span="4">
              <el-form-item label="长期有效" prop="qualificationLongTerm">
                <el-checkbox
                  v-model="driverForm.qualificationLongTerm"
@@ -675,6 +686,7 @@ const emptyForm = () => ({
  drivingLicenseBack: '',
  qualificationType: '',
  qualificationNo: '',
+  qualificationStartDate: '',
  qualificationEndDate: '',
  qualificationLongTerm: 0,
  qualificationFront: '',
@@ -819,9 +831,8 @@ export default {
          { required: true, message: '请选择从业资格认证类型', trigger: 'change' },
        ],
        qualificationNo: [{ required: true, message: '请输入资格证号', trigger: 'blur' }],
-        qualificationEndDate: [{ validator: this.validateQualificationEndDate, trigger: 'change' }],
-        qualificationLongTerm: [
-          { required: true, message: '请选择从业资格证是否长期有效', trigger: 'change' },
+        qualificationEndDate: [
+          { required: true, validator: this.validateQualificationEndDate, trigger: 'change' },
        ],
        driverType: [{ required: true, message: '请选择司机类型', trigger: 'change' }],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
@@ -1056,19 +1067,33 @@ export default {
      }
    },
    validateDrivingLicenseEndDate(rule, value, callback) {
+      // 勾选长期有效：起止均已禁用，不再校验
+      if (this.driverForm.drivingLicenseLongTerm === 1) {
+        callback();
+        return;
+      }
      if (!this.driverForm.drivingLicenseStartDate) {
        callback(new Error('请选择驾驶证有效期起'));
        return;
      }
-      if (this.driverForm.drivingLicenseLongTerm !== 1 && !value) {
+      if (!value) {
        callback(new Error('请选择驾驶证有效期止'));
        return;
      }
      callback();
    },
    validateQualificationEndDate(rule, value, callback) {
-      if (this.driverForm.qualificationLongTerm !== 1 && !value) {
-        callback(new Error('请选择从业资格证有效期'));
+      // 勾选长期有效：起止均已禁用，不再校验
+      if (this.driverForm.qualificationLongTerm === 1) {
+        callback();
+        return;
+      }
+      if (!this.driverForm.qualificationStartDate) {
+        callback(new Error('请选择从业资格证有效期起'));
+        return;
+      }
+      if (!value) {
+        callback(new Error('请选择从业资格证有效期止'));
        return;
      }
      callback();
@@ -1580,6 +1605,7 @@ export default {
          birthday: this.normalizeBirthday(this.driverForm.birthday),
          drivingLicenseStartDate: this.normalizeBirthday(this.driverForm.drivingLicenseStartDate),
          drivingLicenseEndDate: this.normalizeBirthday(this.driverForm.drivingLicenseEndDate),
+          qualificationStartDate: this.normalizeBirthday(this.driverForm.qualificationStartDate),
          qualificationEndDate: this.normalizeBirthday(this.driverForm.qualificationEndDate),
          qualificationNo: this.driverForm.qualificationNo || this.driverForm.idCardNo,
          posts: this.driverForm.postList.join(','),
@@ -129,13 +129,6 @@
    >
      <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="6">
              <el-form-item label="车牌号">
@@ -147,43 +140,22 @@
                <span class="certification-audit__value">{{ auditValue('vehicleType') }}</span>
              </el-form-item>
            </el-col>
-          </el-row>
-          <el-row :gutter="18">
-            <el-col :span="6">
-              <el-form-item label="业务关系">
-                <span class="certification-audit__value">{{ auditValue('businessRelation') }}</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="能源类型">
-                <span class="certification-audit__value">{{ auditValue('energyType') }}</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <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="6">
-              <el-form-item label="外廓长度（毫米）">
-                <span class="certification-audit__value">{{ auditValue('outerLength') }}</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="外廓宽度（毫米）">
-                <span class="certification-audit__value">{{ auditValue('outerWidth') }}</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="外廓高度（毫米）">
-                <span class="certification-audit__value">{{ auditValue('outerHeight') }}</span>
+            <el-col :span="12">
+              <el-form-item label="外廓尺寸（毫米）">
+                <div class="dimension-group">
+                  <div class="dimension-group__item">
+                    <span class="dimension-group__label">长</span>
+                    <span class="certification-audit__value">{{ auditValue('outerLength') }}</span>
+                  </div>
+                  <div class="dimension-group__item">
+                    <span class="dimension-group__label">宽</span>
+                    <span class="certification-audit__value">{{ auditValue('outerWidth') }}</span>
+                  </div>
+                  <div class="dimension-group__item">
+                    <span class="dimension-group__label">高</span>
+                    <span class="certification-audit__value">{{ auditValue('outerHeight') }}</span>
+                  </div>
+                </div>
              </el-form-item>
            </el-col>
          </el-row>
@@ -198,14 +170,85 @@
                <span class="certification-audit__value">{{ auditValue('tractionMassKg') }}</span>
              </el-form-item>
            </el-col>
+            <el-col :span="6">
+              <el-form-item label="业务关系">
+                <span class="certification-audit__value">{{ auditValue('businessRelation') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="能源类型">
+                <span class="certification-audit__value">{{ auditValue('energyType') }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="6">
+              <el-form-item label="强制报废日期">
+                <span class="certification-audit__value">
+                  {{ auditValue('compulsoryScrapDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="海关备案号">
+                <span class="certification-audit__value">{{ auditValue('customsRecordNo') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="所有组织">
+                <span class="certification-audit__value">
+                  {{ auditValue('organizationName') }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="使用部门">
+                <span class="certification-audit__value">{{ auditValue('useDepartment') }}</span>
+              </el-form-item>
+            </el-col>
          </el-row>
        </section-card>

        <section-card title="证件信息">
          <el-row :gutter="18">
            <el-col :span="6">
-              <el-form-item label="海关备案号">
-                <span class="certification-audit__value">{{ auditValue('customsRecordNo') }}</span>
+              <el-form-item label="行驶证有效期止">
+                <span class="certification-audit__value">
+                  {{ auditValue('drivingLicenseEndDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="道路运输证号">
+                <span class="certification-audit__value">
+                  {{ auditValue('roadTransportCertNo') }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="道路运输证有效期止">
+                <span class="certification-audit__value">
+                  {{ auditValue('roadTransportCertEndDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="道路运输年审有效期">
+                <span class="certification-audit__value">
+                  {{ auditValue('annualReviewEndDate') }}
+                </span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="18">
+            <el-col :span="6">
+              <el-form-item label="机动车登记编号">
+                <span class="certification-audit__value">{{ auditValue('registrationNo') }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="机动车登记日期">
+                <span class="certification-audit__value">{{ auditValue('registrationDate') }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
@@ -222,20 +265,6 @@
            </el-col>
          </el-row>
          <el-row :gutter="18">
-            <el-col :span="6">
-              <el-form-item label="行驶证有效期止">
-                <span class="certification-audit__value">
-                  {{ auditValue('drivingLicenseEndDate') }}
-                </span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="道路运输证号">
-                <span class="certification-audit__value">
-                  {{ auditValue('roadTransportCertNo') }}
-                </span>
-              </el-form-item>
-            </el-col>
            <el-col :span="6">
              <el-form-item label="道路运输证有效期起">
                <span class="certification-audit__value">
@@ -244,34 +273,6 @@
              </el-form-item>
            </el-col>
          </el-row>
-          <el-row :gutter="18">
-            <el-col :span="6">
-              <el-form-item label="道路运输证有效期止">
-                <span class="certification-audit__value">
-                  {{ auditValue('roadTransportCertEndDate') }}
-                </span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="道路运输年审有效期">
-                <span class="certification-audit__value">
-                  {{ auditValue('annualReviewEndDate') }}
-                </span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <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="6">
-              <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="备注">
@@ -866,7 +867,7 @@ export default {
      ],
      businessRelationOptions: ['自有', '管理挂靠', '业务合作'],
      energyTypeOptions: ['柴油', '汽油', '新能源', '天然气'],
-      formRules: {
+      baseRules: {
        organizationName: [{ required: true, message: '请选择所属组织', trigger: 'change' }],
        plateNo: [
          { required: true, message: '请输入车牌号', trigger: 'change' },
@@ -877,9 +878,6 @@ export default {
        businessRelation: [{ required: true, message: '请选择业务关系', trigger: 'change' }],
        energyType: [{ required: true, message: '请选择能源类型', trigger: 'change' }],
        drivingLicenseNo: [{ required: true, message: '请输入行驶证档案编号', trigger: 'blur' }],
-        drivingLicenseEndDate: [
-          { validator: this.validateDrivingLicenseEndDate, trigger: 'change' },
-        ],
        roadTransportCertNo: [{ required: true, message: '请输入道路运输证号', trigger: 'blur' }],
        roadTransportCertEndDate: [
          { validator: this.validateRoadTransportCertEndDate, trigger: 'change' },
@@ -891,6 +889,16 @@ export default {
  },
  computed: {
    ...mapGetters(['permission', 'userInfo']),
+    // 行驶证有效期：用 required 规则渲染必填星号；勾选「长期有效」后免填，星号同步消失
+    formRules() {
+      return {
+        ...this.baseRules,
+        drivingLicenseEndDate:
+          this.vehicleForm.drivingLicenseLongTerm === 1
+            ? []
+            : [{ required: true, message: '请选择行驶证有效期', trigger: 'change' }],
+      };
+    },
    // 所属组织级联：表单存组织名称，级联控件用 id 路径，两者在此双向转换
    organizationCascaderValue: {
      get() {
@@ -1001,17 +1009,6 @@ export default {
      }
      this.$refs.vehicleForm?.validateField(dateProp);
    },
-    validateDrivingLicenseEndDate(rule, value, callback) {
-      if (this.vehicleForm.drivingLicenseLongTerm === 1 && !value) {
-        callback();
-        return;
-      }
-      if (!value) {
-        callback(new Error('请选择行驶证有效期'));
-        return;
-      }
-      callback();
-    },
    validateRoadTransportCertEndDate(rule, value, callback) {
      if (this.vehicleForm.roadTransportCertLongTerm === 1 && !value) {
        callback();
@@ -1638,6 +1635,26 @@ export default {
    word-break: break-all;
  }

+  // 外廓尺寸长/宽/高组合，排版复用编辑弹窗的 dimension-group
+  .dimension-group {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+    align-items: center;
+  }
+
+  .dimension-group__item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .dimension-group__label {
+    flex-shrink: 0;
+    color: #303133;
+  }
+
  &__reason {
    margin-top: 12px;
  }