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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<GlobalWindow
class="menu-config-dialog"
:visible.sync="visible"
:confirm-working="isWorking"
width="576px"
title="授权菜单"
@confirm="confirm"
>
<p class="tip" v-if="role != null">为角色 <em>{{role.name}}</em> 配置可访问的菜单</p>
<el-tree
ref="menuTree"
:data="menus"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="selectedIds"
:expand-on-click-node="false"
:check-on-click-node="true"
:props="{children: 'children',label: 'name'}">
</el-tree>
</GlobalWindow>
</template>
<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import { createRoleMenu } from '@/api/system/role'
import { fetchTree as fetchMenuList } from '@/api/system/menu'
export default {
name: 'MenuConfigWindow',
components: { GlobalWindow },
data () {
return {
visible: false,
isWorking: false,
// 角色
role: null,
// 所有菜单
menus: [],
// 已选中的菜单
selectedIds: []
}
},
methods: {
/**
* @role 角色对象
*/
open (role) {
fetchMenuList({})
.then(records => {
this.role = role
this.menus = records
// 如果为固定角色，则固定菜单不可更改
this.__resetDisabled(this.menus, this.role)
// 找出叶节点
role.menus = role.menus.filter(menu => role.menus.findIndex(m => m.parentId === menu.id) === -1)
// 初始化选中
this.selectedIds = role.menus.map(r => r.id)
this.visible = true
})
.catch(e => {
this.$tip.apiFailed(e)
})
},
// 确认选择菜单
confirm () {
const selectedMenus = this.$refs.menuTree.getCheckedNodes(false, true)
this.isWorking = true
createRoleMenu({
roleId: this.role.id,
menuIds: selectedMenus.map(menu => menu.id)
})
.then(() => {
this.$tip.apiSuccess('菜单授权成功')
this.visible = false
this.$emit('success')
})
.catch(e => {
this.$tip.apiFailed(e)
})
.finally(() => {
this.isWorking = false
})
},
// 重置disabled
__resetDisabled (menus, role) {
if (menus == null || menus.length === 0) {
return
}
for (const menu of menus) {
menu.disabled = false
if (role.fixed && menu.fixed) {
menu.disabled = true
}
this.__resetDisabled(menu.children, role)
}
}
}
}
</script>
<style scoped lang="scss">
@import "@/assets/style/variables.scss";
.global-window {
.tip {
margin-bottom: 12px;
em {
font-style: normal;
color: $primary-color;
font-weight: bold;
}
}
}
</style>