2026-08-02-pl-plan-list-product-columns.md 2.3 KB

计划列表产品信息拆列 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 将运输计划 / 计划归档 / 计划证件列表的「产品信息」合并列拆成产品名称、型号/规格、数量、单位四列。

Architecture: 扩展 PlPlanListProductCell 支持 field 按字段渲染;三页列表替换列定义与模板;列设置 key 从 products 改为四个独立 prop。

Tech Stack: Vue 3 + Element Plus(web-admin)

Spec: docs/superpowers/specs/2026-08-02-pl-plan-list-product-columns-design.md


Task 1: 扩展 PlPlanListProductCell

Files:

  • Modify: web-admin/src/components/business/pl-plan-list-product-cell/index.vue

  • [x] Step 1: 增加 field?: 'name' | 'spec' | 'qty' | 'unit';未传时保持现有整行拼接。

  • [x] Step 2: field 有值时按字段渲染多行堆叠;name 带危化 Tag;qty/unit 用 getPlanProductQuantity / 字典标签;空产品显示 —。

  • [x] Step 3: 从 pl-display 引入 getPlanProductSpec、getPlanProductQuantity(有 field 时不再依赖整行 formatPlanProductListText)。

Task 2: 运输计划列表

Files:

  • Modify: web-admin/src/views/pl/plan/index.vue

  • [x] Step 1: listColumnDefs 将 products 换成 productName / productSpec / productQty / productUnit。

  • [x] Step 2: 模板中「产品信息」列替换为四列,分别传 field="name|spec|qty|unit";数量右对齐、单位居中;min-width 140/120/90/80。

Task 3: 计划归档 + 计划证件列表

Files:

  • Modify: web-admin/src/views/pl/plan-archive/index.vue
  • Modify: web-admin/src/views/pl/plan-cert/index.vue

  • [x] Step 1: 两页同样替换 listColumnDefs 与表格列(证件页在原「产品信息」位置拆四列,不重排其它列)。

Task 4: 验证与图谱

  • Step 1: 目视/类型检查三页无模板错误;确认 PlPlanListProductCell 无其它调用方需同步(三页 + 组件声明)。
  • Step 2: 运行 ./scripts/update-graph.sh frontend(或 graphify update 于 web-admin)。