增加历史页签功能

QMPlusVuePage/src/store/module/router.js

@@ -2,6 +2,16 @@ import { asyncRouterHandle } from '@/utils/asyncRouter';
 
 import { asyncMenu } from '@/api/menu'
 
+
+const formatRouter = (routes) => {
+    routes && routes.map(item => {
+        item.meta.hidden = item.hidden
+        if (item.children.length > 0) {
+            formatRouter(item.children)
+        }
+    })
+}
+
 export const router = {
     namespaced: true,
     state: {
@@ -27,6 +37,7 @@ export const router = {
             }]
             const asyncRouterRes = await asyncMenu()
             const asyncRouter = asyncRouterRes.data.menus
+            formatRouter(asyncRouter)
             baseRouter[0].children = asyncRouter
             baseRouter.push({
                 path: '*',

QMPlusVuePage/src/view/layout/aside/historyComponent/history.vue

@@ -0,0 +1,63 @@
+<template>
+          <div class="router-history">
+            <el-tabs v-model="activeValue" type="card" :closable="!(historys.length==1&&this.$route.name=='dashbord')" @tab-click="changeTab" @tab-remove="removeTab">
+              <el-tab-pane
+                v-for="item in historys"
+                :key="item.name"
+                :label="item.meta.title"
+                :name="item.name"
+              >
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+</template>
+<script>
+export default {
+    name:"HistoryComponent",
+    data(){
+        return{
+            historys:[
+                {
+                name:"dashbord",
+                meta:{
+                    title:"仪表盘"
+                }
+                }
+            ],
+            activeValue:"dashbord"
+        }
+    },
+    methods:{
+        changeTab(tab){
+            this.$router.push({name:tab.name})
+        },
+        removeTab(tab){
+           const index = this.historys.findIndex(item=>item.name == tab)
+           if(this.$route.name == tab){
+               if(this.historys.length==1){
+                   this.$router.push({name:"dashbord"})
+               }else{
+                    if(index<this.historys.length-1){
+                        this.$router.push({name:this.historys[index+1].name})
+                    }else{
+                        this.$router.push({name:this.historys[index-1].name})
+                    }
+               }
+           }
+               this.historys.splice(index,1)
+        }
+    },
+    watch:{
+     $route( to ){
+       this.historys = this.historys.filter(item=>!item.meta.hidden)
+       if(!this.historys.some(item=>item.name==to.name)){
+        this.historys.push(to)
+       }
+       this.activeValue = to.name
+     }
+    }
+}
+</script>
+<style lang="scss">
+    
+</style>

QMPlusVuePage/src/view/layout/aside/index.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters,mapMutations } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent'
 export default {
   name: 'Aside',
@@ -31,6 +31,7 @@ export default {
     }
   },
   methods: {
+    ...mapMutations("history",["addHistory"]),
     selectMenuItem(index) {
       if (index === this.$route.name) return
       this.$router.push({ name: index })
@@ -44,7 +45,6 @@ export default {
     AsideComponent
   },
   created() {
-    this.active = this.$route.name
     let screenWidth = document.body.clientWidth
      if(screenWidth<1000){
        this.isCollapse = !this.isCollapse
@@ -57,6 +57,11 @@ export default {
     })
 
   },
+  watch:{
+    $route(){
+      this.active = this.$route.name
+    }
+  },
   beforeDestroy() {
     this.$bus.off('totalCollapse')
     this.$bus.off('collapse')

QMPlusVuePage/src/view/layout/index.vue

@@ -12,7 +12,12 @@
             <i class="el-icon-s-unfold" v-if="isCollapse"></i>
             <i class="el-icon-s-fold" v-else></i>
           </div>
-          <h1 class="admin-title">Gin-Vue-Admin</h1>
+          <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item
+            :key="item.path"
+            v-for="item in matched.slice(1,matched.length)"
+          >{{item.meta.title}}</el-breadcrumb-item>
+        </el-breadcrumb>
           <div class="fl-right right-box">
             <el-dropdown>
               <span class="el-dropdown-link">
@@ -55,16 +60,12 @@
               </div>
             </el-dialog>
           </div>
+      
         </el-header>
         <!-- 当前面包屑用路由自动生成可根据需求修改 -->
         <!-- 
         :to="{ path: item.path }" 暂时注释不用-->
-        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item
-            :key="item.path"
-            v-for="item in matched.slice(1,matched.length)"
-          >{{item.meta.title}}</el-breadcrumb-item>
-        </el-breadcrumb>
+        <HistoryComponent />
         <transition mode="out-in" name="el-fade-in-linear">
           <router-view class="admin-box"></router-view>
         </transition>
@@ -75,6 +76,8 @@
 
 <script>
 import Aside from '@/view/layout/aside'
+import HistoryComponent from '@/view/layout/aside/historyComponent/history'
+
 import { mapGetters, mapActions } from 'vuex'
 import { changePassword } from '@/api/user'
 export default {
@@ -110,11 +113,12 @@ export default {
             trigger: 'blur'
           }
         ]
-      }
+      },
+      
     }
   },
   components: {
-    Aside
+    Aside,HistoryComponent
   },
   created() {
     let screenWidth = document.body.clientWidth
@@ -158,6 +162,9 @@ export default {
         }
       })
     },
+     removeTab(targetName) {
+        console.log(targetName)
+     },
     clearPassword() {
       this.pwdModify = {
         password: '',
@@ -169,6 +176,7 @@ export default {
   },
   computed: {
     ...mapGetters('user', ['userInfo']),
+    ...mapGetters('history', ['historys','activeValue']),
     title() {
       return this.$route.meta.title || '当前页面'
     },
@@ -239,13 +247,20 @@ $mainHight: 100vh;
   }
   .main-cont {
     .breadcrumb {
-      line-height: 24px;
+      line-height: 48px;
+      display: inline-block;
+      padding: 0 24px;
       // padding: 6px;
       // border-bottom: 1px solid #eee;
-      margin-bottom: 6px;
+    }
+    .router-history{
+      background: #fff;
+      margin-top: 1px;
+      padding: 0 6px;
     }
     &.el-main {
       overflow: auto;
+      background: #fff;
       // padding: 0px 10px;
       // background: #fff;
     }

QMPlusVuePage/src/view/superAdmin/api/api.vue

@@ -5,6 +5,19 @@
         <el-form-item label="路径">
           <el-input placeholder="路径" v-model="searchInfo.path"></el-input>
         </el-form-item>
+        <el-form-item label="描述">
+          <el-input placeholder="描述" v-model="searchInfo.description"></el-input>
+        </el-form-item>
+         <el-form-item label="请求">
+               <el-select placeholder="请选择" clear v-model="searchInfo.method">
+            <el-option
+              :key="item.value"
+              :label="`${item.label}(${item.value})`"
+              :value="item.value"
+              v-for="item in methodOptions"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item>
           <el-button @click="onSubmit" type="primary">查询</el-button>
         </el-form-item>