界面增加tab处理

朱兆平
src/components/TabMenu/index.vue
src/main.js
src/routes.js
src/views/Home.vue
src/vuex/store.js
--- a/src/components/TabMenu/index.vue 0 → 100644
查看文件 @7a161fa
+++ b/src/components/TabMenu/index.vue 0 → 100644
查看文件 @7a161fa
+<template>
+    <el-tabs v-model="activeIndex"
+             v-if="openTab.length"
+             type="card"
+             :closable = "tabCloseable"
+             @tab-click='tabClick'
+             @tab-remove="tabRemove"
+             style="width: 100%">
+        <el-tab-pane
+                v-for="(item, index) in this.$store.state.openTab"
+                :key="item.name"
+                :label="item.name"
+                :name="item.route"
+        >
+
+                    <section class="content-container">
+                        <div class="grid-content bg-purple-light">
+            <!--                <el-col :span="24" class="breadcrumb-container">-->
+            <!--                    <strong class="title">{{$route.name}}</strong>-->
+            <!--                    <el-breadcrumb separator="/" class="breadcrumb-inner">-->
+            <!--                        <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">-->
+            <!--                            {{ item.name }}-->
+            <!--                        </el-breadcrumb-item>-->
+            <!--                    </el-breadcrumb>-->
+            <!--                </el-col>-->
+                            <el-col :span="24" class="content-wrapper">
+                                <transition name="fade" mode="out-in">
+                                    <router-view></router-view>
+                                </transition>
+                            </el-col>
+                        </div>
+                    </section>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<script>
+    export default {
+        name: 'TabMenu',
+        data() {
+            return {
+                tabCloseable: true
+            }
+        },
+        methods: {
+            initTab(){
+                // 刷新时以当前路由做为tab加入tabs
+                // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
+                // 当当前路由是首页时，添加首页到store，并设置激活状态
+                if (this.$route.path !== '/' && this.$route.path !== '/main') {
+                    // console.log('1');
+                    this.$store.commit('add_tabs', {route: '/main' , name: '首页'});
+                    this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name });
+                    this.$store.commit('set_active_index', this.$route.path);
+                } else {
+                    // console.log('2');
+                    this.$store.commit('add_tabs', {route: '/main', name: '首页'});
+                    this.$store.commit('set_active_index', '/main');
+                    this.$router.push('/main');
+                }
+            },
+            tabClick(tab){
+                // console.log("tab",tab);
+                // console.log('active',this.$store.state.activeIndex);
+                this.$router.push({path: this.$store.state.activeIndex});
+            },
+            tabRemove(targetName){
+                // console.log("tabRemove",targetName);
+                //首页不删
+                if(targetName == '/main'){
+                    return
+                }
+                this.$store.commit('delete_tabs', targetName);
+                if (this.$store.state.activeIndex === targetName) {
+                    // 设置当前激活的路由
+                    if (this.$store.state.openTab && this.$store.state.openTab.length >=1) {
+                        // console.log('=============',this.$store.state.openTab[this.$store.state.openTab.length-1].route)
+                        this.$store.commit('set_active_index', this.$store.state.openTab[this.$store.state.openTab.length-1].route);
+                        this.$router.push({path: this.$store.state.activeIndex});
+                        this.tabCloseable = false;
+                    } else {
+                        this.$router.push({path: '/main'});
+                    }
+                }
+            },
+        },
+        mounted() {
+            this.initTab();
+        },
+        watch:{
+            '$route'(to,from){
+                //判断路由是否已经打开
+                //已经打开的 ，将其置为active
+                //未打开的，将其放入队列里
+                let flag = false;
+                for(let item of this.$store.state.openTab){
+                    // console.log("item.name",item.name)
+                    // console.log("t0.name",to.name)
+
+                    if(item.name === to.name){
+                        // console.log('to.path',to.path);
+                        this.$store.commit('set_active_index',to.path)
+                        flag = true;
+                        break;
+                    }
+                }
+
+                if(!flag){
+                    // console.log('to.path',to.path);
+                    this.$store.commit('add_tabs', {route: to.path, name: to.name});
+                    this.$store.commit('set_active_index', to.path);
+                }
+
+            }
+        },
+        computed:{
+            openTab:{
+                get: function () {
+                    return this.$store.state.openTab;
+                },
+                set:function (value) {
+                    this.$store.commit('set_tabs', {value});
+                    // console.log("opebTab监视:value = "+ value);
+                }
+
+            },
+            activeIndex:{
+                get:function () {
+                    return this.$store.state.activeIndex;
+                },
+                set:function (value) {
+                    this.$store.commit('set_active_index', value);
+                }
+
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
--- a/src/main.js
查看文件 @7a161fa
+++ b/src/main.js
查看文件 @7a161fa
@@ -16,6 +16,7 @@ import 'font-awesome/css/font-awesome.min.css'
 import * as socketApi from './api/socket'
 import '@/styles/index.scss'
 import sys_init from '@/common/init/sys_init'
+import jsutil from "@/common/js/util";
 //定义一个全局过滤器实现日期格式化
@@ -30,7 +31,7 @@ Vue.prototype.socketApi = socketApi
 Vue.config.productionTip = false
 Mock.bootstrap();
-Vue.use(ElementUI)
+Vue.use(ElementUI, {size: 'mini'})
 Vue.use(VueRouter)
 Vue.use(Vuex)
 Vue.prototype.$axios = axios;
@@ -44,7 +45,8 @@ const router = new VueRouter({
 Vue.prototype.$rout =router;
 //本地存储系统初始化的router路由,用来处理用户退出后,把路由数据初始化
-sessionStorage.setItem('sysMenu', JSON.stringify(rout.routes));
+// sessionStorage.setItem('sysMenu', JSON.stringify(rout.routes));
+
 const message = Vue.prototype.$message;
 sys_init.init_axios(message,router,axios);
--- a/src/routes.js
查看文件 @7a161fa
+++ b/src/routes.js
查看文件 @7a161fa
 import Login from './views/Login.vue'
 import NotFound from './views/404.vue'
 import Home from './views/Home.vue'
-import Main from './views/dashboard/index'
+import Main from './views/Main.vue'
+import Dashboard from './views/dashboard/index'
 // import Table from './views/nav1/Table.vue'
 import Role from './views/nav1/role.vue'
 import Perm from './views/nav1/perm.vue'
@@ -90,7 +91,6 @@ import ElasticSearchInfo from "./views/bus/ElasticSearchInfo.vue"
 import RouterBatch from "./views/bus/RouterBatch.vue"
 import MessageManagement from "./views/bus/MessageManagement.vue"
 import RouterManage from "./views/bus/RouterManage"
-
 //组件练习
 //import Page7 from "./views/nav3/Page7.vue"
@@ -112,12 +112,14 @@ let routes = [
     },
     {
         path: '/',
-        redirect: '/login',
+        name: "主页",
+        redirect: '/main',
+        hidden: true
     },
     {
         path: '/',
         component: Home,
-        name: '主页',
+        name: 'INDEX',
         leaf: true,
         iconCls: 'el-icon-menu',
         children: [
@@ -135,21 +137,21 @@ let routes = [
     //     ]
     // },
     // { path: '/test', component: Main },
-    {
-        path: '/admin',
-        component: Home,
-        name: '系统设置',
-        iconCls: 'el-icon-setting',//图标样式class
-        children: [
-            {path: '/user', component: User, name: '用户管理'},
-            {path: '/role', component: Role, name: '组织机构'},
-            {path: '/perm', component: Perm, name: '权限管理'},
-            {path: '/log', component: LOG, name: '系统日志'},
-            {path: '/department', component: Department, name: '部门管理'},
-            {path: '/company', component: Company, name: '公司管理'},
-            {path: '/group', component: Group, name: '集团管理'}
-        ]
-    },
+    // {
+    //     path: '/admin',
+    //     component: Home,
+    //     name: '系统设置',
+    //     iconCls: 'el-icon-setting',//图标样式class
+    //     children: [
+    //         {path: '/user', component: User, name: '用户管理'},
+    //         {path: '/role', component: Role, name: '组织机构'},
+    //         {path: '/perm', component: Perm, name: '权限管理'},
+    //         {path: '/log', component: LOG, name: '系统日志'},
+    //         {path: '/department', component: Department, name: '部门管理'},
+    //         {path: '/company', component: Company, name: '公司管理'},
+    //         {path: '/group', component: Group, name: '集团管理'}
+    //     ]
+    // },
     {
         path: '/bus',
@@ -157,7 +159,7 @@ let routes = [
         name: '消息控制中心',
         iconCls: 'el-icon-message',
         children: [
-            {path: '/userInfo', component: UserInfo, name: '用户关系管理'},
+            // {path: '/userInfo', component: UserInfo, name: '用户关系管理'},
             {path: '/server', component: Server, name: '服务器管理'},
             // {path: '/host', component: VirtualHost, name: '虚拟主机管理'},
             {path: '/queue', component: Queue, name: '队列管理'},
@@ -183,15 +185,6 @@ let routes = [
             // {path: '/exchangeView', component: ExchangeView, name: '交换机监控'},
         ]
     },
-    {
-        path: '/nav3',
-        component: Home,
-        name: '组件练习',
-        iconCls: 'el-icon-view',
-        children: [
-            {path: '/page7', component: Page7, name: '组件'},
-        ]
-    },
     // {
--- a/src/views/Home.vue
查看文件 @7a161fa
+++ b/src/views/Home.vue
查看文件 @7a161fa
@@ -86,23 +86,9 @@
 </li>
 </ul>
 </aside>
-<section class="content-container">
-    <div class="grid-content bg-purple-light">
-        <el-col :span="24" class="breadcrumb-container">
-            <strong class="title">{{$route.name}}</strong>
-            <el-breadcrumb separator="/" class="breadcrumb-inner">
-                <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
-                    {{ item.name }}
-                </el-breadcrumb-item>
-            </el-breadcrumb>
-        </el-col>
-        <el-col :span="24" class="content-wrapper">
-            <transition name="fade" mode="out-in">
-                <router-view :key="$route.path +$route.query.t"></router-view>
-            </transition>
-        </el-col>
-    </div>
-</section>
+
+<TabMenu></TabMenu>
+
 </el-col>
 </el-row>
 </template>
@@ -111,6 +97,7 @@
     import rt from '../routes'
     import {editPass, resetToken} from '../api/user';
     import ElFormItem from "element-ui/packages/form/src/form-item";
+    import TabMenu from "@/components/TabMenu"
     export default {
@@ -119,7 +106,7 @@
                 reload: this.reload
             }
         },
-        components: {ElFormItem},
+        components: {ElFormItem,TabMenu},
         data() {
             var validatePass = (rule, value, callback) => {
                 if (!value) {
@@ -219,14 +206,15 @@
         },
         methods: {
             reload() {
-                this.$nextTick(function () {
-                    this.$router.push({
-                        path: this.$router.path,
-                        query: {
-                            t: new Date().getTime()
-                        }
-                    })
-                })
+                // this.$nextTick(function () {
+                //     this.$router.push({
+                //         path: this.$router.path,
+                //         query: {
+                //             t: new Date().getTime()
+                //         }
+                //     })
+                // })
+                // this.addTab(this.$router);
             },
             editPass: function () {
                 this.dialogFormVisible = true;
@@ -353,8 +341,8 @@
             if (userRouters) {
                 userRouters = JSON.parse(userRouters);
                 _this.$router.options.routes = userRouters;
-                console.log("home:");
-                console.log(_this.$router.options.routes);
+                // console.log("home:");
+                // console.log(_this.$router.options.routes);
             }
         }
     }
--- a/src/vuex/store.js
查看文件 @7a161fa
+++ b/src/vuex/store.js
查看文件 @7a161fa
@@ -11,6 +11,9 @@ const state = {
     count: 10,
     serverList: [],
     virtualHostList: [],
+    openTab:[],//所有打开的路由
+    activeIndex: '/main' //激活状态
+
 }
 // 定义所需的 mutations
@@ -38,6 +41,28 @@ const mutations = {
             this.$message.error(error.toString());
         });
     },
+    // 添加tabs
+    add_tabs (state, data) {
+        this.state.openTab.push(data);
+    },
+    set_tabs(state,value){
+        this.state.openTab= value;
+    },
+    // 删除tabs
+    delete_tabs (state, route) {
+        let index = 0;
+        for (let option of state.openTab) {
+            if (option.route === route) {
+                break;
+            }
+            index++;
+        }
+        this.state.openTab.splice(index, 1);
+    },
+    // 设置当前激活的tab
+    set_active_index (state, index) {
+        this.state.activeIndex = index;
+    },
     INCREMENT(state) {
@@ -54,4 +79,4 @@ export default new Vuex.Store({
     getters,
     state,
     mutations
-})
+})