- 统一调整settlement、business、payment模块以及全局样式中.el-form-item的margin-bottom从16/18/20px改为14px - 保留搜索栏相关的.el-form-item间距为8px和特殊分组risk-disposal的28px - 修正多个页面和组件的局部样式覆盖问题,确保填写区表单项间距一致 - 更新element-ui.scss中.dialog-form--carded对应的margin-bottom为14px - 维护部分表单组件原本使用的重要样式不变,保证视觉统一且不影响特殊布局
5.5 KiB
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-autocompletewidth:100%.cell > .el-autocomplete > .el-inputwidth:100%.cell > .el-autocomplete .el-input__wrapperwidth: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--carded20→14)
保留未动: 所有 __search 搜索栏的 8px、risk-disposal 的 28px 特殊分组、transportCapacity
vehicle/driver/ship 与 customer-archive 等本就是 14px(含 !important)。