1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <script lang="ts" setup>
| import { computed, onMounted, ref } from 'vue';
|
| import { handleTree } from '../../../../../packages/utils/src';
|
| import { TreeSelect } from 'ant-design-vue';
|
| import { getCategoryList } from '#/api/mall/product/category';
|
| /** 商品分类选择组件 */
| defineOptions({ name: 'ProductCategorySelect' });
|
| const props = defineProps({
| modelValue: {
| type: [Number, Array<number>],
| default: undefined,
| }, // 选中的 ID
| multiple: {
| type: Boolean,
| default: false,
| }, // 是否多选
| parentId: {
| type: Number,
| default: undefined,
| }, // 上级品类的编号
| });
|
| /** 分类选择 */
| const emit = defineEmits(['update:modelValue']);
|
| const categoryList = ref<any[]>([]); // 分类树
|
| /** 选中的分类 ID */
| const selectCategoryId = computed({
| get: () => {
| return props.modelValue;
| },
| set: (val: number | number[]) => {
| emit('update:modelValue', val);
| },
| });
|
| /** 初始化 */
| onMounted(async () => {
| const data = await getCategoryList({
| parentId: props.parentId,
| });
| categoryList.value = handleTree(data, 'id', 'parentId');
| });
| </script>
| <template>
| <TreeSelect
| v-model:value="selectCategoryId"
| :tree-data="categoryList"
| :field-names="{
| children: 'children',
| label: 'name',
| value: 'id',
| }"
| :multiple="multiple"
| :tree-checkable="multiple"
| class="w-full"
| placeholder="请选择商品分类"
| allow-clear
| tree-default-expand-all
| />
| </template>
|
|
