后台管理系统2

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分支推送到云端