OA「关联审批单」：只读详情弹窗展示设计

日期: 2026-08-11
状态: 已批准
基线: docs/superpowers/specs/2026-07-22-oa-related-approval-design.md
问题: 发起审批等弹窗内点击关联单标题会 router.push 打开「审批详情」Tab，但被上层弹窗遮挡，用户看不到详情。

1. 目标

点击「关联审批单」标题（及嵌套「已关联 M 条」）时，以叠一层只读详情弹窗展示关联实例；父级发起/编辑弹窗不关闭，关闭详情后可继续填单。

2. 非目标

不在弹窗内提供同意/拒绝/打回/加签/转交/撤销/复制并重新发起等操作
不改后端 API、路由注册、权限模型
不重构整页 instances/detail.vue 为共享组件（可局部复用其组装逻辑）

3. 交互

场景	行为
发起审批弹窗内点关联标题	打开只读详情弹窗（盖在发起弹窗上）
关闭只读详情	回到发起弹窗，表单状态保留
详情弹窗内再点嵌套关联	再叠一层同款只读弹窗（各控件实例自管）
`unavailable` / 无 id	不打开；保持现有不可点态
加载失败 / 无权限	接口错误提示；不白屏

变更：OaRelatedApproval 内不再 router.push 到实例详情页（一律弹窗）。列表页「查看详情」等入口不受影响。

4. UI

el-dialog：append-to-body、align-center、dialog-form-layout、modal-class="protocol-dialog-mask"、destroy-on-close；无 backdrop blur
宽度约 920px（对齐发起弹窗）
标题区：实例标题 + 状态 el-tag
正文：表单只读回显（form-create，与详情页同套 rule 预处理）+ OaProgressChain
底栏：仅「关闭」（Close 图标 + 文案）

5. 实现落点

文件	职责
`web-admin/src/components/oa-approval/OaInstanceDetailDialog.vue`	新建：按 `instanceId` 拉详情并只读展示
`web-admin/src/components/oa-approval/OaRelatedApproval.vue`	`goDetail` 改为打开上述弹窗；挂载弹窗实例
基线 spec §5 跳转句	改为交叉引用本文

详情组装（applySchema / progress 投影 / status 文案）与 instances/detail.vue 只读部分对齐；审批动作相关代码不迁入。

6. 验收

发起弹窗内点关联标题 → 详情盖在上面，发起单仍在
关详情 → 可继续编辑/提交
嵌套关联可再叠一层并可逐层关闭
不可用项不可点；无权限有提示

7. 自检

无 TBD/占位未决项
与基线「可跳转详情」意图一致，仅展示载体由路由页改为弹窗
范围限于 web-admin 关联控件 + 新建只读弹窗

2.7 KiB Raw Blame History Unescape Escape