gxwebsoft
ae2ea4d841
- 新增 model 字段 provinceIds 和 cityIds，兼容旧单值 provinceId 和 cityId - 引入 RegionMultiSelect 组件替代旧的单选级联选择器 - 编辑弹窗支持多选城市和省份，提交时转换为逗号分隔字符串 - 列表页配送区域列支持多选展示，超长文本截断并显示 tooltip - 新增 RegionMultiSelect 组件，实现省市两级树形多选穿梭弹窗 - 通过 computed 和 watch 同步组件选中状态和表单数据 - 更新相关类型定义和导入，确保编辑及展示逻辑正确 - 新增样式优化，提示默认配送全国规则说明
29 lines
2.2 KiB
Markdown
29 lines
2.2 KiB
Markdown
# 2026-08-11 工作记录
|
||
|
||
## 运费模板配送地区改为「省+市两级多选穿梭弹窗」
|
||
|
||
### 需求背景
|
||
客户要求运费模板的配送地区选择改成仿截图的双栏穿梭弹窗（左侧候选 + 右侧已选），
|
||
选择粒度从原「省+市单选（级联）」升级为「多条规则覆盖多城市」，并保留「不选=全国」规则。
|
||
|
||
### 改动清单（纯前端，后端字段由用户确认可改）
|
||
1. **新建组件** `src/components/RegionMultiSelect/index.vue`
|
||
- 树形可展开：省级可展开看市级；省级"选择"=选该省全部市，市级可单独选。
|
||
- 左栏搜索（按省/市名过滤）、右栏已选列表（单项是"省/市"+取消）。
|
||
- 底部：全部选择 / 取消 / 确认。
|
||
- `v-model:value` 绑定已选**城市ID数组**；额外 emit `update:provinceIds`（由城市推导的省份ID数组）。
|
||
- 复用 `src/components/RegionsSelect/load-data.ts` 的 getRegionsData()（public/json/regions-data.json，取省+市两级，丢弃区级）。
|
||
2. **model** `src/api/shop/shopExpressTemplateDetail/model/index.ts`
|
||
- 新增 `provinceIds?: string`（逗号分隔）、`cityIds?: string`（逗号分隔）；保留旧 `provinceId/cityId` 兼容历史数据。
|
||
3. **编辑弹窗** `src/views/shop/shopExpressTemplateDetail/components/shopExpressTemplateDetailEdit.vue`
|
||
- 移除 `RegionsSelect type="provinceCity"`，改用 `RegionMultiSelect`。
|
||
- 打开时从 `record.cityIds`（兼容旧 `cityId`）回填；保存时数组→逗号串提交 `cityIds/provinceIds`。
|
||
4. **列表页** `src/views/shop/shopExpressTemplateDetail/index.vue`
|
||
- "配送地区"列 customRender 改为遍历 `cityIds` 多值反查 regionMap；超22字截断+tooltip；旧单值数据兼容。
|
||
- 新增 `h` 函数 import。
|
||
|
||
### 待办 / 风险
|
||
- **后端需同步改造**：表加 `province_ids` / `city_ids`（varchar 逗号分隔），接口 add/update 接收这两个字段。前端已按此约定提交，后端未改则数据落不了库。
|
||
- antd 为 v4，`var(--ant-color-border)` 在暗色下可能回退浅灰（边框略浅，不影响功能）；如要完美暗色适配可后续改 less 变量。
|
||
- 构建验证（vite build）已触发，待结果确认无编译错误。
|