gxwebsoft
3e7110ca8c
- 页面形态状态（列表/独立表单页/独立详情页）在实例创建时锁定，避免随路由变化切换导致弹窗残留 - 模板中形态相关所有判定改为使用锁定状态变量，保证渲染一致性 - 修改 detailContainer、crudContainer、pageFormOption 等方法使用锁定状态，避免缓存实例 option 变形 - 新增 closeInnerDialogs 方法，在组件 deactivated 和 beforeUnmount 生命周期关闭所有 append-to-body 弹窗 - 解决标签页 keep-alive 机制下弹窗 Teleport 持续遗留导致界面异常的问题 - 对运单管理页面多处弹窗和视图控制做统一修复，提升页面稳定性和体验
41 lines
4.9 KiB
Markdown
41 lines
4.9 KiB
Markdown
# 2026-09-18
|
||
|
||
## 修复：改成独立整页后点左侧菜单仍弹出旧弹窗（loading-manage / project-apply）
|
||
|
||
**现象**：配载单管理、项目管理已改为「新增/编辑/详情走独立整页」，但从独立页返回或直接点左侧菜单时，页面上仍会盖出一个老的 `el-dialog`（新增项目管理 / 配载单）。
|
||
|
||
**根因**（已读 Vue runtime-core 源码确认）：
|
||
- `src/router/tab.js` 按 `tabKey`（默认 fullPath）为每个标签建一个具名 wrapper 组件放进 `wrapperMap`，`src/page/index/layout.vue` 用 `<keep-alive :include="$store.getters.tagsKeep">` 缓存 —— 每个标签页一个实例，全部缓存不销毁。
|
||
- 组件被 deactivate 后**仍会随 `$route`（全局响应式）重新渲染**；此时 `isStandalonePage` 变 false，`<component :is="isStandalonePage ? 'div' : 'el-dialog'">` 由 div 翻回 `el-dialog`，而 `v-model`（`projectBox`/`dialogVisible`）仍是 true，`append-to-body` 使弹窗 Teleport 到 body。
|
||
- `KeepAlive.deactivate` 调 `move(vnode, storageContainer, ..., moveType=OUT)`，但 `TeleportImpl.move`（`moveTeleport`）忽略传入的 moveType、一律按 REORDER 处理 → **teleport 出去的 DOM 不会被搬回 storage container**，永久残留在 `document.body` 上并显示出来。
|
||
|
||
**修法**（不回退 tab.js 的 `return wrapper` 提交 c1c4fa1，改修根因）：
|
||
- 独立页容器固定为 `<div v-if="isXxxPage">`，不再按路由回退成 `el-dialog`。
|
||
- 页内其它 `append-to-body` 二级弹窗加 `deactivated()` / `beforeUnmount()` → `closeInnerDialogs()` 把 v-model 置 false。
|
||
|
||
**改动文件**：
|
||
- `src/views/business/loading-manage.vue`：容器改 `<div v-if="isStandalonePage">`；删 `dialogVisible`、`dialogTitle`、`resetLoadingDialog`、`clearLoadingDialog`、页脚弹窗分支（含「清空」）；`watch.$route` 简化；新增 `closeInnerDialogs()`（routeChange / commonAddress / candidateSearch）+ `deactivated`/`beforeUnmount`。
|
||
- `src/views/business/project-apply.vue`：容器改 `<div v-if="isProjectFormPage">`；删 `projectFormContainer`/`projectFormContainerProps`、`projectBox`、`resetProjectDialog`、`handleCancelProject`；`closeProjectForm` 简化为直接 push 列表；新增 `closeInnerDialogs()`（changeRecordDetail / 附件文档预览 / 图片预览 / 选人）+ `deactivated`/`beforeUnmount`。
|
||
|
||
**校验**：dev server(2889) curl 两个 .vue 及其 scoped style 模块，均 HTTP 200（500 才是编译失败）。`vite build` 因沙箱敏感内容保护会在 facelogin.vue 中断，未用。
|
||
|
||
**遗留同类风险（未改，已告知用户）**：`business/components/waybill-manage-page.vue`（`detailContainer` 在 PageDetail / el-dialog 间切）、`settlement/components/{pre,formal}-settlement-editor.vue`、`transport-reconciliation-editor.vue`（`pageMode ? 'div':'el-dialog'`）、`business/components/waybill-import-dialog.vue`（`standalone`/`createPage`）。统一修法：容器类型在 `created()` 锁定，不随路由/prop 翻转。
|
||
|
||
---
|
||
|
||
## 追加修复：运单详情弹窗残留（waybill-manage-page.vue）
|
||
|
||
用户复现路径：打开 `/business/waybill-manage/detail?id=xxx` → 点「配载管理」菜单 → 页面上又冒出运单详情弹窗。与上面同一根因：`detailContainer()` 随 `isStandaloneWaybillDetailPage` 在 PageDetail / el-dialog 间翻转，`:append-to-body="!isStandaloneWaybillDetailPage"` 随之为 true，`v-model="detailBox"` 仍 true → Teleport 进 body 搬不回来。
|
||
|
||
**改动**（`src/views/business/components/waybill-manage-page.vue`）：
|
||
- data 新增三个锁定标志 `formPageLocked` / `detailPageLocked` / `formModeLocked`，在 `created()` 一次性从 `isStandaloneWaybillFormPage` / `isStandaloneWaybillDetailPage` / `$route.query.mode` 取值。
|
||
- 模板里所有形态判定（根 class、`v-if="!detailPageLocked"` 的列表容器、`form-page-title`、`status`、独立表单页按钮块、分页 `v-show`、`:append-to-body`、detail-page class、内容 `v-if="detailBox || detailPageLocked"`、独立页 footer / 弹窗 footer slot）全部改读锁定标志。
|
||
- `detailContainer()` / `crudContainer()` / `pageFormOption()`（含 `boxType`）改读锁定标志，避免缓存实例的 option 变形。
|
||
- 新增 `closeInnerDialogs()`（关 detailBox、里程补录、附件文档/图片预览、变更路线、常用地址、流程图、运输路线/地址/站点/地图、常用货物、货物导入、过程配置、Excel 导入）+ `deactivated()` / `beforeUnmount()`。
|
||
|
||
**关键验证**：`onDeactivated` 在子组件里也会触发 —— apiLifecycle 的 `injectHook` 会向上遍历父链，发现 KeepAlive 父级就把钩子注入到根实例（runtime-core 的 `injectToKeepAliveRoot`），所以写在子组件 waybill-manage-page 上的 `deactivated` 有效。
|
||
|
||
**校验**：dev server curl 该 .vue 与 scoped style 均 200。仍未 commit。
|
||
|
||
**未提交**：上述改动 + 上一轮 loading-manage 独立页改造均未 commit。
|