Files
gxwebsoft 7f70052afd fix(ui): 统一 payment 和 settlement 模块浮动底栏为 fixed 定位
- payment 模块所有表单页底栏按钮顺序及布局全量对齐,取消居中改为右对齐浮动
- settlement 模块弹窗及独立页 footer 添加 sticky 浮动,主操作按钮样式调整为 plain
- 彻底修复浮动底栏不吸底问题,所有相关 footer 由 position: sticky 改为 position: fixed
- 统一 fixed 底栏样式模板,包含左偏移支持侧栏折叠和横向布局切换
- 更新项目文档,明确浮动底栏必须用 fixed 定位,避免 overflow:hidden 祖先导致 sticky 失效
- 清理所有残留 sticky 样式,确保底栏始终固定在视口底部,提升用户体验
2026-08-26 18:49:13 +08:00

344 lines
20 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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 样式追加:
```scss
.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(保留),个别特殊分组 28pxrisk-disposal,保留)。全局 `.el-form-item--default`
已是 14px,但各页面 scoped `:deep(.xxx .el-form-item)` 覆盖成了 16/18/20px。
**改动(表单填写区统一 14px16/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 表头背景色」之后追加规则:
```scss
.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` 浮动底部已经写好)。
### 顺序小结(标准模板)
```vue
<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` 在表头颜色统一规则后追加:
```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` 复用的 PageAvueFormfooter 用的是 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` footer330 行)。
**原状**:
```
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、返回挪到保存前面」,但当时没动 同步 的位置、没改居中/浮动,所以用户仍觉得没统一。本次彻底对齐。
## payment + settlement 模块底栏按钮全量统一
**背景**: 用户要求检查 payment 模块和 settlement 模块下所有页面底栏按钮是否统一。
### payment 模块(表单页 footer
| 文件 | 原状 | 修复 |
| --- | --- | --- |
| `payment/bill-ledger-form.vue` | `[确认 primary][取消 default]` + 居中 | `[取消 default][确认 primary]`footer flex-end + sticky 浮动 |
| `payment/bill-payment-form.vue` | `[保存 primary][提交 primary][取消 default]` | `[取消 default][保存 plain][提交 primary]`footer 加 sticky 浮动(已 flex-end |
| `payment/receipt-flow-form.vue` | `[确认 primary][取消 default]` + 居中(class 误用 `receipt-claim-form-page__actions` | `[取消 default][确认 primary]`footer flex-end + sticky 浮动 |
| `payment/receipt-claim-record-form.vue` | 单「关闭」按钮居中 | footer flex-end + sticky 浮动 |
| (此前已改)invoice/payment-application 各表单页 | — | 已合规 |
### settlement 模块
| 文件 | 原状 | 修复 |
| --- | --- | --- |
| `settlement/components/pre-settlement-editor.vue` | 两处 footer `[取消][保存 default][提交]`(弹窗 + pageMode | 保存加 `type="primary" plain``&__page-actions` 加 sticky 浮动 |
| `settlement/components/formal-settlement-editor.vue` | footer 已 `[取消][提交]` 合规,独立页未浮动 | `.formal-editor__page-actions` 加 sticky 浮动 |
| `settlement/receivable-payable-detail.vue` | 生成费用弹窗 `[取消][上一步 primary][提交 primary]` | 上一步改 `type="primary" plain` |
| (已合规未动)`transport-reconciliation-editor.vue` | `[取消][保存草稿 plain][按匹配结果更新账单 plain][完成对账 primary]` | 已符合次→主 |
| (已合规未动)`settlement-adjustment-editor.vue` | 弹窗 `[取消][保存 primary]` | 合规 |
**注意**: settlement 的 `*_editor.vue` 多为「弹窗(!pageMode) + 独立页(pageMode)」双模式;弹窗 footer 走 `.el-dialog__footer` 全局规则(已右对齐/浮动),仅 pageMode 的 `.xxx__page-actions` 需手动加 sticky。
**注意**: payment 表单页剩余的 `justify-content: center` 全在 `__links` 链接行(非 action footer),属正常布局,未改。
## 浮动底栏根本修复:sticky → fixed
**问题**: 用户反馈 `/settlement/formal-settlement/form?mode=add`「有些页面还没能固定在底部」。
**根因(关键)**: 之前给 9 个独立表单页 footer 写的都是 `position: sticky; bottom:0`,但本项目布局
`.app-main` / `.basic-container` 祖先带 `overflow:hidden`,sticky 的滚动容器判断失效 → footer 永不吸底。
customer-archive 当初就是因此改用 `position:fixed`,且要带侧栏左偏移。
**修复(9 个文件全部 sticky→fixed**:
- `business/components/master-order-editor.vue` `<footer>`2050 行,含 `:global(.avue--collapse footer)`/`horizontal`
- `payment/invoice-receipt-form.vue` / `bill-ledger-form.vue` / `receipt-claim-record-form.vue` /
`payment-application-form.vue` / `bill-payment-form.vue` / `invoice-application-form.vue` / `receipt-flow-form.vue`
各 `__actions`(均加 fixed + `:global(.avue--collapse .xxx)`/`horizontal` 左偏移 60px/0
- `settlement/components/pre-settlement-editor.vue` `&__page-actions`nested,全局覆盖放 style 末尾)
- `settlement/components/formal-settlement-editor.vue` `.formal-editor__page-actions`(上一轮已改 fixed,本轮复核确认)
**统一 fixed 模板**:
```scss
.xxx { position: fixed; right:0; left:230px; bottom:0; margin:0; z-index:10; flex-end + padding + border-top + 白底 + 上投影 }
:global(.avue--collapse .xxx) { left:60px; }
:global(.avue-layout--horizontal .xxx) { left:0; }
```
注意 `:global()` 要包整个选择器(customer-archive 写法),只包前缀会让 scoped 在中间选择器追加 data 属性而不匹配。
**验证**: 全仓 `position: sticky` 已清零(grep 无残留)。