段内产品 · 双行展示 Demo

装货 / 送货 pane 约 580px 宽，一行平铺 9 列必然挤压或横滑。核心思路：每条产品占两行——纵向换空间，横向仍保持可读宽度。

你的思路 → 双行表 仍保留「列表 / 表格」扫读习惯；不改成卡片、Tab 或折叠。第 1 行放识别 + 只读，第 2 行放段级可编辑，两行视觉上属于同一条产品。

~580px 栏宽 1 条产品 = 2 行无横向滚动

现状：9 列挤在一行 → 别名/品牌/下拉被截断，或整表横向滚动。

装货产品 · 单行表格

产品	别名	品牌	单位	数量	包装	送货	备注	操作
97%硫酸	工业…	不限…	吨	30	槽罐	一票…	—	删

← 需横向滚动，字段显示不全 →

推荐 · 双行 A（已实现）： 第 1 行 = 产品名（只读）+ 别名 / 品牌 / 单位（可编辑）； 第 2 行 = 计划数量 + 包装 + 送货 + 备注 + 删除。别名/品牌交互与上方「产品信息」表一致（下拉 + 维护入口）。

每条产品：
┌─ 行1 ─ 产品名 │ 别名▼ │ 品牌▼ │ 单位▼ ─┐
└─ 行2 ─ 数量 │ 包装规格 │ 送货方式 │ 备注 │ 删 ─┘

装货产品 · 双行 A

2 条产品

装货产品（每条占两行）

产品属性（可编辑）

97% 精制硫酸易制毒型号/规格：CP级

别名

品牌

单位

段级数量与物流

计划数量

包装规格

送货方式

备注

30% 液碱型号/规格：国标

别名

品牌

单位

计划数量

包装规格

送货方式

备注

优点

仍是「表格式列表」，多条产品纵向排列
只读字段 5 列全宽，长文本不截断
可编辑下拉各自 ~120px+，选项可读
两行底色区分（灰 / 白），不用点展开

注意

比单行略高，段内 1–3 条可接受
规格可在行1名称副行与独立列二选一（避免重复）

双行 B：第 1 行只保留「产品名 + 计划数量」（扫数量最快）； 第 2 行再排别名/品牌/单位 + 包装/送货/备注。适合改数频繁的场景。

装货产品 · 双行 B

97% 精制硫酸毒

别名工业硫酸品牌不限单位吨

计划数量

包装规格

送货方式

备注

30% 液碱

品牌天原单位吨

计划数量

包装规格

送货方式

备注

优点

数量与产品名同一视线，改数最快
第 2 行 3 列更宽

注意

只读字段用 chip，不如 A 的列对齐整齐

双行 C：第 1 行仅产品名 + 危化标识 + chip 摘要； 第 2 行用 2×3 栅格排全部 6 个字段（含只读与可编辑）。结构最简，但第 2 行字段较多时略挤。

装货产品 · 双行 C

97% 精制硫酸毒

别名工业硫酸品牌不限 CP级 吨

计划数量

包装规格

送货方式

单位

备注

落地建议（双行 A）：改造 PlPlanStopProductTable 的 compact 模式—— 不用 el-table 多列，改为 v-for 渲染「双行块」列表；或用 el-table 的 span-method 合并为每组 2 行（实现稍复杂）。

Vue 结构示意：

<div class="pl-stop-product-dual-list">
  <article v-for="row in products" class="pl-stop-product-dual-item">
    <div class="pl-stop-product-dual-item__readonly">...5 列只读</div>
    <div class="pl-stop-product-dual-item__editable">...数量/包装/送货/备注/删</div>
  </article>
</div>

与单行表对比

列数不变，只是换行承载
用户心智：「还是一张产品表，只是每条高一点」
装货 / 送货 pane 复用同一组件

优点

注意

优点

注意

与单行表对比

推荐 A 而非 B/C