「我的生产任务」对齐「生产工单」界面 — 需求分析与设计

日期: 2026-06-14
状态: 已确认方案 C，实施中
触发: 产品建议「我的生产任务」直接拷贝「生产工单」界面再改造，参照「我的质检任务 ← 质检工单」已落地模式。

1. 需求摘要

目标页面	参考源页面	对标范例
`我的生产任务`	`生产工单`	`我的质检任务` ← `质检工单`

核心意图：不是继续维护一套扁平任务表 UI，而是让执行人看到与管理员相同的 工单卡片 + 内嵌任务 上下文（协议费用、样本/出库元数据、任务子表），仅在权限与操作上收窄为「本人任务」。

2. 参照范例：质检侧已落地的「拷贝改造」模式

2.1 文件与职责

维度	质检工单 `qc-work-order/`	我的质检任务 `my-qc-task/`
页面入口	`index.vue`（~1600 行，含管理 CRUD + 内联查看弹窗）	`index.vue`（~400 行，薄编排层）
卡片 UI	`QcWorkOrderCardList` + 子组件 10 个文件	复用 `QcWorkOrderCardList`，`page-mode="mine"`
数据管道	工单分页 API `fetchQcWorkOrderList`	任务 API `fetchMyQcTaskList` → `qc-mine-task-groups.ts` 分组/筛选/分页
Tab	入库 / 出库 / 临时	同三个 Tab（与工单页一致）
筛选	工单级 + Tab 条件字段	工单级 + 任务状态/类型 + 可展开「更多条件」
工具栏	临时 Tab 可新增工单等	无管理工具栏
工单操作	配置/编辑/删除等	仅查看
任务操作	`listMode=workOrder`, `operateScope=manage`	`listMode=mine`, `operateScope=mine`
任务加载	每卡 `fetchQcTaskList`	presetTasks 注入，避免 N+1
查看弹窗	内联 + `QcWorkOrderViewDialogHost`	仅 `QcWorkOrderViewDialogHost`

2.2 可复用的改造套路（Transformation Patterns）

薄 shell：拷贝页面骨架（panel-top、pill tabs、filter-block、卡片列表、分页），删除管理向对话框与工具栏。
pageMode 开关：在共享 *CardList 上扩展 manage | mine，子组件读 props 控制按钮与 listMode。
数据模型翻转：管理页 工单优先（服务端分页）→ 我的页 任务优先（拉本人任务 → 按 workOrderId 分组 → 客户端筛选/分页）。
独立 util：qc-mine-task-groups.ts（fetch all → group → enrich WO detail → filter → paginate）。
preset tasks：卡片内任务子表不再重复请求列表 API。
权限分离：菜单 biz:myQcTask:list + API /qc-tasks/mine；工单详情 enrichment 可 403 降级为任务字段拼 stub。

3. 现状：生产侧与目标的差距

3.1 生产工单（拷贝源）

项	现状
路径	`web-admin/src/views/production/production-work-order/`
入口	`index.vue`（筛选 + 工具栏 + `ProductionWorkOrderCardList`）
Tab	入库生产工单 / 出库生产工单 / 临时生产工单
卡片	`ProductionWorkOrderCardList.vue`：单列卡片 + 协议费用条 + 内嵌 `WorkOrderTaskSubList`
管理操作	新增工单、派发任务、完成工单、派发质检等（近期已按 Tab 隐藏部分工具栏/卡片操作行）
查看	`index.vue` 内联 `SystemViewDialog`（尚未抽离为 Host 组件）
权限	`production:work-order:list`

3.2 我的生产任务（当前实现）

