gxwebsoft
ddfd911d2e
- 根据用户反馈，给线路编辑的「起/经/终」圆形徽标分别赋予蓝、橙、绿三种颜色 - 修改 src/views/business/loading-manage.vue，新增 routeTypeClass 和 routeChangeTypeClass 方法区分起始类型 - 模板中应用动态 class，实现不同类型圆点颜色差异 - 调整 scoped 样式，去掉硬编码背景色，添加三个 modifier 分别对应三种颜色 - 将原 route-type 样式多行化，便于嵌套颜色修饰符 - 变更运输路线弹窗与主弹窗样式保持一致，保证全站统一 - 已通过 dev server HMR 验证，刷新后新增/编辑弹窗正常显示颜色区别
125 lines
17 KiB
Markdown
125 lines
17 KiB
Markdown
# 2026-08-14 工作记录
|
||
|
||
## temporary-credit-limit 弹窗 label 固定 6 汉字宽度并换行
|
||
|
||
- 需求：用户反馈 `/business/temporary-credit-limit` 新增弹窗中 label「已使用项目资金使用额度（万元）」过宽（227px），希望超过 6 个汉字就换行。
|
||
|
||
## loading-manage 搜索栏 label 宽度 160→88
|
||
|
||
- 用户要求把 `/business/loading-manage` 页面搜索栏所有 label 宽度从 160px 改为 88px。
|
||
- 改动：`src/views/business/loading-manage.vue` 第 4 行 `<el-form ... label-width="88px">`。
|
||
- 注意事项：AGENTS.md 4.4 节规范"搜索组件 label 宽度统一不小于 160px"，本次按用户指令执行但与项目规范冲突；如后续要恢复规范或全站统一，需要回滚。
|
||
|
||
## shipping-template 弹窗高度改为接近全屏
|
||
|
||
- 用户要求把 `/business/shipping-template` 弹窗高度调到接近全屏（硬编码 200px 安全区太大）。
|
||
- 关键定位：Avue 库内置 `.avue-dialog { max-height: calc(100% - 200px) }` 加在 `el-dialog` 根元素（avue lib `packages/core/components/dialog-form/index4.js:14` `class:"avue-dialog"`）；shipping-template 的 `dialogCustomClass:'shipping-template-dialog'` 合并到同一元素。项目样式（common.scss）在 main.js:24 晚于 Avue css（main.js:12）加载，可覆盖。
|
||
- 改动：`src/styles/element-ui.scss` 的 `.shipping-template-dialog.el-dialog` 规则，由 `margin-top:4vh; margin-bottom:0; height:calc(100vh - 4vh - 24px)` 改为 `margin-top:20px !important; margin-bottom:20px !important; height:calc(100vh - 40px); max-height:calc(100vh - 40px) !important`，用 max-height + !important 压过库内置上限。
|
||
- 注意：仅改 shipping-template 专属规则，未动库内置 `.avue-dialog` 根，也未影响其他弹窗。body/footer 的 flex 分摊规则（474-488 行）保持不变。
|
||
|
||
## transport-plan 弹窗高度也改为接近全屏
|
||
|
||
- 用户要求 `/business/transport-plan` 新增/编辑弹窗同样改为接近全屏（原来固定 max-height: 72vh，内容少时下方留白）。
|
||
- 改动：`src/styles/element-ui.scss` 的 `.transport-plan-dialog.el-dialog` 规则，由 `margin-top:4vh; max-height:72vh` 改为 `margin-top:20px !important; margin-bottom:20px !important; height:calc(100vh - 40px); max-height:calc(100vh - 40px) !important`，与 shipping-template 弹窗完全对齐（压过库内置 `.avue-dialog` 的 max-height: calc(100% - 200px)）。
|
||
- 已确认 `src/option/business/transport-plan.js:607` 有 `dialogCustomClass: 'transport-plan-dialog'`，CSS 生效。body/footer flex 分摊规则（504-520 行）保持不变。
|
||
|
||
## waybill-manage 弹窗高度也改为接近全屏
|
||
|
||
- 用户要求 `/business/waybill-manage` 新增/编辑弹窗同样接近全屏。
|
||
- 机制澄清：waybill-manage 用封装组件 `src/views/business/components/business-crud-page.vue`，它内部 `<avue-crud :option="option">`，option 由传入的 `crudOption`（即 waybill-manage.js 的 option）经 `cloneOption`（组件内 6261 行，浅展开+重映射 column，保留所有顶层属性）克隆而来。因此给 waybill-manage.js 的 option 顶层加 `dialogCustomClass` 即可只影响本页（不影响共用 business-crud-page 的其他页面）。Avue crud 弹窗 `dialog-form3.js:21` 会读取并应用 dialogCustomClass。
|
||
- 改动1：`src/option/business/waybill-manage.js` 的 `export const option = {` 顶层加 `dialogCustomClass: 'waybill-manage-dialog'`（在展开 `...createCrudOption(` 之前）。
|
||
- 改动2：`src/styles/element-ui.scss` 新增 `.waybill-manage-dialog.el-dialog / .el-dialog__header / .el-dialog__body / .avue-dialog__footer` 四条规则，复刻 shipping-template 方案（height/max-height: calc(100vh - 40px) !important；body max-height:none !important 解开全局 `.avue-crud__dialog .el-dialog__body` 的 200px 限制；footer sticky）。额外在 footer 加 `margin-top: 0 !important` 抵消全局 `.avue-crud__dialog .avue-dialog__footer { margin-top: -30px !important }`（863 行）的上移副作用（shipping-template 是 dialog-form 弹窗无 avue-crud__dialog class 故不受影响，waybill-manage 是 avue-crud 弹窗会受影响，必须处理）。
|
||
- 宽度来源：
|
||
- `src/option/business/common.js` 的 `createCrudOption` 中 `labelWidth: 'auto'`；
|
||
- Avue 会按当前弹窗内最长 label 自动计算宽度，故出现 227px。
|
||
- `src/styles/element-ui.scss` 第 164 行 `.el-dialog .el-form-item__label { white-space: nowrap }` 阻止换行。
|
||
- 改动：
|
||
1. `src/option/business/temporary-credit-limit.js`：option 增加 `dialogCustomClass: 'temporary-credit-limit-dialog'`。
|
||
2. `src/styles/element-ui.scss`：新增 `.temporary-credit-limit-dialog .el-form-item__label` 规则，固定宽度 `calc(6em + 24px)`，并设置 `white-space: normal; word-break: break-all; overflow-wrap: anywhere; line-height: 18px`，实现超长 label 自动换行。
|
||
3. 同时给 `.temporary-credit-limit-dialog .el-form-item { align-items: center; }` 保持垂直居中。
|
||
- 参考：同文件已有 `.avue-dialog--common-route` 使用相同 6em label 宽度方案。
|
||
|
||
## transportCapacity/ship 到期筛选标签默认展开并靠前
|
||
|
||
- 需求：用户反馈 `/transportCapacity/ship` 页面搜索栏的「全部/30天内到期/已到期」标签需要点击「展开」后才显示，希望默认直接显示；且位置要位于搜索按钮前面。
|
||
- 原因：`src/option/transportCapacity/transport-ship.js` 中 `searchIndex: 4`，默认只展示前 4 个搜索条件，而 `expireStatus` 的 `searchOrder: 0`（Avue 越大越靠前）排在第 6 位，因此被折叠到第二行。
|
||
- 改动：
|
||
- `src/option/transportCapacity/transport-ship.js`：`searchIndex: 4 → 6`，让全部 6 个搜索条件默认展开，标签无需再点展开即可看到。
|
||
- 由于 `expireStatus` 排在最后，展开后它自然位于第二行末尾、搜索按钮之前，满足"移到搜索按钮前面"的要求。
|
||
|
||
## transportCapacity/vehicle 与 ship 到期筛选标签重构（对齐 driver 的 #search-menu 方案）
|
||
|
||
- 需求：用户希望 `/transportCapacity/vehicle` 和 `/transportCapacity/ship` 的「全部/30天内到期/已到期」标签与 driver 页一致：① 不展开就直接显示；② 移到搜索按钮前面并保留间距。
|
||
- 关键差异（排查发现）：driver 用 `#search-menu` 插槽把标签渲染在**按钮所在行**；而 vehicle/ship 之前用 `#expireStatus-search` 列插槽，标签被渲染进**搜索条件网格**（位置不对）。
|
||
- 改动（两页同样处理）：
|
||
1. `.vue`：`<template #expireStatus-search>` → `<template #search-menu>`，标签 div 内容不变。
|
||
2. `.vue` 样式 `__expiry-tags`：去掉 `width: 100%`，改为 `order: -1; margin-right: 12px; min-width: 0;`（与 driver 完全一致，使标签左移并落在搜索按钮前）。
|
||
3. option：将 `expireStatus` 列的 `search: true → search: false`（否则会在搜索网格里多渲染一个空输入框）；`searchIndex` 设为 ≥ 真实搜索列数（vehicle: `4 → 6`；ship 已是 `6`），使 `columnLen ≤ searchIndex`，Avue 不再显示「展开」按钮。
|
||
- 原理：Avue `header-search3.js` 中 `#search-menu` 插槽内容渲染进 `menu-form`，位于默认搜索/重置按钮之后、展开按钮之前；`order: -1` 将标签推到按钮左侧。
|
||
- 验证：`node --check` 两个 option 文件通过；页面刷新即可见效果。
|
||
|
||
## process-config.vue 弹窗重构为手写 el-dialog（对齐 customer-archive 风格）
|
||
|
||
- 需求：用户要求 `/business/process-config.vue` 排版风格改成和 `/vehicle/customer-archive.vue` 一样，保持风格统一。
|
||
- 根因：两页弹窗架构根本不同——customer-archive 用手写 `<el-dialog>` + `section-card` 分组 + `#footer` 按钮；process-config 原用 Avue 内置弹窗（`#basicInfo-form`/`#nodeConfigJson-form` 插槽 + `#menu-form-before` 保存按钮）。要真正统一，只能把 process-config 改成手写弹窗。
|
||
- 模板改动（已完成）：
|
||
- 移除 avue-crud 的 `:before-open`/`@row-save`/`@row-update`/`@row-del` 与 `#menu-form-before`、`#basicInfo-form`、`#nodeConfigJson-form` 插槽。
|
||
- 在 `</avue-crud>` 后新增手写 `<el-dialog class="process-dialog" v-model="processBox" width="92%" top="4vh" append-to-body @closed="resetProcess">`，内部 `<el-form ref="processForm" :model="form" label-width="calc(6em + 24px)" :disabled="dialogReadonly" class="process-form dialog-form-label-fixed">`，含 3 个 `section-card`：基本信息 / 现行过程节点（时间线）/ 节点设置（节点表格）；`#footer` 含 保存草稿(plain) + 保存并启用(primary) + 取消/关闭。
|
||
- 顶部「新建过程配置」、表格「查看/编辑」链接改调 `openProcessConfig()` / `openProcessConfig(row, true)` / `openProcessConfig(row, false)`。
|
||
- 脚本改动（本次完成）：删除 Avue 生命周期方法 `beforeOpen/rowSave/rowUpdate/submitRow/stopSubmitLoading/handleProcessConfigSave`；新增 `openProcessConfig(row, readonly)`（load 详情后 `this.form=data` + `selectedProjectId` + `parseNodeConfig` + 开框；新增则清空表单 + `resetNodeRows`）、`submitProcessConfig(mode)`（`this.$refs.processForm.validate` → `syncNodeFields` → `normalizeRow` → `validateRow` → `confirmDuplicateVoucher` → `api.submit`，成功后关框并刷新）、`resetProcess()`（`@closed` 重置 `dialogReadonly/submitting/submitStatus/form/selectedProjectId` + `resetNodeRows` + `clearValidate`）。`data()` 已含 `processBox/submitting`、`computed.dialogTitle`；`rowDel`/`handleCopy`/`handleAction` 不变（独立 API 调用）。
|
||
- option 改动（已完成）：`src/option/business/process-config.js` 置 `saveBtn/updateBtn/addBtn/viewBtn/editBtn/delBtn:false`，关闭 Avue 内置弹窗按钮。
|
||
- 样式：新增 `:deep(.process-dialog .el-dialog__body){max-height:72vh;overflow:auto}`，对齐 customer-archive 的 `.archive-dialog` 滚动行为（长内容时 body 滚动、footer 固定）。
|
||
- 验证：`vite build --outDir /tmp/pc-build-check` 全量编译通过（仅动态导入 chunk 警告，与本改动无关）；之前 `npm run build` 失败仅因沙箱 safe-delete 守卫清理旧 dist/ 触发，非代码错误。
|
||
|
||
## contract-manage 到期筛选标签靠右对齐
|
||
|
||
- 需求：用户截图反馈 `/business/contract-manage` 搜索栏中「全部/30天内到期/90天内到期/90天以上/已到期」标签需要靠右对齐。
|
||
- 改动：`src/views/business/components/business-crud-page.vue` 中 `.business-crud-page__contract-expiry-search` 样式由 `order: -1; margin-right: auto` 改为 `margin-left: auto`。这样该 slot 内容会被推到 `#search-menu` 行的右侧，搜索/重置按钮留在左侧，与 vehicle/ship 的左侧标签方案相反，符合用户本次要求。
|
||
- 验证：`vite build --outDir /tmp/pc-build-check-2` 全量编译通过。
|
||
|
||
## shipping-template 新增/编辑弹窗居中 + 加高（对齐 customer-archive）
|
||
|
||
- 需求：用户反馈 `/business/shipping-template` 新增弹窗「没居中、高度不够高」，要求参照 `/vehicle/customer-archive` 的做法。
|
||
- 根因排查：
|
||
- shipping-template 的弹窗是 avue-crud 内置弹窗（business-crud-page + `:crud-option`，`$refs.crud.rowAdd()` 触发），option 里 `dialogWidth:'96%'`、`dialogTop:'10px'`。
|
||
- avue 把 `dialogTop` 映射为 Element Plus `--el-dialog-margin-top`，`'10px'` 把弹窗死顶在顶部 → 视觉「没居中」。
|
||
- avue 内置 footer（`.avue-dialog__footer`）渲染在**可滚动 body 内部**，不像 customer-archive 那样用 `#footer` 插槽在滚动区之外；字段多时「保存」按钮要滚动才看得到 → 视觉「高度不够高」。
|
||
- customer-archive 真正做法是：手写 `<el-dialog width="92%" top="4vh">` + `#footer` 按钮浮动 + body `max-height:72vh` 内部滚动。
|
||
- 改动：
|
||
1. `src/option/business/shipping-template.js`：`dialogWidth:'96%'→'92%'`、`dialogTop:'10px'→'4vh'`，新增 `dialogCustomClass:'shipping-template-dialog'`（avue 会把它作为 class 加到 dialog 上，作为样式钩子）。
|
||
2. `src/styles/element-ui.scss`：新增 `.shipping-template-dialog` 规则——弹窗体 `height: calc(100vh - 4vh - 24px)` + flex 列布局占满视口（顶部 4vh、底部留白，视觉居中高大）；body `max-height:none !important; overflow-y:auto` 解除全局 80vh 上限；`.avue-dialog__footer` 用 `position:sticky; bottom:0; background:#fff` 贴底始终可见，对齐 customer-archive 浮动按钮效果。
|
||
- 注意：class 唯一，仅作用于 shipping-template（business-crud-page 被多页共用，但其余页 option 未设该 class）；弹窗 `append-to-body`，故样式必须放全局（element-ui.scss）而非组件 scoped 样式。
|
||
- 验证：dev server(2889) HMR 自动生效；刷新后重开「新增」即可见效果（未跑全量 build，改动为纯 CSS + option 属性）。
|
||
|
||
## transport-plan 新增/编辑弹窗固定 72vh（对齐 customer-archive 视觉）
|
||
|
||
- 需求：用户要求 `/business/transport-plan` 新增/编辑弹窗高度 72vh，与 `/vehicle/customer-archive` 视觉一致。
|
||
- 排查发现：上次给 shipping-template 加的 `.shipping-template-dialog` 全局 CSS 规则**未持久化**（option 钩子 `dialogCustomClass:'shipping-template-dialog'` 还在，但 `element-ui.scss` 里对应规则丢失），即 shipping-template 弹窗样式实际一直未生效。本次一并补回。
|
||
- 改动：
|
||
1. `src/option/business/transport-plan.js`：补 `dialogCustomClass:'transport-plan-dialog'`（option 已有 `dialogWidth:'96%'`、`dialogTop:'4vh'`）。
|
||
2. `src/styles/element-ui.scss`：
|
||
- 补回 `.shipping-template-dialog` 规则（弹窗体 `height: calc(100vh - 4vh - 24px)` 占满视口 + flex 列布局；body `max-height:none !important; overflow-y:auto`；`.avue-dialog__footer { position:sticky; bottom:0; background:#fff }` 贴底）。
|
||
- 新增 `.transport-plan-dialog` 规则（弹窗体用 `height:72vh` **固定**高度，内容少时 body 下方留白、内容多时窗内滚动；footer 同样 sticky 贴底）。
|
||
- 关键技术点：Avue 内置弹窗 footer 的真实 class 是 `.avue-dialog__footer`，且**渲染在 `.el-dialog__body` 内部**；贴底必须用 `position: sticky; bottom: 0`（flex `margin-top:auto` 在滚动容器内仍会随内容滚走，无效）。这与手写 el-dialog（footer 在 body 外、class 为 `.el-dialog__footer`）不同。
|
||
- 验证：dev server(2889) HMR 自动生效；刷新后重开「新增」即可见（弹窗固定 72vh、底部"提交/取消"常驻可见）。
|
||
|
||
## contract-manage 新增/编辑弹窗也改为接近全屏
|
||
|
||
- 用户要求 `/business/contract-manage` 新增/编辑弹窗同样接近全屏（与前几个 business 弹窗对齐）。
|
||
- 机制：该页同样用 `business-crud-page` 封装 → avue-crud 弹窗（带 `avue-crud__dialog` class），与 waybill-manage 完全一致。
|
||
- 改动：
|
||
1. `src/option/business/contract-manage.js`：该文件 option 在 `createCrudOption([...])` 之后本就用 `option.xxx = ...` 顶层赋值（span/dialogWidth/dialogTop 等），故在末尾追加 `option.dialogCustomClass = 'contract-manage-dialog';`（无需改结构，与文件既有写法一致）。
|
||
2. `src/styles/element-ui.scss`：新增 `.contract-manage-dialog` 四条规则，复刻 waybill-manage 方案——`height/max-height: calc(100vh - 40px) !important` 压过库内置 `.avue-dialog` 的 200px 上限；`.el-dialog__header { flex:none }`、`.el-dialog__body { flex:1 1 auto; min-height:0; max-height:none !important; overflow-y:auto }` 解开全局 avue-crud 200px body 限制；`.avue-dialog__footer { position:sticky; bottom:0; margin-top:0 !important; background:#fff }` 抵消全局 footer 的 -30px 上移。
|
||
|
||
## loading-manage 线路编辑「起/经/终」圆点分色
|
||
|
||
- 需求：用户反馈 `/business/loading-manage` 弹窗中"线路编辑"区域的「起/经/终」圆形徽标要区分颜色：起蓝、经橙、终绿。
|
||
- 改文件：`src/views/business/loading-manage.vue`。
|
||
- 涉及两处：① 主弹窗 `loading-manage-dialog__route-type`；② 变更运输路线弹窗 `loading-route-change-dialog__route-type`（保持全站一致）。
|
||
- 实现方式（最小侵入、不破坏现有结构）：
|
||
1. methods 各加一个 `routeTypeClass(index)` / `routeChangeTypeClass(index)`，返回 `'start' | 'middle' | 'end'`。
|
||
2. 模板里 span 改用 `:class="['...route-type', '...route-type--' + ${xxxClass(index)}]"` 动态 class。
|
||
3. scoped 样式 `__route-type` 规则去掉硬编码 `background`，改用 `&--start/#409eff` + `&--middle/#e6a23c` + `&--end/#67c23a` 三个 modifier（颜色取 Element Plus 语义色：蓝主色 / 橙 warning / 绿 success），`color: #fff` 保留。
|
||
- 关键 trick：变更弹窗原 `route-type` 样式是单行压缩写法，本次顺手把它多行化（保持其他子规则不变），以便嵌套 `&--xxx` 修饰符。
|
||
- dev server(2889) HMR 自动生效，刷新后开新增/编辑弹窗向下滚到"线路编辑"分组即可见。
|