获取菜单列表-添加筛选条件

src/styles/index.scss

@@ -90,7 +90,7 @@ div:focus {
     visibility: hidden;
     display: block;
     font-size: 0;
-    content: " ";
+    content: ' ';
     clear: both;
     height: 0;
   }
@@ -104,7 +104,7 @@ aside {
   display: block;
   line-height: 32px;
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -134,7 +134,7 @@ aside {
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .sub-navbar {
@@ -189,3 +189,7 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+.el-page-header {
+  margin: 0 0 20px 0;
+}

src/views/sys/menus/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="app-container">
+    <el-page-header v-if="parentTitle" @back="goBack" :content="parentTitle + ' 下的子菜单'"></el-page-header>
     <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" />
+      </el-select>
+      <el-select v-model="listQuery.status" style="width: 140px" class="filter-item" @change="handleFilter">
+        <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key" />
+      </el-select>
       <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
         添加菜单
       </el-button>
@@ -28,7 +35,7 @@
         <template slot-scope="{row}">
           <el-button size="mini" type="text" @click="handleUpdate(scope.$index, row)">编辑
           </el-button>
-          <el-button size="mini" type="text" :disabled="row.level | disableNextLevel" @click="handleShowNextLevel(scope.$index, row)">子菜单
+          <el-button size="mini" type="text" :disabled="row.level | disableNextLevel" @click="handleShowNextLevel(row)">子菜单
           </el-button>
           <el-button size="mini" type="text" @click="handleDelete(scope.$index, row)">删除
           </el-button>
@@ -80,11 +87,25 @@ export default {
       list: null,
       total: 5,
       listLoading: true,
+      parentTitle: '',
       listQuery: {
         pageNum: 1,
         pageSize: 10,
-        parentId: 0
-      }
+        parentId: '',
+        level: '',
+        status: ''
+      },
+      levelOptions: [
+        { label: '菜单级数', key: '' },
+        { label: '一级菜单', key: '0' },
+        { label: '二级菜单', key: '1' },
+        { label: '三级菜单', key: '2' }
+      ],
+      statusOptions: [
+        { label: '状态', key: '' },
+        { label: '启用', key: '0' },
+        { label: '停用', key: '1' }
+      ]
     }
   },
   watch: {
@@ -104,14 +125,20 @@ export default {
     resetParentId() {
       this.listQuery.pageNum = 1
       if (this.$route.query.parentId != null) {
-        this.parentId = this.$route.query.parentId
+        this.listQuery.parentId = this.$route.query.parentId
+        this.parentTitle = this.$route.query.title
       } else {
-        this.parentId = 0
+        this.listQuery.parentId = ''
+        this.parentTitle = ''
       }
     },
     handleAddMenu() {
       this.$router.push('/sys/menus/form')
     },
+    handleFilter() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
     getList() {
       this.listLoading = true
       fetchList(this.listQuery).then(response => {
@@ -125,8 +152,11 @@ export default {
         }, 1.5 * 1000)
       })
     },
-    handleShowNextLevel(index, row) {
-      this.$router.push({ path: '/sys/menus', query: { parentId: row.id } })
+    goBack() {
+      this.$router.push({ path: '/sys/menus' })
+    },
+    handleShowNextLevel(row) {
+      this.$router.push({ path: '/sys/menus', query: { parentId: row.id, title: row.title } })
     },
     handleUpdate(index, row) {
       this.$router.push({ path: '/sys/menus/form', query: { id: row.id } })