gxwebsoft
84c46b9312
- 规范 master-order-editor.vue 底栏按钮类型及排序，按钮层级清晰 - 调整 payment-application-form.vue 底栏按钮样式为右对齐并浮动底部 - 统一 invoice-application/receipt-form 页底栏按钮顺序，返回按钮置首 - 所有相关表单页按钮底栏统一采用 sticky 浮动，背景及阴影样式一致 - 修复多个页面按钮缺少 plain 样式导致视觉层级不明 - 按钮间距统一为 12px，底栏内边距调整为 12px 24px - 调整多个表单页面按钮组从居中对齐改为右对齐，提升操作一致性 - 保留弹窗 footer 按钮布局，不影响各页面独立弹窗交互体验
293 lines
16 KiB
Markdown
293 lines
16 KiB
Markdown
# 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（保留），个别特殊分组 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 表头背景色」之后追加规则：
|
||
```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` 复用的 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、返回挪到保存前面」，但当时没动 同步 的位置、没改居中/浮动，所以用户仍觉得没统一。本次彻底对齐。
|