<重点> 显示三级权限，并删除权限

src/assets/css/globel.css

@@ -2,6 +2,7 @@ html,body,#app{
     height: 100%;
     margin: 0;
     padding: 0;
+    min-width: 1366px;
 }
 .el-breadcrumb {
     margin-bottom: 15px;

src/components/access/access.vue

@@ -10,12 +10,8 @@
         <el-table :data="data" border stripe>
           <el-table-column label="#" 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"
-          >
+          <el-table-column label="路径" prop="path"></el-table-column>
+          <el-table-column label="权限等级" prop="level">
             <template scope="scope">
               <el-tag :type="['','success','warning',][scope.row.level]">等级{{['一','二','三'][scope.row.level]}}</el-tag>
             </template>

src/components/access/roles.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="roles">
+    <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>
+
+    <el-card>
+      <el-row>
+        <el-col>
+          <el-button type="primary">添加角色</el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="data" border stripe>
+        <el-table-column type="expand">
+          <template scope="scope">
+            <el-row class="bo" :key="v1.id" v-for="(v1) in scope.row.children">
+              <!--一级权限-->
+              <el-col  :span="5">
+                <el-tag closable @close="rmRole(v1.id,scope.row.id,scope.row)">{{v1.authName}}</el-tag>
+                <i class="el-icon-caret-right"></i>
+              </el-col>
+              <!--二级权限-->
+              <el-col :span="19">
+                <el-row class="bo" :key="v2.id" v-for="(v2) in v1.children">
+                 <el-col :span="6">
+                   <el-tag closable @close="rmRole(v2.id,scope.row.id,scope.row)" type="success">{{v2.authName}}</el-tag>
+                   <i class="el-icon-caret-right"></i>
+                 </el-col>
+                  <el-col :span="18">
+                      <el-tag closable @close="rmRole(v3.id,scope.row.id,scope.row)" :key="v3.id" v-for="v3 in v2.children" type="warning">{{v3.authName}}</el-tag>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column label="#" type="index"></el-table-column>
+        <el-table-column label="角色名" prop="roleName"></el-table-column>
+        <el-table-column width="300" label="角色描述" prop="roleDesc"></el-table-column>
+        <el-table-column label="操作" >
+          <template scope="scope">
+            <el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row.id)">编辑</el-button>
+            <el-button size="mini" icon="el-icon-delete" type="danger">删除</el-button>
+            <el-button size="mini" icon="el-icon-setting" type="warning">分配权限</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'roles',
+  data () {
+    return {
+      data: []
+    }
+  },
+  methods: {
+    edit (id) {
+
+    },
+    rmRole (id, roleId, row) {
+      this.$confirm('要删除么？').then(() => {
+        this.$http.delete(`roles/${roleId}/rights/${id}`).then(res => {
+          const response = res.data
+          if (response.meta.status !== 200) {
+            return this.$message.error(response.meta.msg)
+          }
+          this.$message.success(response.meta.msg)
+          row.children = response.data
+        })
+      }).catch(error => error)
+    },
+    async list () {
+      const { data: res } = await this.$http.get('roles')
+      if (res.meta.status !== 200) {
+        return this.$message.msg
+      }
+      this.data = res.data
+    }
+  },
+  mounted () {
+    this.list()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .el-tag {
+    margin: 7px;
+  }
+  .bo {
+    border-bottom: 1px solid #eeeeee;
+  }
+  .bo:nth-child(1){
+    border-top: 1px solid #eeeeee;
+  }
+  .bo{
+    display: flex;
+    align-items: center;
+    .bo:nth-child(1){
+      border-top: none;
+    }
+  }
+</style>

src/router/router.js

@@ -5,6 +5,7 @@ import Home from '../components/Home'
 import welcome from '../components/welcome'
 import users from '../components/users/users'
 import access from '../components/access/access'
+import roles from '../components/access/roles'
 
 Vue.use(VueRouter)
 
@@ -18,7 +19,8 @@ const routes = [
     children: [
       { path: '/welcome', component: welcome },
       { path: '/users', component: users },
-      { path: '/rights', component: access }
+      { path: '/rights', component: access },
+      { path: '/roles', component: roles }
     ]
   }
 ]