cykj/zkxw

0 Fork 0

Files

T

zlwuandCursor 7a1433a489 docs: add OA drafts inline edit dialog design.

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-08-06 14:31:11 +08:00

5.2 KiB

Raw Blame History

草稿箱 · 就地弹窗编辑 / 提交（复用发起审批弹窗）

项	内容
状态	已定稿（待实现）
日期	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. 验收

草稿箱点「编辑」：URL 仍为 drafts；弹窗回显草稿字段与流程预览。
弹窗内保存草稿：列表「最近保存」更新；不跳转。
弹窗内提交：草稿从列表消失（或刷新后不再出现）；可进入实例详情。
列表快捷「提交审批」：成功路径不变；失败打开同弹窗而非跳发起页。
发起审批页：选模板发起、暂存、深链 draftId/appId/copyFrom 行为与改造前等价。

8. 自检记录

无 TBD/TODO 占位。
方案唯一：A（弹窗复用），与产品确认一致。
范围限于前端抽取与草稿箱接线；不扩后端。

5.2 KiB Raw Blame History Unescape Escape