2026-08-12-mobile-oa-task-centers-design.md 13 KB
移动端 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 目标
- 在小程序中一次性补齐五中心功能（可分步开发），能力以本文「已确认范围」为准，办理动作对齐 Web 详情。
- 延续既有架构：列表原生
mobile-h5；动态表单与办理在mobile-oa-h5。 - 新增移动端菜单种子 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 结构
- 顶：标题 + 状态 Tag
- 中：form-create disabled + 审批流进度（移动端已有/可对齐的 Flow 组件）
- 底：操作条（全屏 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）。 - 变更若调整范围，先改本文再改计划与代码。