十二、分配权限

（1）弹出分配权限对话框，并请求权限数据

1. 为分配权限图标添加点击事件。

2. 当点击时，首先获取权限数据，然后保存获取的权限数据，并显示分配权限对话框

3. 添加分配权限对话框

                         

（2）初步配置并使用el-tree控件

1. 根据el-tree控件，将获取的权限数据以树的形式显示在分配角色对话框

 

（3）优化树形控件的展示效果

1. 加上属性show-checkbox，实现在树形控件的每个结点前面加上复选框

2. 加上node-key="id", 使复选框选择的是具有唯一标识性的id值

3. 加上属性default-expand-all，打开分配权限弹窗时，默认展开所有结点

4. 效果图

（4）加载当前角色已有的权限（即打开角色分配弹框时，当前角色已有的权限默认勾选）

1. 点击分配权限按钮时，获取当前角色已有的三级权限id，并存到数组defKeys

   通过递归的方式获取： getLeafKeys(node, arr) 获取node结点下所有的三级结点id，并存到数组arr中

2. 将该数组赋值给属性default-checked-keys

获取结点node下所有三级结点的id值，并存到数组arr

在打开分配权限弹框之前，获取当前结点的所有三级节点id值

问题：当点击完一个结点的权限分配按钮之后，不会清空defKeys数组中的值。在点击下一个结点时，也会把上一个结点的三级目录默认勾选

解决：为分配权限对话框添加一个关闭事件，关闭时将数组defKeys清空

 

（5）调用API完成分配权限的功能（点击对话框中的确定，分配权限）

由参数rids可知，我们需要获取所有被选中和半选中结点的key值，则需要用到树形控件的两个方法：

1. 点击分配权限图标时，将保存当前结点的id，以便为其分配权限

2. 通过在树形控件中添加ref属性，获取该控件，便于调用上述的两个方法，获取所有被选中和半选中结点的key值

3. 为分配权限弹框的确定按钮添加点击事件

4. 点击事件所对应的方法：

4.1 首先通过ref获取所有选中和半选中结点的key值；

4.2 通过...展开合并的方式，将这些key放到同一个数组，然后用，拼接存到idStr；

4.3 然后访问roles/当前节点的id/rights，并将idStr传过去；

4.4 最后获取分配权限的信息，若分配成功，则重新获取角色列表（回到角色列表），隐藏弹框

5. 效果图