zkxw/docs/superpowers/specs/2026-08-12-mobile-oa-task-centers-design.md

移动端 OA 任务中心（草稿 / 待办 / 已办 / 我发起 / 抄送）设计

日期：2026-08-12
工程：mobile-h5（微信小程序）+ mobile-oa-h5（OA 表单 H5）
对齐参考：web-admin 下 OA审批 六菜单（发起已落地移动端；本设计覆盖其余五页）
上游设计：docs/superpowers/specs/2026-08-11-mobile-oa-start-approval-design.md
菜单种子参考：docs/sql/mobile_menu_oa_start.sql

---

1. 背景与目标

1.1 现状

• Web：发起审批 / 草稿箱 / 待办中心 / 已办中心 / 我发起的 / 抄送我的 已齐；详情办理在 instances/detail.vue（同意/拒绝/打回/加签/转交/撤销/复制重开/打印）。
• 移动：mobile-h5 已实现「发起审批」列表；填写经 web-view 打开 mobile-oa-h5 /oa-start（含 draftId 草稿再编辑）。
• mobile-oa-h5 尚无实例详情 / 审批办理路由；无五中心列表。

1.2 目标

1. 在小程序中一次性补齐五中心功能（可分步开发），能力以本文「已确认范围」为准，办理动作对齐 Web 详情。
2. 延续既有架构：列表原生 mobile-h5；动态表单与办理在 mobile-oa-h5。
3. 新增移动端菜单种子 SQL，挂在「移动端菜单」根下，便于角色授权。

1.3 非目标

• 改造 Web 设计器或 Web 六页交互。
• 在小程序原生内直挂 @form-create/vant。
• 已在核对中明确剔除的筛选（见 §2）。
• 审批流设计、应用管理、收款账户等非六中心能力。

1.4 架构选型（已确认）

方案 A：延续发起审批架构——五列表在 mobile-h5；详情/办理扩 mobile-oa-h5 /oa-detail；草稿编辑继续走 /oa-start?draftId=。

不采用：列表全进 H5；或在原生重做表单运行时。

1.5 功能对齐 Web，UI 对齐移动端（已确认）

维度	权威来源	说明
功能 / 业务语义	web-admin OA 六中心 + instances/detail	API 字段、操作条件、状态文案、办理规则与 Web 一致；本文 §2 已裁剪的能力除外
UI / 交互样式	mobile-h5 + mobile-oa-h5 既有端到端模式	禁止照搬 Web Element 桌面布局（多列表格筛选栏、桌面弹窗栅格等）

移动端实现时优先对照：

• 列表 / 宫格 / 空态 / Token：mobile-h5（如 pages/oa/start、MenuGrid、styles/tokens.scss、BizListCard 等已有列表卡片模式）
• 表单 / 底栏 / 选人 / 流预览：mobile-oa-h5（如 OaStart.vue、oa-form.css、tokens.css、既有 picker / footer 按钮样式）
• 视觉规范：docs/miniprogram-ui-spec-sanqiang.md（三墙色；勿混用 Web #10b981）

原则：Web 决定「做什么」；移动端决定「长什么样、怎么点」。

---

2. 已确认功能范围（逐页核对）

2.1 草稿箱

要	不要
列表；分页/下拉刷新；流程名筛选；编辑；列表提交审批；单删；批量删；菜单角标	保存时间范围；模板分组筛选

编辑 → mobile-oa-h5 /oa-start?draftId=（已有能力）。

2.2 待办中心

要	不要
列表；分页；流程名+申请人筛选；进详情；角标	申请时间范围；流程状态筛选
详情：表单只读+流进度；同意/拒绝/打回/加签/转交	—

2.3 已办中心

要	不要
列表；分页；流程名+申请人；只读详情（表单+流）	时间/状态筛选；办理操作；角标

2.4 我发起的

要	不要
列表；分页；流程名筛选；查看；打印；复制并重新发起；详情撤销；详情内复制重开	申请时间；流程状态筛选

2.5 抄送我的

要	不要
列表；分页；流程名+申请人；阅读状态筛选；未读样式；查看（打开标已读）；单条已读；批量已读；打印；未读角标；只读详情	申请时间；流程状态筛选；办理操作

---

3. 架构

