tms-erp-web/.workbuddy/memory/2026-08-11.md

2026-08-11 工作日志

客商档案编辑弹窗布局改造（customer-archive.vue）

客户需求：参考截图，编辑弹窗表单改为 4 列布局、label 固定 6 汉字宽、超长换行、列间有间距。

改动（仅 src/views/vehicle/customer-archive.vue 一个文件）：

• el-form 的 label-width 由 auto → 96px（≈6 汉字 + 12px padding）。
• el-form 的 gutter 由 18 → 24（4 个 section-card 分组全部统一）。
• 联系信息分组 el-col :span="8"（3列）→ :span="6"（4列），与工商/财务分组对齐。
• <style scoped> 中 .archive-form 新增 label 规则：固定 width:96px + padding-right:12px + white-space:normal + text-align:right + overflow:visible，使长 label（如"统一社会信用代码"）自动折行。

财务/信用信息分组备注字段补空白

• 客户需求：截图红框处（第三/四列空白）需有输入组件对齐。
• 改动（src/views/vehicle/customer-archive.vue）：
  • “申请总资金使用额度(万元)” 缩进修正（保持 span=6）。
  • 第一次：“备注” 改为 span=18，占满第二行剩余三列，但右侧溢出。
  • 第二次：第一列留空、申请总资金使用额度 居第二列、备注 跨第三、四列（span=12），总宽度 24 刚好一行。

注意：.score-detail-form 已有独立 .el-form-item__label 规则，与本次改动无关，未触碰。

.archive-form label 换行稳定性加固

用户反馈长 label 仍挤压 input，要求 input 宽度固定、label 超长换行（参考截图效果）。

• 强化 .archive-form :deep(.el-form-item__label)：width: 96px !important + flex-shrink: 0 + word-break/overflow-wrap: break-word，移除无效的 overflow:visible/text-overflow/display:inline-block。
• .el-form-item 移除 overflow:hidden（避免裁剪多行 label）。
• .el-form-item__content 移除 overflow:hidden，保留 flex:1; min-width:0，确保 input 稳定占满剩余宽度且不被压缩。
• 核心机制：label 固定宽 + flex-shrink:0 ⇄ content flex:1，二者互斥分配宽度，input 宽度恒定。

★ Element Plus 2.14 label 换行真正根因（之前没修对）

看了 node_modules/element-plus/theme-chalk/el-form-item.css 才确认：

.el-form-item__label{...height:32px;line-height:32px;display:inline-flex}
.el-form-item--default .el-form-item__label{height:32px;line-height:32px}

Element Plus 把 label 锁死成 32px 高 + 32px 行高，只够放一行。光设 white-space:normal; word-break:break-word 没用，第二行会被 32px 高度裁掉（且 inline-flex 内容溢出可见，但父 form-item 高度还是被撑不开、看起来被吃掉了）。

正确修复（customer-archive.vue .archive-form，可推广到所有 el-form 弹窗）：

:deep(.el-form-item__label) {
  width: 96px !important;
  height: auto !important;        // ★ 关键
  line-height: 1.5 !important;    // ★ 关键
  padding-right: 12px;
  white-space: normal;
  text-align: right;
  word-break: break-word;
  overflow-wrap: break-word;
  flex: 0 0 96px;                 // 显式三段式最稳
}
:deep(.el-form-item) { align-items: flex-start; }  // 多行 label 时控件顶部对齐

这套改完，96px 固定的 label 才能真正「最大资金使用额度(万元)」「申请总资金使用额度(万元)」这种 11 字段自动折两行，右对齐、input 宽度不变。

弹窗表单项间距 16px → 8px（element-ui.scss 全局）

用户要求把弹窗内表单项上下间距从 16px 收紧到 8px，但担心压缩后红色校验错误文字被下一个 item 遮挡。

• 根因：Element Plus .el-form-item__error 默认 position:absolute 脱离文档流，16px 刚好够放下错误文字；压到 8px 后错误区超出占位被遮挡。
• 修复（只改 src/styles/element-ui.scss 全局样式，影响所有 .el-dialog 表单）：
  • 两处 .el-dialog .el-form-item { margin-bottom:16px }（约 171 行、271 行）→ 8px。
  • 新增 .el-dialog .el-form-item__error { position:relative; margin-top:2px; line-height:1.2 }，让错误文字正常占高度、不再被遮挡。
• 副作用：有校验错误时该 item 高度会被错误文字撑开，同一行相邻列可能轻微错位，属可接受的常规表单体验。无错误时保持 8px 紧凑。
• 备注：customer-archive.vue 内 .receipt-form/.invoice-form 子表单各自 scoped 写死 16px（发票/收票子表，非主表单），本次未动；若需统一收紧再说。

客商档案弹窗布局微调（截图标注）

用户新截图两处标注，均在 customer-archive.vue：

