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

| 项 | 内容 |
|----|------|
| 状态 | 已定稿（待实现） |
| 日期 | 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（弹窗复用），与产品确认一致。
- 范围限于前端抽取与草稿箱接线；不扩后端。