角色列表基础渲染&准备展开内容布局

src/components/auth/Rights.vue

@@ -11,6 +11,7 @@
         :data="rightsList"
         style="width: 100%">
         <el-table-column
+          width="100px"
           type="index">
         </el-table-column>
         <el-table-column

src/components/auth/Roles-Mixin.js

@@ -0,0 +1,36 @@
+export default {
+  name: 'Roles',
+  data () {
+    return {
+      rolesList: []
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    async getData () {
+      const {data: {data, meta}} = await this.$http.get('roles')
+      if (meta.status !== 200) return this.$message.error('获取角色失败')
+      // 表格的data对数据格式是有固定的要求
+      // 以前数据中没有 children 选项
+      // 默认认为 有展开内容 而且回去使用children数据
+      // 如果数据的结构不符合要求  报错
+      // {id: 1, roleName: '管理员', roleDesc: '管理员123'}
+      // 把后台返回的数据 处理一下  去除children数据  保留children有的数据
+      data.forEach(item => {
+        item.child = item.children
+        delete item.children
+        item.child.forEach(item => {
+          item.child = item.children
+          delete item.children
+          item.child.forEach(item => {
+            item.child = item.children
+            delete item.children
+          })
+        })
+      })
+      this.rolesList = data
+    }
+  }
+}

src/components/auth/Roles.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="roles_container">
+    <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-button type="primary" plain>添加角色</el-button>
+      <el-table :data="rolesList">
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <!--一级权限-->
+            <el-row>
+              <el-col :span="4">
+                <el-tag closable>权限管理</el-tag>
+                <span class="el-icon-caret-right"></span>
+              </el-col>
+              <el-col :span="20">
+                <!--二级权限-->
+                <el-row>
+                  <el-col :span="8">
+                    <el-tag closable type="success">角色列表</el-tag>
+                    <span class="el-icon-caret-right"></span>
+                  </el-col>
+                  <el-col :span="16">
+                    <!--三级权限-->
+                    <el-tag closable type="warning">添加角色</el-tag>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="8">
+                    <el-tag closable type="success">角色列表</el-tag>
+                    <span class="el-icon-caret-right"></span>
+                  </el-col>
+                  <el-col :span="16">
+                    <!--三级权限-->
+                    <el-tag closable type="warning">添加角色</el-tag>
+                    <el-tag closable type="warning">添加角色</el-tag>
+                    <el-tag closable type="warning">添加角色</el-tag>
+                    <el-tag closable type="warning">添加角色</el-tag>
+                    <el-tag closable type="warning">添加角色</el-tag>
+                    <el-tag closable type="warning">添加角色</el-tag>
+                    <el-tag closable type="warning">添加角色</el-tag>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column type="index" width="100px"></el-table-column>
+        <el-table-column property="roleName" label="角色名称"></el-table-column>
+        <el-table-column property="roleDesc" label="角色描述"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button icon="el-icon-edit"  round></el-button>
+              <el-button icon="el-icon-delete"  round></el-button>
+              <el-button icon="el-icon-setting" round></el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import mixin from './Roles-Mixin'
+export default {
+  mixins: [mixin]
+}
+</script>
+
+<style scoped>
+</style>

src/router/index.js

@@ -5,6 +5,7 @@ import Home from '@/components/home/Home'
 import Welcome from '@/components/home/Welcome'
 import Users from '@/components/users/Users'
 import Rights from '@/components/auth/Rights'
+import Roles from '@/components/auth/Roles'
 
 Vue.use(Router)
 
@@ -29,7 +30,8 @@ const router = new Router({
       children: [
         {path: '/welcome', name: 'welcome', component: Welcome},
         {path: '/users', name: 'users', component: Users},
-        {path: '/rights', name: 'rights', component: Rights}
+        {path: '/rights', name: 'rights', component: Rights},
+        {path: '/roles', name: 'roles', component: Roles}
       ]
     }
   ]