# 质检工单 Tab 拆分与分型展示 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:** 将质检工单与我的质检任务从 3 Tab 拆为 6 Tab，服务端强制按子类型过滤；Tab 子页面拷贝再改；六份独立查看弹窗；CardList 共用 + cardMetaConfig props。

**Architecture:** `tabs/*` 六份子页面从现有入库/出库/临时区块拷贝；`view-dialogs/*` 六份独立查看界面（不共用 Host）；`QcWorkOrderTaskSubList` 与配置检测弹窗共用；`QcWorkOrderCardList` + SampleGroup 共用，props 传 `cardMetaConfig`；检测任务 sections 抽 `useQcWorkOrderTaskViewSections` 供六弹窗 import。后端 `list_work_orders` / `list_mine_tasks` 增加 `receptionSource` 过滤。

**Tech Stack:** Vue 3 + Element Plus（web-admin）、FastAPI + SQLAlchemy（backend）、TypeScript strict:false

**Spec:** `docs/superpowers/specs/2026-06-16-qc-work-order-tab-split-design.md`

---

## File Map

| 文件 | 职责 |
|------|------|
| `web-admin/src/utils/qc-work-order-tabs.ts` | **新建** Tab 常量、`toListQueryParams` |
| `web-admin/src/utils/qc-work-order-card-meta.ts` | **新建** 六 Tab 的 `cardMetaConfig`（CardList props） |
| `web-admin/src/views/.../qc-work-order/tabs/*.vue` | **新建×6** 从 index 拷贝的 Tab 子页面 |
| `web-admin/src/views/.../qc-work-order/view-dialogs/*.vue` | **新建×6** 独立查看弹窗 |
| `web-admin/src/views/.../qc-work-order/composables/useQcWorkOrderTaskViewSections.ts` | **新建** 检测任务 sections（六弹窗共用） |
| `backend/app/crud/qc_work_order.py` | `list_work_orders` + `reception_source` |
| `backend/app/crud/qc_task.py` | `list_mine_tasks` + `reception_source` / `biz_type` |
| `QcWorkOrderCardList.vue` / `SingleCard.vue` / `SampleGroup.vue` | 接收 `cardMetaConfig` props |
| `QcWorkOrderViewDialogHost.vue` | **删除**（逻辑迁入六弹窗） |
| `OutboundQcViewDialog.vue` | **删除**（拷贝为三个 outbound 弹窗后删） |
| `useQcWorkOrderViewDialog.ts` | **删除**（拆入弹窗 + task composable） |
| `qc-work-order/index.vue` | Tab 壳 + 共用配置检测弹窗 |
| `my-qc-task/index.vue` | Tab 壳，import 同一套 `tabs/*` |

---

### Task 1: Tab 配置模块（前端基础）

**Files:**
- Create: `web-admin/src/utils/qc-work-order-tabs.ts`

- [ ] **Step 1: 创建 Tab 配置**