项	现状
路径	`web-admin/src/views/production/my-production-task/index.vue`（~230 行）
Tab	当前任务 / 历史执行（与生产工单 Tab 不一致）
列表	扁平 `WorkOrderTaskSubList`（`mine-current` / `mine-history`），无工单卡片
数据	服务端分页 `GET /production-tasks/mine?scope=current
设计依据	`docs/superpowers/specs/2026-06-13-production-task-assignee-my-tasks-design.md`（转发 + 历史 Tab）
权限	`production:my-task:list`

3.3 差距对照

能力	我的质检任务（目标体验）	我的生产任务（现状）
工单卡片 + 上下文	✅	❌ 仅任务行
Tab 与工单页对齐（入库/出库/临时）	✅	❌ 当前/历史
协议费用 / 出库费用摘要	✅（卡片内）	❌
工单元数据（样本、申请单等）	✅	❌
`pageMode` 共享 CardList	✅	❌ CardList 无 mine 模式
任务分组 util	`qc-mine-task-groups.ts`	❌
转发 + 历史只读	质检无此需求	✅ 已实现

结论：当前「我的生产任务」在 业务闭环（负责人、转发、历史）上已满足 2026-06-13 设计，但在 界面范式 上与「拷贝工单页改造」不一致，也与「我的质检任务」不同构。

4. 目标态架构（推荐）

4.1 总体结构

my-production-task/index.vue          ← 薄编排（对标 my-qc-task/index.vue）
  ├─ ProductionWorkOrderCardList      ← 扩展 pageMode="mine"
  │    ├─ QcWorkOrderProtocolPaymentPanel / QcWorkOrderFeeSummaryBar（已有复用）
  │    └─ WorkOrderTaskSubList        ← 已有 mine / mine-history listMode
  ├─ production-mine-task-groups.ts   ← 新建（对标 qc-mine-task-groups.ts）
  └─ ProductionWorkOrderViewDialogHost ← 建议新建（从 index.vue 抽离查看弹窗）

4.2 数据流（任务优先 → 工单卡片）

fetchMyProductionTasks (current + history 或分 scope 拉取)
        ↓
groupByWorkOrderId + 按 activeTypeTab 过滤 workOrderType
        ↓
enrichMineEntriesWithWorkOrders (fetchProductionWorkOrderDetail，403 降级)
        ↓
filterMineEntriesByWorkOrderSearch (关键词、工单状态、时间范围…)
        ↓
paginateMineEntries (客户端分页工单卡片)
        ↓
buildMineTableRows → ProductionWorkOrderCardList
presetTasksByWorkOrderId → WorkOrderTaskSubList（跳过 per-card 任务 API）

4.3 需在共享组件上扩展的 props（对标 QC）

ProductionWorkOrderCardList 建议增加：

Prop	manage	mine
`pageMode`	`'manage'`	`'mine'`
`showCardOpsRow`	Tab 规则（现有）	`false` 或仅临时 Tab 查看
`presetTasksByWorkOrderId`	—	`Record<woId, ProductionTask[]>`
`taskListMode`	`'workOrder'`	`'mine'` 或 `'mine-history'`
`taskOperateScope`	`'manage'`	`'mine'`
勾选列	有	无

WorkOrderTaskSubList 已具备 mine-current / mine-history、operateScope、转发/只读逻辑，改造重点是 从卡片 preset 喂数据 而非页面级扁平列表。

5. 界面改造清单（拷贝后删除 / 保留 / 新增）

5.1 从 `production-work-order/index.vue` 拷贝骨架

区块	我的生产任务
`panel-top` 标题	保留，改为「我的生产任务」
pill tabs	入库 / 出库 / 临时（与工单页文案一致）
`filter-block`	保留结构；增加任务状态等字段；提示「仅展示指派给当前登录人的生产任务」
`list-toolbar`	删除（无新增工单、批量派发/完成）
`ProductionWorkOrderCardList`	保留，`page-mode="mine"`
派发/完成/新增对话框	删除
查看弹窗	迁至 `ProductionWorkOrderViewDialogHost`

5.2 筛选字段（建议对齐 my-qc-task）

主筛选行（常显）

关键词（按 Tab 切换 placeholder：入库=工单号/样本/入库编码；出库=工单号/申请单号；临时=工单号）
工单状态
任务状态
（可选）工艺路线 / 任务名称 — 视产品是否需要

展开更多

创建时间 / 输注时间（出库 Tab，默认近 30 天，与 QC mine 一致）
业务类型（出库 Tab）

历史任务：见 §6 Tab 策略。

5.3 卡片内展示（继承生产工单近期 UI）

缴费/费用区域：左右留白、无圆角（入库协议费用、出库费用条）— 与当前工单卡片样式一致。
入库/出库 Tab：无卡片操作行（派发任务、完成工单等）— mine 模式天然只读工单。
临时 Tab：可保留「查看 + 更多」只读入口（对齐 QC mine + 当前临时 Tab 行为）。

6. Tab 模型（已确认：方案 C）

决策（2026-06-14）：采用 方案 C — 与「生产工单」一致的三 Tab（入库 / 出库 / 临时），移除原「当前任务 / 历史执行」双层 Tab。

项	说明
顶层 Tab	入库生产工单 / 出库生产工单 / 临时生产工单
当前 vs 历史	同一列表：合并 `scope=current` 与 `scope=history` 任务
历史任务交互	非当前负责人任务按行只读（`isMineHistoryRow`）；可显示「转出时间」
转发语义	保留后端转发能力；UI 不再单独分 Tab

状态： 已确认，可实施。

7. 后端与 API（基本可复用）

API	用途	权限
`GET /production-tasks/mine`	拉本人任务（`scope=current\\|history`）	`production:my-task:list`
`GET /production-work-orders/{id}`	enrichment + 查看弹窗	`production:work-order:list`（mine 用户可能 403，需前端降级）
任务写操作 + `operateScope=mine`	执行/转发/步骤	已有

可能的后端增强（非必须，可 Phase 2）

mine 接口增加 workOrderType 与 Tab 对齐（前端已在 filter 传 workOrderType）。
一次返回带工单摘要字段，减少 N 次 detail 请求（性能优化）。

8. 实施阶段建议

Phase 1 — 共享能力（阻塞项）

ProductionWorkOrderCardList 增加 pageMode、presetTasksByWorkOrderId、taskListMode 等。
WorkOrderTaskSubList 支持 presetTasks prop（有则不调 fetchProductionTaskList）。
抽离 ProductionWorkOrderViewDialogHost（从 production-work-order/index.vue）。

Phase 2 — 数据管道

新建 web-admin/src/utils/production-mine-task-groups.ts（镜像 qc-mine-task-groups.ts）。
对接 fetchMyProductionTasks + fetchProductionWorkOrderDetail。

Phase 3 — 我的生产任务页重写

重写 my-production-task/index.vue：拷贝工单页骨架 + page-mode="mine"。
按 §6 定稿 Tab（推荐双层 Tab）。
删除页面级扁平 WorkOrderTaskSubList 与固定高度 hack（pageStyle / ResizeObserver 可不再需要）。

Phase 4 — 验收与文档

对照 docs/web-admin-ui-pattern-index.md 标注参考页（P 模式 + 质检 mine 页）。
更新 2026-06-13-production-task-assignee-my-tasks-design.md 中「界面」章节，标注 UI 范式变更。

9. 风险与注意点

风险	缓解
mine 用户无工单 list 权限，enrichment 403	与 QC 一致：任务字段拼 stub 工单行
N+1 detail 请求	先接受；后续 API 批量摘要
工单页与 mine 页 CardList 继续分叉	强制 `pageMode`，禁止再拷一份 CardList
生产无入库「样本分组」	生产卡片已是单列，无需 `SampleGroup`
与近期工单 Tab 工具栏隐藏规则	mine 模式统一隐藏管理操作，不重复 Tab 条件

10. 验收标准（建议）

「我的生产任务」使用 工单卡片 + 内嵌任务，视觉与「生产工单」同构（Fresh Mint、缴费区样式一致）。
Tab 与生产工单对齐（至少入库/出库/临时）；历史语义按 §6 定稿方案可验证。
仅展示 指派给当前用户 的任务（当前 Tab 可操作；历史 Tab 只读，若采用方案 A）。
无「新增生产工单 / 派发任务 / 完成工单」等管理入口。
任务执行、转发复用 TaskExecutionDialog / ForwardTaskDialog，operateScope=mine。
工单「查看」弹窗字段与生产工单查看一致。
权限：production:my-task:list 可独立使用；无工单 list 权限时列表仍可用（降级）。

11. 待产品确认（单选优先）

Tab 模型：方案 A / B / C（§6）？
历史执行：是否仍为独立 Tab（若选 A，默认）？
临时生产工单 Tab：卡片是否仅「查看」无编辑（对齐 QC mine）？
默认时间范围：是否默认近 30 天（对齐 my-qc-task）？

12. 相关文件索引

类型	路径
生产工单入口	`web-admin/src/views/production/production-work-order/index.vue`
生产卡片	`web-admin/src/views/production/production-work-order/ProductionWorkOrderCardList.vue`
任务子表	`web-admin/src/views/production/production-work-order/WorkOrderTaskSubList.vue`
我的生产任务（待重写）	`web-admin/src/views/production/my-production-task/index.vue`
对标：我的质检任务	`web-admin/src/views/quality-inspection/my-qc-task/index.vue`
对标：质检 mine util	`web-admin/src/utils/qc-mine-task-groups.ts`
既有生产 mine 设计	`docs/superpowers/specs/2026-06-13-production-task-assignee-my-tasks-design.md`
API	`web-admin/src/api/production-task.ts`, `production-work-order` API

下一步（brainstorming 流程）：请评审本文 §6 Tab 策略与 §11 待确认项。确认后使用 writing-plans 技能生成可执行任务清单。

2026-06-14-my-production-task-copy-from-work-order-design.md 13 KB تاريخچه خام