**

权限管理

**
一共包括两个子功能角色列表和权限列表
角色列表界面
在这里插入图片描述
一共包括了四个子功能:添加角色、修改角色、删除角色、分配权限
添加角色界面及代码
在这里插入图片描述
在这里插入图片描述

修改角色界面及代码
在这里插入图片描述
在这里插入图片描述

删除角色界面及代码(调用接口传参就好了)
在这里插入图片描述

分配权限界面及代码(重点)
这是图一
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
权限详情(思路:根据角色id获取所拥有的权限,然后逐级渲染,从一级权限开始再到最后一次,层层环扣)
在这里插入图片描述
在这里插入图片描述
获取
在这里插入图片描述
分配权限(思路:获取后台树状结构数据,使用elementUI tree组件渲染,再根据组件特有的属性来进行操作反馈)
分配权限界面
在这里插入图片描述
与图一相关联
在这里插入图片描述
el-tree身上有两个方法可以获取已被选中的子节点和父节点
在这里插入图片描述
在这里插入图片描述
商品列表要是全选就返回商品列表+子节点所有的id值
在这里插入图片描述

要是没有全选就只返回子节点
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
这个getHalfCheckedKdys方法是返回被选中子节点的父节点的值

在这里插入图片描述
在这里插入图片描述
如何获取更改后的权限id呢(获取好了拼接一下传到后台就好了)
在这里插入图片描述

删除(根据角色id以及权限id删除)
在这里插入图片描述

权限列表界面(只是显示没有任何操作,就调用接口就好了)
在这里插入图片描述

Logo

快速构建 Web 应用程序

更多推荐