原型图 | React + Tailwind
出库确认页是仓管核心操作页面。仓管打开出库单后，通过逐条扫码（一物一码资产）或输入数量（数量管理资产）完成出库验收。页面按出库类型动态切换资产分组和校验逻辑。2 个场景：①投放出库 ③借用出库。单据状态三态（待处理/处理中·本人/已出库），右侧面板可切换评审，并配有「模拟扫码结果」7 张结果卡。所有场景支持「拍照留证」（最多 5 张，非必填）。出库确认页与 CG04 入库确认共享组件与异常/拍照能力口径（对齐 2026-08-06 CG04 迭代），不含「添加无码资产」（出库不涉及现场生成编码）。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 出库单信息卡片 | 展示出库单号、出库类型标签（颜色随场景变化）、出库仓库、创建人、创建时间 | ① ③借用人+联系方式+借用原因+关联工单 |
| 资产行状态标记 | 每行资产显示扫码态：已确认（绿✓）/ 异常（红⚠）/ 待扫码（灰）；支持扫码高亮闪烁 | 所有场景共用 |
| 资产分组列表 | 按资产类型分组（高价值配件→滤芯→配件与耗材），每组显示进度和操作 | ①完整交互（逐条点击模拟扫码）+配件缺失+数量差异2类异常弹窗 ③仅滤芯+配件与耗材两组 |
| 特殊模块 | 按场景展示特有UI模块 | ①异常弹窗集 ③仅数量行（无高价值分区） |
| 拍照+提交 | 吸底上方：拍照留证（点「拍照/从相册选择」模拟上传，最多 5 张、缩略图可删除、非必填）+ 待确认提示条（列出待确认项如未扫码/异常未填原因，点击跳转分区，仅提示不阻断提交）；吸底栏：扫码出库 + 提交出库 | ①异常项拍照建议、提交时显示X项正常Y项异常 ③无异常项时拍照非必填；待确认提示条两场景一致 |
| 异常原因 | 资产标记异常后行内显示「异常原因（选填）」，点「修改/填写」弹窗输入（文本框为主 + 常用原因快捷选项 + 补充说明）；提交确认弹窗逐条列出异常项（编码+原因，选填，不阻断确认）；投放出库（场景①）异常时须填「出库备注」方可确认。数量不符按「差异」处理，仅弹窗提示、不计入异常项（对齐 CG04） | 所有场景一致；不在当前分区的异常项通过待确认提示条跳转补填 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 扫码出库（底部按钮） | 点击吸底栏"扫码出库"→弹出模拟扫码选择器，选择预期资产编码 | 编码前缀自动匹配资产组（SN-P·S·A高价值配件 / SN-L滤芯） | 弹"识别结果"窗→确认出库后自动切到对应分区并高亮该行（flash），汇总+1 | 未识别/失败→重扫 / 报异常 / 进待处理区 | 全部完成后底部"提交出库"激活 |
| 扫码→绑定 | 扫码完成后（仅场景①） | 配件缺失→标记异常，需指明缺失哪个配件 | |||
| 数量差异 | 输入数量≠预期数量 | - | 标黄提示 | 弹窗提示差异，不强制写原因、不阻断提交 | - |
| 提交出库 | 至少识别 1 项资产（支持部分出库，无需扫完） | 异常原因选填（仅提示不阻断） | 弹「确认出库」二次弹窗：资产摘要 + 异常项逐条列表（编码+原因，选填不禁用确认）；投放出库异常时含「出库备注」必填项 | 有异常时按钮文案显示X项正常Y项异常 | 确认后跳转 CG06 出库详情·已出库态（异常数据穿透到 Web 端出库单详情） |
| 拍照留证 | 点击「拍照留证」按钮（异常时文案变「异常建议」） | 非必填；异常时建议留证 | 弹出底部操作面板（拍照/从相册选择/取消），点选后模拟上传占位缩略图，最多 5 张、×可删除、满 5 隐藏添加入口 | - | 提交后照片随单据保存，出库详情可见 |
| 提交出库（门槛） | 至少识别 1 项资产（支持部分出库，无需扫完） | 异常/差异原因仅作提示，不阻断提交；吸底栏上方显示琥珀色待确认提示条（列出未扫码/异常未填原因等，仅提示） | 弹「确认出库」二次弹窗，异常项逐条原因选填 | 有异常时按钮文案显示X项正常Y项异常 | 异常数据穿透到Web端出库单详情 |
| 模拟扫码结果（控制面板） | 点击右侧「模拟扫码结果」卡片（全部成功/部分成功/识别箱码/识别失败/配件缺失/数量差异/全部成功含异常） | 无（整页重置为对应出库结果） | 整页重置：已扫态/异常标记/绑定态/数量/差异弹窗按结果注入；当前卡高亮、不可用置灰 | 异常卡注入具体原因，提交弹窗逐条展示 | ①全 7 张；②③部分卡置灰；与单据状态正交（切卡不改状态） |
| 点击关联工单 | 借用场景出库信息卡片内（可选） | - | 占位提示「关联工单详情跳转（P2 预留）」；跳转行为与工单联动（P2）一并实现 | - | 投放场景无此字段 |
| 单据状态切换（控制面板） | 点击右侧「单据状态」三态按钮（待处理/处理中·本人/已出库） | - | 页面切换为对应状态；已出库态只读展示（资产全绿标+异常/照片区块+灰显不可操作） | - | 与模拟卡正交；提交成功后跳 CG06 已出库态 |
| 场景 | 展示内容 |
|---|---|
| ①投放出库（蓝色） | 出库信息卡片+资产分组（高价值配件/滤芯/配件与耗材，均按类型+数量现场扫码绑定实物编码）+异常弹窗集+拍照+提交；三态可切换，已出库态只读 |
| ③借用出库（琥珀色） | 出库信息卡片（含借用人/联系方式/借用原因/关联工单）+滤芯「类型+数量」+数量管理耗材，无高价值配件+拍照+提交；三态可切换 |
CG06 出库详情 → CG07 出库确认（携带出库单ID+出库类型+状态→决定场景与单据状态） ├── 完成 → 跳转 CG06 出库详情（status=outbound 已出库态） └── 返回 → 跳转 CG06 出库详情 参数传递：出库单ID、出库类型（决定默认场景）、状态（三态，可省略） 底部导航：已移除（出库确认为单任务页，全局 tab 冗余；导航出口由顶栏「返回总览」+ 语言切换提供）