07 权限管理

1权限列表的基本布局

1.0 创建组件，

通过路由加载进来

测试：

1.1 基本布局

       <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

1.2 调用接口

报错：

1.3展示数据

tab标签

<el-tag>标签一</el-tag>

2权限管理分析

用户绑定了不同的角色

角色下拥有不同的权限

当用户拥有了角色，那角色下的权限都属于用户

3角色列表的基本布局

3.1 新建角色组件

1.1 通过路由形式加载进来

3.2 布局

1 添加按钮

button最好放在一个row里边

2 调用接口

3 添加表格

<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片 -->
        <el-card>
            <el-row>
                <!-- 添加角色 -->
                <el-col>
                    <el-button type="primary" @click="addDialogVisible = true">添加角色</el-button>
                </el-col>

                <!-- 索引列 -->
                <el-col>
                    <el-table :data="rolesList" border stripe>
                        <el-table-column type="index" label="#"></el-table-column>
                        <el-table-column prop="roleName" label="角色名称"></el-table-column>
                        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
                        <el-table-column label="操作">
                            <template v-slot="scope">
                                <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                                <el-button size="mini" type="warning" icon="el-icon-search">分配权限</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

4添加展开列

4.1 添加一行展开列

4.2 查看角色下的权限

调用获取角色列表，已经吧角色下的权限带过来了

children 是一级权限，一级权限里边还有个children是二级权限 ， 二级里边的children是三级权限

三层for循环吧数据拿出来

4.3 渲染一级权限

1 用栅格进行分布

 <!-- 展开列 -->
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                               <el-row>
                                   <!-- 渲染一级权限 -->
                                   <el-col :span="5"></el-col>
                                   <!-- 渲染二级三级权限 -->
                                   <el-col :span="19"></el-col>
                               </el-row>
                            </template>
                        </el-table-column>

2 一级权限进行for宣化渲染

                       <el-table-column type="expand">
                            <template slot-scope="scope">
                               <el-row v-for="(item1,i1) in scope.row.children" :key="item1.id">
                                   <!-- 渲染一级权限 -->
                                   <el-col :span="5">
                                          <el-tag>{{item1.authName}}</el-tag>  
                                    </el-col>
                                   <!-- 渲染二级三级权限 -->
                                   <el-col :span="19"></el-col>
                               </el-row>
                            </template>
                        </el-table-column>

美化：

2.1 每一行下边都有一个底边框 ，第一行还有一个头边框

2.2 添加一个 箭头

4.4 二级菜单渲染

每一个二级菜单也是一个el-row ,

在一个el-row 里边，让二级菜单占6列， 三级菜单占18列

渲染每一行

1 美化

4.5 三级权限设置

1 美化

1 缩小以后， 箭头就会乱了

缩小以后， 箭头就会乱了

解决：设置一个最小宽度

2 一级分类没有居中对齐

同时二级分类也没有居中对齐

  <style lang="less" scoped>
 /deep/  .el-table__expanded-cell{
    padding:80px;
}

注意：
<style scoped lang="less"> 这样写，样式没有作用，要主要顺序 <style lang="less" scoped>

参考：scoped 和 deep的用法深究 - 简书

5删除角色下的权限

为每一个按钮都添加一个删除的小图标，点击图标的时候弹出一个确认框

5.1 添加 删除图标

5.2 添加点击事件

注意close的位置，是再el-tage身上起作用

5.3调用删除接口

6分配权限

6.1 调用接口，弹出对话框

6.2 添加tree

  <el-tree :data="rightsList" :props="defaultProps"></el-tree>

rightsList: [],
            defaultProps: {
                children: 'children',
                label: 'authName'

            },

6.3 添加复选框

show-checkbox

6.4选中的时候，希望选中的是id值

6.5 所有节点， 默认都展开

default-expand-all="true"

6.6 已有的权限，默认勾选上

:default-checked-keys="defKeys"

项目使用：

1 获取所有的权限列表

2 获取角色下的权限列表(递归获取角色下所有的三级节点)

将角色下的权限id 都存在 defKey数组即可

就可以得到

注意：

    // 展示分配权限的对话框
    async showSetRightDialog(roles) {
      this.rolesId = roles.id
      // 获取所有权限列表
      const { data: res } = await this.$http.get('rights/tree')
      if (res.meta.status !== 200) {
        return this.$message.error('获取权限列表失败!')
      }
      // 获取到的权限数据保存
      this.rightsList = res.data
      console.log(this.rightsList)
      // 递归获取三级节点
      this.getLeafKeys(roles, this.defKeys)
      this.SetRightDialogVisible = true
    },
    

   // 递归的形式,获取角色下所有的三级权限的id,并保存到 defKeys数组中
    getLeafKeys(node, arr) {
      // 如果当前node没有children属性则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item => this.getLeafKeys(item, arr))
    },

6.7 bug

当你点击多个角色的分配权限，你发现后边 角色的已有权限不对了， 多了很多

因为关闭分配角色的时候没有清除权限，长此以往导致权限越来越多

解决：

每次关闭【分配权限】 的时候清空数组

@close="SetRightDialogVisibleClosed"

// 监听分配权限对话框的关闭事件
    SetRightDialogVisibleClosed() {
      // 清空 defkeys 数组  避免累积
      this.defKeys = []
    },

6.8 点确定，进行角色授权

获取所以已选中的id 和半选中的ID ，【合并数组】，将【数组】转成【字符串】 ，传送到服务器

怎么获取所以已选中的id (以前有的ID)和半选中的ID （自己添加的id）

    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.rolesId}/rights`, { rids: idStr })
      if (res.meta.status !== 200) {
        return this.$message.error('分配权限失败!')
      }
      this.$message.success('分配权限成功!')
      this.getRolesList()
      this.SetRightDialogVisible = false
    }

注意： getCheckedKeys，getHalfCheckedKeys 不要写成getHalfCheckedNodes

2 获取成功之后，如果没有清除defKeys，回造成累加，你看的现象是 没有起作用 。记得关闭弹窗，清空数组

3 弹框点确定，拿不到roleId, 需要我们点分配角色的时候，将roleId存起来先

7用户列表的分配角色

7.1 点击按钮，先获取数据进行展示

1 先写一个对话框

2 添加点击事件

3 调用函数，获取用户数据 和角色数据

4 渲染数据

绑定参数 需要定义：
            userInfo: {},   //用户信息绑定
            selectRoleId: '', //角色绑定
            rolesList: [],// 获取角色列表

用户数据需要在弹框中使用， 先再data 中存入

el-select :v-model的值为当前被选中的el-option的 value 属性值

  <el-dialog title="分配角色" :visible.sync="fenpeiDialogVisble" width="30%">
            <div>
                <p>当前的用户 : {{ userInfo.username }}</p>
                <p>当前的角色 : {{ userInfo.role_name }}</p>
                <p>
                    分配新角色:
                    <el-select v-model="selectRoleId" placeholder="请选择">
                        <el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
                        </el-option>
                    </el-select>
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisble = false">取 消</el-button>
                <el-button type="primary" @click="edituserbtn">确 定</el-button>
            </span>
        </el-dialog>

7.2 点击确定，完成分配角色

7.3 点击确定，再进去 ，发现弹出框数据还在！！

监听对话框的close事件，清除数据

    @close="setRolesDialogClosed"
  
  // 分配角色对话框关闭
    setRolesDialogClosed() {
      this.selectRoleId = ''
      this.userInfo = ''
    }