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

2026-08-26

el-table 内嵌 el-autocomplete 撑满列宽(全局规则补充)

问题: business/transport-plan/form?mode=add 独立表单页"货物信息"表格, 「货物名称」列 placeholder 请输入货物名称 只显示 请输入货物名…。

根因: element-ui.scss 兜底规则只覆盖 .el-input,而 <el-autocomplete> 在 Element Plus 中 根节点是 .el-autocomplete 包装层,内部才是 .el-input,中间多了一层导致选择器不命中, autocomplete 没有拉满 cell,placeholder 被内边距 / clear 图标挤压截断。

修复:

• src/styles/element-ui.scss 第 663 行兜底规则追加:
  • .cell > .el-autocomplete width:100%
  • .cell > .el-autocomplete > .el-input width:100%
  • .cell > .el-autocomplete .el-input__wrapper width:100%
• src/views/business/components/business-crud-page.vue:1520 独立表单页 "货物名称"列 min-width="150" → 240(与 1544 行「货物类型」cascader 列一致)。

其它内嵌 <el-select> / <el-input> / <el-cascader> 不受影响(选择器依旧命中), 3626 行(调度明细「货物名称」用的是 el-select)未做改动。

全站搜索栏 label 宽度统一 88px

问题: 主人反馈 business/master-order 搜索区 label 宽度 160px,要求全站统一改成 88px, 参考 business/shipping-template(已经是 88px)。

调研:

• src/styles/element-ui.scss:133-136 已有 .avue-crud__search .el-form-item__label { min-width: 88px; }, 全站 Avue 自动搜索栏视觉上就是 88px。
• shipping-template 走 <business-crud-page>(Avue),所以 label 是 88px。
• 但是项目里有 18 个文件,22 处直接手写 <el-form ... label-width="160px">,不走 .avue-crud__search, 视觉就是 160px。这些都是搜索/筛选 <el-form>(顶层 query 或子表单),不是表单 dialog 内填表。

改动: 全部 22 处 label-width="160px" → label-width="88px"。

涉及文件:

• business: master-order.vue, voucher-manage.vue(3 处), loading-manage.vue
• payment: invoice-application, invoice-receipt, receipt-flow, receipt-claim-record, payment-application, components/bill-ledger-search, components/bill-payment-search
• settlement: settlement-adjustment, receivable-payable-detail, pre-settlement, formal-settlement, transport-reconciliation, components/transport-reconciliation-editor, components/formal-settlement-editor(3 处,都是子筛选)
• transit: risk-disposal, exception-disposal

遗漏补丁: transit/exception-disposal.vue 搜索区不走 Avue,而是在 scoped 样式里用 :deep(.el-form-item__label) { min-width: 160px } 写死,盖过了全局 88px。 已改为 min-width: 88px(文件第 443 行)。risk-disposal.vue 无此 scoped 覆盖,本来就是 88px。

未做改动: 表单 dialog 内填写项(shipping-template-dialog / transport-plan-dialog / waybill-manage-dialog 等)走专门的 dialogCustomClass + labelWidth:100, 不受本规则影响。 其余残留 160px 均非搜索栏: project-apply.vue:2095(表单详情弹窗 label,故意留 6 汉字)、 customer-archive.vue:4980(按钮 min-width)、cargo-type.vue:604(选择器拼错不生效,设 50px)。

payment-application 表单 input 文字居左

• src/views/payment/payment-application-form.vue：追加 scoped 样式，使 el-input-number 的输入文字居左对齐（付款比例、申请付款金额等数字字段），与 bill-ledger-form 保持一致。

正式结算查看页去除内容行高

问题: settlement/formal-settlement/form?mode=view 中只读字段（如项目名称、合同名称） 多行文本行高过大，Element Plus 默认 .el-form-item__content 的 line-height 导致显示松散。

修复: src/views/settlement/components/formal-settlement-editor.vue scoped 样式追加:

.formal-editor :deep(.el-form-item__content) {
  line-height: normal;
}

全站表单项间距统一 14px

诉求: settlement/pre-settlement/form?mode=add 中 .el-form-item 间距偏大，要求统一为 14px 且全站一致（用户指"表单项间距"）。

