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（如"统一社会信用代码"）自动折行。

注意：.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 字段单独成行——待用户确认。