Vue ElementUI 分配角色权限
2020-04-17 本文已影响0人
极课编程
1. 弹出分配权限的对话框并请求权限数据
先要分配按钮添加一个点击事件
<el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button>
添加分配权限的对话框
<!-- 分配权限的对话框 -->
<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%" @close="setRightDialogClosed">
<!-- 树形控件 -->
<el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef"></el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="setRightDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="allotRights">确 定</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
// 控制分配权限对话框的显示与隐藏
setRightDialogVisible: false,
// 所有权限的数据
rightslist: [],
// 当前即将分配权限的角色id
roleId: ''
}
},
methods: {
// 展示分配权限的对话框
async showSetRightDialog(role) {
this.roleId = role.id
// 获取所有权限的数据
const { data: res } = await this.$http.get('rights/tree')
if (res.meta.status !== 200) {
return this.$message.error('获取权限数据失败！')
}
// 把获取到的权限数据保存到 data 中
this.rightslist = res.data
console.log(this.rightslist)
//显示对话框
this.setRightDialogVisible = true
}
}
}
}
</script>
2. 分配并使用el-tree树形组件
先要将这个组件添加到element.js中。
参考文档创建一个el-tree组件
<!-- 树形控件 -->
<el-tree :data="rightslist" :props="treeProps" show-checkbox ></el-tree>
<script>
export default{
data(){
return {
// 树形控件的属性绑定对象
treeProps: {
label: 'authName',
children: 'children'
}
}
}
}
</script>
image.png
3. 树形控件的优化
node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
default-expand-all 是否默认展开所有节点
<!-- 树形控件 -->
<el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all></el-tree>
4. 加载当前角色的已有的权限
default-checked-keys 默认勾选的节点的 key 的数组 array
<!-- 树形控件 -->
<el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ></el-tree>
<script>
export default{
data() {
return {
// 默认选中的节点Id值数组
defKeys:[]
}
}
}
</script>
要将权限的id保存到defKeys数组中
当点击分配权限的按钮的同时，要把当前角色已有的三级权限的id保存到defKeys数组中。
// 展示分配权限的对话框
async showSetRightDialog(role) {
this.roleId = role.id
// 获取所有权限的数据
const { data: res } = await this.$http.get('rights/tree')
if (res.meta.status !== 200) {
return this.$message.error('获取权限数据失败！')
}
// 把获取到的权限数据保存到 data 中
this.rightslist = res.data
console.log(this.rightslist)
//使用嵌套的for循环来获取三级节点的id
//利用循环将三级节点的id保存到arr数组中
var arr=[]
var children_new1 = role.children
for(var i = 0;i<children_new1.length;i++){
var children_new2 = children_new1[i].children
for(var j = 0;j<children_new2.length;j++){
var children_new3 = children_new2[i].children
for(var s = 0;s<children_new3.length;s++){
arr.push(children_new3 [s].id)
}
}
}
//要将数组arr赋值给defKeys
this.kefKeys = arr
//显示对话框
this.setRightDialogVisible = true
}
也可以通过递归的形式，获取角色下所有三级权限的id，并保存到 defKeys 数组中
// 通过递归的形式，获取角色下所有三级权限的id，并保存到 defKeys 数组中
getLeafKeys(node, arr) { //node表示节点 arr表示数组
// 如果当前 node 节点不包含 children 属性，则是三级节点
if (!node.children) {
return arr.push(node.id)
}
//循环node中的children数组，每循环一次就会获取到一个子节点item，然后再根据item再次调用递归函数 getLeafKeys，然后我们要把当前的item当做是一个节点传进去，同时也要把arr数组传进去。递归完毕后，就可以将三级节点的id都保存到arr的数组中
node.children.forEach(item => this.getLeafKeys(item, arr))
}
之后我们要调用递归函数
// 展示分配权限的对话框
async showSetRightDialog(role) {
this.roleId = role.id
// 获取所有权限的数据
const { data: res } = await this.$http.get('rights/tree')
if (res.meta.status !== 200) {
return this.$message.error('获取权限数据失败！')
}
// 把获取到的权限数据保存到 data 中
this.rightslist = res.data
console.log(this.rightslist)
// 递归获取三级节点的Id this.defKeys
this.getLeafKeys(role, this.defKeys)
//显示对话框
this.setRightDialogVisible = true
}
image.png
5. 当关闭分配权限对话框的时候要重置defKeys数组为空，否则它会把其它的权限保留在defKeys中
只要给对话框绑定一个close事件就可以了
<!-- 分配权限的对话框 -->
<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%" @close="setRightDialogClosed">
// 监听分配权限对话框的关闭事件（否则数组中的数据不会清空会导致数组中数据越来越多）
setRightDialogClosed() {
this.defKeys = []
},
你也可以在打开对话框的时候去清空defKeys数组都是可以的。
6. 点击确定后完成分配权限的功能
根据查看接口文档：
请求路径：roles/:roleId/rights
请求方法：post
请求参数：rids 权限 ID 列表（字符串） 以 , 分割的权限 ID 列表（获取所有被选中、叶子节点的key和半选中节点的key, 包括 1，2，3级节点）
如何获取到当前这棵树对象的叶子节点的id以及半选状态的id
查看文档得知：
getCheckedKeys 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组 (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
getHalfCheckedKeys 若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组
我们需要给树添加引用
<!-- 树形控件 -->
<el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef"></el-tree>
要将确定按钮添加一个点击事件
<el-button type="primary" @click="allotRights">确 定</el-button>
事件处理的方法
// 点击为角色分配权限
async allotRights() {
const keys = [
// 将两个数组合并成一个新数组
...this.$refs.treeRef.getCheckedKeys(), //若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
...this.$refs.treeRef.getHalfCheckedKeys() //若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组
]
console.log(keys)
}
控制台会打印出keys数组
image.png
然后我们需要将keys数组的值形成一个以逗号来拼接字符串
const idStr = keys.join(',')
需要调用后台角色授权接口，然后要将keys数组传递给rids参数
还要有角色ID，我们在确定按钮是获取不到这个角色ID的，只能在点击分配的时候把这个角色的ID传递出来。
<script>
export default{
data(){
return {
// 当前即将分配权限的角色id
roleId: ''
}
},
methods: {
// 展示分配权限的对话框
async showSetRightDialog(role) {
this.roleId = role.id
}
}
</script>
然后请求后台接口
// 点击为角色分配权限
async allotRights() {
const keys = [
// 将两个数组合并成一个新数组
...this.$refs.treeRef.getCheckedKeys(), //若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
...this.$refs.treeRef.getHalfCheckedKeys() //若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组
]
console.log(keys)
const idStr = keys.join(',')
//请求路径：roles/:roleId/rights
const { data: res } = await this.$http.post(
`roles/${this.roleId}/rights`,
{ rids: idStr }
)
if (res.meta.status !== 200) {
return this.$message.error('分配权限失败！')
}
this.$message.success('分配权限成功！')
this.getRolesList()
this.setRightDialogVisible = false
}
到此为止分配角色权限的功能就完成了
