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

大家好，又见面了，我是你们的朋友全栈君。

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

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

在这里插入图片描述

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
    }