电商后台管理系统——权限管理模块

电商后台管理系统——权限管理模块

电商后台管理系统的权限管理模块分为角色列表和权限列表两部分，两部分流程图大概如下

1.权限列表实现过程

创建路由组件配置路由——布局基本面包屑导航卡片视图——表单绑定数据提供方法获取权限列表数据

表单有三列数据：权限名称， 路径 ，权限等级，权限等级通过作用域与 插槽放入el-tag实现自定义格式，再根据数据的level判断显示哪个等级的tag

表单结构：

<el-card><el-table :data="rightList" border stripe><el-table-column type="index"></el-table-column><el-table-column label="权限名称" prop="authName"></el-table-column><el-table-column label="路径" prop="path"></el-table-column><el-table-column label="权限等级" prop="level"><template slot-scope="scope"><el-tag v-if="scope.row.level==='0'">一级</el-tag><el-tag type="success" v-else-if="scope.row.level==='1'">二级</el-tag><el-tag type="warning" v-else>三级</el-tag></template></el-table-column></el-table></el-card>

方法：通过发送get请求获取数据

methods:{//获取权限列表async getRightList(){const {data:res}=await this.$http.get('rights/list')if(res.meta.status!==200){return this.$message.error('获取权限列表失败')}this.rightList=res.data}}

2.角色列表实现过程

整个页面功能有添加角色功能，以及一个表单，表单有三列数据：角色名称，角色描述，操作 。操作通过作用域插槽实现布局编辑，删除，分配权限按钮。

实现流程：添加角色列表组件配置路由——布局基本面包屑导航卡片视图表单等——表单绑定数据提供方法获取权限列表数据——操作功能模块实现

困难点：

1.表单的展开列实现还需要通过三重嵌套for循环生成下拉列表

通过在作用域与插槽里使用栅格布局el-row（行）,el-col（列），分为24列

通过scope.row.children拿到一级权限数据，将key值设置为拿到的数据item的id

<el-tag closable @close="removeRightById(scope.row, item1.id)">{{item1.authName}}</el-tag>

通过 for 循环 嵌套渲染二级权限

`<el-row :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']" v-for="(item2, i2) in item1.children" :key="item2.id">`

i2是索引

通过for继续渲染三级权限

<el-tag type="warning" v-for="(item3, i3) in item2.children" :key="item3.id" closable @close="removeRightById(scope.row, item3.id)">{{item3.authName}}</el-tag>

2.分配权限的操作

分配权限按钮对话框（树形结构弹窗）——分配权限按钮绑定点击事件——渲染所有权限数据一级默认选中数据到页面树形结构——分配权限对话框确定按钮绑定分配权限事件

<el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef"></el-tree>

所有权限数据获取与前面数据获取写法一致。默认数据选中需要通过 el-tree的属性: default-checked-keys=“defKeys” defkeys 。

思路是点击分配权限按钮时将当前角色所有的三级权限id存入defkeys，当前角色的id通过在点击分配权限按钮事件里传入scope.row

getLeafKeys(node, arr) {// 如果当前 node 节点不包含 children 属性，则是三级节点if (!node.children) {return arr.push(node.id)}node.children.forEach(item => this.getLeafKeys(item, arr))},

上面代码块是通过递归的形式，获取角色下所有三级权限的id，并保存到 defKeys 数组中（判断是否包含child属性，包含则不是三级节点，则让该节点的子节点循环遍历递归调用该函数）

注意需要监听关闭对话框事件，因为需要重置defkeys数组，不清空的话，每次之前的角色都保存在数组里了。

确定按钮绑定事件：

el-tree的getCheckedKeys(),getHalfCheckedKeys()可以获得全选和半选中的数组，将数据post传入后台，再重新调用获取角色方法。

async allotRights() {const keys = [...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()]const idStr = keys.join(',')const {data: res } = await this.$http.post(`roles/${this.roleId}/rights`,{rids: idStr })if (res.meta.status !== 200) {return this.$message.error('分配权限失败！')}this.$message.success('分配权限成功！')this.getRolesList()this.setRightDialogVisible = false}