项目总结（二）

1、权限列表添加

1、添加过程与用户列表添加功能类似

2、对于权限等级的设置可以利用v-if v-else-if v-else进行判断是哪个等级。在此之前要先利用作用域插槽获取当前用户数据等级信息，然后再判断用户等级然后进行显示。

2、权限管理业务

是为一个用户分配不同的角色，角色对应着不同的功能权限。

主要思想：循环对象把每一个权限渲染出来，根据分为几层权限决定几层循环。

1、放置栅格系统进行栅格布局，将每一行分成多列，第一列渲染一级权限，第二列渲染二级与三级权限。

2、在第一列for循环渲染出一级权限。

3、在第二列再放一个el-row，在这个el-row中渲染二级权限，在这个el-row中也分为左右两列，左边给二级权限渲染，右边给三级权限渲染。

4、对于类属性可动态绑定一个数组，：class="['bdttom',i1===0?'bdtop':'']"。为了防止宽度不够栅格系统错行，在#app全局样式表中加最小宽度：min-width:1366px。

5、要使得标签居中对齐可以在类中添加display:flex，alien-items:centher

3、删除指定权限下业务功能

需求：为每一个标签添加删除图标，在点击图标时弹出是否删除的弹窗

1、可移除标签设置closable即可

2、tag标签有close事件，当触发该事件时触发删除该标签的函数

3、弹窗询问是否删除与之前删除功能类似，利用confirm去获取是否要删除

4、删除需要当前Id与父亲id，我们可以通过事件绑定函数进行传参获取

5、删除成功后为了防止页面刷新，可将最新的数据传递给原来组件。

（

2、添加关闭事件，当关闭触发事件，弹窗询问是否删除。

3、删除与否对应不同返回值，根据返回值确定是否删除，若是删除就根据API文档指定路径进行删除

4、删除需要角色名与id，可以在事件处利用作用域插槽scope传值。

）

4、分配权限功能

需求：当点击分配权限会显示分配权限的对话框，在对话框中会显示所有权限。对于这些权限都是可选，选择哪些权限就可分配哪些权限。

1、为分配权限添加点击事件

2、在对应区域放置dialog对话框，根据dialog对话框变量值决定是否显示该对话框

3、在点击事件中获取所有权限的数据，所以还要定义一个存储数据的rightList数组，将获取的数据存储在该list中

4、将所有数据以树形结构加载到对话框中。绑定数据源rightlist，定义树形控件中的props属性，绑定各个对象，各个文本是通过哪个属性实现父子间的嵌套需要prop来指定的。

5、对于复选框等优化可以看树形结构的几个参数。

6、对于已有权限显示，动态绑定：default-checked-keys="defkeys"，然后在数据定义处定义defkeys，在该数组中写要默认选中的权限

7、定义递归函数，通过递归的形式获取角色下所有三级权限的Id，并保存到defkeys数组中。对于该递归函数，首先要判断该节点是否是三级节点：若该节点有children属性即说明它不是三级属性，反之说明它是，然后利用push将该节点的id存储到一个数组中。再循环该节点的子节点再次调用该函数形成递归。

5、具体分配权限功能

主要思想：将勾选的状态保存到服务器中，实现数据持久化。（将分配的权限中所有已选中节点id与半选中节点id形成字符串，中间以英文逗号进行分割，将其传送到服务器中）在element组件中，tree树形控件有一个getCheckedNodes和getHalfCheckedNodes方法，获取被选中节点与半选中节点id

1、在分配权限的对话框中，为确定按钮绑定点击事件，在点击事件方法中获取选中节点id，然后保存到数组中。将该数组用英文逗号拼接字符串

2、分配权限时立即将当前节点的id获取保存到data中供后续使用

3、根据API文档将刚刚的id以及拼接的字符串发给服务器。

4、分配成功的话要刷新角色列表获取最新数据库数据。

6、用户列表分配角色

1、为分配按钮绑定事件，点击该按钮弹出对话框，为对话框的显示与关闭定义对应属性值

2、点击事件可以利用scope获取当前对象的各个值，传参获取当前对象的各个值并保存到data中数据对象里，然后在对应对话框中渲染出来

3、下拉框分配角色：在事件中在展示对话框之前根据API文档获取所有角色列表，下拉框在element有对应组件，使用该组件并进行对应改造。其中v-model双向绑定的是以后在页面框中选择的数据，需要定义，for循环的是所有数据数组。

4、分配角色后要提交数据。为确定按钮绑定事件，在该事件中先判断下拉框是否选中数据，选中则根据API文档提交数据给服务器，判定提交后状态，提交成功重新获取列表数据关闭对话框

5、为对话框绑定关闭事件，当关闭对话框下拉框清空，重置用户信息为空。