原型图 | React + Tailwind
出库单通用详情页，按出库类型（投放/借用）动态渲染内容。仓管查看资产清单后发起出库确认；借用出库在已出库后展示处理进度。已出库态展示异常明细（⚠+原因）与现场照片（来源 CG07 出库确认拍照留证），资产编码与 CG07/CG04 同源。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 单号+类型标签 | 出库单号 + 颜色标签（蓝/青/琥珀） | 标签颜色按出库类型区分 |
| 状态时间线 | 3节点：待处理→处理中→已出库，高亮当前状态 | 所有场景通用 |
| 基本信息 | 出库仓库 / 创建人 / 创建时间 | 处理中状态额外显示当前操作人 |
| 场景特有信息 | 类型色虚线高亮框，展示该出库类型的关键字段 | 每个场景内容不同，见下方 |
| 资产清单 | 按类型分组卡片（高价值配件/滤芯/普通配件/耗材），按场景裁剪 | 借用场景无高价值配件组 |
| 底部按钮 | 状态驱动：待处理→开始出库；处理中·本人→继续出库；处理中·他人→灰显+操作人；已出库→无按钮 | 所有场景通用 |
| 处理进度区块 | 逐项资产展示 借出/已归还/已使用/借用中 + 三色进度条；借用中全部归零自动标"已完结" | 仅借用出库已出库状态展示 |
| 已出库结果区块 | 异常明细（⚠+编码+原因，来源 CG07 标记异常）+ 现场照片缩略图（3 张，来源 CG07 拍照留证） | 所有场景已出库态展示，异常内容按场景预置 |
| 资产编码规则 | 投放出库统一以实际出库为准：按类型+数量出库，具体资产编码由仓管现场扫码绑定 | 仅投放场景；借用出库维持现状 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 点击"开始出库" | 单据状态=待处理 | 无其他仓管锁定 | 跳转CG07出库确认 | 锁定时按钮禁用+提示 | 携带出库单ID+类型+编码规则 |
| 点击"继续出库" | 处理中且操作人=本人 | - | 跳转CG07继续操作 | - | 恢复未完成的确认进度 |
| 点击关联工单号 | 借用场景（可选） | - | 跳转工单详情（占位） | - | 携带工单ID |
| 场景/状态切换 | 点击右侧面板按钮 | - | 页面内容即时刷新 | - | 切换场景×状态的Mock数据 |
| 点击"返回" | 用户点击返回箭头 | - | 跳转出库列表 | - | 返回CG05 |
| 场景 | 特有内容 |
|---|---|
| ① 投放出库 | 投放位置 + 标准配置模板；资产分组：高价值配件（类型+数量）/滤芯/普通配件；资产编码统一以实际出库为准（现场扫码绑定） |
| ③ 借用出库 | 借用人+联系方式 + 借用原因 + 关联工单（可选）；资产分组：滤芯(逐根 SN-L-020~022)/普通配件/耗材；已出库后展示处理进度区块 |
| 状态覆盖 | 每场景 4 条 Mock：待处理 / 处理中·本人(王五) / 处理中·他人(李四) / 已出库，右侧面板可切换 |
CG06 出库详情 ├─ ← 返回 → CG05 出库列表 ├─ 开始出库 / 继续出库 → CG07 出库确认（携带出库单ID+出库类型，编码规则统一为实际出库） └─ 返回总览 → index.html