原型图 | React + Tailwind
入库单通用详情页,按入库类型(首次/回收/归还/调拨)动态渲染内容。仓管查看资产清单后发起扫码确认;已完成详情可查看验收结果(照片/异常/无码/绑定)。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 单号+类型标签 | 入库单号 + 颜色标签(蓝/橙/紫/青) | 标签颜色按入库类型区分 |
| 状态时间线 | 3节点:待处理→处理中→已完成,高亮当前状态 | 所有场景通用 |
| 基本信息 | 入库仓库 / 创建人 / 创建时间 | 处理中状态额外显示当前操作人 |
| 场景特有信息 | 蓝色虚线高亮框,展示该入库类型的关键字段 | 每个场景内容不同,见下方 |
| 资产清单 | 按类型分组卡片(设备/配件/滤芯/耗材),每组独立表格 | 归还场景含借用数量列;回收场景含核验对比 |
| 单据状态 | 右侧面板状态子切换:待处理 / 处理中·本人 / 处理中·他人 / 已完成 | 所有场景通用,每场景 4 条 Mock |
| 详情结果 | 右侧面板结果子切换:正常 / 含异常 / 含无码资产 / 含现场照片(仅已完成态生效) | 所有场景通用;照片/异常/无码为 CG04 验收结果在本页的体现 |
| 底部按钮 | 状态驱动:待处理→开始确认;处理中·本人→继续确认;处理中·他人→灰显+操作人;已完成→灰显 | 所有场景通用 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 点击"开始确认" | 单据状态=待处理 | 无其他仓管锁定 | 跳转CG04入库确认 | 锁定时按钮禁用+提示 | 携带入库单ID+类型 |
| 点击"继续确认" | 处理中且操作人=本人 | - | 跳转CG04继续操作 | - | 恢复未完成的确认进度 |
| 点击来源出库单号 | 归还/调拨场景 | - | 跳转出库详情页 | - | 携带出库单ID |
| 场景/状态切换 | 点击右侧面板按钮 | - | 页面内容即时刷新 | - | 切换场景×状态的Mock数据 |
| 详情结果切换 | 点击右侧「详情结果」按钮(正常/含异常/含无码/含照片),单据状态自动切换为已完成 | 点击即切已完成态 | 页面即时展示对应结果区块:现场照片缩略图 / 异常明细(⚠+原因)/ 现场生成资产 | 异常明细含编码与原因 | 与场景组合评审;再切状态可回到待处理/处理中 |
| 点击"返回" | 用户点击返回箭头 | - | 跳转入库列表 | - | 返回CG02 |
| 场景 | 特有内容 |
|---|---|
| ① 首次入库 | 无特有信息,仅通用内容(入库单号+资产清单),与 web28 一致 |
| ② 回收入库 | 回收原因 + 原投放位置 + 关联配件核验对比(待处理不展示核验区;处理中与已完成展示) |
| ③ 归还入库 | 来源出库单(可跳转)+ 借用人+联系方式 + 借用天数 + 归还明细含借用中数量 |
| ④ 调拨入库 | 调拨单号 + 源仓库 + 调拨发起人 + 关联出库单(可跳转) |
| 状态覆盖 | 每场景 4 条 Mock:待处理 / 处理中·本人(王五) / 处理中·他人(李四/张三) / 已完成,右侧面板可切换 |
CG03 入库详情 ├─ ← 返回 → CG02 入库列表 ├─ CG02 列表点击 → 本页(携带单据ID+类型+状态) ├─ CG04 提交完成 → 本页已完成态(携带单据ID+类型+状态) ├─ 开始确认 / 继续确认 → CG04 入库确认(携带单据ID+类型) ├─ 来源出库单号 → 出库详情页(归还/调拨场景) ├─ 关联出库单 → 出库详情页(调拨场景) └─ 返回总览 → index.html