refactor(process-config): 重构过程配置弹窗为手写 el-dialog
- 将 process-config 弹窗由 Avue 内置弹窗改为手写 el-dialog 对齐 customer-archive 风格 - 移除 avue-crud 原有的弹窗相关生命周期和插槽方法 - 新增 openProcessConfig、submitProcessConfig、resetProcess 等方法管理弹窗状态和数据提交 - 更新模板结构,新增具备基本信息、过程节点、节点设置的表单布局和底部操作按钮 - 关闭原 avue-crud 弹窗的内置按钮,改由手写对话框控制操作 - 优化样式,增加弹窗内部滚动,保持 footer 固定 - 微调业务组件样式,调整边框和表单布局宽度以适配新弹窗设计
This commit is contained in:
@@ -31,3 +31,16 @@
|
||||
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/ 触发,非代码错误。
|
||||
|
||||
Reference in New Issue
Block a user