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

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

src/views/business/contract-manage-change.vue

@@ -79,13 +79,13 @@
       <section class="change-section attachment-section">
         <div class="section-head"><div class="dialog-section-title">其它附件</div><el-button type="primary" plain>批量下载</el-button></div>
         <el-table :data="attachments" border class="change-table"><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, attachments)">{{ row.originalName || row.name }}</el-link></template></el-table-column><el-table-column prop="description" label="附件描述" min-width="240" /><el-table-column prop="size" label="文件大小" width="120" /><el-table-column prop="userName" label="上传人" width="140" /><el-table-column prop="uploadTime" label="上传时间" width="180" /><el-table-column label="操作" width="100"><template #default="{ $index }"><el-link type="danger" @click="attachments.splice($index, 1)">删除</el-link></template></el-table-column></el-table>
-        <el-upload action="#" :auto-upload="false" multiple :show-file-list="false" @change="handleAttachment"><el-button plain>上传附件</el-button></el-upload>
+        <el-upload action="#" :auto-upload="false" multiple :show-file-list="false" @change="handleAttachment"><el-button type="primary" plain icon="el-icon-upload">上传附件</el-button></el-upload>
       </section>
 
       <section class="change-section change-reason-section">
         <div class="dialog-section-title">变更内容</div>
         <el-form-item prop="changeContent"><el-input v-model="form.changeContent" type="textarea" :rows="3" maxlength="2000" show-word-limit placeholder="请输入变更内容" /></el-form-item>
-        <div class="dialog-section-title">变更原因</div>
+        <div class="dialog-section-title is-required">变更原因</div>
         <el-form-item prop="changeReason"><el-input v-model="form.changeReason" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入变更原因" /></el-form-item>
         <div class="dialog-section-title">变更材料</div>
         <el-table :data="changeMaterials" border class="change-table">
@@ -138,8 +138,17 @@ export default {
   mounted() { this.load(); },
   watch: { settlementConfigTab(tab, oldTab) { if (tab === oldTab) return; if (oldTab === 'pre') this.preSettlementConfig = { ...this.settlementRule }; else this.formalSettlementConfig = { ...this.settlementRule }; this.settlementRule = { ...(tab === 'pre' ? this.preSettlementConfig : this.formalSettlementConfig) }; } },
   methods: {
-    async load() { const id = this.$route.query.id; if (!id) return; const res = await api.getDetail(id); const data = res.data?.data || res.data || {}; this.form = { ...data, changeContent: '', changeReason: '', changeAttachmentsJson: '', copyCount: normalizeOptionalPositiveInteger(data.copyCount), paymentDays: normalizeOptionalPositiveInteger(data.paymentDays), changeType: '合同信息变更' }; this.changeMaterials = []; this.period = data.startDate && data.endDate ? [data.startDate, data.endDate] : []; this.plans = this.parse(data.billingPlanJson); this.attachments = this.parse(data.attachmentsJson); this.contractFileRows = this.parse(data.contractFileJson); const rules = this.parseObject(data.settlementRuleJson); const pre = this.parseObject(data.preSettlementConfigJson); const formal = this.parseObject(data.formalSettlementConfigJson); const legacy = Object.keys(rules).some(key => !['preSettlementConfig', 'formalSettlementConfig'].includes(key)) ? rules : {}; this.preSettlementConfig = rules.preSettlementConfig || (Object.keys(pre).length ? pre : legacy); this.formalSettlementConfig = rules.formalSettlementConfig || (Object.keys(formal).length ? formal : legacy); this.settlementRule = { ...this.preSettlementConfig }; this.feeGenerationMode = data.feeGenerationMode || (Number(data.billingEnabled) === 0 ? 'manual' : 'system'); this.paymentRatioRows = this.parse(data.paymentRatioJson); },
+    async load() { const id = this.$route.query.id; if (!id) return; const res = await api.getDetail(id); const data = res.data?.data || res.data || {}; this.form = { ...data, changeContent: '', changeReason: '', changeAttachmentsJson: '', copyCount: normalizeOptionalPositiveInteger(data.copyCount), paymentDays: normalizeOptionalPositiveInteger(data.paymentDays), changeType: '合同信息变更' }; this.changeMaterials = []; this.period = data.startDate && data.endDate ? [data.startDate, data.endDate] : []; this.plans = this.parse(data.billingPlanJson); this.attachments = this.mergeChangeAttachments(this.parse(data.attachmentsJson), this.parse(data.changeAttachmentsJson)); this.contractFileRows = this.parse(data.contractFileJson); const rules = this.parseObject(data.settlementRuleJson); const pre = this.parseObject(data.preSettlementConfigJson); const formal = this.parseObject(data.formalSettlementConfigJson); const legacy = Object.keys(rules).some(key => !['preSettlementConfig', 'formalSettlementConfig'].includes(key)) ? rules : {}; this.preSettlementConfig = rules.preSettlementConfig || (Object.keys(pre).length ? pre : legacy); this.formalSettlementConfig = rules.formalSettlementConfig || (Object.keys(formal).length ? formal : legacy); this.settlementRule = { ...this.preSettlementConfig }; this.feeGenerationMode = data.feeGenerationMode || (Number(data.billingEnabled) === 0 ? 'manual' : 'system'); this.paymentRatioRows = this.parse(data.paymentRatioJson); },
     parse(value) { try { const result = JSON.parse(value || '[]'); return Array.isArray(result) ? result : []; } catch { return []; } },
+    // 审核通过后上一次的变更材料归集到「其它附件」，按文件地址/文件名去重，避免重复展示
+    mergeChangeAttachments(attachments = [], changeAttachments = []) {
+      const key = item => this.attachmentUrl(item) || this.attachmentName(item);
+      const exists = new Set(attachments.map(key));
+      const merged = changeAttachments
+        .filter(item => !exists.has(key(item)))
+        .map(item => ({ ...item, size: /^\d+$/.test(String(item.size ?? '')) ? this.formatFileSize(item.size) : item.size }));
+      return [...attachments, ...merged];
+    },
     parseObject(value) { try { return { autoGenerate: 1, settlementType: '月结', billCycleType: '固定截单日', billCutoffDay: 25, cycleDays: 15, ...(JSON.parse(value || '{}') || {}) }; } catch { return { autoGenerate: 1, settlementType: '月结', billCycleType: '固定截单日', billCutoffDay: 25, cycleDays: 15 }; } },
     positiveIntegerInput(prop, value) { this.form[prop] = String(value ?? '').replace(/\D/g, '').replace(/^0+/, ''); },
     addPlan() { this.planEditorIndex = -1; this.planEditor = { planName: `计费方案${this.plans.length + 1}`, defaultPlan: !this.plans.length, remark: '', rules: [{}] }; this.planDialogVisible = true; },
@@ -187,6 +196,7 @@ export default {
 .contract-basic-section :deep(.el-date-editor) { width: 360px; max-width: 100%; }
 .dialog-section-title { margin-bottom: 18px; font-size: 16px; font-weight: 600; }
 .dialog-section-title::before { display: inline-block; width: 4px; height: 16px; margin-right: 8px; vertical-align: -2px; background: #409eff; content: ''; }
+.dialog-section-title.is-required::after { margin-left: 4px; color: #f56c6c; content: '*'; }
 .section-head { display: flex; align-items: center; justify-content: space-between; }
 .change-table { margin: 16px 0; }
 .ratio-tip { margin-bottom: 8px; color: #f56c6c; }