原型图 | React + Tailwind
切换状态会重置表单为对应预设数据；页面内所有交互（扫码添加滤芯、修改数量、移除）均可真实操作。
仓管在小程序自行发起借用出库的创建表单（PRD §5.9.15）。与后台创建的借用单不同：仓管现场扫码添加资产即完成核验，提交即出库（单据直接生成「已出库」状态，资产变「已借出」），不经过 CG07 出库确认。
| 区块 | 内容 | 说明 |
|---|---|---|
| 表头信息 | 借用人（必填）+ 借用原因（下拉：工单维修/现场备用/其他 + 文字补充）+ 关联工单（选填） | 借用人为空时提交灰显 |
| 滤芯（扫码添加） | 扫码模拟弹层逐根添加，每行显示编码+型号，可移除 | 扫码即核验，无需二次确认 |
| 普通配件 | 选类型 + 输数量，行内显示库存余量 | 超库存飘红并禁止提交 |
| 耗材 | 选类型 + 输数量（带单位：米/个），行内显示库存余量 | 超库存飘红并禁止提交 |
| 备注 | 文字输入，选填 | — |
| 提交并出库 | 吸底按钮 → 确认弹窗（借用人+资产汇总）→ 确认后生成已出库单并跳转 CG06 | 不可逆动作，需二次确认 |
| 交互 | 行为 |
|---|---|
| 扫码添加滤芯 | 点「扫码添加滤芯」弹出扫码模拟弹层，选择在库滤芯逐根加入清单；已添加的不重复出现 |
| 借用人选择 | 点输入框聚焦后展开下拉列表，按姓名或工号模糊过滤；点击选项填入「姓名（工号）」并关闭下拉；无匹配时仍可手动输入 |
| 关联工单选择 | 选填；点输入框聚焦后展开工单下拉，按工单号/类型/描述模糊过滤；点击选项填入工单号并关闭下拉；无匹配时仍可手动输入 |
| 添加配件/耗材 | 点「+ 添加」出现选择行：类型下拉（显示库存）+ 数量输入；数量>库存时行内飘红 |
| 移除资产 | 每行右侧「移除」按钮，点击即从清单删除 |
| 提交并出库 | 确认弹窗展示借用人 + 资产汇总（滤芯N根/配件N个/耗材N项）；确认 → 跳 ./cg06.html?id=BOR-20260730-002&type=borrow&status=outbound |
| 返回 | 左上角返回 → CG05 出库列表 |
| 状态 | 描述 |
|---|---|
| ① 空表单 | 全部字段为空，未添加资产，提交按钮灰显 |
| ② 已填完整 | 借用人张三 + 滤芯2根 + 摄像头1个 + 水管3米，提交按钮可点 |
| ③ 库存不足 | 纸杯申请 250 个 > 库存 200 个，该行飘红 + 底部错误提示 + 提交灰显 |
CG05 出库列表 ─「+新建借用出库」→ CG08（本页）
CG08 ─ 提交并出库（确认弹窗）→ CG06 出库详情（已出库态）
./cg06.html?id=BOR-20260730-002&type=borrow&status=outbound
CG08 ─ 返回 → CG05 出库列表