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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { Ref, ref, watch, defineComponent, PropType } from 'vue';
import { useNamespace } from '@ibiz-template/vue-util';
export const AppSelectTree = defineComponent({
name: 'AppSelectTree',
props: {
value: {
type: String as PropType<Array<string> | string>,
},
multiple: {
type: Boolean,
},
nodesData: {
type: Array as PropType<IData[]>,
},
},
setup(props) {
const ns = useNamespace('app-select-tree');
const visible = ref(false);
const treeNodes: Ref<IData[]> = ref([]);
const handletreeNodes = (nodes: readonly IData[]) => {
if (nodes.length === 0) {
return [];
}
const list: IData[] = [];
nodes.forEach((codeItem: IData) => {
const tempObj: IData = {
title: codeItem.text,
value: codeItem.value,
children: [],
};
if (codeItem.children && codeItem.children.length > 0) {
tempObj.children = handletreeNodes(codeItem.children);
}
list.push(tempObj);
});
return list;
};
watch(
() => props.nodesData,
(newVal, oldVal) => {
if (newVal !== oldVal) {
treeNodes.value = handletreeNodes(newVal!);
}
},
{ immediate: true },
);
const triggerMenu = (_visible: boolean) => {
if (!_visible) {
visible.value = !visible.value;
} else {
visible.value = _visible;
}
};
return { ns, visible, treeNodes, triggerMenu };
},
render() {
return (
<div class={this.ns.b()}>
<i-dropdown
visible={this.visible}
trigger='custom'
transfer-class-name={this.ns.e('dropdown')}
transfer
on-on-clickoutside={() => {
this.triggerMenu(false);
}}
>
<div
on-click={() => {
this.triggerMenu(true);
}}
>
打开下拉树
</div>
<i-dropdownMenu slot='list'>
<i-tree data={this.treeNodes} show-checkbox></i-tree>
</i-dropdownMenu>
</i-dropdown>
</div>
);
},
});