运输计划列表「产品信息」拆列设计

日期：2026-08-02
状态：已实现
范围：web-admin 计划列表三页（运输计划 / 计划归档 / 计划证件）

背景

当前三页列表将多字段拼成一列「产品信息」，单元格内用 PlPlanListProductCell + formatPlanProductListText 渲染为：

产品名称（型号/规格），数量单位 + 危化 Tag（毒 / 爆）

用户需要按字段拆成独立表格列，便于扫读与列显隐控制。

目标

将「产品信息」拆为四个独立 el-table-column：

列标题	字段来源	展示规则
产品名称	`productName`	名称 + 危化 Tag（毒 / 爆，与现列表一致）
型号/规格	`model \\|\\| packageSpec`	空则 `—`（同 `getPlanProductSpec`）
数量	数量取值	同 `getPlanProductQuantity`：实际数量存在且非 0 用实际，否则计划/预估数量；空则 `—`
单位	`unit`	字典 `crm_product_unit` 标签；空则 `—`

多产品计划：四列各自按 products 数组顺序纵向堆叠多行，同一索引行对齐（行间距与现产品单元格一致）。

非目标

不改查看弹窗、表单产品表、安排运输等场景的产品展示
不改后端 API / PlanProduct 数据结构
不改 formatPlanProductListText 在文案拼接场景（确认框、打印摘要等）的用法
不引入排序、筛选产品字段

方案（已确认：方案 A）

四个真正的表格列；列设置中各自独立开关。

涉及页面

web-admin/src/views/pl/plan/index.vue — 运输计划
web-admin/src/views/pl/plan-archive/index.vue — 计划归档
web-admin/src/views/pl/plan-cert/index.vue — 计划证件

三页当前均为：

<el-table-column ... label="产品信息">
  <PlPlanListProductCell :products="row.products" />
</el-table-column>

替换为四列（顺序接在「客户名称」后；证件页按该页原「产品信息」位置替换，不重排无关列）。

列设置（`usePersistedListColumns`）

原单项：

{ prop: 'products', label: '产品信息' }

改为：

{ prop: 'productName', label: '产品名称' },
{ prop: 'productSpec', label: '型号/规格' },
{ prop: 'productQty', label: '数量' },
{ prop: 'productUnit', label: '单位' }

默认全部可见
持久化 key 仍用各页现有 storage key（如 pl-plan-list-columns）；旧配置中的 products 失效后自然不再匹配，四列走默认可见，无需迁移脚本

组件复用

扩展或拆分 PlPlanListProductCell，避免三页复制模板：

推荐：组件增加 field prop：'name' | 'spec' | 'qty' | 'unit'
各列：<PlPlanListProductCell :products="row.products" field="name" /> 等
field 未传时：保留现有整行拼接行为（供其他潜在引用；本三页改为传 field）
数量 / 单位对齐：数量列 align="right"，单位列 align="center"；名称 / 规格左对齐
名称列保留危化 Tag；其余列不展示 Tag
无产品时四列均显示 —

列宽建议（min-width）：名称 140、规格 120、数量 90、单位 80。

样式

多行堆叠沿用现有 .pl-plan-list-product-cell 纵向 gap；四列共用同一行高节奏，避免某一列多出额外间距导致错位。

验收

三页列表不再出现「产品信息」合并列，改为上述四列
单产品、多产品计划行内容正确，多产品时四列行序一致
危化产品名称旁仍显示毒 / 爆 Tag
列设置可分别显隐四列；重置后四列均显示
数量取值与拆列前一致（实际优先逻辑不变）
「计划附件」列行为不变（仍用 PlPlanListCertCell + hide-product）

实现备注

字典标签：继续 useDictStore().getLabel('crm_product_unit', unit) 或页内已有 DictTag 模式，与列表其它单位展示一致即可
改完后按仓库约定更新 graphify（./scripts/update-graph.sh frontend 或等价）

2026-08-02-pl-plan-list-product-columns-design.md 4.0 KB História Raw