1. 联系信息分组：原三个字段 :span="8"（各 1/3，铺满整行）。改为 4 列布局——三个字段 :span="6" + 末尾补一个空 <el-col :span="6"></el-col> 占位（第4列留空，不铺满）。
2. 工商信息「上下居中对齐」：在 .archive-form scoped 样式内新增 :deep(.el-form-item){ align-items:center }，显式锁定每个 form-item 的 label 与控件垂直居中对齐（之前无 flex-start 覆盖，默认本就 center，现在显式声明更稳妥）。

• 潜在提醒：工商信息内长 label「统一社会信用代码」仍按之前需求折两行，会让同一 el-row 内该列 form-item 比相邻单行 label 列高约 2px，输入控件垂直方向略有错位。若用户要的是「同行所有输入框严格水平对齐」，需让长 label 单行不折行（nowrap）或把长 label 字段单独成行——待用户确认。

营业期限日期选择器宽度与同行对齐

用户截图标注：工商信息「营业期限」日期选择器太宽，且勾选组件被挤到下一排。

改动（src/views/vehicle/customer-archive.vue）：

• .business-term-field 补充/修正 flex 布局：display:flex; align-items:center; gap:8px; flex-wrap:nowrap;。
• 日期选择器宽度由 250px 缩到 150px（:deep(.el-date-editor) 的 flex-basis + width）。
• 勾选组件加 white-space:nowrap，防止文字换行导致整体折行。
• 移除模板里冗余的 style="display: flex;"；修复 CSS 选择器笔误 business-term-field, → .business-term-field,。

效果：日期输入框与「无固定期限」复选框固定在同一排，日期框更紧凑。

营业期限校验提示改为中文

用户截图反馈：「营业期限」空值校验提示为英文 businessEndDate is required。

根因：el-form-item 的 :required 属性会在内部追加一条默认英文 required 规则，优先于自定义 validator，导致提示英文。

改动（src/views/vehicle/customer-archive.vue）：

• el-form-item 保留 :required="archiveForm.businessTermType === '固定期限'"（用于红色星号）。
• 新增 item 级动态规则 :rules="businessEndDateRules"，computed 返回：
  • 固定期限 → [{ required: true, message: '请选择营业期限截止日', trigger: 'change' }]
  • 长期 → []
• 移除 data 中 form-level 的 businessEndDate 规则及不再使用的 validateBusinessEndDate 函数。

效果：固定期限且未选日期时，提示统一为中文「请选择营业期限截止日」；长期时自动跳过该校验。

地址「详细地址」输入框宽度撑满

用户截图反馈：工商信息「地址」里「请输入详细地址」输入框太短，希望宽度 100% 并与右侧对齐。

改动（src/views/vehicle/customer-archive.vue）：

• .archive-form__address 样式拆分：
  • el-cascader 保持固定 250px。
  • el-input 改为 flex:1; width:100%; min-width:0，自动占满剩余空间并对齐右侧。
• 移除 el-input 上冗余的 style="width: 100%"。

效果：省市区级联选择器保持 250px，详细地址输入框自动延伸至该 form-item 内容区右边缘。

Tabs 区域卡片化（业务明细）

用户截图反馈：弹窗内 tabs（评分表/联系人/收款信息/发票信息）标签头裸露在灰底上，需要整体包进白底卡片。

改动（src/views/vehicle/customer-archive.vue）：

• <el-tabs> 外层包裹 <section-card title="业务明细">，使 tabs 标签头与内容统一在一张白底卡片内，与上方工商/联系/财务/其他信息分组视觉一致。

客商档案弹窗标题去掉蓝色竖条

用户截图标注「新增客商档案」弹窗标题左侧的 4px 主色竖条不要了。

• 第一次尝试在 scoped 样式里用 :deep(.el-dialog__title::before){display:none} 未生效，因为该 el-dialog 开启了 append-to-body，DOM 被 teleport 到 body，scoped 样式挂不上。
• 最终方案：在 customer-archive.vue 末尾新增一个非 scoped 的 <style lang="scss"> 块，写全局规则：

  .archive-dialog .el-dialog__title::before {
    display: none;
  }
  

• 后续用户要求「应用到全部的弹窗」，改为全局移除：编辑 src/styles/element-ui.scss，把竖条共享规则 .el-dialog__title:not(:empty)::before, .dialog-section-title::before 拆开，仅保留 .dialog-section-title::before（分组标题仍带竖条），.el-dialog__title 不再有竖条。同时删除了 customer-archive.vue 末尾的特例 <style> 块。
• 注意：这与 AGENTS.md 4.8「新增/编辑弹窗标题左侧必须展示 4px 主色竖条」规范冲突，按用户决策已全局移除弹窗主标题竖条；如需恢复，把 .el-dialog__title 加回共享规则即可。

评分量化表弹窗边距与客商管理对齐

用户截图标注：新增/编辑评分量化表弹窗左右边距比客商管理编辑弹窗宽，要求统一。

