VUE项目实战35编辑角色下的权限

Posted 2022-02-21 光仔December

接上篇《34、编辑角色下的权限（一）》
上一篇我们完成了角色下权限编辑的递归树加载和已有权限展示功能，本篇我们来完成为角色分配新的权限并保存的效果。

例如我们打开角色的“分配权限”按钮，勾选了一些权限：

然后点击确定的时候，应该向服务器发送请求，将该角色勾选的权限都保存在服务器中，进行数据的持久化。

为角色授权的API如下：

该请求为一个post请求，请求路径中包含了两个参数，其中roleId代表当前角色的id，rids是一个以逗号分隔的所有权限的列表（1/2/3级权限都有），不在url中，而是包装在post请求体。

上面的roleId没有什么难点，详细的权限id列表，需要我们获取到用户在权限树里选择的叶子结点和半选中的上级节点和顶级节点。那么如何通过elementUI的el-tree组件获取选中和半选择的节点呢？我们可以通过el-tree组件提供的“getCheckedKeys”和“getHalfCheckedKeys”函数：

所以思路就是在用户点击确定的时候，通过“getCheckedKeys”和“getHalfCheckedKeys”函数获取所有选中和半选中的节点，封装为数组，调用角色授权的API提交到服务器就ok了。

下面开始编写代码，首先为确定按钮绑定一个名为“allotRights”的click函数(去掉原来的setRightDialogVisible = false)，然后为el-tree添加一个ref（用户获取tree组件DOM元素），名为“treeRef”:

<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%">
    <!-- 树形组件 -->
    <el-tree :data="rightsList" :props="treeProps" show-checkbox default-expand-all 
    node-key="id" :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>

然后在方法区定义allotRights函数：

//点击为角色分配权限
allotRights()
    //"..."为“展开运算符”，将一个数组转为用逗号分隔的参数序列
    const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
    ]
    console.log(keys);
    this.setRightDialogVisible = false;

这里我们通过引用对象，获取到el-tree对象，并调用其两个函数，使用展开运算符获取以逗号分隔的数组，并合并成一个数组。
我们选中其中一个角色，点击确定F12看一下控制台的打印信息:

可以看到成功获取到选中和半选中的所有节点。

下面我们继续完善代码，使用join方法将各个合并好的数组变成一个“,”逗号分隔的字符串，然后调用API去提交后台：

//点击为角色分配权限
async allotRights()
    //"..."为“展开运算符”，将一个数组转为用逗号分隔的参数序列
    const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
    ]
    const idStr = keys.join(",");
    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;

这里的roleId，需要在data数据区事先定义好，然后在打开对话框的方法“showSetRightDialog”中通过role对象获取：

data()
    return 
        //角色列表
        rolesList: [],
        //控制分配权限对话框的显示与隐藏
        setRightDialogVisible: false,
        //所有权限的数据
        rightsList: [],
        //树形控件的属性绑定对象
        treeProps: 
            label: 'authName',
            children: 'children'
        ,
        //默认选中的权限ID数组对象
        defkeys: [],
        //当前即将分配权限的角色ID
        roleId: ''
    
,

打开对话框的时候，通过role对象获取roleId：

async showSetRightDialog(role)
    this.roleId = role.id;
    //下代码省略...

此时我们进行测试，效果：

编辑效果实现。

至此权限编辑的功能已经全部实现。
下一篇我们来实现为用户分配角色的功能。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频
转载请注明出处：https://blog.csdn.net/u013517797/article/details/122912689