feat(contract): 优化合同变更及车辆认证审核弹窗
- 合同变更页「其它附件」上传按钮样式调整，与变更材料区按钮统一 - 新增分区标题必填星号样式，改用 ::after 避免冲突 - 变更页 load() 强制清空表单关键字段，避免带入旧数据 - 实现 mergeChangeAttachments() 合并上次变更附件，去重并格式化大小 - 合同变更记录表格新增「变更内容」列，支持单行摘要显示与悬浮全量提示 - 操作列由单「流程」改为「详情 + 流程」按钮，详情文字统一 - 变更记录值格式化增强，支持方案名、支付比例、结算规则等摘要展示 - buildDetailChangeRecordRows 过滤条件更新，前后均为空时跳过展示 - 车辆认证审核弹窗样式及结构重构，使用 section-card 白卡分组，内容补全证件图片区 - 证件图片实现只读大图展示，复用全局样式，无需新增规则 - label 单位统一为中文全角括号，提升界面一致性 - 新增长期有效显示逻辑，避免日期未填「-」与长期有效混淆 - 删除无用计算属性 auditDetailItems，改用简洁 auditValue 方法返回展示值 - 全站弹窗标题统一增加 4px 主色竖条，符合设计规范，且对无标题弹窗进行排除处理 - 客户端临时额度申请期限字段拆分为两个独立字段，清晰明了 - 统一合同变更页变更原因必填标识及上传按钮样式 - 修正 EP 表单项标签高度和对齐，完善星号方案兼容性设计
This commit is contained in:
@@ -480,6 +480,20 @@
|
||||
/>
|
||||
<el-table-column prop="handlerUserName" label="经办人" min-width="140" align="center" />
|
||||
<el-table-column prop="changeType" label="变更类型" min-width="160" align="center" />
|
||||
<el-table-column label="变更内容" min-width="420">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip placement="top" :show-after="200">
|
||||
<template #content>
|
||||
<div class="contract-change-record-content-tooltip">
|
||||
{{ formatContractChangeContent(row) }}
|
||||
</div>
|
||||
</template>
|
||||
<span class="contract-change-record-content-cell">{{
|
||||
formatContractChangeContent(row)
|
||||
}}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="changeReason"
|
||||
label="变更原因"
|
||||
@@ -488,8 +502,9 @@
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="statusName" label="状态" min-width="140" align="center" />
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="openDetailChangeRecord(row)">详情</el-link>
|
||||
<el-link type="primary" @click="openFlow(row)">流程</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -759,6 +774,20 @@
|
||||
/>
|
||||
<el-table-column prop="handlerUserName" label="经办人" min-width="140" align="center" />
|
||||
<el-table-column prop="changeType" label="变更类型" min-width="160" align="center" />
|
||||
<el-table-column label="变更内容" min-width="420">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip placement="top" :show-after="200">
|
||||
<template #content>
|
||||
<div class="contract-change-record-content-tooltip">
|
||||
{{ formatContractChangeContent(row) }}
|
||||
</div>
|
||||
</template>
|
||||
<span class="contract-change-record-content-cell">{{
|
||||
formatContractChangeContent(row)
|
||||
}}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="changeReason"
|
||||
label="变更原因"
|
||||
@@ -769,7 +798,7 @@
|
||||
<el-table-column prop="statusName" label="状态" min-width="140" align="center" />
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||||
<template #default="{ row }"
|
||||
><el-link type="primary" @click="openDetailChangeRecord(row)">查看详情</el-link></template
|
||||
><el-link type="primary" @click="openDetailChangeRecord(row)">详情</el-link></template
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -2250,12 +2279,73 @@ export default {
|
||||
.filter(Boolean);
|
||||
return names.length ? names.join('、') : '空';
|
||||
},
|
||||
formatChangeRecordBillingPlans(value) {
|
||||
const list = Array.isArray(value) ? value : [];
|
||||
if (!list.length) return '空';
|
||||
return list
|
||||
.map(item => {
|
||||
if (!item || typeof item !== 'object') return String(item ?? '');
|
||||
const name = item.planName || item.name || '未命名方案';
|
||||
return item.defaultPlan ? `${name}（默认）` : name;
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join('、');
|
||||
},
|
||||
formatChangeRecordPaymentRatios(value) {
|
||||
const list = Array.isArray(value) ? value : [];
|
||||
if (!list.length) return '空';
|
||||
return list
|
||||
.map(item => {
|
||||
if (!item || typeof item !== 'object') return String(item ?? '');
|
||||
const term = item.paymentTerm || '';
|
||||
const ratio = item.ratioLimit === undefined || item.ratioLimit === null || item.ratioLimit === '' ? '' : `${item.ratioLimit}%`;
|
||||
return [term, ratio].filter(Boolean).join(' ');
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join('；');
|
||||
},
|
||||
formatChangeRecordSettlementRule(value) {
|
||||
const normalized = this.normalizeChangeRecordValue(value);
|
||||
if (!normalized || typeof normalized !== 'object' || Array.isArray(normalized)) {
|
||||
return this.isEmptyChangeRecordValue(normalized) ? '空' : String(normalized);
|
||||
}
|
||||
const summary = config => {
|
||||
if (!config || typeof config !== 'object') return '';
|
||||
const parts = [];
|
||||
const autoGenerate = config.autoGenerate;
|
||||
if (autoGenerate !== undefined && autoGenerate !== null && autoGenerate !== '') {
|
||||
parts.push(`自动生成结算单：${Number(autoGenerate) === 1 ? '开启' : '关闭'}`);
|
||||
}
|
||||
if (config.settlementType) parts.push(`结算类型：${config.settlementType}`);
|
||||
if (config.billCycleType) parts.push(`账单周期类型：${config.billCycleType}`);
|
||||
if (config.billCutoffDay) parts.push(`账单截单日：${config.billCutoffDay}日`);
|
||||
if (config.cycleDays) parts.push(`周期天数：${config.cycleDays}天`);
|
||||
if (config.billStartDate) parts.push(`账单起始日期：${config.billStartDate}`);
|
||||
return parts.join('，');
|
||||
};
|
||||
if (normalized.preSettlementConfig || normalized.formalSettlementConfig) {
|
||||
return [
|
||||
`预结算：${summary(normalized.preSettlementConfig) || '空'}`,
|
||||
`正式结算：${summary(normalized.formalSettlementConfig) || '空'}`,
|
||||
].join('；');
|
||||
}
|
||||
return summary(normalized) || '空';
|
||||
},
|
||||
formatContractChangeValue(field, value) {
|
||||
const normalized = this.normalizeChangeRecordValue(value);
|
||||
if (this.isEmptyChangeRecordValue(normalized)) return '空';
|
||||
if (['contractFileJson', 'attachmentsJson', 'changeAttachmentsJson'].includes(field)) {
|
||||
return this.formatChangeRecordAttachments(normalized);
|
||||
}
|
||||
if (field === 'billingPlanJson') return this.formatChangeRecordBillingPlans(normalized);
|
||||
if (field === 'paymentRatioJson') return this.formatChangeRecordPaymentRatios(normalized);
|
||||
if (
|
||||
['settlementRuleJson', 'preSettlementConfigJson', 'formalSettlementConfigJson'].includes(
|
||||
field
|
||||
)
|
||||
) {
|
||||
return this.formatChangeRecordSettlementRule(normalized);
|
||||
}
|
||||
if (field === 'legalSealFlag') return Number(normalized) === 1 ? '是' : '否';
|
||||
if (field === 'feeGenerationMode') return normalized === 'manual' ? '手动生成' : '系统生成';
|
||||
if (field === 'invoiceCycle' || field === 'paymentDays') return `${normalized}天`;
|
||||
@@ -2264,16 +2354,33 @@ export default {
|
||||
}
|
||||
return String(normalized);
|
||||
},
|
||||
// 列表「变更内容」列：把变更前后内容拼成一段摘要（参照客商变更记录）
|
||||
formatContractChangeContent(row = {}) {
|
||||
const rows = this.buildDetailChangeRecordRows(row).filter(
|
||||
item => item.field !== '变更原因'
|
||||
);
|
||||
return rows
|
||||
.map(item => `${item.field}：变更前：${item.before} → 变更后：${item.after}`)
|
||||
.join('；');
|
||||
},
|
||||
buildDetailChangeRecordRows(row = {}) {
|
||||
const beforeData = this.parseChangeRecordData(row.beforeData);
|
||||
const afterData = this.parseChangeRecordData(row.afterData);
|
||||
const fields = [...new Set([...Object.keys(beforeData), ...Object.keys(afterData)])];
|
||||
const rows = fields
|
||||
.filter(
|
||||
field =>
|
||||
.filter(field => {
|
||||
// 前后都为空的字段不展示（'' 与 null 序列化不同，单靠 JSON 比对会漏掉）
|
||||
if (
|
||||
this.isEmptyChangeRecordValue(beforeData[field]) &&
|
||||
this.isEmptyChangeRecordValue(afterData[field])
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
JSON.stringify(this.normalizeChangeRecordValue(beforeData[field])) !==
|
||||
JSON.stringify(this.normalizeChangeRecordValue(afterData[field]))
|
||||
)
|
||||
);
|
||||
})
|
||||
.map(field => ({
|
||||
field: this.getContractChangeFieldLabel(field),
|
||||
before: this.formatContractChangeValue(field, beforeData[field]),
|
||||
@@ -2496,6 +2603,21 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.contract-change-record-content-cell {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.contract-change-record-content-tooltip {
|
||||
max-width: 900px;
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.contract-change-record-detail-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -2505,6 +2627,8 @@ export default {
|
||||
}
|
||||
|
||||
:deep(.contract-change-record-detail-dialog .el-dialog__body) {
|
||||
max-height: 65vh;
|
||||
overflow: auto;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user