|
|
|
<template>
|
|
|
|
<div style="width: 100%">
|
|
|
|
<Assembly></Assembly>
|
|
|
|
|
|
|
|
|
|
|
|
<el-tabs v-model="activeIndex"
|
|
|
|
v-if="openTab.length"
|
|
|
|
type="card"
|
|
|
|
:closable = "tabCloseable"
|
|
|
|
@tab-click='tabClick'
|
|
|
|
@tab-remove="tabRemove"
|
|
|
|
style="width: 100%;margin-top: 18px;height: 50px">
|
|
|
|
<el-tab-pane
|
|
|
|
v-for="(item, index) in this.$store.state.openTab"
|
|
|
|
:key="item.name"
|
|
|
|
:label="item.name"
|
|
|
|
:name="item.route">
|
|
|
|
</el-tab-pane>
|
|
|
|
<section class="content-container">
|
|
|
|
<div class="grid-content bg-purple-light">
|
|
|
|
<el-col :span="24" class="content-wrapper">
|
|
|
|
<transition name="fade" mode="out-in">
|
|
|
|
<router-view></router-view>
|
|
|
|
</transition>
|
|
|
|
</el-col>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</el-tabs>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Assembly from "@/views/bus/Assembly";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'TabMenu',
|
|
|
|
components: { Assembly },
|
|
|
|
|
|
|
|
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});
|
|
|
|
} 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);
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
openTab(){
|
|
|
|
this.openTab.length === 1 ? this.tabCloseable=false :this.tabCloseable = true;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
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>
|
|
|
|
/*底层背景色*/
|
|
|
|
.el-tabs__nav-scroll{
|
|
|
|
background-color: rgb(239,243,246);
|
|
|
|
}
|
|
|
|
/*首个内部边框*/
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
|
|
|
|
border: 1px solid rgba(80,109,130,.64);
|
|
|
|
}
|
|
|
|
/*其他内部边框*/
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__item{
|
|
|
|
border: 1px solid rgba(80,109,130,.64);
|
|
|
|
}
|
|
|
|
/*外部大边框取消表格样式*/
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__nav{
|
|
|
|
border: 0px;
|
|
|
|
}
|
|
|
|
/*黑框及内字体样式*/
|
|
|
|
.el-tabs__item{
|
|
|
|
color:#495060;
|
|
|
|
height: 26px;
|
|
|
|
border: 1px solid rgba(80,109,130,.64);
|
|
|
|
margin: 4px 3px;
|
|
|
|
line-height: 26px;
|
|
|
|
border-radius: 5px 5px 0 0;
|
|
|
|
background-color: #fff;
|
|
|
|
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
|
|
|
|
}
|
|
|
|
/* 选中的黑框的样式*/
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
|
|
|
|
border-bottom: 1px solid rgba(80,109,130,.64);
|
|
|
|
border-radius: 5px 5px 0 0;
|
|
|
|
background-color: #398af1;
|
|
|
|
color: #fff;
|
|
|
|
border-color: #398af1;
|
|
|
|
}
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active:before{
|
|
|
|
content: "";
|
|
|
|
background: #fff;
|
|
|
|
display: inline-block;
|
|
|
|
width: 8px;
|
|
|
|
height: 8px;
|
|
|
|
border-radius: 50%;
|
|
|
|
margin-right: 8px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
...
|
...
|
|
