gxwebsoft
9948c8f33b
- 将 process-config 弹窗由 Avue 内置弹窗改为手写 el-dialog 对齐 customer-archive 风格 - 移除 avue-crud 原有的弹窗相关生命周期和插槽方法 - 新增 openProcessConfig、submitProcessConfig、resetProcess 等方法管理弹窗状态和数据提交 - 更新模板结构，新增具备基本信息、过程节点、节点设置的表单布局和底部操作按钮 - 关闭原 avue-crud 弹窗的内置按钮，改由手写对话框控制操作 - 优化样式，增加弹窗内部滚动，保持 footer 固定 - 微调业务组件样式，调整边框和表单布局宽度以适配新弹窗设计
47 lines
6.2 KiB
Markdown
47 lines
6.2 KiB
Markdown
# 2026-08-14 工作记录
|
||
|
||
## temporary-credit-limit 弹窗 label 固定 6 汉字宽度并换行
|
||
|
||
- 需求：用户反馈 `/business/temporary-credit-limit` 新增弹窗中 label「已使用项目资金使用额度（万元）」过宽（227px），希望超过 6 个汉字就换行。
|
||
- 宽度来源：
|
||
- `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/ 触发，非代码错误。
|