feat(shopExpressTemplateDetail): 支持省市两级多选配送区域
- 新增 model 字段 provinceIds 和 cityIds,兼容旧单值 provinceId 和 cityId - 引入 RegionMultiSelect 组件替代旧的单选级联选择器 - 编辑弹窗支持多选城市和省份,提交时转换为逗号分隔字符串 - 列表页配送区域列支持多选展示,超长文本截断并显示 tooltip - 新增 RegionMultiSelect 组件,实现省市两级树形多选穿梭弹窗 - 通过 computed 和 watch 同步组件选中状态和表单数据 - 更新相关类型定义和导入,确保编辑及展示逻辑正确 - 新增样式优化,提示默认配送全国规则说明
This commit is contained in:
@@ -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)]
|
||||
: '';
|
||||
|
||||
Reference in New Issue
Block a user