zkxw/docs/superpowers/plans/2026-08-28-mobile-oa-start-history.md

Mobile OA 发起表单「历史记录」Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 在小程序 OA 表单填写页「取消」右侧增加「历史记录」，同 webview 内列表（对齐「我发起的」卡片）并可查看详情（无导出/打印；申请人检索仅全员权限时显示）。

Architecture: 改动集中在 mobile-oa-h5：底栏按钮 → /oa-history 新页调已有 GET /instances/history → /oa-detail?from=history 隐藏打印。权限由后端 canViewAll 驱动。

Tech Stack: Vue 3 + Vue Router + Vant（mobile-oa-h5）；复用后端 history API。

Spec: docs/superpowers/specs/2026-08-28-mobile-oa-start-history-design.md

---

Task 1: API 封装

Files:

• Modify: mobile-oa-h5/src/api/oa.js

• Step 1: 增加 fetchOaInstanceHistory

在 fetchOaInstanceDetail 附近增加：

export function fetchOaInstanceHistory(params) {
  return get('/web/admin/oa-approval/instances/history', params)
}

• Step 2: Commit（可选，可与后续任务合并提交）

---

Task 2: 路由注册

Files:

• Modify: mobile-oa-h5/src/router.js

• Step 1: 注册 /oa-history

import OaHistory from './views/OaHistory.vue'
// routes:
{ path: '/oa-history', component: OaHistory },

---

Task 3: OaHistory 列表页

Files:

• Create: mobile-oa-h5/src/views/OaHistory.vue

• Step 1: 实现列表页

要求：

• Query: appId（必填）、appName（可选）
• canViewAll 为 true 时显示申请人 search-box；否则不显示
• 卡片结构对齐 mine：dd-card（角标、标题、时间、meta 预览、状态）
• 分页：滚动触底加载；PAGE_SIZE=10
• 点击 → router.push({ path: '/oa-detail', query: { instanceId, from: 'history', token, returnPath } })（透传 token/returnPath 若存在）
• Token 色：#0a9f6d 系，勿用 #10b981

---

Task 4: OaStart 底栏按钮

Files:

• Modify: mobile-oa-h5/src/views/OaStart.vue

• Step 1: 取消右侧增加「历史记录」

<van-button class="oa-start__btn oa-start__btn--cancel" @click="onCancel">取消</van-button>
<van-button class="oa-start__btn oa-start__btn--cancel" @click="onHistory">历史记录</van-button>

function onHistory() {
  const appId = String(appMeta.value?.id || '').trim()
  if (!appId) {
    showToast('缺少流程信息')
    return
  }
  router.push({
    path: '/oa-history',
    query: {
      appId,
      appName: appMeta.value.appName || '',
      token: route.query.token || undefined,
      returnPath: route.query.returnPath || undefined
    }
  })
}

样式可复用 --cancel；若四钮过挤，历史记录 padding 可略紧。

---

Task 5: 详情隐藏打印

Files:

• Modify: mobile-oa-h5/src/views/OaDetail.vue

• Step 1: from=history 时不展示打印按钮

const hidePrint = computed(() => String(route.query.from || '').trim() === 'history')

模板中打印按钮加 v-if="!hidePrint"；更多菜单里若有打印项一并隐藏。

---

Task 6: 手工验收

• 无全员权限：仅本人；无申请人框
• 有全员权限：申请人检索有效
• 点卡片进详情无打印；返回历史再返回表单可继续填
• 底栏顺序：取消 | 历史记录 | 暂存草稿 | 提交审批