feat(shopExpressTemplateDetail): 支持省市两级多选配送区域

- 新增 model 字段 provinceIds 和 cityIds,兼容旧单值 provinceId 和 cityId
- 引入 RegionMultiSelect 组件替代旧的单选级联选择器
- 编辑弹窗支持多选城市和省份,提交时转换为逗号分隔字符串
- 列表页配送区域列支持多选展示,超长文本截断并显示 tooltip
- 新增 RegionMultiSelect 组件,实现省市两级树形多选穿梭弹窗
- 通过 computed 和 watch 同步组件选中状态和表单数据
- 更新相关类型定义和导入,确保编辑及展示逻辑正确
- 新增样式优化,提示默认配送全国规则说明
This commit is contained in:
2026-08-11 09:01:30 +08:00
parent aae0c03dd8
commit ae2ea4d841
6 changed files with 493 additions and 31 deletions
@@ -51,7 +51,7 @@
</template>
<script lang="ts" setup>
import { createVNode, ref, computed, onMounted } from 'vue';
import { createVNode, ref, computed, onMounted, h } from 'vue';
import { useRoute } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -128,6 +128,26 @@
align: 'center',
width: 150,
customRender: ({ record }) => {
// 多选配送区域(cityIds 逗号分隔)
const cityIds = (record.cityIds || '')
.split(',')
.filter(Boolean);
if (cityIds.length) {
const names = cityIds.map(
(id: string) => regionMap.value[id] || id
);
const text = names.join('、');
// 过长截断并支持 tooltip 悬浮查看全部
if (text.length > 22) {
return h(
'span',
{ title: text },
text.slice(0, 22) + '…'
);
}
return text;
}
// 兼容旧单值数据
const province = record.provinceId
? regionMap.value[String(record.provinceId)]
: '';