登记未用完物料 · 弹窗样式 Demo

针对【库存盘点 → 登记未用完】弹窗,当前实现为每行一张 5 列栅格卡片(17+ 字段、28px 控件),多条时密集难填。以下 5 套方案对齐 Fresh Mint(#10b981),模拟 10 条明细,侧重批量登记效率与视觉层次。选定后可落地到 QcMaterialStockCheckTab.vue。

01 · 可编辑表格

固定表头 + 横向滚动;批次信息只读列 + 核心字段 inline 编辑。类似 Excel,适合 10~50 条快速扫填。

推荐 · 批量效率最高
| # | 物料 | 批号 | … | 数量▾ | 持有人 | × |

02 · 左右分栏

左侧紧凑列表(可搜索)+ 右侧完整表单。一次专注编辑一条,字段清晰,适合需要核对全部信息的场景。

推荐 · 单条精度高
[列表 40%] | [详情表单 60%]

03 · 折叠摘要行

默认一行摘要 + 行内改数量;点击展开完整字段。兼顾扫视与深度编辑,改动量适中。

平衡方案
▸ 胎牛血清 · 2瓶 · 张三 [展开]

04 · 检索优先 + 精简表

顶部突出批次检索添加入口;表格仅保留 6~8 列核心字段,手工登记走侧滑/弹层。

批次驱动工作流
🔍 检索批次并添加 → 精简表格

05 · 现状基线(优化版)

保留卡片栅格结构,加大控件、分区展示批次/登记字段,便于与现实现状对比。

现状对照
[卡片] 6列栅格 × N 行(当前方案)