出库放行审核 · 列表卡片对齐采集协议单卡片

日期：2026-07-29
状态：已实现
模块：中试服务 / 基础实验（及共用同页的临床入口）→ 出库放行审核
界面模式：卡片列表（对齐协议卡）
参考页：web-admin/src/views/cell-storage/protocol-audit/ProtocolAuditTab.vue（protocol-card*）
实现页：web-admin/src/views/pilot-service/outbound-release-review/OutboundReleaseReviewCardList.vue
Demo：docs/superpowers/demos/2026-07-29-outbound-release-card-vs-protocol-card-demo.html

1. 背景与目标

现状

出库放行审核使用多列网格卡片（outbound-release-review-card*）：标题行堆 Tag、meta 栅格、需求细胞绿底块、底部横排操作。与采集协议单「左 aside + 中 sections + 右 foot」全宽卡片观感不一致。

目标

出库放行列表卡片在布局与 CSS 类名上对齐采集协议单卡片；业务字段仍为出库放行数据。中试 / 基础实验 / 临床共用组件，一次改动全覆盖。

范围外

不改列表 API、筛选、待审核/已审核 Tab、就绪/作废过滤
不抽公共 SCSS（本次按各自维护复制样式）
不改审核 / 查看 / 出库物料弹窗逻辑与事件契约
不把协议业务块（新生儿、缴费等）搬进出库卡

2. 需求确认记录

维度	决定
对齐方式	复用 `protocol-card*` 类名，只换字段
样式落地	复制协议卡 SCSS 到 `OutboundReleaseReviewCardList.vue`，各自维护
Aside 主标题	中试/临床：患者姓名；基础实验：客户名称；副行申请单号（基础实验再加课题）
中部块	三块：基础信息 · 需求细胞（样本条样式）· 状态摘要
列表排布	单列全宽（非多列 `auto-fill` 网格）

3. 卡片结构

article.protocol-card
  ├─ .protocol-card__select          勾选
  ├─ .protocol-card__aside           身份栏
  ├─ .protocol-card__sections
  │    ├─ .protocol-card__block      基础信息
  │    ├─ .protocol-card__block      需求细胞（sample-item 条）
  │    └─ .protocol-card__block      状态摘要
  └─ .protocol-card__foot
       └─ .protocol-card__actions    审核 / 查看 / 出库物料

选中：is-selected 类 + 主色描边（与协议卡一致）。双击仍触发查看。

3.1 Aside

元素	中试 / 临床	基础实验
序号	`protocol-card__index`	同左
主标题	`patientName`	`customerName`
副行	申请单号	申请单号；课题名称
主 Tag	审核结论（无则「待审核」）	同左
次 Tag	`bizType`	同左
底部小字	计划状态 · 质检状态（文案）	同左；可附审核人/时间

3.2 基础信息块

申请单号
患者姓名或课题名称 + 客户名称（随 showPatient）
取用时间（文案用现有 pickupTimeLabel）
审核人、审核时间

3.3 需求细胞块

标题「需求细胞」+ N 项（protocol-card__block-count）
每条产品用 protocol-card__sample-item / __sample-seq / __sample-line 等
展示：项目名称、项目编码、细胞类型 · 规格 · 数量、产品状态 Tag
无产品时：protocol-card__empty 或现有 fallback 文案

3.4 状态摘要块

计划状态、质检状态、审核结论（均为 el-tag，语义色不变）

3.5 操作列

事件不变：review / view / material / toggle-select / card-dblclick / 分页
按钮顺序建议：审核 → 查看 → 出库物料（与协议卡「审核优先」一致；图标与现网一致）

4. 样式

从 ProtocolAuditTab.vue 复制 .protocol-card* 及相关响应式规则到 OutboundReleaseReviewCardList.vue 的 scoped SCSS。
删除本组件内旧的 .outbound-release-review-card* 布局样式；容器可保留 list-body list-wrap 与分页栏。
列表容器改为 display: flex; flex-direction: column; gap: 10px; padding: 16px（对齐 .protocol-card-list）。
允许少量出库修饰（如块 min-width），不引入协议专用块名（--newborn / --payment）。

5. 改动面

文件	变更
`OutboundReleaseReviewCardList.vue`	模板结构 + 复制 SCSS + 字段映射
Demo HTML	已存在，可作验收对照；实现后可标已实现或微调

不改：index.vue 数据流（除非 props 不足，当前已够）、API、后端。

6. 测试要点

中试入口：aside 主标题为患者姓名；基础实验为客户名称。
卡片为单列全宽；选中描边；勾选/批量审核仍可用。
多产品时需求细胞条数正确；无产品有空态。
查看 / 审核 / 出库物料按钮行为与改前一致。
窄屏响应式不严重错乱（参考协议卡 media query）。

7. 方案取舍

方案	结论
复制类名 + 改写出库卡片 DOM	采用
抽公共 SCSS	拒绝（本次各自维护）
仅微调视觉、保留网格	拒绝

2026-07-29-outbound-release-card-align-protocol-design.md 5.1 KB Geçmiş Ham