排查: 全站 .el-form-item 的 margin-bottom 取值不一致——表单填写区有 16px / 18px / 20px， 搜索栏统一 8px（保留），个别特殊分组 28px（risk-disposal，保留）。全局 .el-form-item--default 已是 14px，但各页面 scoped :deep(.xxx .el-form-item) 覆盖成了 16/18/20px。

改动（表单填写区统一 14px，16/18/20 → 14）:

• settlement: components/pre-settlement-editor.vue:1637(16→14)、 components/formal-settlement-editor.vue:1560(16→14)、 receivable-payable-detail.vue:1860(16→14)、 components/transport-reconciliation-editor.vue:805(16→14)、 components/settlement-adjustment-editor.vue:560(16→14)
• business: voucher-manage.vue:1022(16→14)、loading-manage.vue:2751(16→14)、 project-apply.vue:2091(16→14)、contract-manage.vue:2253(16→14)、 components/business-crud-page.vue:13380/13894(16→14)、 components/master-order-dispatch.vue:700(16→14)
• payment: invoice-receipt-form.vue:755(16→14)、user.vue:1097(16→14)、 bill-ledger-form.vue:564(16→14)、payment-application-form.vue:1324(16→14)、 bill-payment-form.vue:382(16→14)
• 全局: components/cron-editor/main.vue:579(18→14)、 styles/element-ui.scss:430(.dialog-form--carded 20→14)

保留未动: 所有 __search 搜索栏的 8px、risk-disposal 的 28px 特殊分组、transportCapacity vehicle/driver/ship 与 customer-archive 等本就是 14px（含 !important）。

project-apply 表头颜色在不同电脑不一致

问题: 客户反馈 business/project-apply/form?mode=add 页面中「客户信息」等表格表头颜色 在用户电脑是 #374151，客户电脑是 #909399。

根因:

• src/styles/theme/go.scss 中 .theme-go .el-table tr th .cell { color: #374151 } 把表头文字写死为 #374151。
• 客户电脑未使用 theme-go，表头文字走 Element Plus 默认 CSS 变量 --el-table-header-text-color: #909399。
• src/views/business/project-apply.vue 里的 :deep(.el-table__header th) { color: #303133 } 只作用在 th 上，颜色靠继承，优先级敌不过直接写在 .cell 上的规则和 Element Plus 默认值， 所以实际没生效。

修复:

• src/styles/element-ui.scss 在「统一全站 el-table 表头背景色」之后追加规则：

  .el-table .el-table__header-wrapper th.el-table__cell .cell {
    color: #374151;
  }
  

  直接作用于 .cell，特异性高于 theme-go 和 Element Plus 默认，全站统一为 #374151。
• src/views/business/project-apply.vue 清理两处与全局冲突且不生效的局部表头样式： 删除 background: #f5f7fa; color: #303133;，保留 font-weight: 600， 选择器改为 :deep(.el-table__header th .cell)。

弹窗 / 独立表单页底栏「保存+提交+返回」按钮统一风格

问题: 主人截图 business/project-apply/form?mode=add 页面底部 [保存][提交][返回] 三个按钮，

• 保存 + 提交 都是 type="primary" 蓝实心，视觉层级无区分。
• 排序「主→主→次」，主操作不靠右，与全站其它页面（business-crud-page 等）已用的「次→中→主」不一致。

修复: 统一定 3 档层级 + 「次→中→主」排序。

语义	写法
次要（返回/取消）	默认（无 type）灰描边
中间步骤（保存草稿）	type="primary" plain 蓝描边
主操作（提交）	type="primary" 蓝实心

排序模板：[可选辅助(如同步)][返回/取消][保存草稿][提交]，主操作永远最右。

改动文件:

• business/project-apply.vue:617-651 — 主 footer + 变更 footer 都重排，保存 加 plain。
• payment/invoice-receipt-form.vue:242-252 — 保存加 plain，返回挪到保存前面。
• payment/invoice-application-form.vue:419-429 — 同上。

未改动（已合规）:

• settlement/components/pre-settlement-editor.vue — 默认已是「默认保存 + primary 提交」。
• settlement/components/transport-reconciliation-editor.vue — 两个 plain 中间步骤 + 完成对账 实心，层级清晰。

沉淀: MEMORY.md 新增「弹窗 / 独立表单页底栏按钮统一规则」一节，作为新页面 footer 写法标准。

customer-archive 全部 footer 同步按新增项目模块标准对齐

问题: 主人指出客户档案页面 /vehicle/customer-archive/form?name=新增客商档案 没有按统一规则调整， 并明确要求「浮动页面底部、按钮区域靠右对齐，返回在第一个，中间的用浅蓝色，最后一个是 primary 深蓝色」， 参考新增项目模块 /business/project-apply/form?mode=add。

customer-archive.vue 共 5 处 footer 改动

• archive-form__footer (802-809) 原状「取消/返回 + 保存 primary + 提交 success 绿」混合 4 按钮。改为 [返回/取消/关闭] + 保存 plain + 提交 primary，并删掉「success 绿」换成 primary 深蓝。
• contact-dialog (867-870) 原状 [保存 primary][返回]，容器居中。改为 [返回][保存 plain]，容器 flex-end。
• receipt-dialog (965-969) 同上模式。
• invoice-dialog (1085-1089) 同上模式。
• score-detail-dialog (1343-1359) 原状 total 左 + [保存 primary][复评确认 primary][返回]。改为 total 左 + [返回][保存 plain][复评确认 primary]。

customer-archive.vue SCSS 同步

• .contact-dialog__footer-actions justify-content: center 改 flex-end。
• .receipt-dialog__footer-actions 同上。
• .invoice-dialog__footer-actions 同上。
• .archive-form__footer 维持 flex-end 不变（独立页 .archive-page-form & 下 position: fixed 浮动底部已经写好）。

顺序小结（标准模板）

<div class="xxx-dialog__footer-actions">
  <!-- 最左：信息聚合（如总分合计、统计）用 flex:1 自己推 -->
  <!-- 次要：默认描边灰按钮 -->
  <el-button @click="close">返回</el-button>
  <!-- 中间：浅蓝实心 plain -->
  <el-button type="primary" plain @click="saveDraft">保存</el-button>
  <!-- 主操作：蓝实心 -->
  <el-button type="primary" @click="submit">提交</el-button>
</div>

左→右阅读顺序：辅助信息聚合 → 次要 → 中间步骤 → 主操作。视觉权重递增，颜色从「灰 → 蓝描边 → 蓝实心」。

全站 disabled 输入框文字颜色统一

问题: 客户档案编辑页等「不可编辑」状态下，el-input / el-textarea / el-input-number 的文字颜色 在不同电脑显示不一致（有的深、有的浅）。

根因: Element Plus 默认 disabled 文字色由 --el-disabled-text-color 控制，不同主题/浏览器/变量覆盖下可能表现为 #374151 / #606266 / #a8abb2 / #909399 等。

修复: src/styles/element-ui.scss 在表头颜色统一规则后追加：

.el-input.is-disabled .el-input__inner,
.el-textarea.is-disabled .el-textarea__inner,
.el-input-number.is-disabled .el-input__inner {
  color: #a8abb2;
}

直接写死为 #a8abb2，覆盖 Element Plus 默认 CSS 变量及主题差异，保证全站一致。 如需再深，可把 #a8abb2 改为 #606266。

shipping-template 独立表单页「关闭」按钮位置修正

问题: /business/shipping-template/form?mode=add（独立表单页）底部 [提交][关闭] 顺序， 主操作「提交」在左、次要「关闭」在右，与全站「次→主」规则不符。

根因: shipping-template 走 business-crud-page 复用的 PageAvueForm，footer 用的是 Avue-form 内置结构。 Avue-form 内置按钮默认在中间，自定义内容分两侧插槽：

• #menu-form-before slot → 在 Avue 内置按钮之左
• #menu-form slot → 在 Avue 内置按钮之右

之前「关闭」按钮写在 #menu-form slot（在 Avue 内置按钮之右），导致渲染成 [Avue 提交][关闭]，顺序反了。

修复: src/views/business/components/business-crud-page.vue:2059-2090

• 把「关闭」按钮从 #menu-form slot 移到 #menu-form-before slot 的「保存草稿」按钮之前。
• 触发条件 v-if="isStandaloneFormPage && !showTransportPlanCreateActions"，仅独立表单页生效； 弹窗模式（list 页内点新增/编辑）继续走 Avue 自带的 [取消][提交] 不动。
• 「关闭」按钮文字保持默认色（次要），无 type。
• 同步清空 #menu-form slot 中 shipping-template 残留（实际只剩 showTransportPlanCreateActions 块， shipping-template 不会触发，留着不影响）。

最终渲染（独立表单页）:

• 有运费合计 + 草稿：[运费合计][关闭][保存草稿 plain][Avue 提交]
• 仅有运费合计：[运费合计][关闭][Avue 提交]
• 无运费合计：[关闭][Avue 提交]（即主人截图场景）

未触发场景:

• transport-plan / waybill / loading-manage 等其它走 business-crud-page 但未声明 standalone-form-page 的页面， 本次未改。需要时可按相同模式补 slot。

master-order 编辑页底栏按钮统一

问题: /business/master-order?mode=editor（多联总单编辑/新增页）底部按钮没统一。

根因: 编辑页是 master-order.vue 的 mode==='editor' 模板里内嵌 <master-order-editor> 组件， 主 footer 在 src/views/business/components/master-order-editor.vue:534-539。

原状:

[返回 default] [暂存 default] [确认创建 primary] [创建并调度 primary]

• 暂存 无 type，与返回同为灰描边，缺层级
• 确认创建 / 创建并调度 两个都 primary 实心，无视觉优先级
• footer 仅 flex-end + padding:16px 0，不浮动

修复 (master-order-editor.vue):

• 按钮改：[返回 default] [暂存 primary plain] [确认创建 primary plain] [创建并调度 primary] 严格按「返回第一个、中间浅蓝 plain、最后深蓝实心」规则，仅最右一个深蓝。
• footer 样式改浮动底部：position: sticky; bottom:0; z-index:10; background:#fff; border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px。

未动: 页内各 el-dialog 的 footer（线路/地图/常用货物/货物导入等）已是 [关闭 default][确定 primary]， 符合「次→主」规则，无需调整。

payment-application 表单页底栏按钮统一

问题: /payment/payment-application/form?mode=add（付款申请表单页）底部按钮没统一。

根因: 独立表单页 src/views/payment/payment-application-form.vue 的 .payment-form-page__actions footer（330 行）。

原状:

justify-content: center（居中）
[返回 default] [保存 default（缺 plain）] [提交 primary]

• 保存 无 type，与返回同为灰描边，缺层级
• footer 居中且不浮动

修复 (payment-application-form.vue):

• 按钮：[返回 default] [保存 primary plain] [提交 primary]，仅最后深蓝。
• footer 样式：justify-content: center → flex-end；加 position: sticky; bottom:0; z-index:10; background:#fff; border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px。

未动: payment-application.vue（list 表格页，无独立 footer）；invoice-application-form.vue / invoice-receipt-form.vue 上一轮已改。

invoice-application / invoice-receipt 表单页底栏按钮统一

问题: /payment/invoice-application/form?mode=add 底部按钮没统一（用户反馈）。排查发现同族 invoice-receipt-form.vue 完全同款问题，一并修了。

根因: 两个发票表单页 footer 都是 [同步 plain][返回 default][保存 plain][提交 primary] + justify-content: center（居中），且未浮动。

• 同步 在 返回 之前，违反「返回在第一个」
• footer 居中，不靠右、不浮动

修复（invoice-application-form.vue 419-433 + 980；invoice-receipt-form.vue 242-256 + 777）：

• 按钮重排为 [返回 default][同步 plain][保存 plain][提交 primary]，返回置首、最后仅提交深蓝。
• footer 样式：justify-content: center → flex-end；加 position: sticky; bottom:0; z-index:10; background:#fff; border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px。

注意: 之前首轮曾把这两个页「保存加 plain、返回挪到保存前面」，但当时没动 同步 的位置、没改居中/浮动，所以用户仍觉得没统一。本次彻底对齐。