2020 zero base to quickly develop Vue family bucket develop the electricity business management system (Element-UI) [assign permissions]

1 Introduction

寒假是用来反超的！Vue put together to learn, this blog is about the allocation of rights, like him to teach ~

2, assign permissions

2.1 pop-up dialog box and assign permissions to request permission data

		 //展示分配权限的对话框
        async showSetRightDialog(){
            //获取到所有权限的数据
            const {data:res}=  await this.$http.get('rights/tree')
            if(res.meta.status != 200) return this.$message.error('获取权限数据失败！')
            // 获取到的权限数据保存到list中
            this.rightsList = res.data
            console.log(this.rightsList)
            this.setRightDialogVisible=true
        }

2.2 initial configuration and use el-tree tree controls

 <!-- 显示树形控件 -->
    <el-tree :data="rightsList" :props="treeProps" ></el-tree>

			// 树形控件的属性绑定对象
            treeProps:{
                label: 'authName',
                children: children
            }

2.3 Optimization showing the effect of tree controls

2.4 Analysis of the existing authority is checked by default and loads of ideas to achieve the role of existing rights

		 //展示分配权限的对话框
        async showSetRightDialog(role){
            //获取到所有权限的数据
            const {data:res}=  await this.$http.get('rights/tree')
            if(res.meta.status != 200) return this.$message.error('获取权限数据失败！')
            // 获取到的权限数据保存到list中
            this.rightsList = res.data
            //console.log(this.rightsList)
            
            //递归获取三级节点的id
            this.getLeafKeys(role, this.defKyes)

            this.setRightDialogVisible=true
        },
        // 通过递归的方式，获取角色下所有三级权限的id并保存在defKeys数组中
        getLeafKeys(node ,arr){
            // 如果当前node节点不包含children属性，则是三级节点
            if(!node.children){
                return arr.push(node.id)
            }
            node.children.forEach(item =>
                this.getLeafKeys(item,arr))
        }

2.5 reset defKeys array dismiss the dialog box

Cache phenomenon appears when you click the button, so we need to empty the array, when you close the dialog box should be emptied once

	// 监听分配权限对话框的关闭事件
        setRightDialogClosed(){
            this.defKyes = []
        }

2.6 API call to assign permissions to complete the function

 		// 监听分配权限对话框的关闭事件
        setRightDialogClosed(){
            this.defKyes = []
        },
        // 点击确定按钮为角色分配权限
        async allotRights(){
            const keys = [
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys()
            ]
            //console.log(keys)
            // 以 `,` 分割的权限 ID 列表（获取所有被选中、叶子节点的key和半选中节点的key, 包括 1，2，3级节点）
            const idStr = keys.join(',')

            const {data:res} = await this.$http.post('roles/'+this.roleId+'/rights',{rids:idStr})
            console.log(res)
                if(res.meta.status != 200) return this.$message.error('更新权限失败！')

            this.$message.success('分配权限成功!')
            this.getRolesList()
            // 将对话框隐藏
            this.setRightDialogVisible = false
        }

3. Conclusion

At this point, our function is complete!

Vue family bucket develop the electricity business management system code cloud address, welcome to learn together ~

https://gitee.com/Chocolate666/vue_shop

---

Finally, after reading this blog, I feel quite helpful, can continue to view the contents of other columns wailing, Vue together to learn it ~

Click to enter Vue❤ learn column ~

学如逆水行舟，不进则退