• 根因：.score-config 容器多设了 padding: 4px 12px 12px，叠加全局 el-dialog__body { padding: 16px } 导致总左右边距 28px（客商仅 16px）。
• 修复：移除 .score-config 的 padding 属性（src/views/vehicle/credit-score-quantification.vue），弹窗内容区复用全局统一的 16px 边距。

编辑弹窗风格统一（按 customer-archive 定稿对齐）

用户要求把 customer-archive.vue 定稿的 .archive-form 风格（label 固定宽 calc(6em+24px) 折行 + 控件 250px + section-card 分组白卡 + 弹窗灰底）复制到其它手写编辑弹窗。已处理：

1. credit-score-quantification.vue（最掉队）：4 个弹窗（评分量化表主配置 / 类目详情 / 评分项目详情 / 评估标准设置）原来用手写 .section-title 分区、未用 section-card、无 tabs。已重构为 4 张 <section-card> 分组白卡（标题带 4px 主色竖条），configBox 主表单 + standardBox 评估标准表单应用 .archive-form（本文件 scoped 内新增该样式，从 customer-archive 复制），按钮保持 plain 描边；删除了废弃的 .base-form / .section-head / .section-title / .standard-head 手写标题样式；.score-config 去掉多余 padding 复用全局 16px 边距。
2. driver.vue / vehicle.vue / ship.vue：三个档案弹窗已用 section-card + el-col 多列布局。仅给 driver-form / vehicle-form / ship-form 追加 archive-form class（原 form 的 :deep(.el-input){width:100%} 特异性低于 archive-form 的 :deep(.el-form-item__content > .el-input){width:250px}，被安全覆盖；label 带 !important）。弹窗内无子表格"添加"按钮，footer 保存已是 primary 实心（符合规范）。
3. loading-manage.vue：配载单编辑弹窗 loading-manage-dialog__form 追加 archive-form（该 class 无独立 style，不冲突）。
4. waybill-import-dialog.vue：新建导入弹窗 el-form 追加 archive-form。
5. common-route.vue：三个弹窗均为查询/导入/地图选择类（无信息编辑表单），且按钮风格（主按钮 primary 实心、辅助 plain）已符合规范，未做结构改动。
6. business-crud-page.vue：已在 scoped style 开头用组合选择器一次性注入 .archive-form 同款样式（label 固定宽折行 + 控件 250px），覆盖其 6 个主表单 class：__task-form / __freight-form / __module-form / __dispatch-item-form / __match-form / __transport-plan-import-form（__billing-form-row 仅是 div 行容器，非表单，未包含）。这是核心通用组件，影响所有引用它的业务编辑弹窗，已按"全按对齐"指令执行；纯样式增强、不破坏功能，建议刷新各业务页回归验证。

注意：.archive-form 的关键样式（label 固定宽折行 + 控件 250px）是 scoped 的，复制到新文件时必须在该文件 scoped 内重新定义，不能只挂 class（除非全局化）。

弹窗灰底间距全站统一 + 表单间距放宽 + common-route 输入框对齐

全局 src/styles/element-ui.scss 连续改动（针对截图反馈"新增弹窗太挤"）：

1. 灰底间距全站 8px：.el-dialog__body { padding: 8px !important }（加 !important 覆盖 Avue 内部默认 padding，影响所有弹窗含 Avue CRUD 与手写 el-dialog）。
2. 按钮放进白卡：.avue-crud__dialog .avue-dialog__footer 加 border-radius: 0 0 6px 6px + 同白卡 box-shadow + padding: 16px 24px + margin-top:0，与上方 .avue-form 白卡视觉合一（取消/保存等按钮现在在卡片底部内侧）。.avue-form 同步加 margin-bottom:0。
3. 表单间距放宽对齐 customer-archive：.avue-form 白卡内边距 16px → 24px；.el-dialog .el-form-item 上下间距 16px → 20px（含全 size 覆盖规则）；分组标题/内容内边距 14px 16px → 16px 24px。
4. common-route 输入框宽度对齐 customer-archive：
   • src/option/business/common-route.js：export const option = createCrudOption([...]) 改为 { ...createCrudOption([...]), dialogCustomClass: 'avue-dialog--common-route' }，给 Avue 自动编辑弹窗挂自定义 class（Avue 支持 dialogCustomClass，渲染在 .avue-dialog 根元素）。
   • src/styles/element-ui.scss 新增 .avue-dialog--common-route 规则：label width: calc(6em+24px) !important 折行 + 控件 .el-input/.el-select/.el-cascader/.el-input-number/.el-date-editor 固定 width: 250px。textarea（备注）不设固定宽，保持 100% 撑满（与 customer-archive 一致）。地址 formslot（.common-route-page__route-address flex 布局）因中间多了一层 div，不被 .el-form-item__content > .el-input 命中，保持原样。

注意：common-route 编辑弹窗字段是 span 12（两列），250px 输入框在两列下右侧会留白——这是用户"和 customer-archive 对齐"的明确要求，如需紧凑可改列布局或加大输入框宽。