18.权限管理-权限列表的实现

1.页面结构——导航+表格

页面可以分为面包屑导航区域和表格区域

预览图：

1.1面包屑导航区域

面包屑导航区域代码：

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

1.2表格区域

1.2.1获取表格数据

在制作表格之前，可以先获取数据。这样在制作表格的时候就可以直接使用。
看后台项目接口文档：

• 请求路径：rights/:type
• 请求方法：get
• 请求参数

参数名	参数说明	备注
type	类型	值 list 或 tree , list 列表显示权限, tree 树状显示权限,参数是url参数:type

• 响应参数

参数名	参数说明	备注
id	权限 ID
authName	权限说明
level	权限层级
pid	权限父 ID
path	对应访问路径

• 响应数据 type=list

  {
    "data": [
        {
            "id": 101,
            "authName": "商品管理",
            "level": "0",
            "pid": 0,
            "path": null
        },
        {
            "id": 102,
            "authName": "订单管理",
            "level": "0",
            "pid": 0,
            "path": null
        }
    ],
    "meta": {
        "msg": "获取权限列表成功",
        "status": 200
    }
}

type=tree

  {
    data: [
      {
        id: 101,
        authName: '商品管理',
        path: null,
        pid: 0,
        children: [
          {
            id: 104,
            authName: '商品列表',
            path: null,
            pid: 101,
            children: [
              {
                id: 105,
                authName: '添加商品',
                path: null,
                pid: '104,101'
              }
            ]
          }
        ]
      }
    ],
    meta: {
      msg: '获取权限列表成功',
      status: 200
    }
  }

在前端项目中定义存储列表的rightsList和获取权限列表的方法，在创建页面后获取。代码如下：

<script>
export default {
  data() {
    return {
      rightsList: []  //权限列表
    }
  },
  created() {
    // 获取权限列表
    this.getRightsList()
  },
  methods: {
    // 获取权限列表
    async getRightsList() {
      const { data: res } = await this.$http.get('rights/list')
      if (res.meta.status !== 200) {
        return this.$message.error('获取列表失败')
      }
      this.rightsList = res.data
      console.log(res.data)
    }
  }
}
</script>
</script>

1.2.2制作表格填充数据

代码：

<!-- 表格区域 -->
    <el-card>
      <el-table :data="rightsList" 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 v-if="scope.row.level === '1'" type="success">二级</el-tag>
            <el-tag v-if="scope.row.level === '2'" type="warning">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

其中
（1）:data="rightsList"获取权限列表数据
（2）type="index"给表格标序，label="权限名称" prop="authName"设置表头名称和列表中对应的属性名称。
（3）而权限等级这一列比较特殊，后台返回的是数字字符串，但是我们需要显示的是类似于按钮的tag

因此需要使用模板进行特殊处理

<el-table-column label="权限等级">
    <template slot-scope="scope">
      <el-tag v-if="scope.row.level === '0'">一级</el-tag>
      <el-tag v-if="scope.row.level === '1'" type="success">二级</el-tag>
      <el-tag v-if="scope.row.level === '2'" type="warning">三级</el-tag>
    </template>
  </el-table-column>
</el-table>

其中，slot-scope="scope"表示将el-table-column的这行数据存储在一个名称为scope的对象中，可以使用scope.row获取整行的对象，scope.row.level则是该行该列的对应权限等级数据。而

权限业务分析

通过权限管理模块控制不同的用户可以进行那些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限。