```typescript
// web-admin/src/utils/qc-work-order-tabs.ts
export type QcWorkOrderTabKey =
  | 'inbound_cell_storage'
  | 'inbound_research_donation'
  | 'outbound_pilot_service'
  | 'outbound_basic_experiment'
  | 'outbound_clinical_application'
  | 'temporary'

export type QcWorkOrderTabConfig = {
  key: QcWorkOrderTabKey
  label: string
  group: 'inbound' | 'outbound' | 'temporary'
  workOrderType: 'inbound' | 'outbound' | 'temporary'
  receptionSource?: 'cell_storage' | 'research_donation'
  bizType?: 'pilot_service' | 'basic_experiment' | 'clinical_application'
  listLayout: 'inbound-grouped' | 'standalone'
}

export const QC_WORK_ORDER_TABS: QcWorkOrderTabConfig[] = [
  {
    key: 'inbound_cell_storage',
    label: '采集入库',
    group: 'inbound',
    workOrderType: 'inbound',
    receptionSource: 'cell_storage',
    listLayout: 'inbound-grouped'
  },
  {
    key: 'inbound_research_donation',
    label: '捐赠入库',
    group: 'inbound',
    workOrderType: 'inbound',
    receptionSource: 'research_donation',
    listLayout: 'inbound-grouped'
  },
  {
    key: 'outbound_pilot_service',
    label: '中试',
    group: 'outbound',
    workOrderType: 'outbound',
    bizType: 'pilot_service',
    listLayout: 'standalone'
  },
  {
    key: 'outbound_basic_experiment',
    label: '基础实验',
    group: 'outbound',
    workOrderType: 'outbound',
    bizType: 'basic_experiment',
    listLayout: 'standalone'
  },
  {
    key: 'outbound_clinical_application',
    label: '临床应用',
    group: 'outbound',
    workOrderType: 'outbound',
    bizType: 'clinical_application',
    listLayout: 'standalone'
  },
  {
    key: 'temporary',
    label: '临时',
    group: 'temporary',
    workOrderType: 'temporary',
    listLayout: 'standalone'
  }
]

export const DEFAULT_QC_WORK_ORDER_TAB: QcWorkOrderTabKey = 'inbound_cell_storage'

export function getQcWorkOrderTab(key: string): QcWorkOrderTabConfig | undefined {
  return QC_WORK_ORDER_TABS.find((t) => t.key === key)
}

export function parseQcWorkOrderTabKey(raw?: string | null): QcWorkOrderTabKey {
  const k = (raw || '').trim()
  if (getQcWorkOrderTab(k)) return k as QcWorkOrderTabKey
  // 兼容旧 query：inbound / outbound / temporary
  if (k === 'inbound') return 'inbound_cell_storage'
  if (k === 'outbound') return 'outbound_pilot_service'
  if (k === 'temporary') return 'temporary'
  return DEFAULT_QC_WORK_ORDER_TAB
}

export function toWorkOrderListQuery(tab: QcWorkOrderTabConfig) {
  return {
    workOrderType: tab.workOrderType,
    receptionSource: tab.receptionSource,
    bizType: tab.bizType
  }
}

export function resolveTabKeyFromWorkOrder(row: {
  workOrderType?: string
  receptionSource?: string
  bizType?: string
}): QcWorkOrderTabKey {
  const wt = row.workOrderType || 'inbound'
  if (wt === 'temporary') return 'temporary'
  if (wt === 'outbound') {
    const bt = row.bizType || 'pilot_service'
    if (bt === 'basic_experiment') return 'outbound_basic_experiment'
    if (bt === 'clinical_application') return 'outbound_clinical_application'
    return 'outbound_pilot_service'
  }
  return row.receptionSource === 'research_donation'
    ? 'inbound_research_donation'
    : 'inbound_cell_storage'
}
```

- [ ] **Step 2: 本地类型检查**

Run: `cd web-admin && pnpm exec vue-tsc --noEmit 2>&1 | head -20`  
Expected: 无新增错误（新文件未被引用时可能无输出）

---

### Task 2: 后端列表 API — `receptionSource` 过滤

**Files:**
- Modify: `backend/app/crud/qc_work_order.py`（`list_work_orders`）
- Modify: `backend/app/api/qc.py`（`GET /qc-work-orders`）

- [ ] **Step 1: CRUD 增加参数与过滤**

在 `list_work_orders` 签名增加 `reception_source: Optional[str] = None`，在 `biz_type` 过滤之后：

```python
rs = (reception_source or "").strip()
if rs:
    q0 = q0.filter(BizQcWorkOrder.reception_source == rs)
```

- [ ] **Step 2: API 路由暴露参数**

```python
receptionSource: Optional[str] = Query(None, alias="receptionSource"),
# ...
reception_source=receptionSource,
```

- [ ] **Step 3: 手动验证**

启动 backend 后请求（需有效 token）：

