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

5.6 KiB
Raw Blame History

必填星号与 label 首行齐平(全局)

  • 根因:element-ui.scss.el-form-item--label-right .el-form-item__label { align-items:center } 使 inline-flex label 的星号 ::before(独立 flex 子项)在多行折行时被垂直居中。
  • 修复:label 改 align-self:center(整体仍随行垂直居中)+ align-items:flex-start(星号/文字首行齐平),覆盖 label-right/left/top 三种位置;旧 inline-block 注释已修正。
  • 影响页面:project-apply 独立表单页等所有多行 label 场景(弹窗内 white-space:nowrap 不受影响)。

必填星号首行对齐:改用 align-items: normalstretch 方案)

  • 最终写法(src/styles/element-ui.scss):.is-required .el-form-item__label { align-self:center; align-items:normal; } + ::before { display:inline-block; height:auto; line-height:inherit; margin-right:4px }
  • 原理:stretch 让星号盒子在「换行时」被拉伸到 label 全高、内容从顶部排布 → 贴首行;单行时盒子=一行高,视觉不变(比 flex-start 更贴合「只换行才生效」)。
  • 前提:::before 高度必须 auto 且继承行高;label 不能是 固定 height + 等高 line-height,否则退化成居中,需 JS 判行数加 class。

合同变更页(contract-manage-change.vue

  • 「其它附件」上传按钮改为 type="primary" plain icon="el-icon-upload",与「变更材料」区 vehicle-attachment-upload 内置按钮一致。
  • 分区标题必填星号:.dialog-section-title.is-required::after { content:'*'; color:#f56c6c }::before 已被蓝色竖条占用,星号走 ::after)。
  • 再次变更逻辑:load() 里 form 强制重置 changeContent/changeReason/changeAttachmentsJson = ''changeMaterials = [](不带上一次内容);新增 mergeChangeAttachments() 把上一次的 changeAttachmentsJson 归集进 attachments(其它附件),按 url/名去重,数字 size 转格式化文本,提交时随 attachmentsJson 持久化。

合同变更记录对齐客商变更记录(contract-manage.vue

  • 编辑页与详情弹窗的两处「变更记录」表格新增「变更内容」列:formatContractChangeContent(row) 复用 buildDetailChangeRecordRows 生成「字段:变更前:x → 变更后:y」摘要,单行省略 + el-tooltip 全量悬浮(样式 .contract-change-record-content-cell/-tooltip 照搬客商 change-record-content-*)。
  • 编辑页操作列由单个「流程」改为「详情 + 流程」(openDetailChangeRecord + openFlow,宽度 120→150);详情弹窗表格「查看详情」改「详情」与客商一致。
  • 值格式化增强:billingPlanJson→方案名(默认)列表、paymentRatioJson→「第N笔 xx%」、settlementRuleJson/preSettlementConfigJson/formalSettlementConfigJson→可读摘要(自动生成开关/结算类型/周期类型/截单日/周期天数,含预结算+正式结算双段)。
  • buildDetailChangeRecordRows 过滤条件补「前后都为空则跳过」(原来只比 JSON 字符串,'' 与 null 会漏)。

星号方案补丁(关键)

  • EP 的 .el-form-item__label 写死 height:32px; line-height:32px(项目只覆盖了 line-height:14px),导致 stretch 方案文字顶到 32px 盒子顶部、单行不居中。
  • 修复:.is-required .el-form-item__label { height:auto; align-self:center; align-items:normal }——height:auto 收缩到内容高 + align-self:center 行内居中 + normal(stretch) 仅换行时星号贴首行。

车辆认证审核弹窗重构(transportCapacity/vehicle.vue

  • 背景:用户反馈「样式不统一、内容不全」。根因是审核弹窗用 <el-descriptions :column="3" border>(大白表 + 居中 label),与同页编辑弹窗的 <section-card> 白卡分组风格不一致。
  • 改造:弹窗主体改为 4 个 section-card 分组 —— 基础信息 / 尺寸重量 / 证件信息 / 证件图片;内部 el-form label-position="right" label-width="auto" + el-row/el-col3 列 :span="8",所属组织与备注占 :span="24")。
  • 内容补全:新增「证件图片」分组,6 张证件照用 <image-upload-field readonly large class-prefix="vehicle"> 只读展示(可点击放大);证件图片尺寸 240×151 复用已有全局 :deep(.vehicle-uploader--large) 规则,无需新写。
  • label 单位统一为中文全角括号:外廓长度(毫米) / 核定载质量(KG(原为半角 外廓长度(mm))。
  • 方法重构:formatAuditValue(item)auditValue(prop),签名更简洁;新增 longTermMap,对 drivingLicenseEndDate / roadTransportCertEndDate / annualReviewEndDate / compulsoryScrapDate 在勾选长期有效时返回「长期有效」,避免与未填写的「-」混淆(与列表页 formatEndDate 行为一致)。
  • 删除已无引用的 auditDetailItems computed。

全站弹窗标题补 4px 主色竖条(全局 element-ui.scss

  • 发现:.el-dialog__title 全局只配了 inline-flex + gap:8px没有竖条(竖条此前只在 .dialog-section-title::before),导致全站 el-dialog 标题都不带竖条,不符合 AGENTS.md 4.8。
  • 修复:新增 .el-dialog__title:not(:empty)::before { width:4px; height:16px; border-radius:2px; background:var(--el-color-primary) }
  • 注意:必须加 :not(:empty),否则无标题弹窗会出现孤立蓝条。
  • customer-archive.vue 评分详情弹窗:将「临时额度申请使用期限」区间行(span=12 + 至 连接)拆分为两个 span=6 独立字段「临时申请额度有效期起 / 止」,字段名 tempCreditStartDate/End 不变,删除废弃样式 .score-detail-form__range。