docs: add design for address library edit and contact fill in transport plan
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed
1 parent
5cf67f60d1
commit
2716c2b6f8
1 file changed
+82
@@ -0,0 +1,82 @@
|
||||
# 运输计划「从地址库选择」支持编辑并回填联系方式
|
||||
|
||||
**日期：** 2026-08-06
|
||||
**状态：** 已设计，待实现
|
||||
**选定方案：** 方案 1 — 选择弹窗内复用新增表单做编辑；选中时按「姓名 电话」回填联系方式；列表去掉坐标列
|
||||
|
||||
## 1. 目标
|
||||
|
||||
1. 在运输计划「从地址库选择」弹窗中，支持编辑已有地址库记录（不离开选择流程）。
|
||||
2. 选中地址后，若地址库有联系人/联系电话，写入对应「取货联系方式」或「送货联系方式」。
|
||||
3. 选择弹窗列表不再展示「坐标」列。
|
||||
|
||||
## 2. 非目标
|
||||
|
||||
- 不改地址库管理页（`views/pl/transport-address/index.vue`）结构
|
||||
- 不抽公共地址表单组件（仍在选择弹窗内复用同一嵌套表单）
|
||||
- 不改后端 API（沿用现有 `transportAddressApi.update`）
|
||||
- 编辑成功后不自动选中、不关闭选择弹窗
|
||||
- 地址库联系人与电话皆空时，不覆盖表单已有联系方式
|
||||
|
||||
## 3. 交互
|
||||
|
||||
### 3.1 列表
|
||||
|
||||
- 移除「坐标」列。
|
||||
- 操作列增加「编辑」（`Edit` 图标 + 文案），与「选择」并列；操作列宽度适当加大。
|
||||
- 「选择」、地址名称链接、双击行：行为不变（选中并关闭）。
|
||||
|
||||
### 3.2 编辑
|
||||
|
||||
1. 点击「编辑」打开嵌套表单弹窗，标题为「编辑地址」。
|
||||
2. 用当前行数据填充表单（字段与新增一致：地址名称、详细地址/地图、联系人、联系电话、备注）。
|
||||
3. 确定：校验通过后调用 `transportAddressApi.update(id, payload)`；成功提示「编辑成功」，关闭编辑弹窗，刷新选择列表；选择弹窗保持打开。
|
||||
4. 取消：仅关闭编辑弹窗。
|
||||
|
||||
### 3.3 新增（保持）
|
||||
|
||||
- 新增成功后仍自动 `select` 并关闭选择弹窗（与既有行为一致）。
|
||||
|
||||
### 3.4 联系方式回填
|
||||
|
||||
- 格式：`姓名 电话`（半角空格分隔）。
|
||||
- 仅姓名：写入姓名；仅电话：写入电话；皆有：`姓名 电话`；皆空：不修改现有联系方式。
|
||||
- 取货侧写入 `pickupContact`，送货侧写入 `deliveryContact`。
|
||||
- 适用页面：运输计划表单弹窗、安排运输弹窗（凡使用 `PlAddressWithLibrary` 处）。
|
||||
|
||||
## 4. 改动文件
|
||||
|
||||
| 文件 | 变更 |
|
||||
|------|------|
|
||||
| `web-admin/src/components/business/pl-transport-address-select-dialog/index.vue` | 去坐标列；操作列编辑；嵌套表单支持新增/编辑 |
|
||||
| `web-admin/src/components/business/pl-address-with-library/index.vue` | 选中后拼装联系方式并 `emit`（或可选 `v-model:contact`） |
|
||||
| `web-admin/src/components/business/pl-plan-form-dialog/index.vue` | 取货/送货绑定联系方式回填 |
|
||||
| `web-admin/src/components/business/pl-plan-arrange-dialog/index.vue` | 同上 |
|
||||
|
||||
## 5. 校验与 UI
|
||||
|
||||
- 编辑与新增共用同一套校验：地址名称、详细地址必填；经纬度须通过地图选点。
|
||||
- `label-position="top"`，`dialog-form-layout`，遮罩无 blur，底栏 Close / Check 图标。
|
||||
- 按钮带 `el-icon`（与 ui-conventions 一致）。
|
||||
|
||||
## 6. 数据流
|
||||
|
||||
```
|
||||
选择弹窗 → 编辑弹窗 → transportAddressApi.update
|
||||
→ 刷新列表（不 select）
|
||||
|
||||
选择 / 新增成功 → emit('select', row)
|
||||
→ pl-address-with-library：
|
||||
回填 fullAddress / lng / lat
|
||||
若有联系信息 → emit('update:contact' | 'select-contact', "姓名 电话")
|
||||
→ 父表单写入 pickupContact / deliveryContact
|
||||
```
|
||||
|
||||
## 7. 决策记录
|
||||
|
||||
| 项 | 结论 |
|
||||
|----|------|
|
||||
| 联系方式格式 | A：`姓名 电话` |
|
||||
| 地址库联系信息为空 | A：不改动现有联系方式 |
|
||||
| 编辑交互 | A：编辑保存后刷新列表，不自动选中 |
|
||||
| 坐标列 | 选择弹窗列表不展示 |
|
||||
Reference in new issue
Block a user