gxwebsoft
2acdcb08a9
- 将所有弹窗及独立表单页中的“返回”按钮文案统一改为“取消” - 独立表单页footer的Avue提交与清空按钮去除内置图标，仅保留文字显示 - 更新相关页面和组件按钮文案，包括业务表单、支付表单、客户档案等 - 规范底部操作栏按钮顺序及样式，确保主次操作区分明显 - 修复部分组件页脚按钮文案，保持全站一致性
98 lines
8.6 KiB
Markdown
98 lines
8.6 KiB
Markdown
# 项目长期记忆（tms-erp-web-ws / Saber3 客商模块）
|
||
|
||
## 设计约定（已确认）
|
||
|
||
### 弹窗分组：统一用全局 `<section-card>`
|
||
- 弹窗 body 背景由 `src/styles/element-ui.scss` 全局 `.el-dialog__body { background:#f5f6fa; padding:16px }` 统一灰底。
|
||
- 每组 = 白底卡片：4px 主色竖条 + 8px 间距 + 圆角 6px + 淡阴影。组件全局注册 `<section-card title="...">`，支持 `#title` / `#extra` slot。
|
||
- 仅 3 项的小分组用 `el-col :span="8"` 均分一行。
|
||
|
||
### Avue 内置弹窗用 section-card：dialogCustomClass 透明化 avue-form
|
||
- option 顶层加 `dialogCustomClass:'xxx-dialog'`，再在 `element-ui.scss` 写三条：
|
||
1. `.xxx-dialog .avue-form { background:transparent; box-shadow:none; padding:0 }`
|
||
2. `.xxx-dialog .avue-form__group > .el-col > .el-form-item { margin-bottom:0 }`
|
||
3. `.xxx-dialog .avue-dialog__footer, .avue-crud__dialog .xxx-dialog .avue-dialog__footer { margin-top:0 !important }`
|
||
|
||
### 弹窗底部操作栏浮动（全局 CSS）
|
||
- `.el-dialog__body { max-height:calc(100vh - 200px); overflow-y:auto; overflow-x:hidden }`
|
||
- `.el-dialog__footer { margin:0; padding:12px 20px; background:#fff; border-top:1px solid #ebeef5; box-shadow:0 -2px 8px rgba(0,0,0,.04) }`
|
||
- Avue 内置弹窗 footer 真实 class 是 `.avue-dialog__footer`，须 `position:sticky; bottom:0; flex:none; background:#fff` 贴底。
|
||
|
||
### 上传证件区域尺寸（transportCapacity）
|
||
- 身份证/行驶证/道路运输证等固定 **240×151px**（1.586:1）。
|
||
- scoped 覆盖 `.xxx-uploader--large { width:240px }` 与 `--large .el-upload { width:100%; height:151px }`。
|
||
|
||
### 上传图片点击放大预览
|
||
- `src/components/image-upload-field/main.vue` 用 `<el-image preview-src-list fit="contain" preview-teleported :z-index="3000" @click.stop>`，阻止冒泡到 el-upload。
|
||
|
||
### 独立表单页标题 `archive-page-form__title`
|
||
- 样式全局化到 `src/styles/element-ui.scss`：18px/600/#303133 + margin-bottom:20px + 4px 主色竖条 + 8px 间距。
|
||
- business-crud-page 系列通过 `formPageTitle` prop 注入；loading-manage / master-order 手写前置标题。
|
||
|
||
### 表格列内嵌输入控件全宽
|
||
- `element-ui.scss` 全局兜底：`.el-table .el-table__body td.el-table__cell .cell > .el-input-number/.el-input/.el-select/.el-date-editor/.el-cascader { width:100% }`。
|
||
|
||
### 业务状态标签文字化
|
||
- 全站"状态语义"的 `el-tag` 加 `class="status-text"`，转为普通文字，不带颜色/背景/边框/圆点。
|
||
- 实现：`element-ui.scss` 末尾 `.el-tag.status-text { ... }`。
|
||
|
||
### 弹窗 / 独立表单页底栏按钮统一规则
|
||
- **排序**：从左到右按次→主排（次要居左、主操作居右），主操作永远放最后。
|
||
- 顺序模板：`[可选辅助工具(如同步/导入)][取消][保存草稿][提交/确认]`
|
||
- **容器布局**：`display:flex; justify-content:flex-end; gap:12px;`。弹窗关闭按钮继承 Element Plus 自带 `.el-dialog__footer` 全局规则（见上条），独立页用 `.archive-form__footer` 配 `.archive-page-form & { position:fixed; right:0; left:230px; bottom:0; z-index:10; margin:0; padding:12px 24px; border-top:1px solid #eff1f7; background:#fff; box-shadow:0 -2px 8px rgba(0,0,0,.06); }`。
|
||
- **⚠️ 浮动底部必须用 `position:fixed`，不能用 `position:sticky`**：本项目布局 `.app-main` / `.basic-container` 祖先带 `overflow:hidden`，会导致 `sticky` 永不触发（footer 不吸底）。固定写法照搬 customer-archive：
|
||
```scss
|
||
.xxx-actions {
|
||
position: fixed; right: 0; left: 230px; bottom: 0; margin: 0; z-index: 10;
|
||
/* flex-end + padding + border-top + 白底 + 上投影 */
|
||
}
|
||
:global(.avue--collapse .xxx-actions) { left: 60px; } /* 侧栏折叠 */
|
||
:global(.avue-layout--horizontal .xxx-actions) { left: 0; } /* 横向布局 */
|
||
```
|
||
注意 `:global()` 要把「整个选择器」包进去（customer-archive 写法），不要只包前缀，否则 scoped 会在中间选择器上追加 data 属性导致不匹配。
|
||
- **颜色层级 3 档**：
|
||
| 语义 | type | 备注 |
|
||
| --- | --- | --- |
|
||
| 次要（取消 / 关闭） | 不写 type（默认） | 灰描边 |
|
||
- **全站底部操作栏「返回」已统一改为「取消」**：独立表单页返回列表、弹窗关闭、主从编辑器返回等场景一律写「取消」；仅只读查看 / 纯关闭场景保留「关闭」。
|
||
| 中间步骤（保存草稿 / 按匹配结果更新） | `type="primary" plain` | 蓝描边 |
|
||
| 主操作（提交 / 完成对账 / 复评确认） | `type="primary"` | 蓝实心 |
|
||
- **禁区**：
|
||
- 保存草稿和主操作不允许同为 `type="primary"`，否则两个蓝实心无视觉层级。
|
||
- 主操作禁止用 `type="success"`（绿）。全站统一深蓝实心。
|
||
- **生效页面（已按规则统一）**：
|
||
- `business/project-apply.vue`（footer + 变更 footer）
|
||
- `vehicle/customer-archive.vue` 全部 5 处 footer（`archive-form__footer` 主表单页 + `contact-dialog`/`receipt-dialog`/`invoice-dialog` 子弹窗 + `score-detail-dialog` 含总分合计）
|
||
- `business/components/business-crud-page.vue` 的 PageAvueForm 独立表单页（`#menu-form-before` slot 新增 `取消` 按钮，shipping-template 模式验证通过；影响 `/business/waybill-manage/form`、`/business/transport-plan/form`、`/business/shipping-template/form` 三处独立表单页）
|
||
- `business/components/master-order-editor.vue` 主 `<footer>`（取消 default + 暂存/确认创建 plain + 创建并调度 primary；`position:fixed` 浮动，含 `avue--collapse`/`avue-layout--horizontal` 左偏移）
|
||
- **payment 模块**表单页（`__actions` 均 `flex-end` + `position:fixed` 浮动，含 `avue--collapse`/`avue-layout--horizontal` 左偏移）：
|
||
- `payment-application-form.vue`（`[取消][保存 plain][提交]`）
|
||
- `invoice-application-form.vue` / `invoice-receipt-form.vue`（`[取消][同步 plain][保存 plain][提交]`）
|
||
- `bill-ledger-form.vue`（`[取消][确认 primary]`）
|
||
- `bill-payment-form.vue`（`[取消][保存 plain][提交]`）
|
||
- `receipt-flow-form.vue`（`[取消][确认 primary]`）
|
||
- `receipt-claim-record-form.vue`（单「关闭」按钮，居中→右对齐浮动）
|
||
- **settlement 模块**：
|
||
- `settlement/components/pre-settlement-editor.vue`（弹窗 + pageMode 两处 footer：保存加 `plain`；`&__page-actions` 加 `position:fixed` 浮动，含 `avue--collapse`/`avue-layout--horizontal` 左偏移）
|
||
- `settlement/components/formal-settlement-editor.vue`（`.formal-editor__page-actions` 加 `position:fixed` 浮动，含 `avue--collapse`/`avue-layout--horizontal` 左偏移；按钮已 `[取消][提交]` 合规）
|
||
- `settlement/receivable-payable-detail.vue`（生成费用弹窗「上一步」改 `plain`）
|
||
- **已合规未动**：`settlement/components/transport-reconciliation-editor.vue`（`[取消][保存草稿 plain][按匹配结果更新账单 plain][完成对账 primary]`）、`settlement/components/settlement-adjustment-editor.vue`（弹窗 `[取消][保存 primary]`）、`business/temporary-credit-limit.vue`。
|
||
- **Avue-form footer 结构注意**：`#menu-form-before` slot 内容在 Avue 内置按钮之**左**；`#menu-form` slot 在 Avue 内置按钮之**右**。要实现 `[次要][Avue 主操作]` 顺序，把次要按钮放进 `#menu-form-before`，主操作保留 Avue 内置即可。
|
||
- **Avue 表单 footer 按钮去图标（统一纯文字）**：Avue 的 `avue-form` 提交/清空按钮内置图标（`submitIcon: 'el-icon-check'`、`emptyIcon: 'el-icon-delete'`），且 Avue 源码用 `|| 'el-icon-xxx'` 兜底，无法通过 option 配置去掉。已在 `business-crud-page.vue` 样式里用 `:global(.business-crud-form-page-dialog .avue-form__menu .el-icon){display:none}` 统一隐藏，仅作用于独立表单页（PageAvueForm 容器），不影响其它弹窗。新增/编辑弹窗内的 Avue 表单若也要去图标，复用此选择器即可。
|
||
- **复杂 footer 例外**：当 footer 需要在按钮组左侧展示「总分合计 / 数量统计」等聚合信息时，块用 `flex:1` 推自己到最左，按钮组按上述规则排在右半边（参考 `score-detail-dialog`）。
|
||
|
||
## 关键文件
|
||
- `src/components/section-card/main.vue`
|
||
- `src/styles/element-ui.scss`
|
||
- `src/views/vehicle/customer-archive.vue`
|
||
- `src/views/transportCapacity/{driver,vehicle,ship}.vue`
|
||
- `src/views/business/project-apply.vue`
|
||
|
||
## 环境注意
|
||
- Vite 代理跨域：`axios.withCredentials=true`，改 `.env`/`vite.config.mjs` 须重启 dev。
|
||
|
||
## business-crud-page 复用模式
|
||
- option 由 prop `crudOption` 经 `cloneOption` 克隆。
|
||
- 独立表单页走 `PageAvueForm`，不包 el-dialog。
|
||
- 自定义详情弹窗：`config.detailButton=true` + `detailSections:[{title, fields}]`。
|