┌─ mobile-h5 ─────────────────────────────────────────────┐
│  首页 MenuGrid ← fetchMyMobileMenus + 角色授权            │
│  /pages/oa/drafts|pending|done|mine|cc/index  （列表）   │
│  /pages/oa/webview（或复用 start/webview）整页 web-view   │
│  角标：drafts/count、pending/count、cc/unread-count      │
└───────────────────────────┬─────────────────────────────┘
                            │ token + query
                            ▼
┌─ mobile-oa-h5 ──────────────────────────────────────────┐
│  /oa-start     发起 + 草稿编辑（已有）                     │
│  /oa-detail    新增：mode=view|approve                   │
│    GET instances/{id}；表单 disabled；流进度               │
│    approve：同意/拒绝/打回/加签/转交                       │
│    发起人：撤销 / 复制并重新发起                           │
│    打印：移植 Web PDF 能力                                │
│  结束：postMessage → 小程序 navigateBack + 刷新           │
└─────────────────────────────────────────────────────────┘

3.1 工程边界

mobile-h5	mobile-oa-h5
五列表、筛选、批量删/已读、角标、菜单 path	formSchemaJson 渲染、流进度、办理弹层、打印
草稿「编辑」→ 已有 start URL	/oa-detail?instanceId=&taskId=&mode=&token=

3.2 API

