2026-07-19-pl-plan-save-and-arrange-design.md 5.6 KB

运输计划 · 保存并安排运输(设计)

日期: 2026-07-19
状态: 已实现
范围: web-admin 运输计划新增/编辑弹窗快捷入口;运输计划归档页隐藏编辑

背景

运输计划新增/编辑弹窗(PlPlanFormDialog)当前底栏仅有「取消」与「创建/保存」。创建计划与安排运输是两步:保存后需回列表再点「安排运输」。

当计划产品不含易制毒/易制爆(或证书已齐备)时,用户希望保存后立刻进入安排运输,减少往返。

后端 create-full 明确「不自动安排运输」;安排运输仍由独立弹窗与 API 完成。本需求不改变该边界,仅做前端串联。

目标

  1. 在新增/编辑弹窗增加「创建/保存并安排运输」主按钮,保存成功后自动打开现有「安排运输」弹窗。
  2. 保留原「创建/保存」,供需补证书或稍后安排的场景。
  3. 运输计划归档页不再提供编辑运输计划入口。

非目标

  • 不新增后端「创建并安排」合并接口
  • 不把安排运输表单内嵌进计划表单
  • 不提供「保存并调整运输」入口(已安排后不显示该快捷按钮)
  • 不修改安排运输弹窗内部逻辑、危化品证上传页逻辑

决策摘要

编号 决策 说明
D1 底栏方案 A 取消 · 创建/保存(描边)· 创建/保存并安排运输(主色)
D2 实现路径 1 前端串联:保存 → 可选打开现有安排弹窗;无新 API
D3 证书未齐备 仍保存计划,提示无法安排的原因,不打开安排弹窗
D4 显隐 新增始终显示「并安排」;编辑仅 transportStatus === 'pending' 时显示
D5 取消安排 计划已保存,状态仍为「待安排」,可稍后在列表再安排
D6 归档页 隐藏所有「编辑」入口,不打开计划表单弹窗

交互设计

底栏

场景 底栏按钮
新增 取消 · 创建(描边)· 创建并安排运输(主色)
编辑且未安排 取消 · 保存(描边)· 保存并安排运输(主色)
编辑且已安排 取消 · 保存(主色);不显示「并安排」

规则:

  • 有「并安排」按钮时,它是唯一 type="primary";「创建/保存」为中性描边。
  • 无「并安排」时,「保存」恢复为主色(与现网一致)。
  • 按钮须带 Element Plus 图标(与 OpenSpec UI 约定一致)。

「创建/保存并安排运输」流程

  1. 校验:与现有创建/保存相同(基础表单校验、已选合同、至少一条产品)。
  2. 保存:调用现有 POST /transport/plan/create-full 或 PUT /transport/plan/{id},取得 planId。
  3. 危化品门禁(前端):复用 shouldBlockTransportForHazardCert / buildMissingHazardCertReadyMessage(与安排弹窗一致)。
    • 需拦截:成功提示保存完成 + 说明无法安排的原因 → 关闭表单 → 不打开安排弹窗。
    • 可通过:关闭表单 → 打开现有「安排运输」弹窗(planId)。
  4. 安排弹窗:用户照常填写并提交;若取消,计划保留为「待安排」(D5)。

「创建/保存」

行为与现网一致:仅保存,关闭弹窗,不打开安排运输。

运输计划归档页

  • 隐藏工具栏「编辑」与查看弹窗 hero「编辑」。
  • 可移除或闲置 PlPlanFormDialog 挂载(以实现时最小改动为准;至少保证无 UI 入口)。
  • 归档/查看流程不变。

组件与数据流

PlPlanFormDialog
  handleSubmit(mode: 'save' | 'saveAndArrange')
    → createFull / update
    → emit('success', { planId, openArrange: boolean })

plan/index.vue
  handlePlanMutationSuccess(payload)
    → 刷新列表
    → if openArrange: 打开 PlPlanArrangeDialog(planId)

事件约定:

  • 仅保存:{ planId, openArrange: false }(或等价兼容:无 payload 时视为仅刷新)。
  • 保存并安排且通过门禁:{ planId, openArrange: true }。
  • 保存并安排但被门禁拦截:{ planId, openArrange: false }(计划已保存)。

planId 来源:新建取接口返回的 id;编辑用当前 planId。

错误处理

情况 行为
表单校验失败 不提交,与现网一致
保存 API 失败 不关闭弹窗、不打开安排,展示错误
证书未齐备 保存成功后提示原因,不打开安排
安排弹窗内提交失败 由安排弹窗自行处理;计划仍为待安排或按安排 API 结果更新

验收要点

  • V1:新增弹窗可见「创建」+「创建并安排运输」,主色在后者。
  • V2:编辑未安排计划可见「保存并安排运输」;已安排则不可见。
  • V3:普通品点「并安排」→ 保存成功 → 自动打开安排运输弹窗。
  • V4:含危化品且证书未齐备 → 计划已保存 → 提示原因 → 不打开安排。
  • V5:安排弹窗取消 → 列表中计划存在且为待安排。
  • V6:运输计划归档页无编辑入口。

参考代码

  • 表单:web-admin/src/components/business/pl-plan-form-dialog/index.vue
  • 列表:web-admin/src/views/pl/plan/index.vue
  • 安排弹窗:web-admin/src/components/business/pl-plan-arrange-dialog/index.vue
  • 证书门禁:web-admin/src/composables/usePlToxicProductCertCheck.ts
  • 归档页:web-admin/src/views/pl/plan-archive/index.vue
  • 计划冻结(入库/出库已安排不可编辑):isIoPlanFrozen(列表既有逻辑,本需求不扩展调整运输)