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
88
89
90
91
<template>
<div>
<a-tree v-if="treeData.length > 0" v-model="checkedKeys" checkable show-icon showLine :expanded-keys="expandedKeys" :selected-keys="selectedKeys" :tree-data="treeData" @expand="onExpand" @select="onSelect" @check="onCheck">
<a-icon slot="folder-open" type="folder-open" />
<a-icon slot="container" type="container" />
</a-tree>
</div>
</template>
<script>
export default {
name: "menuTree",
data() {
return {
expandedKeys: [],//[ '10','20','30','40','50','60','70','80','90' ],
checkedKeys: [],
selectedKeys: [],
defaultExpandAll: true
}
},
props: {
value: {
type: Number,
default: () => {
return null
}
},
treeData: {
type: Array,
require: true,
default: () => {
return []
}
}
},
created() {
this.getMenuRoleByRoleId()
},
methods: {
getMenuRoleByRoleId(RoleId) {
if (!RoleId)
RoleId = this.value
let par = { roleId: RoleId }
this.$api.systemManage.getMenuRoleByRoleId(par).then(({ data = {} }) => {
if (data) {
//this.checkedKeys = data
data.forEach(e => {
this.checkedKeys.push(e.menuId)
})
}
}).catch(() => { })
},
onExpand(expandedKeys) {
this.expandedKeys = expandedKeys
this.autoExpandParent = false
},
onSelect(selectedKeys, info) {
this.selectedKeys = selectedKeys
},
onCheck(checkedKeys, e) {
let pars = e.node.dataRef
pars.roleId = this.value
let par = { ...pars }
//选中
if (e.checked) {
this.$api.systemManage.insertMenuRoleRecord(par).then(({ data = {} }) => {
if (data) {
this.$message.info(data)
this.getMenuRoleByRoleId()
}
}).catch(() => { })
} else {
this.$api.systemManage.deleteMenuRoleRecord(par).then(({ data = {} }) => {
if (data) {
this.$message.info(data)
this.getMenuRoleByRoleId()
}
}).catch(() => { })
}
}
},
watch: {
value: {
handler(value) {
this.getMenuRoleByRoleId(value)
},
},
}
};
</script>