zkxw/docs/superpowers/specs/2026-07-15-oa-start-flow-preview-design.md

发起审批 · 表单底部审批流预览（方案 B）

日期： 2026-07-15
范围： web-admin /#/system-manage/oa-approval/start 发起弹窗
Demo： docs/mockups/oa-approval-start-flow-preview-demo.html（已定稿样式）

修订（2026-07-17）： 条件分支展示已改为钉钉式「未齐占位 / 齐后最终路径」，见
docs/superpowers/specs/2026-07-17-oa-start-flow-preview-resolved-path-design.md。
下文「全部支路展开」与「非目标：条件随表单实时裁剪」以新规格为准。

目标

发起人填单时，在表单下方展示审批链预览：节点名称 + 签批方式 + 配置说明 + 解析出的具体人员，样式对齐 Demo（灰色圆点时间轴、单行紧凑卡片）。

方案

• 方案 B：后端按当前发起人解析审批人；条件分支首版按「全部支路展开展示」（不随表单字段实时裁剪）；initiator_select 显示「发起人自选」，人选仍用弹窗顶部现有选择器。
• 不采用 A（仅文案）与 C（条件联动 / 节点内点选）。

交互与样式（对齐 Demo）

1. 区块标题「审批流程」。
2. 左侧统一灰色圆点 + 竖线；卡片单行：节点名 或签|会签|抄送 · 配置说明，右侧人员 chip。
3. 卡片高度与 Demo 一致（约 padding: 9px 12px）。
4. 发起人节点展示当前用户；结束节点仅名称。

API

GET /api/admin/oa-approval/templates/{appId}/flow-preview

返回：

{
  "steps": [
    {
      "id": "n_start",
      "type": "start|approval|cc|branch|end",
      "name": "一级审批",
      "signMode": "or|and|",
      "assigneeType": "oa_roles",
      "meta": "工作流角色 · 总经理",
      "people": [{ "id": "...", "nickName": "王总" }],
      "resolveError": ""
    }
  ]
}

解析失败时该步 people 为空，resolveError 带原因，前端在 meta 后展示警示而非阻断打开弹窗。

主要文件

• backend/app/services/oa_engine.py — preview_start_flow
• backend/app/api/oa_approval.py — 路由
• web-admin/src/api/oaApproval.ts — fetchOaFlowPreview
• web-admin/src/components/oa-approval/OaFlowPreview.vue — 只读预览
• web-admin/src/views/oa-approval/start/index.vue — 挂载到弹窗表单下方

非目标（本期不做）

• 条件分支随表单字段实时高亮
• 在流程节点内完成自选审批人点选
• 改造审批详情页时间轴样式