提交角色列表

src/router/index.js

@@ -117,14 +117,14 @@ export const asyncRoutes = [
           {
             path: 'list',
             hidden: true,
-            component: () => import('@/views/sys/menus/list/index'),
+            component: () => import('@/views/sys/menus/list.vue'),
             name: 'SysMenuList',
             meta: { title: '菜单列表' }
           },
           {
             path: 'form',
             hidden: true,
-            component: () => import('@/views/sys/menus/form/index'),
+            component: () => import('@/views/sys/menus/form.vue'),
             name: 'SysMenuForm',
             meta: { title: '菜单编辑' }
           }
@@ -133,13 +133,21 @@ export const asyncRoutes = [
       {
         path: 'roles',
         component: () => import('@/views/sys/roles/index'),
+        redirect: '/sys/roles/list',
         name: 'SysRoles',
         meta: { title: '角色列表', icon: 'lock' },
         children: [
+          {
+            path: 'list',
+            hidden: true,
+            component: () => import('@/views/sys/roles/list.vue'),
+            name: 'SysRolesList',
+            meta: { title: '角色列表' }
+          },
           {
             path: 'form',
             hidden: true,
-            component: () => import('@/views/sys/roles/form'),
+            component: () => import('@/views/sys/roles/form.vue'),
             name: 'SysRolesForm',
             meta: { title: '添加角色' }
           }
@@ -148,13 +156,21 @@ export const asyncRoutes = [
       {
         path: 'users',
         component: () => import('@/views/sys/users/index'),
+        redirect: '/sys/users/list',
         name: 'SysUsers',
         meta: { title: '用户列表', icon: 'user' },
         children: [
+          {
+            path: 'list',
+            hidden: true,
+            component: () => import('@/views/sys/users/list.vue'),
+            name: 'SysUsersList',
+            meta: { title: '角色列表' }
+          },
           {
             path: 'form',
             hidden: true,
-            component: () => import('@/views/sys/users/form'),
+            component: () => import('@/views/sys/users/form.vue'),
             name: 'SysUsersForm',
             meta: { title: '添加用户' }
           }

src/views/sys/menus/form/index.vue → src/views/sys/menus/form.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="app-container">
-    <el-page-header :content="isEdit?'编辑菜单':'添加菜单'"></el-page-header>
+    <el-page-header :content="isEdit?'编辑菜单':'添加菜单'" />
     <el-card class="form-container" shadow="never">
-      <el-form :model="menu" :rules="rules" ref="menuFrom" label-width="150px">
+      <el-form ref="menuFrom" :model="menu" :rules="rules" label-width="150px">
         <el-form-item label="上级菜单：" prop="parentId">
           <span>{{ parentTitle }}</span>
-          <el-input hidden v-model="menu.parentId"></el-input>
+          <el-input v-model="menu.parentId" hidden />
         </el-form-item>
         <el-form-item label="菜单名称：" prop="title">
-          <el-input v-model="menu.title"></el-input>
+          <el-input v-model="menu.title" />
         </el-form-item>
         <el-form-item label="前端名称：" prop="name">
-          <el-input v-model="menu.name"></el-input>
+          <el-input v-model="menu.name" />
         </el-form-item>
         <el-form-item label="前端图标：" prop="icon">
-          <el-input v-model="menu.icon" style="width: 80%"></el-input>
-          <svg-icon style="margin-left: 8px" :icon-class="menu.icon"></svg-icon>
+          <el-input v-model="menu.icon" style="width: 80%" />
+          <svg-icon style="margin-left: 8px" :icon-class="menu.icon" />
         </el-form-item>
         <el-form-item label="状态：">
           <el-radio-group v-model="menu.status">
@@ -24,7 +24,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="排序：">
-          <el-input v-model="menu.sort"></el-input>
+          <el-input v-model="menu.sort" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
@@ -35,7 +35,7 @@
   </div>
 </template>
 <script>
-import { getMenu, updateMenu } from '@/api/menu'
+import { getMenu, updateMenu, createMenu } from '@/api/menu'
 const defaultMenu = {
   id: '',
   title: '',

src/views/sys/menus/list/index.vue → src/views/sys/menus/list.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-page-header v-if="parentTitle" @back="goBack" :content="parentTitle + ' 下的子菜单'"></el-page-header>
+    <el-page-header v-if="parentTitle" :content="parentTitle + ' 下的子菜单'" @back="goBack" />
     <div class="filter-container">
       <el-select v-model="listQuery.level" style="width: 140px" class="filter-item" @change="handleFilter">
         <el-option v-for="item in levelOptions" :key="item.key" :label="item.label" :value="item.key" />
@@ -167,10 +167,10 @@ export default {
       this.$router.push({ path: '/sys/menus/list' })
     },
     handleShowNextLevel(row) {
-      this.$router.push({ path: '/sys/menus/list', query: { parentId: row.id, title: row.title } })
+      this.$router.push({ path: '/sys/menus/list', query: { parentId: row.id, title: row.title }})
     },
     handleUpdate(row) {
-      this.$router.push({ path: '/sys/menus/form', query: { id: row.id } })
+      this.$router.push({ path: '/sys/menus/form', query: { id: row.id }})
     },
     handleCreate() {
       this.$router.push({ path: '/sys/menus/form' })

src/views/sys/roles/index.vue

@@ -1,174 +1,3 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
-        添加角色
-      </el-button>
-    </div>
-    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
-      <el-table-column align="center" width="50">
-        <template slot-scope="scope">{{ scope.row.id }}</template>
-      </el-table-column>
-      <el-table-column label="角色名称" align="center">
-        <template slot-scope="scope">{{ scope.row.name }}</template>
-      </el-table-column>
-      <el-table-column label="角色描述" width="100" align="center">
-        <template slot-scope="scope">{{ scope.row.desc }}</template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center">
-        <template slot-scope="scope">{{ scope.row.creatTime }}</template>
-      </el-table-column>
-      <el-table-column label="更新时间" align="center">
-        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="200" align="center">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="handleShowNextLevel(scope.$index, scope.row)">分配
-          </el-button>
-          <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">修改
-          </el-button>
-          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
-
-  </div>
+  <router-view />
 </template>
-
-<script>
-import { fetchList, deleteMenu } from '@/api/menu'
-import Pagination from '@/components/Pagination'
-
-export default {
-  name: 'MenuList',
-  components: { Pagination },
-  filters: {
-    levelFilter(value) {
-      if (value === 0) {
-        return '一级'
-      } else if (value === 1) {
-        return '二级'
-      }
-    },
-    iconFilter(value) {
-      if (!value) {
-        return ''
-      }
-      if (value.substr(0, 7) === 'el-icon') {
-        return '<i class="' + value + '" />'
-      } else {
-        return '<svg-icon :icon-class="' + value + '" />'
-      }
-    },
-    disableNextLevel(value) {
-      if (value === 0) {
-        return false
-      } else {
-        return true
-      }
-    }
-  },
-  data() {
-    return {
-      tableKey: 0,
-      list: [
-        {
-          id: 1,
-          name: 'admim',
-          desc: '管理员',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        },
-        {
-          id: 2,
-          name: 'user',
-          desc: '普通用户',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        },
-        {
-          id: 3,
-          name: 'admim',
-          desc: '管理员',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        }
-      ],
-      total: 5,
-      listLoading: false,
-      listQuery: {
-        pageNum: 1,
-        pageSize: 10,
-        parentId: 0
-      }
-    }
-  },
-  watch: {
-    $route(route) {
-      this.resetParentId()
-      // this.getList()
-    }
-  },
-  created() {
-    this.resetParentId()
-    // this.getList()
-  },
-  methods: {
-    isElementIcon(value) {
-      return value.substr(0, 7) === 'el-icon'
-    },
-    resetParentId() {
-      this.listQuery.pageNum = 1
-      if (this.$route.query.parentId != null) {
-        this.parentId = this.$route.query.parentId
-      } else {
-        this.parentId = 0
-      }
-    },
-    getList() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.listLoading = false
-        console.log(response)
-        this.list = response.data.results
-        this.total = response.data.totalRecord
-        // Just to simulate the time of the request
-        setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
-    },
-    handleShowNextLevel(index, row) {
-      this.$router.push({ path: '/sys/roles', query: { parentId: row.id }})
-    },
-    handleUpdate(index, row) {
-      this.$router.push({ path: '/sys/roles/form', query: { id: row.id }})
-    },
-    handleCreate() {
-      this.$router.push({ path: '/sys/roles/form' })
-    },
-    handleDelete(index, row) {
-      this.$confirm('是否要删除该菜单', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        deleteMenu(row.id).then(response => {
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-            duration: 1000
-          })
-          this.getList()
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/views/sys/roles/list.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        添加角色
+      </el-button>
+    </div>
+    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
+      <el-table-column align="center" width="50">
+        <template slot-scope="scope">{{ scope.row.id }}</template>
+      </el-table-column>
+      <el-table-column label="角色名称" align="center">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="角色描述" width="100" align="center">
+        <template slot-scope="scope">{{ scope.row.desc }}</template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="scope">{{ scope.row.creatTime }}</template>
+      </el-table-column>
+      <el-table-column label="更新时间" align="center">
+        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleShowNextLevel(scope.$index, scope.row)">分配
+          </el-button>
+          <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">修改
+          </el-button>
+          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+import { fetchList, deleteMenu } from '@/api/menu'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'MenuList',
+  components: { Pagination },
+  filters: {
+    levelFilter(value) {
+      if (value === 0) {
+        return '一级'
+      } else if (value === 1) {
+        return '二级'
+      }
+    },
+    iconFilter(value) {
+      if (!value) {
+        return ''
+      }
+      if (value.substr(0, 7) === 'el-icon') {
+        return '<i class="' + value + '" />'
+      } else {
+        return '<svg-icon :icon-class="' + value + '" />'
+      }
+    },
+    disableNextLevel(value) {
+      if (value === 0) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: [
+        {
+          id: 1,
+          name: 'admim',
+          desc: '管理员',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        },
+        {
+          id: 2,
+          name: 'user',
+          desc: '普通用户',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        },
+        {
+          id: 3,
+          name: 'admim',
+          desc: '管理员',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        }
+      ],
+      total: 5,
+      listLoading: false,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        parentId: 0
+      }
+    }
+  },
+  watch: {
+    $route(route) {
+      this.resetParentId()
+      // this.getList()
+    }
+  },
+  created() {
+    this.resetParentId()
+    // this.getList()
+  },
+  methods: {
+    isElementIcon(value) {
+      return value.substr(0, 7) === 'el-icon'
+    },
+    resetParentId() {
+      this.listQuery.pageNum = 1
+      if (this.$route.query.parentId != null) {
+        this.parentId = this.$route.query.parentId
+      } else {
+        this.parentId = 0
+      }
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.listLoading = false
+        console.log(response)
+        this.list = response.data.results
+        this.total = response.data.totalRecord
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1.5 * 1000)
+      })
+    },
+    handleShowNextLevel(index, row) {
+      this.$router.push({ path: '/sys/roles', query: { parentId: row.id }})
+    },
+    handleUpdate(index, row) {
+      this.$router.push({ path: '/sys/roles/form', query: { id: row.id }})
+    },
+    handleCreate() {
+      this.$router.push({ path: '/sys/roles/form' })
+    },
+    handleDelete(index, row) {
+      this.$confirm('是否要删除该菜单', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteMenu(row.id).then(response => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            duration: 1000
+          })
+          this.getList()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/sys/users/index.vue

@@ -1,177 +1,3 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
-        添加用户
-      </el-button>
-    </div>
-    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
-      <el-table-column align="center" width="50">
-        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
-      </el-table-column>
-      <el-table-column label="头像" align="center">
-        <template slot-scope="scope">
-          <img :src="scope.row.avatar" alt="" width="50" height="50">
-        </template>
-      </el-table-column>
-      <el-table-column label="登录名" align="center">
-        <template slot-scope="scope">{{ scope.row.name }}</template>
-      </el-table-column>
-      <el-table-column label="姓名" width="100" align="center">
-        <template slot-scope="scope">{{ scope.row.desc }}</template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center">
-        <template slot-scope="scope">{{ scope.row.creatTime }}</template>
-      </el-table-column>
-      <el-table-column label="更新时间" align="center">
-        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="200" align="center">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">修改
-          </el-button>
-          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
-
-  </div>
+  <router-view />
 </template>
-
-<script>
-import { fetchList, deleteMenu } from '@/api/menu'
-import Pagination from '@/components/Pagination'
-
-export default {
-  name: 'MenuList',
-  components: { Pagination },
-  filters: {
-    levelFilter(value) {
-      if (value === 0) {
-        return '一级'
-      } else if (value === 1) {
-        return '二级'
-      }
-    },
-    iconFilter(value) {
-      if (!value) {
-        return ''
-      }
-      if (value.substr(0, 7) === 'el-icon') {
-        return '<i class="' + value + '" />'
-      } else {
-        return '<svg-icon :icon-class="' + value + '" />'
-      }
-    },
-    disableNextLevel(value) {
-      if (value === 0) {
-        return false
-      } else {
-        return true
-      }
-    }
-  },
-  data() {
-    return {
-      tableKey: 0,
-      list: [
-        {
-          id: 1,
-          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
-          name: 'admin',
-          desc: '超超',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        },
-        {
-          id: 2,
-          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
-          name: 'zhengjigyi',
-          desc: '翼翼',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        },
-        {
-          id: 3,
-          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
-          name: 'wuxiaoyan',
-          desc: 'yanyan',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        }
-      ],
-      total: 5,
-      listLoading: false,
-      listQuery: {
-        pageNum: 1,
-        pageSize: 10,
-        parentId: 0
-      }
-    }
-  },
-  watch: {
-    $route(route) {
-      this.resetParentId()
-      // this.getList()
-    }
-  },
-  created() {
-    this.resetParentId()
-    // this.getList()
-  },
-  methods: {
-    isElementIcon(value) {
-      return value.substr(0, 7) === 'el-icon'
-    },
-    resetParentId() {
-      this.listQuery.pageNum = 1
-      if (this.$route.query.parentId != null) {
-        this.parentId = this.$route.query.parentId
-      } else {
-        this.parentId = 0
-      }
-    },
-    getList() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.listLoading = false
-        console.log(response)
-        this.list = response.data.results
-        this.total = response.data.totalRecord
-        // Just to simulate the time of the request
-        setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
-    },
-    handleUpdate(index, row) {
-      this.$router.push({ path: '/sys/users/form', query: { id: row.id }})
-    },
-    handleCreate() {
-      this.$router.push({ path: '/sys/users/form' })
-    },
-    handleDelete(index, row) {
-      this.$confirm('是否要删除该菜单', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        deleteMenu(row.id).then(response => {
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-            duration: 1000
-          })
-          this.getList()
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/views/sys/users/list.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        添加用户
+      </el-button>
+    </div>
+    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
+      <el-table-column align="center" width="50">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column label="头像" align="center">
+        <template slot-scope="scope">
+          <img :src="scope.row.avatar" alt="" width="50" height="50">
+        </template>
+      </el-table-column>
+      <el-table-column label="登录名" align="center">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="姓名" width="100" align="center">
+        <template slot-scope="scope">{{ scope.row.desc }}</template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="scope">{{ scope.row.creatTime }}</template>
+      </el-table-column>
+      <el-table-column label="更新时间" align="center">
+        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">修改
+          </el-button>
+          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+import { fetchList, deleteMenu } from '@/api/menu'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'MenuList',
+  components: { Pagination },
+  filters: {
+    levelFilter(value) {
+      if (value === 0) {
+        return '一级'
+      } else if (value === 1) {
+        return '二级'
+      }
+    },
+    iconFilter(value) {
+      if (!value) {
+        return ''
+      }
+      if (value.substr(0, 7) === 'el-icon') {
+        return '<i class="' + value + '" />'
+      } else {
+        return '<svg-icon :icon-class="' + value + '" />'
+      }
+    },
+    disableNextLevel(value) {
+      if (value === 0) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: [
+        {
+          id: 1,
+          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
+          name: 'admin',
+          desc: '超超',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        },
+        {
+          id: 2,
+          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
+          name: 'zhengjigyi',
+          desc: '翼翼',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        },
+        {
+          id: 3,
+          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
+          name: 'wuxiaoyan',
+          desc: 'yanyan',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        }
+      ],
+      total: 5,
+      listLoading: false,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        parentId: 0
+      }
+    }
+  },
+  watch: {
+    $route(route) {
+      this.resetParentId()
+      // this.getList()
+    }
+  },
+  created() {
+    this.resetParentId()
+    // this.getList()
+  },
+  methods: {
+    isElementIcon(value) {
+      return value.substr(0, 7) === 'el-icon'
+    },
+    resetParentId() {
+      this.listQuery.pageNum = 1
+      if (this.$route.query.parentId != null) {
+        this.parentId = this.$route.query.parentId
+      } else {
+        this.parentId = 0
+      }
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.listLoading = false
+        console.log(response)
+        this.list = response.data.results
+        this.total = response.data.totalRecord
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1.5 * 1000)
+      })
+    },
+    handleUpdate(index, row) {
+      this.$router.push({ path: '/sys/users/form', query: { id: row.id }})
+    },
+    handleCreate() {
+      this.$router.push({ path: '/sys/users/form' })
+    },
+    handleDelete(index, row) {
+      this.$confirm('是否要删除该菜单', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteMenu(row.id).then(response => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            duration: 1000
+          })
+          this.getList()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>