朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 7a161fae6403892a9fc5fa7f888413a4f5ec878b 1 个父辈 7feff57d

界面增加tab处理

内嵌 并排对比
正在显示 5 个修改的文件 包含 208 行增加 和 59 行删除
<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>
... ...
... ... @@ -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);
... ...
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: '组件'},
]
},
// {
... ...
... ... @@ -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);
}
}
}
... ...
... ... @@ -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) {
... ...