diff --git a/docs/superpowers/specs/2026-08-06-oa-drafts-inline-edit-dialog-design.md b/docs/superpowers/specs/2026-08-06-oa-drafts-inline-edit-dialog-design.md new file mode 100644 index 00000000..9a203cb5 --- /dev/null +++ b/docs/superpowers/specs/2026-08-06-oa-drafts-inline-edit-dialog-design.md @@ -0,0 +1,123 @@ +# 草稿箱 · 就地弹窗编辑 / 提交(复用发起审批弹窗) + +| 项 | 内容 | +|----|------| +| 状态 | 已定稿(待实现) | +| 日期 | 2026-08-06 | +| 范围 | `web-admin` 草稿箱 `/#/system-manage/oa-approval/drafts`;抽取与「发起审批」共用的发起/编辑草稿弹窗 | +| Demo | `.superpowers/brainstorm/.../drafts-edit-dialog-demo.html`(方案 A) | +| 关联 | 发起页 `views/oa-approval/start/index.vue`;既有草稿 API(详情 / 更新 / 提交) | + +--- + +## 1. 背景 + +当前草稿箱点「编辑」会 `router.push` 到「发起审批」并带 `?draftId=`,用户离开草稿箱路由,体验割裂。 + +产品要求:**留在草稿箱完成编辑与提交**;弹窗与「发起审批」新增/编辑草稿弹窗**完全一致**,草稿箱仅多一步**回显**已存草稿数据。 + +--- + +## 2. 目标与非目标 + +**目标** + +- 草稿箱「编辑」:当前页打开弹窗,回显草稿表单与发起人选人,可「保存草稿」「提交」。 +- 弹窗 UI / 校验 / Kit 联动 / 流程预览 / API 与发起审批弹窗一致(同一实现)。 +- 列表「提交审批」:保留快捷提交;失败时打开同一弹窗回显,便于改完再交。 +- 保存成功:关弹窗并刷新草稿列表;提交成功:关弹窗、刷新列表,并可跳转实例详情(与现网一致)。 + +**非目标** + +- 不改「发起审批」选模板发起的主列表/卡片交互。 +- 不新增独立草稿编辑路由或抽屉方案(B/C 已否决)。 +- 不改后端草稿接口契约(复用现有 detail / update / submit)。 + +--- + +## 3. 交互(SHALL) + +| 入口 | 行为 | +|------|------| +| 操作列「编辑」 | **不**跳转;打开共用弹窗;`draftId` → 拉详情回显 | +| 操作列「提交审批」 | 确认后快捷 `submit`;成功刷新并可进详情;失败则打开同一弹窗(回显) | +| 弹窗「取消」 | 关闭,不保存 | +| 弹窗「保存草稿」 | `update` 当前草稿 → 关弹窗 → 刷新列表 + badge | +| 弹窗「提交」 | 校验表单与自选审批人 → `submit` → 关弹窗 → 刷新 → 有实例 id 则跳详情 | + +弹窗标题:模板/应用名称(与发起审批一致);底栏图标与文案对齐发起审批(取消 Close、保存 Document、提交 Check)。 + +--- + +## 4. 架构 + +### 4.1 抽取共用组件 + +从 `start/index.vue` 抽出弹窗及相关逻辑为: + +**`web-admin/src/components/oa-approval/OaStartFormDialog.vue`**(名称可微调,须语义清晰) + +职责(SHALL): + +- 展示 form-create 表单、`OaFlowPreview`、各类 Kit 同步逻辑。 +- Props / 方法至少支持: + - `openForApp(appRow)`:新建发起(发起页选模板后调用)。 + - `openForDraft(draftId)`:拉 `fetchOaInstanceDraftDetail`,回显 `formData`、`initiatorSelectByNode`,进入编辑草稿态。 +- Emits / 回调:关闭、保存成功、提交成功(携带实例 id)。 +- 内部继续调用现有 API:`fetchOaTemplateDetail`、`fetchOaFlowPreview`、`fetchCreateOaInstanceDraft` / `fetchUpdateOaInstanceDraft` / `fetchSubmitOaInstanceDraft` / `fetchStartOaInstance`。 + +### 4.2 页面改造 + +| 文件 | 改动 | +|------|------| +| `views/oa-approval/start/index.vue` | 列表/选模板保留;弹窗改为挂载 `OaStartFormDialog`;`?draftId` / `?appId` / `?copyFromInstanceId` 仍可打开该弹窗(兼容深链) | +| `views/oa-approval/drafts/index.vue` | 移除「编辑」跳转;挂载同一弹窗;`openEdit` → `openForDraft`;快捷提交失败时同样打开 | + +### 4.3 数据流(草稿箱编辑) + +``` +编辑 → openForDraft(id) + → GET draft detail(appId, formData, initiatorSelectByNode, appName…) + → 加载模板表单规则 + 流程预览 + → 回填 formData / 自选人 +保存 → PUT update draft → 关窗 → 刷新列表 +提交 → validate → POST submit draft → 关窗 → 刷新 → 可选跳详情 +``` + +--- + +## 5. 错误与边界 + +- 草稿缺少 `appId`:提示「草稿缺少审批模板」,不打开空弹窗。 +- 模板已下线/不可用:行为与发起页打开草稿一致(错误提示,不静默失败)。 +- 快捷提交失败:打开弹窗回显,**不**跳发起页。 +- 遮罩:`backdrop-filter: none`;`dialog-form-layout` + `protocol-dialog-mask`,与现网一致。 + +--- + +## 6. 主要文件 + +- 新增:`web-admin/src/components/oa-approval/OaStartFormDialog.vue` +- 修改:`web-admin/src/views/oa-approval/start/index.vue` +- 修改:`web-admin/src/views/oa-approval/drafts/index.vue` +- 规格:本文档 + +后端:无变更(本期)。 + +--- + +## 7. 验收 + +1. 草稿箱点「编辑」:URL 仍为 drafts;弹窗回显草稿字段与流程预览。 +2. 弹窗内保存草稿:列表「最近保存」更新;不跳转。 +3. 弹窗内提交:草稿从列表消失(或刷新后不再出现);可进入实例详情。 +4. 列表快捷「提交审批」:成功路径不变;失败打开同弹窗而非跳发起页。 +5. 发起审批页:选模板发起、暂存、深链 `draftId`/`appId`/`copyFrom` 行为与改造前等价。 + +--- + +## 8. 自检记录 + +- 无 TBD/TODO 占位。 +- 方案唯一:A(弹窗复用),与产品确认一致。 +- 范围限于前端抽取与草稿箱接线;不扩后端。