shanxia2.0/docs/superpowers/specs/2026-08-06-pl-plan-vehicle-library-select-design.md

运输计划「从车辆库选择」：三方 / 自有 Tab + 新增编辑

日期： 2026-08-06
状态： 已实现
选定方案： 方案 1 — 独立选车弹窗（对齐「从地址库选择」）+ 嵌套车辆表单弹窗（对照三方车辆 / 山峡自有车辆管理页已有新增编辑弹窗）

1. 目标

1. 在运输计划新增/编辑弹窗「车牌号」旁增加按钮，打开车辆库选择弹窗。
2. 选择弹窗分两个 Tab：三方车辆、自有车辆；支持搜索、分页、选择回填。
3. 各 Tab 内支持 新增车辆、编辑车辆；表单字段与交互对照现有管理页弹窗（基本信息 + 关联人员 + 车辆证书）。
4. 选车弹窗与表单弹窗均采用较大宽高，便于操作。

2. 非目标

• 不改造三方车辆、山峡自有车辆管理页本身的列表/路由逻辑（首期不强制两管理页改用新抽组件）
• 不改后端车辆 API 契约（沿用 vehicleApi.list/get/create/update）
• 不在选车弹窗中做粘贴识别、批量删除
• 不改安排运输弹窗等其他入口（除非后续单独需求）

3. 交互

3.1 入口（计划表单）

• 位置：pl-plan-form-dialog 运输信息区「车牌号」el-select 右侧。
• 布局：与 PlAddressWithLibrary 一致（flex 行，选择器 flex:1，按钮不换行）。
• 按钮文案：从车辆库选择（FolderOpened 图标 + 文案；btn-ghost 中性描边，非主色实心）。
• 点击打开 PlVehicleLibrarySelectDialog。

3.2 选车弹窗

• 标题：从车辆库选择。
• 宽度 1360px，dialog-form-layout，align-center，append-to-body，destroy-on-close，遮罩无 blur。
• 顶栏 el-tabs：三方车辆（carrier）/ 自有车辆（self）；切换 Tab 重置页码并重新拉列表。
• 工具栏：简易搜索（placeholder 标明可搜车牌号，接口 q）+ 主按钮「新增车辆」。
• 列表列：序号、车牌号（主链接选择）、挂车号、车辆状态（Tag）、载重(吨)、承运商（仅三方 Tab 显示）、关联人员摘要、操作。
• 操作列：编辑、选择（与地址库一致）；fixed="right"，min-width 足够容纳两按钮。
• 选择方式：操作「选择」、车牌链接、行双击 → 关闭选车弹窗并回填计划。
• 列表 max-height：560；body 区域偏高，避免一屏过矮。

3.3 新增

1. 点击「新增车辆」打开嵌套 PlVehicleFormDialog，vehicleType 锁定为当前 Tab。
2. 表单对照：
   • 三方：views/pl/vehicle/index.vue 新增弹窗（含关联人员、证书；证书校验策略与三方页一致）。
   • 自有：views/pl/self-vehicle/index.vue 新增弹窗（含 enforce-self-vehicle-required 等自有规则）。
3. 确定：校验通过后 vehicleApi.create；成功提示「新增成功」，关闭表单弹窗，对返回车辆执行与「选择」相同逻辑（回填并关闭选车弹窗）。
4. 取消：仅关闭表单弹窗。

3.4 编辑

1. 点击「编辑」打开同一表单组件；标题：三方为「编辑车辆」，自有为「编辑自有车辆」。
2. 加载 vehicleApi.get 回填基本信息、人员、证书。
3. 确定：vehicleApi.update；成功提示「编辑成功」，关闭表单弹窗，刷新当前 Tab 列表；选车弹窗保持打开，不自动改计划已选车辆。
4. 取消：仅关闭表单弹窗。

3.5 回填计划

• 写入 formData.vehicleId。
• 调用现有 handleVehicleChange(vehicleId)：刷新 PlVehicleSummaryStrip、回填承运商、默认司机等，行为与下拉选车一致。
• 若下拉选项尚未包含新车，需将车辆加入 vehicleList（或触发一次 searchVehicles）以保证回显。

4. 组件与改动文件

文件	变更
web-admin/src/components/business/pl-plan-form-dialog/index.vue	车牌旁按钮；挂载选车弹窗；处理 select
web-admin/src/components/business/pl-vehicle-library-select-dialog/index.vue	新建：选车大弹窗（Tab + 列表 + 搜索 + 挂载表单弹窗）
web-admin/src/components/business/pl-vehicle-form-dialog/index.vue	新建：新增/编辑车辆完整表单；vehicleType prop 区分三方/自有

实现策略：表单弹窗对照两管理页已有弹窗模式落地（字段、人员子表、证书组件、校验）；首期管理页可不立刻改为引用该组件，避免扩大范围。

5. 校验与 UI

• 表单校验、人员归属兼容、证书必填规则：分别与对应管理页一致。
• 选车/表单弹窗：dialog-form-layout，遮罩 backdrop-filter: none，底栏 Close / Check。
• 所有带文案按钮带前置 el-icon。
• 状态列用 el-tag 语义色（与车辆列表一致）。
• 列表主标识（车牌）用 el-link type="primary" 触发选择。

6. 数据流

计划表单 → 「从车辆库选择」→ PlVehicleLibrarySelectDialog
  Tab(carrier|self) + keyword → vehicleApi.list({ vehicleType, q, page, pageSize })

选择 / 双击 / 车牌链接
  → emit('select', vehicle)
  → 计划 formData.vehicleId = vehicle.id
  → handleVehicleChange(vehicleId)
  → 关闭选车弹窗

新增 → PlVehicleFormDialog(vehicleType) → vehicleApi.create
  → 成功后走「选择」同一路径

编辑 → PlVehicleFormDialog → vehicleApi.update
  → 刷新当前 Tab 列表（不 select、不关选车弹窗）

7. 决策记录

项	结论
弹窗用途	A：选车为主，兼新增/编辑（对齐地址库）
表单范围	A：完整表单（基本信息 + 人员 + 证书），对照管理页
操作列	A：选择 + 编辑
实现方案	方案 1：独立选车弹窗 + 新建表单组件；管理页首期不强制抽离改造
按钮文案	从车辆库选择
弹窗尺寸	选车与表单均约 1360px 宽，列表区偏高
新增成功	自动选中并关闭选车弹窗
编辑成功	仅刷新列表，不自动选中