docs: add OA drafts inline edit dialog design.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed
1 parent
de22678c87
commit
7a1433a489
1 file changed
+123
@@ -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（弹窗复用），与产品确认一致。
|
||||
- 范围限于前端抽取与草稿箱接线；不扩后端。
|
||||
Reference in new issue
Block a user