From 899a8c1c2b7c520c8d68eebf9acc7126f459c9c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Wed, 26 Aug 2026 11:59:49 +0800 Subject: [PATCH] =?UTF-8?q?style(payment):=20=E4=BC=98=E5=8C=96=E7=A5=A8?= =?UTF-8?q?=E6=8D=AE=E6=90=9C=E7=B4=A2=E6=9D=A1=E4=BB=B6=E4=BA=A4=E4=BA=92?= =?UTF-8?q?=E5=92=8C=E6=A0=87=E7=AD=BE=E5=AE=BD=E5=BA=A6=E7=BB=9F=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 票据账册搜索改用 el-check-tag 实现快捷筛选,提升用户交互体验 - 查询按钮增加图标,重置按钮同样添加图标及文字说明 - 调整票据搜索表单标签宽度由160px统一为88px,优化界面一致性 - 全站多处搜索栏表单标签宽度由160px改为88px,涵盖多页面及组件 - 修复业务组件内el-autocomplete输入框宽度适配,避免placeholder被裁剪 - 业务页面货物名称表格列宽由150调整为240,改善显示效果 - 修正系统部门操作列宽度避免按钮竖排溢出问题 - 修改多个表单页和搜索板块样式,确保标签宽度和对齐一致 - 调整表单按钮等样式,提升整体页面美观性和操作友好度 --- .workbuddy/memory/2026-08-26.md | 54 +++++++++++ src/styles/element-ui.scss | 5 + .../components/business-crud-page.vue | 2 +- src/views/business/contract-manage.vue | 4 +- src/views/business/master-order.vue | 2 +- src/views/business/temporary-credit-limit.vue | 1 - src/views/business/voucher-manage.vue | 6 +- src/views/payment/bill-payment-form.vue | 7 +- .../payment/components/bill-ledger-search.vue | 92 ++++++++++++------- .../components/bill-payment-search.vue | 2 +- src/views/payment/invoice-application.vue | 8 +- src/views/payment/invoice-receipt.vue | 2 +- src/views/payment/payment-application.vue | 2 +- src/views/payment/receipt-claim-record.vue | 4 +- src/views/payment/receipt-flow.vue | 2 +- .../components/formal-settlement-editor.vue | 6 +- .../transport-reconciliation-editor.vue | 2 +- src/views/settlement/formal-settlement.vue | 2 +- src/views/settlement/pre-settlement.vue | 2 +- .../settlement/receivable-payable-detail.vue | 3 +- .../settlement/settlement-adjustment.vue | 2 +- .../settlement/transport-reconciliation.vue | 2 +- src/views/system/dept.vue | 14 ++- src/views/system/param.vue | 18 +++- src/views/system/user.vue | 2 +- src/views/transit/exception-disposal.vue | 4 +- src/views/transit/risk-disposal.vue | 2 +- .../vehicle/credit-score-quantification.vue | 1 - vite.config.mjs | 26 +++--- 29 files changed, 193 insertions(+), 86 deletions(-) create mode 100644 .workbuddy/memory/2026-08-26.md diff --git a/.workbuddy/memory/2026-08-26.md b/.workbuddy/memory/2026-08-26.md new file mode 100644 index 0000000..e117978 --- /dev/null +++ b/.workbuddy/memory/2026-08-26.md @@ -0,0 +1,54 @@ +# 2026-08-26 + +## el-table 内嵌 el-autocomplete 撑满列宽(全局规则补充) + +**问题**: `business/transport-plan/form?mode=add` 独立表单页"货物信息"表格, +「货物名称」列 placeholder `请输入货物名称` 只显示 `请输入货物名…`。 + +**根因**: `element-ui.scss` 兜底规则只覆盖 `.el-input`,而 `` 在 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 列一致)。 + +其它内嵌 `` / `` / `` 不受影响(选择器依旧命中), +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 走 ``(Avue),所以 label 是 88px。 +- 但是项目里有 18 个文件,22 处直接手写 ``,不走 `.avue-crud__search`, + 视觉就是 160px。这些都是**搜索/筛选** ``(顶层 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)。 diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index a798ad6..9289173 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -660,13 +660,18 @@ // 全站统一:el-table 表格列内嵌控件默认拉满 cell(不撞表头) // 适用场景:可编辑表、弹窗内表格(如 pre-settlement-editor 结算明细调整、transport-reconciliation/formal-settlement/settlement-adjustment editor 等)。 // 排除 .el-form-item__content 上下文,与表单内 250px 规则互不冲突。 +// 注意:el-autocomplete 根节点是 .el-autocomplete 包装层,内部才是 .el-input, +// 直接选 .el-input 会被包装层阻断导致 input 收缩、placeholder 被截断。 .el-table .el-table__body td.el-table__cell .cell > .el-input-number, .el-table .el-table__body td.el-table__cell .cell > .el-input, .el-table .el-table__body td.el-table__cell .cell > .el-select, .el-table .el-table__body td.el-table__cell .cell > .el-date-editor, .el-table .el-table__body td.el-table__cell .cell > .el-cascader, +.el-table .el-table__body td.el-table__cell .cell > .el-autocomplete, +.el-table .el-table__body td.el-table__cell .cell > .el-autocomplete > .el-input, .el-table .el-table__body td.el-table__cell .cell > .el-input-number .el-input__wrapper, .el-table .el-table__body td.el-table__cell .cell > .el-select .el-select__wrapper, +.el-table .el-table__body td.el-table__cell .cell > .el-autocomplete .el-input__wrapper, .el-table .el-table__body td.el-table__cell .cell > .el-date-editor.el-input, .el-table .el-table__body td.el-table__cell .cell > .el-date-editor.el-input .el-input__wrapper { width: 100%; diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue index ab42792..4aeb52f 100644 --- a/src/views/business/components/business-crud-page.vue +++ b/src/views/business/components/business-crud-page.vue @@ -1517,7 +1517,7 @@ empty-text="暂无货物信息" > - +