Files

T

gxwebsoft bfb8659cd8 style(project-apply): 统一弹窗和独立表单底栏按钮风格

- 统一「保存+提交+返回」按钮的视觉层级和排序
- 按次要（默认）、中间（primary plain）、主操作（primary）三档区分按钮样式
- 调整按钮顺序为「辅助→返回/取消→保存草稿→提交」，主操作始终最右
- 修改project-apply、invoice-receipt-form、invoice-application-form三个页面的按钮实现
- 在 MEMORY.md 中新增底栏按钮统一规则说明
- 保留已合规页面按钮风格，避免重复修改

2026-08-26 18:05:58 +08:00

8.2 KiB

Raw Blame History

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 写法标准。

8.2 KiB Raw Blame History Unescape Escape