```bash
curl -s 'http://127.0.0.1:8000/api/admin/qc-work-orders?workOrderType=inbound&receptionSource=cell_storage&page=1&pageSize=5' -H "Authorization: Bearer <token>"
```

Expected: 返回列表中每条 `receptionSource` 均为 `cell_storage`（或空默认为 cell_storage 的工单）

---

### Task 3: 后端我的任务 API — `receptionSource` / `bizType` 过滤

**Files:**
- Modify: `backend/app/crud/qc_task.py`（`list_mine_tasks`）
- Modify: `backend/app/api/qc.py`（`GET /qc-tasks/mine`）

- [ ] **Step 1: CRUD 增加过滤**

`list_mine_tasks` 签名增加 `reception_source`、`biz_type`；在 `qc_biz_type` 过滤后：

```python
rs = (reception_source or "").strip()
if rs:
    q0 = q0.filter(BizQcWorkOrder.reception_source == rs)
bt_out = (biz_type or "").strip()
if bt_out:
    q0 = q0.filter(BizQcWorkOrder.biz_type == bt_out)
```

- [ ] **Step 2: API 暴露 Query 参数并传入**

---

### Task 4: 前端 API 类型

**Files:**
- Modify: `web-admin/src/api/qc-work-order.ts`
- Modify: `web-admin/src/api/qc-task.ts`

- [ ] **Step 1: 列表查询参数增加 `receptionSource?: string`**

- [ ] **Step 2: `fetchMyQcTaskList` 参数增加 `receptionSource?: string`、`bizType?: string`**

---

### Task 5: `cardMetaConfig`（CardList props）

**Files:**
- Create: `web-admin/src/utils/qc-work-order-card-meta.ts`

- [ ] **Step 1: 导出六份 `QcWorkOrderCardMetaConfig`**

含：`groupContextBuilder`（入库组头）、`metaFields`（卡片 dl）、`showProtocolFeeSummary`、`showOutboundFeeSummary`、`listLayout`。

- [ ] **Step 2: 出库 meta 不得含 `receptionSource`**

---

### Task 6–8: CardList / SingleCard / SampleGroup 接 props

**Files:**
- Modify: `QcWorkOrderSingleCard.vue`、`QcWorkOrderSampleGroup.vue`、`QcWorkOrderCardList.vue`

- [ ] **Step 1: 新增 prop `cardMetaConfig: QcWorkOrderCardMetaConfig`**

- [ ] **Step 2: 删除 `activeTypeTab === 'outbound'` 等分支，改为渲染 `cardMetaConfig.metaFields`**

- [ ] **Step 3: CardList 按 `cardMetaConfig.listLayout` 决定是否样本分组**

---

### Task 9: 检测任务 composable（六弹窗共用）

**Files:**
- Create: `web-admin/src/views/quality-inspection/qc-work-order/composables/useQcWorkOrderTaskViewSections.ts`

- [ ] **Step 1: 从 `useQcWorkOrderViewDialog.ts` 抽出 `buildTaskTypeSections`、附件 slot、物料 slot 逻辑**

- [ ] **Step 2: 导出 `useQcWorkOrderTaskViewSections(tasks)` 供六弹窗 import**

---

### Task 10: 六份独立查看弹窗（拷贝再改）

**Files:**
- Create: `view-dialogs/InboundCellStorageViewDialog.vue` ← 拷 `QcWorkOrderViewDialogHost` + `useQcWorkOrderViewDialog`
- Create: `view-dialogs/InboundResearchDonationViewDialog.vue` ← 拷上，删协议缴费
- Create: `view-dialogs/OutboundPilotViewDialog.vue` ← 拷 `OutboundQcViewDialog`，仅中试 sections
- Create: `view-dialogs/OutboundBasicExperimentViewDialog.vue` ← 拷出库弹窗，删患者/输注
- Create: `view-dialogs/OutboundClinicalViewDialog.vue` ← 拷出库弹窗，临床 + 缴费
- Create: `view-dialogs/TemporaryQcViewDialog.vue` ← 拷入库弹窗，仅产品 + 任务

