提交

2026-06-15 11:43:16 +08:00
1 parent 427bcb1551
commit 31b04575e2
@@ -0,0 +1,277 @@
+# 「我的生产任务」对齐「生产工单」界面 — 需求分析与设计
+
+> 日期: 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）
+
+1. **薄 shell**：拷贝页面骨架（`panel-top`、pill tabs、filter-block、卡片列表、分页），删除管理向对话框与工具栏。
+2. **`pageMode` 开关**：在共享 `*CardList` 上扩展 `manage | mine`，子组件读 props 控制按钮与 `listMode`。
+3. **数据模型翻转**：管理页 **工单优先**（服务端分页）→ 我的页 **任务优先**（拉本人任务 → 按 `workOrderId` 分组 → 客户端筛选/分页）。
+4. **独立 util**：`qc-mine-task-groups.ts`（fetch all → group → enrich WO detail → filter → paginate）。
+5. **preset tasks**：卡片内任务子表不再重复请求列表 API。
+6. **权限分离**：菜单 `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|history` |
+| 设计依据 | `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 — 共享能力（阻塞项）
+
+1. `ProductionWorkOrderCardList` 增加 `pageMode`、`presetTasksByWorkOrderId`、`taskListMode` 等。
+2. `WorkOrderTaskSubList` 支持 `presetTasks` prop（有则不调 `fetchProductionTaskList`）。
+3. 抽离 `ProductionWorkOrderViewDialogHost`（从 `production-work-order/index.vue`）。
+
+### Phase 2 — 数据管道
+
+4. 新建 `web-admin/src/utils/production-mine-task-groups.ts`（镜像 `qc-mine-task-groups.ts`）。
+5. 对接 `fetchMyProductionTasks` + `fetchProductionWorkOrderDetail`。
+
+### Phase 3 — 我的生产任务页重写
+
+6. 重写 `my-production-task/index.vue`：拷贝工单页骨架 + `page-mode="mine"`。
+7. 按 §6 定稿 Tab（推荐双层 Tab）。
+8. 删除页面级扁平 `WorkOrderTaskSubList` 与固定高度 hack（`pageStyle` / `ResizeObserver` 可不再需要）。
+
+### Phase 4 — 验收与文档
+
+9. 对照 `docs/web-admin-ui-pattern-index.md` 标注参考页（P 模式 + 质检 mine 页）。
+10. 更新 `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. 待产品确认（单选优先）
+
+1. **Tab 模型**：方案 A / B / C（§6）？
+2. **历史执行**：是否仍为独立 Tab（若选 A，默认）？
+3. **临时生产工单 Tab**：卡片是否仅「查看」无编辑（对齐 QC mine）？
+4. **默认时间范围**：是否默认近 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` 技能生成可执行任务清单。
@@ -0,0 +1,253 @@
+# 采集协议单 · 缴费信息 Tab 五列看板 — 设计说明
+
+**日期**：2026-06-14  
+**状态**：已实现  
+**用户确认**：卡片字段采用 **方案 B（主字段 + 展开）**
+
+**关联页面**：
+- `web-admin/src/views/cell-storage/protocol-audit/PaymentInfoTab.vue`
+- 父页 `web-admin/src/views/cell-storage/protocol-audit/index.vue`
+
+**参考实现**：
+- 看板布局：`web-admin/src/views/pilot-service/cell-product-type/index.vue` + `cell-product-kanban.scss`
+- 同模块卡片交互：`web-admin/src/views/cell-storage/protocol-audit/ProtocolAuditTab.vue`（勾选、双击查看、KV 网格）
+- Demo 双栏看板：`web-admin/demo-payment-confirm-layouts.html` 方案 B
+- 现 P08 列表逻辑：`PaymentInfoTab.vue`（筛选、批量、单条确认、退费弹窗）
+
+**UI 模式**：P08 变体（状态分视图）→ 五列看板 + 卡片；实现后建议在 `docs/web-admin-ui-pattern-index.md` P08 节补充看板子模式说明。
+
+---
+
+## 1. 背景与目标
+
+「采集协议单管理 → 缴费信息」当前为 **5 个 Pill Tab + 表格列表**，每次仅展示单一缴费状态的数据。财务/业务人员需在 Tab 间切换才能对比各阶段进度。
+
+**目标**：
+
+1. 改为 **5 列看板**，列与缴费状态一一对应：待缴费、缴费确认中、已缴费、退费确认中、已退费。
+2. 每列内以 **卡片** 展示缴费明细；卡片默认展示主字段，可展开查看完整字段（与现列表字段一致）。
+3. **不改后端 API**；保留现有筛选、批量操作、单条确认、退费弹窗、协议查看等业务能力。
+
+---
+
+## 2. 状态与列映射（不变）
+
+| 列 key | 列标题 | payStatus | 列内可操作 |
+|--------|--------|-----------|------------|
+| `dfj` | 待缴费 | `dfj` | 勾选、批量/单条「缴费确认」、查看 |
+| `jfqrz` | 缴费确认中 | `jfqrz` | 查看 |
+| `yjf` | 已缴费 | `yjf` | 勾选、批量/单条「退费确认」、查看 |
+| `tfqrz` | 退费确认中 | `tfqrz` | 查看 |
+| `ytf` | 已退费 | `ytf` | 查看 |
+
+状态流转与现实现一致，不在本次改动范围。
+
+---
+
+## 3. 布局结构
+
+```
+page-container / panel（父页已有）
+└─ PaymentInfoTab
+     ├─ filter-block（全局筛选，保留现有 3 项 + 防抖搜索）
+     ├─ list-toolbar（全局批量区，保留待缴费/已缴费批量按钮）
+     └─ kanban-board（5 列 grid）
+          └─ kanban-col × 5
+               ├─ kanban-col-hd（列名 + 数量 badge）
+               ├─ kanban-list（卡片区，列内纵向滚动）
+               │    └─ payment-card × N
+               └─ kanban-col-footer（列内 mini 分页）
+```
+
+### 3.1 Grid 与响应式
+
+| 视口宽度 | 布局 |
+|----------|------|
+| ≥ 1400px | `grid-template-columns: repeat(5, 1fr)`，五列同屏 |
+| 1024–1399px | 五列保留，容器 `overflow-x: auto`，最小列宽约 260px |
+| &lt; 1024px | 单列纵向堆叠五列（每列仍独立标题 + 卡片 + 分页） |
+
+列容器样式对齐细胞产品看板：`border-radius: 10px`、列内 `max-height: calc(100vh - 320px)`、`.kanban-list` 独立滚动。
+
+### 3.2 移除项
+
+- 顶部 `el-tabs`（`panel-pill-tabs`）**删除**；状态由列标题表达。
+- `el-table` 及表格专属样式（如 `row-due-soon` 行级样式）**替换**为卡片级样式。
+
+---
+
+## 4. 卡片字段（方案 B：主字段 + 展开）
+
+### 4.1 默认展示（主字段，6–8 项）
+
+| 标签 | 字段 | 展示规则 |
+|------|------|----------|
+| 客户姓名 | `motherName` | 卡片头部主标题 |
+| 协议状态 | `protocolStatus` | `el-tag`，头部右侧 |
+| 缴费方式 | `payMode` | 文本 + 期数合并为一行，如「分期 · 第 2 期」 |
+| 应缴费时间 | `installmentDueDate` | YYYY-MM-DD |
+| 应缴金额(元) | `dueAmount` | `formatAmount`，加粗 |
+| 实缴金额(元) | `transferAmount` | 无值显示 `—` |
+| 转账方式 | `transferType` | 枚举 label |
+
+**不展示**：卡片内 **不重复** 展示 `payStatus` Tag（列标题已表达当前状态）。
+
+### 4.2 展开区（次要字段）
+
+点击卡片底部「展开详情 / 收起」切换，展示：
+
+| 标签 | 字段 | 展示规则 |
+|------|------|----------|
+| 序号 | 列内分页序号 | 展开区首行 |
+| 身份证号 | `motherIdCard` | `maskIdCard` |
+| 新生儿姓名 | `newbornName` | |
+| 新生儿身份证号 | `newbornIdCard` | `maskIdCard` |
+| 转账时间 | `transferTime` | |
+| 创建时间 | `createTime` | |
+
+展开状态 **按卡片 id 独立记忆**（`Set<string>` 或 `Record<id, boolean>`），刷新数据后若 id 仍存在则保持展开。
+
+### 4.3 卡片结构示意
+
+```
+┌─────────────────────────────┐
+│ ☐  张三              [生效中]│  ← 勾选(仅 dfj/yjf 列) + 姓名 + 协议状态 Tag
+├─────────────────────────────┤
+│ 缴费方式    分期 · 第 2 期   │
+│ 应缴费时间  2026-03-15       │
+│ 应缴金额    ¥5,000.00        │
+│ 实缴金额    ¥5,000.00        │
+│ 转账方式    微信转账         │
+├─ 展开详情 ───────────────────│  ← 可折叠
+│ 序号 / 身份证 / 新生儿…      │
+├─────────────────────────────┤
+│ [查看]  [缴费确认]           │  ← 操作区；双击卡片 → 查看
+└─────────────────────────────┘
+```
+
+### 4.4 临近到期预警
+
+「待缴费」列中，`payStatus === 'dfj'` 且 `isPaymentDueWithinWarnWindow(installmentDueDate)` 为 true 的卡片：
+
+- 左边框 `3px solid #ef4444` 或背景 `#fee2e2`（与现 `row-due-soon` 语义一致，改为卡片级 class `payment-card--due-soon`）。
+
+---
+
+## 5. 交互与业务逻辑（保留）
+
+| 能力 | 行为 |
+|------|------|
+| 筛选 | 关键词、转账方式、应缴费时间；变更后 **五列并行刷新**，页码重置为 1 |
+| 防抖搜索 | 保留 `watchDebounced` 300ms |
+| 批量缴费确认 | 工具栏按钮；仅统计 **待缴费列** 已勾选卡片 |
+| 批量退费确认 | 工具栏按钮；仅统计 **已缴费列** 已勾选卡片 |
+| 单条缴费确认 | 待缴费列卡片操作；确认框文案不变 |
+| 单条退费确认 | 已缴费列卡片操作；退费弹窗不变 |
+| 查看协议 | 所有列；打开 `ProtocolViewDialog` |
+| 双击 | 卡片双击等同「查看」 |
+
+勾选 **不可跨列**；每列独立 `selectedIds` 或全局 `selectedRows` 带 `payStatus` 校验。
+
+---
+
+## 6. 数据层（方案 A：五路并行请求）
+
+### 6.1 API
+
+沿用 `fetchPaymentDetailList`：
+
+```typescript
+GET /web/admin/protocol-payment-details
+  ?payStatus=dfj|jfqrz|yjf|tfqrz|ytf
+  &page=&pageSize=
+  &keyword=&transferType=
+  &installmentDueDateStart=&installmentDueDateEnd=
+```
+
+**不新增后端接口。**
+
+### 6.2 列状态
+
+每列独立：
+
+```typescript
+interface KanbanColumnState {
+  key: PayStatusKey
+  label: string
+  list: Record<string, unknown>[]
+  total: number
+  page: number
+  pageSize: number  // 默认 10
+  loading: boolean
+  selectable?: boolean
+}
+```
+
+### 6.3 加载策略
+
+- `loadAllColumns()`：`Promise.all` 五列 `loadColumn(key)`。
+- 筛选 / 重置 / 防抖触发 → `loadAllColumns()`，各列 `page = 1`。
+- 单条/批量操作成功 → `loadAllColumns()`（或仅刷新受影响列，实现时取简单方案：全量刷新）。
+- 列内分页 `@current-change` / `@size-change` 仅刷新该列。
+- 可选：AbortController 取消上一次未完成的全局刷新，避免竞态。
+
+### 6.4 列头计数
+
+列标题旁 badge 展示该列 `total`（来自 API `res.total`）。
+
+---
+
+## 7. 组件与文件变更
+
+| 文件 | 变更 |
+|------|------|
+| `PaymentInfoTab.vue` | 主改造：Tab+Table → Kanban+Card |
+| `payment-info-kanban.scss`（新建，同目录） | 看板列、卡片、展开区、预警样式；`@import` 复用 `cell-product-kanban.scss` 中 `.entity-card` 基础可选 |
+| `docs/web-admin-ui-pattern-index.md` | P08 节补充看板子模式（实现时一并更新） |
+
+**不新建**独立 Vue 子组件（除非单文件超 400 行时再抽 `PaymentKanbanCard.vue`）；首版以内联模板 + scoped SCSS 为主，与 `ProtocolAuditTab` 一致。
+
+---
+
+## 8. 视觉规范（Fresh Mint）
+
+- 主色链：`--primary #10b981`、`--primary-bg #ecfdf5`；列头背景 `--table-head #f8fafc`。
+- 卡片：`border-radius: 10px`，hover 浅绿边框（对齐 `.entity-card`）。
+- 列头语义色（可选、低饱和）：待缴费列顶缘浅琥珀 `#fffbeb`；已缴费列浅绿 `#ecfdf5`；其余列中性。
+- 按钮：操作区沿用 `btn-op-item`；工具栏「已选 N 项」仍在最前。
+- 遮罩、弹窗：退费弹窗、`ProtocolViewDialog` 不变。
+
+---
+
+## 9. 测试要点
+
+1. 五列同屏加载与列内分页独立。
+2. 筛选变更后五列数据与计数同步更新。
+3. 待缴费列勾选 → 批量缴费确认；已缴费列勾选 → 批量退费确认。
+4. 单条缴费/退费确认后对应卡片移列（刷新后验证）。
+5. 临近到期卡片预警样式仅出现在待缴费列。
+6. 展开/收起不影响勾选与操作。
+7. 1366 / 1920 视口下布局不溢出、列内可滚动。
+8. 双击、查看按钮打开协议弹窗正常。
+
+---
+
+## 10. 工作量
+
+| 项 | 估时 |
+|----|------|
+| 看板布局 + 五列数据层 | 0.5d |
+| 卡片主字段 + 展开区 | 0.5d |
+| 勾选 / 批量 / 操作迁移 | 0.25d |
+| 样式 + 响应式 | 0.25d |
+| 自测 | 0.25d |
+| **合计** | **~1.5 人日** |
+
+---
+
+## 11. 不在范围
+
+- 后端 API / 状态机变更
+- 缴费确认中、退费确认中列的新增操作
+- 看板列间拖拽改状态
+- 临床申请单缴费 Tab（`ClinicalPaymentTab.vue`）同步改造
@@ -196,6 +196,8 @@ page-head → panel → filter-block → list-toolbar → list-table → paginat
 **写法**：`region-tabs` 切换 `payStatus` 筛选；每 Tab 可不同批量操作  
 **类似**：`payment-confirm`（pending/confirmed）、`refund-confirm`

+**看板子模式（P08-kanban）**：多状态列同屏展示，列内卡片流 + 列内独立分页；参考 `views/cell-storage/protocol-audit/PaymentInfoTab.vue`（五列缴费看板，卡片主字段 + 展开详情）。
+
 ---

 ### P09 标准查看弹窗（SystemViewDialog）