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
| <template>
| <el-tree
| ref="tree"
| :check-strictly="false"
| :data="list"
| :props="defaultProps"
| node-key="id"
| show-checkbox
| @check-change="onCheckChange"
| />
| </template>
|
| <script>
| export default {
| props: {
| value: {
| type: Array,
| default: () => [],
| },
| disabled: {
| type: Boolean,
| default: false,
| },
| },
| watch: {
| value: {
| immediate: true,
| async handler(value) {
| if (this.list.length === 0) {
| await this.getList()
| }
| this.$nextTick(() => {
| if (Array.isArray(value)) {
| value.forEach((i) => {
| this.$refs.tree.setChecked(i, true, false)
| })
| }
| })
| },
| },
| disabled(value) {
| this.setDisabled(this.list, value)
| },
| },
| data() {
| return {
| defaultProps: {
| children: 'children',
| label: 'menuName',
| },
| list: [],
| }
| },
| methods: {
| onCheckChange() {
| const checkedNodes = this.$refs.tree.getCheckedNodes(false, true)
| const checkedKeys = checkedNodes.map((i) => i.id)
| this.$emit('input', checkedKeys)
| this.$emit('change', checkedKeys)
| },
| async getList() {
| const { code, data } = await this.$elBusHttp.request(
| 'flower/api/menu/list'
| )
| if (code === 0) {
| const list = data || []
| if (this.disabled) {
| this.setDisabled(list)
| }
| this.list = list
| }
| },
| setDisabled(list, disabled = true) {
| list.forEach((item) => {
| item.disabled = disabled
| if (Array.isArray(item.children) && item.children.length > 0) {
| this.setDisabled(item.children)
| }
| })
| },
| },
| }
| </script>
|
| <style scoped></style>
|
|