- [ ] **Step 1: 先落地 `InboundCellStorageViewDialog` + `OutboundPilotViewDialog`，行为与现网一致**

- [ ] **Step 2: 拷贝出其余四份并按 Spec §6.1 删减区块**

- [ ] **Step 3: 各弹窗内 import Task 9 composable**

---

### Task 11: 六 Tab 子页面（拷贝再改）

**Files:**
- Create: `tabs/InboundCellStorageTab.vue` ← 从 `index.vue` 剪出原入库 Tab（筛选+列表+本 Tab 弹窗）
- Create: `tabs/InboundResearchDonationTab.vue` ← 拷贝，改 API 参数与 cardMeta
- Create: `tabs/OutboundPilotTab.vue` ← 剪出原出库 Tab
- Create: `tabs/OutboundBasicExperimentTab.vue`、`tabs/OutboundClinicalTab.vue` ← 拷贝出库 Tab
- Create: `tabs/TemporaryTab.vue` ← 剪出原临时 Tab

每个 Tab 文件内：
- 写死 `toWorkOrderListQuery(tabConfig)`
- 传入对应 `cardMetaConfig`
- 挂载对应 `view-dialogs/*ViewDialog.vue`
- prop `pageMode?: 'manage' | 'mine'`

- [ ] **Step 1: 先完成 `InboundCellStorageTab` + `OutboundPilotTab` + `TemporaryTab`**

- [ ] **Step 2: 拷贝完成捐赠 + 两个 outbound 变体**

---

### Task 12: `index.vue` / `my-qc-task/index.vue` Tab 壳

**Files:**
- Modify: `qc-work-order/index.vue` — 6 Tab 按钮 + `<component :is="tabComponent" />` + **共用**配置检测弹窗
- Modify: `my-qc-task/index.vue` — 同上，传 `page-mode="mine"`

- [ ] **Step 1: `index.vue` 移除原筛选/列表大段，改为动态加载 `tabs/*`**

- [ ] **Step 2: `my-qc-task` import 同一套 `tabs/*`，不重复维护**

- [ ] **Step 3: 删除 `QcWorkOrderViewDialogHost.vue`、`OutboundQcViewDialog.vue`、`useQcWorkOrderViewDialog.ts`**

- [ ] **Step 4: 更新 `qc-mine-task-groups.ts` TabKey 与 API 过滤**

---

### Task 13: 列表 enrich 字段（若缺）

**Files:**
- Modify: `backend/app/crud/qc_work_order.py`

- [ ] **Step 1: 确认 `basic_experiment` 列表含 `projectTitle`、`customerName`**

---

### Task 14: 知识图谱与验收

- [ ] **Step 1: 六 Tab 数据隔离 + 六弹窗独立打开验收**

- [ ] **Step 2: `./scripts/update-graph.sh frontend`**

---

## Spec Coverage Self-Review

| Spec § | Task |
|--------|------|
| §2 Tab 定义 | Task 1, 11, 12 |
| §2.2 数据隔离 | Task 2, 3, 11 |
| §4 组件边界 | Task 5–12 |
| §5 卡片矩阵 | Task 5–8, 11 |
| §6 查看弹窗 | Task 9, 10, 12 |
| §7 Tab 子页面 | Task 11, 12 |
| §8 我的任务 | Task 12 |
| §9 后端 API | Task 2, 3, 13 |
| §11 验收 | Task 14 |

---

## Execution Handoff

Plan complete and saved to `docs/superpowers/plans/2026-06-16-qc-work-order-tab-split.md`.

**两种执行方式：**

1. **Subagent-Driven（推荐）** — 按 Task 逐条派发子 agent，每步完成后 review  
2. **Inline Execution** — 本会话按 Task 1→13 连续实现，关键节点暂停确认

请告知选择哪种方式；若直接开始实现，将从 Task 1 执行。