<!-- 分配权限的对话框 --> <el-dialog title="分配权限" :visible.sync="showSetRight" 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="showSetRight = false">取 消</el-button> <el-button type="primary" @click="allotRights">确 定</el-button> </span> </el-dialog>
数据列表
return { // 所有角色数据列表 rolelist: [], // 控制权限对话框是否显示 showSetRight: false, // 所有权限的列表 rightsList: [], // 树形控件的默认属性 treeProps: { children: 'children', label: 'authName', }, // 默认选中的数组id值 defKeys: [], // 角色id roleId: '', } },
展示对话框
// 展示分配权限对话框 showSetRightDialog(role) { // 获取的角色的id this.roleId = role.id reqRights().then((res) => { if (res.data.meta.status !== 200) { return this.$message.error('获取权限信息失败') } console.log(res.data.data) this.showSetRight = true this.rightsList = res.data.data this.getLeafKeys(role, this.defKeys)//获取对应的权限数据赋值给对话框 //console.log(this.defKeys) }) },
通过递归的形式,获取角色下的所有权限id,并赋值给defKeys
// 通过递归的形式,获取角色下的所有权限id,并赋值给defKeys getLeafKeys(node, arr) { // 如果当前节点不包含children属性,则是三级节点 if (!node.children) { return arr.push(node.id) } // 通过递归 node.children.forEach((item) => { this.getLeafKeys(item, arr) }) },
点击了对话框的确定按钮
// 关闭权限对话框,清除数据 setRightDialogClosed() { this.defKeys = [] }, 点击了对话框的确定按钮 // 点击了对话框的确定按钮 allotRights() { const keys = [ ...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys(), ] const idStr = keys.join(',') reqEnableRights(this.roleId,idStr).then(res=>{ if(res.data.meta.status!==200){ return this.$message.error('更新失败'); } this.getRolesList() this.showSetRight = false return this.$message.success('更新成功') }) }