运输计划 · 装货左 / 送货右 分栏 Demo

在保留「基础信息 + 产品信息」全宽的前提下,将装货与送货并列左右, 形成「起点 → 终点」的视觉对照;每侧内部纵向排布(客户/地址在上,段内紧凑产品在下), 避免在 50% 栏宽里再嵌套「表单|产品」横分。

左:装货(1 段固定) 右:送货(可多段) 段内产品:6 列紧凑表 / 产品条,无横向滚动

推荐:装货固定占左栏;右栏多个送货段用 Tab 切换,每次只展开一段的表单+产品, 避免 3 段送货纵向堆叠把弹窗撑得很高。底部横条展示数量平衡(装货合计 = 送货合计 = 计划总量)。

编辑运输计划

基础信息

产品信息(计划总量)

# 产品名称 别名 品牌 规格 单位 计划数量 包装规格 送货方式 备注
1 97% 精制硫酸 易制毒 工业硫酸 不限 CP级 吨 30.000 槽罐 一票制 —

装卸货信息

装货信息

生成地磅单(出库)
装货产品
# 产品 计划数量 包装 送货方式
1 97% 精制硫酸 毒 工业硫酸 · 不限 · CP级 · 吨
↓ 出库 · 一车多卸

送货信息

生成地磅单(入库)
送货产品
#产品计划数量包装送货方式
1 97% 精制硫酸工业硫酸 · CP级 · 吨
送货产品
#产品计划数量包装送货方式
1 97% 精制硫酸
内部 · 免合同
生成地磅单(入库)
送货产品
#产品计划数量包装送货方式
1 97% 精制硫酸
计划总量 30t 装货合计 30t 送货合计 30t ✓ 数量平衡 10 + 15 + 5 = 30

运输信息

优点

  • 装货↔送货左右对照,符合「起点→终点」心智
  • 充分利用弹窗宽度,比上下堆叠省纵向高度
  • 右栏 Tab 切换多段送货,避免 3 段卡片纵向过长
  • 段内 5 列紧凑表,50% 栏宽无横向滚动

注意点

  • 每侧仅 ~640px,段内不宜再用 10 列宽表
  • 送货 Tab 需显示客户名 + 数量摘要,方便切换
  • <1100px 时左右改为上下(装货上、送货下)

同样装货左 / 送货右,但右栏多个送货段纵向堆叠(接近现状)。 适合送货段 ≤2 个;3 段以上右栏会很高,需内部滚动。

编辑运输计划 · 方案 2

装货信息

装货产品
#产品数量包装
197% 精制硫酸

送货信息

送货段 #1 · 客户甲 10t
#产品数量
1硫酸
送货段 #2 · 客户乙 15t
#产品数量
1硫酸
送货段 #3 · 山峡 5t
#产品数量
1硫酸

优点

  • 所有送货段同屏可见,无需切换 Tab
  • 与现有送货卡片组件接近

缺点

  • 3 段以上右栏过高,通常要内部滚动
  • 左右两栏高度难对齐

装货左 / 送货右 + 右栏 Tab;两侧产品区改用产品条(每条 2 行), 在 50% 栏宽下比表格更灵活,多产品时也无需横向滚动。

编辑运输计划 · 方案 3

装货信息

装货产品
97% 精制硫酸 毒
工业硫酸 · 不限 · CP级 · 吨
30% 液碱
天原 · 国标 · 吨

送货信息

送货产品
97% 精制硫酸
工业硫酸 · CP级 · 吨

优点

  • 最适配窄栏宽,多产品也清晰
  • 装货/送货左右对照 + 省高度

缺点

  • 非表格形态,与上方产品信息表风格不同