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

运输计划「从承运商库选择」：选择 + 新增编辑

日期： 2026-08-06
状态： 已实现
选定方案： 方案 1 — 独立选承运商弹窗（对齐「从地址库选择 / 从车辆库选择」）+ 嵌套承运商表单弹窗（对照 views/pl/carrier 完整新增编辑）

1. 目标

1. 在运输计划新增/编辑弹窗「运输公司」旁增加按钮，打开承运商库选择弹窗。
2. 支持搜索、分页、选择回填计划 carrierId。
3. 弹窗内支持 新增承运商、编辑承运商；表单字段与交互对照承运商管理页（基本信息 + 资质附件）。
4. 新增成功后自动选中并回填；编辑成功仅刷新列表。

2. 非目标

• 不改造承运商管理页列表/路由（首期不强制管理页改用新抽组件）
• 不改后端 carrierApi 契约
• 不在选承运商弹窗中做批量删除
• 不改安排运输弹窗等其他入口（除非后续单独需求）

3. 交互

3.1 入口（计划表单）

• 位置：pl-plan-form-dialog 运输信息区「运输公司」el-select 右侧。
• 布局：与「从车辆库选择 / 从地址库选择」一致（flex 行，选择器 flex:1，按钮不换行）。
• 按钮文案：从承运商库选择（FolderOpened + 文案；btn-ghost）。
• 点击打开 PlCarrierLibrarySelectDialog。

3.2 选承运商弹窗

• 标题：从承运商库选择。
• 宽度 1200px（或与地址库一致的 1200～1360），dialog-form-layout，align-center，append-to-body，destroy-on-close，遮罩无 blur。
• 工具栏：简易搜索（placeholder：搜索承运商名称/联系人/电话，接口 q）+ 主按钮「新增承运商」。
• 列表列：序号、承运商名称（主链接选择）、联系人、联系电话、合作状态（Tag）、操作（编辑 / 选择）。
• 选择方式：操作「选择」、名称链接、行双击 → 关闭选弹窗并回填计划。
• 列表 max-height：560；body min-height: 560px。

3.3 新增

1. 「新增承运商」打开嵌套 PlCarrierFormDialog（无 carrierId）。
2. 表单对照 views/pl/carrier/index.vue：名称、合作状态、联系人、电话、备注、营业执照 / 道路经营许可证 / 运输协议附件、协议有效期。
3. 确定：carrierApi.create；成功后自动 select 并关闭选弹窗。
4. 取消：仅关闭表单弹窗。

3.4 编辑

1. 「编辑」打开同一表单，加载 carrierApi.get。
2. 确定：carrierApi.update；成功后刷新列表；选弹窗保持打开，不改计划已选承运商。
3. 取消：仅关闭表单弹窗。

3.5 回填计划

• 写入 formData.carrierId。
• 调用 ensureSelectedCarrierOption(carrierId) 保证下拉回显。
• 不强制改车牌/车辆摘要（承运商与车辆独立字段）。

4. 组件与改动文件

文件	变更
web-admin/src/components/business/pl-plan-form-dialog/index.vue	运输公司旁按钮；挂载选弹窗；处理 select
web-admin/src/components/business/pl-carrier-library-select-dialog/index.vue	新建：选承运商大弹窗
web-admin/src/components/business/pl-carrier-form-dialog/index.vue	新建：新增/编辑完整表单

实现策略：表单弹窗对照管理页落地；首期管理页可不立刻引用该组件。

5. 校验与 UI

• 表单校验与管理页一致（承运商名称必填等）。
• 上传中拦截与管理页相同。
• dialog-form-layout，遮罩无 blur，底栏 Close / Check；按钮带图标。
• 合作状态用 el-tag 语义色。

6. 数据流

计划表单 → 「从承运商库选择」→ PlCarrierLibrarySelectDialog
  keyword → carrierApi.list({ q, page, pageSize })

选择 / 双击 / 名称链接
  → emit('select', carrier)
  → formData.carrierId = carrier.id
  → ensureSelectedCarrierOption(id)
  → 关闭选弹窗

新增 → PlCarrierFormDialog → carrierApi.create
  → 成功后走「选择」同一路径

编辑 → PlCarrierFormDialog → carrierApi.update
  → 刷新列表（不 select、不关选弹窗）

7. 决策记录

项	结论
弹窗用途	A：选承运商为主，兼新增/编辑
表单范围	A：完整对照承运商管理页
按钮文案	从承运商库选择
新增成功	自动选中并关闭选弹窗
编辑成功	仅刷新列表
管理页	首期不强制抽离改造