继续复用 /web/admin/oa-approval/* + 小程序登录 JWT（与发起审批一致），不新开独立 mini OA 前缀（除非后续权限评审要求拆分）。

主要端点：

• 草稿：/drafts*、/drafts/{id}/submit、/drafts/count
• 任务列表：/tasks/{pending|done|mine|cc}
• 详情：GET /instances/{id}
• 办理：POST /tasks/{id}/approve|reject|return|add-sign|transfer
• 抄送已读：POST /tasks/{id}/read、POST /tasks/cc/read-batch
• 撤销：POST /instances/{id}/withdraw
• 角标：/tasks/pending/count、/tasks/cc/unread-count

3.3 UI Token 与样式权威

三墙品牌绿 #0a9f6d 等；禁止混用 Web Fresh Mint #10b981。

列表 / 详情视觉对齐 已有移动端界面，而非 Web 列表页截图：

• mobile-h5：发起审批列表、首页宫格、现有 list/card/empty 样式
• mobile-oa-h5：/oa-start 填写页结构、底栏按钮、Vant 弹层与自研 picker 交互

筛选在移动端宜用顶栏搜索 / 简易筛选条 / ActionSheet，避免 Web 多列 filter-grid 桌面形态。

---

4. 移动端菜单种子

参考 docs/sql/mobile_menu_oa_start.sql：解析「移动端菜单」根（parent_id='0' 且名称含「移动端」），幂等 INSERT。

新增脚本建议路径：docs/sql/mobile_menu_oa_task_centers.sql。

menu_name	id	path	perms	order_num
草稿箱	MINI000000000000000000000000OA002	/pages/oa/drafts/index	mini:oa:drafts	20
待办中心	MINI000000000000000000000000OA003	/pages/oa/pending/index	mini:oa:pending	30
已办中心	MINI000000000000000000000000OA004	/pages/oa/done/index	mini:oa:done	40
我发起的	MINI000000000000000000000000OA005	/pages/oa/mine/index	mini:oa:mine	50
抄送我的	MINI000000000000000000000000OA006	/pages/oa/cc/index	mini:oa:cc	60

约定：menu_type='C'、is_frame=1、visible/status='1'、tenant_no='zkxw'、NOT EXISTS 防重复；角色在 Web「角色管理」勾选后，首页 MenuGrid 经 fetchMyMobileMenus() 展示。

发起审批既有：MINI000000000000000000000000OA001 / mini:oa:start / order 10，本脚本不改动。

4.1 宫格图标资源

PNG 放在 mobile-h5/static/menu-icons/（颜色已烘焙，宫格 iconBg: transparent）。后端 mini_menu._mobile_menu_icon 按 path 返回 icon 名，与 van-icon 的 PNG_ICONS 对齐：

菜单	文件	icon 名
草稿箱	oa-drafts.png	oa-drafts
待办中心	oa-pending.png	oa-pending
已办中心	oa-done.png	oa-done
我发起的	oa-mine.png	oa-mine
抄送我的	oa-cc.png	oa-cc

---

5. 小程序列表页

5.1 路由与 web-view

• 五页：pages/oa/{drafts,pending,done,mine,cc}/index
• 通用 web-view：扩展现有 pages/oa/start/webview 或抽 pages/oa/webview/index，支持 start 与 detail 两类 URL。
• utils/oa-h5.js 增补 buildOaDetailUrl({ instanceId, taskId, mode })；标题仍用 storage 暂存，避免中文进 URL。

5.2 列表行为摘要

页	筛选	行/工具栏	打开 H5
草稿	流程名	编辑、提交、删；批量删	/oa-start?draftId=
待办	流程名、申请人	进入办理	/oa-detail?mode=approve&instanceId=&taskId=
已办	流程名、申请人	查看	mode=view
我发起	流程名	查看、打印、复制重开（终态）	view；复制 → start（预填策略见 §6）
抄送	流程名、申请人、阅读状态	查看、已读、批量已读、打印	view；打开时/前 mark-read

共用：卡片列表、下拉刷新、分页；扩展 mobile-h5/utils/oa-api.js。

---

6. H5 /oa-detail

6.1 Query

参数	说明
instanceId	必填；GET /instances/{id}
taskId	待办办理时定位任务
mode	view | approve
token	与 /oa-start 相同，启动时捕获

6.2 结构

1. 顶：标题 + 状态 Tag
2. 中：form-create disabled + 审批流进度（移动端已有/可对齐的 Flow 组件）
3. 底：操作条（全屏 web-view，操作必须在 H5）

6.3 操作可见性（对齐 Web instances/detail.vue）

操作	条件
同意 / 拒绝	mode=approve 且存在当前用户可办 task
打回	同上且 allowReturn !== false
加签	同上且 allowAddSign !== false；选人
转交	同上；选人排除本人与本节点已有待办；可选说明
撤销	当前用户为发起人且实例进行中
复制并重新发起	发起人且终态（returned / cancelled / rejected）；跳转发起填写并预填
打印	我发起的、抄送场景需要；移植 Web exportOaApprovalPdf 思路

成功后：postMessage({ source: 'zkxw-oa-h5', action: 'done'|'back' }) → 小程序返回并刷新列表/角标。

6.4 复制并重新发起

优先与 Web 一致：携带原实例表单数据进入新发起（/oa-start + appId + 预填来源）。具体 query/storage 约定在实现计划中与现有 OaStart.vue 对齐，避免破坏已有草稿链路。

6.5 打印风险

小程序 web-view 内 PDF 能力受限。S6 单独验收；若真机受限，允许「H5 生成文件 + 明确引导」兜底，不阻塞 S0–S5。

---

7. 分步交付（S0–S7）

步骤	内容	验收
S0	菜单 SQL；pages.json；通用 web-view / buildOaDetailUrl	授权后菜单可见；未授权不可见
S1	草稿箱全量已确认能力 + 草稿角标	编辑/提交/删/批量删可用
S2	/oa-detail 只读；已办 / 我发起 / 抄送进 view	同实例只读正确；抄送打开已读
S3	待办列表 + approve 五动作 + 待办角标	办理后待办消失；进度正确
S4	我发起的撤销、复制重开（列表+详情）	终态可复制；进行中可撤销
S5	抄送阅读筛选、未读样式、单条/批量已读、未读角标	与 Web 语义一致
S6	打印（我发起的 / 抄送）	真机可打开或有明确失败提示
S7	角标汇总与返回刷新	办理/已读后角标更新

---

8. 测试要点（摘要）

• 菜单：执行 SQL 后角色勾选/取消，首页宫格增减正确。
• 草稿：暂存→草稿箱可见→编辑提交→出现在「我发起的」、草稿消失。
• 待办：同意/拒绝/打回/加签/转交各至少一条主路径；转交人选人约束正确。
• 已办/抄送：仅只读，无办理按钮。
• 我发起：撤销后状态与 Web 一致；复制重开可提交新实例。
• 抄送：未读角标、批量已读、打开详情自动已读。
• 色值与 web-view 关闭桥接回归（发起审批不被破坏）。

---

9. 文档与实现衔接

• 本文为需求/架构权威；实现计划：docs/superpowers/plans/2026-08-12-mobile-oa-task-centers.md（Task 1–13，对应 S0–S7）。
• 变更若调整范围，先改本文再改计划与代码。