10、功能描述
添加、编辑、删除自己课下完成;
主要讲解“分配权限”
11、一级权限管理
scope.row.children就是当前行的所有权限
第一层for循环得到“一级权限”
第二层for循环得到“二级权限”
第三层for循环得到“三级权限”
12、一级权限美化
给el-row设置上下边框线,动态绑定class类,设置bdbottom和bdtop样式
14、渲染二级权限
二级权限占6列 三级权限占18列
【注意】这里是将19份再分成6份和18份
15、三级权限渲染
16、美化
当页面缩小的时候,设置屏幕的最小宽度
让每一行都居中对齐:1)设置vcenter类 2)在每一行上添加上该类
17、删除对应的权限
1)为三级权限添加删除属性 tag标签的closable属性
2)为tag标签添加close事件,监听事件,给出提示信息
18、发起删除权限请求
1)封装删除权限Api
2)发起请求
3)为一二级权限也绑定“移除权限的事件”
19、分配权限功能
点击分配权限按钮,显示对话框,发送请求,获得所有权限列表。
20、将树形结构显示在对话框中
1)引入树形控件
2)通过data属性绑定数据源,通过props属性指定嵌套属性和显示名称
21、树形控件优化
show-checkbox 可以给树形结构前增加复选框
node-key = “id” 指定id值为树节点的唯一标识的属性
default-expend-all 默认展开所有的节点
default-checked-keys 默认勾选的节点的key的数组,defkeys
22、默认选中,递归形成defkeys数组中,将所有三级节点的id都放入数组中
23、解决ID重复的问题
在关闭对话框时候,清空defKeys数组。
24、角色授权
点击 确定 按钮,将授权权限传递给后端
1)封装 角色授权 API
2)发送请求
【注】这里需要获取选中的所有的权限的id,包括123级的权限,然后以逗号分割字符串传递给后端。
方法:拿到树形控件对象,然后调用方法 getCheckedkeys、getHalfCheckedNodes两个方法,就可以获得选中的节点和半节点。
30、给用户管理模块 users添加角色管理功能
1)给分配角色按钮添加点击事件setRole
2)点击“分配角色”按钮,弹出 添加角色 对话框
3)data中新增数据
4)先获取“角色列表”,渲染后select中,然后再点击“确定”按钮,提交选中的角色;
记得分配角色后要把列表更新getUserList。
31、将修改内容提交到仓库中
git branch:检查当前的分支
git add . : 将当前内容添加到暂存区
git commit -m '完成了权限功能的开发' :将当前模块提交到 rights分支
git push:将本地rights 分支中的代码提交到云端
git checkout master :切换到主分支
git merge rights :将rights 合并到 master分支<当前只有本地的master分支是新的,还需要将云端的master更新>
git push: 将最新的master分支推送到云端