后台管理系统 侧边导航栏和tabs标签栏联动
tabs
<!--本页为tab标签-->
<template>
<div>
<div class="tabs">
<el-tabs
v-model="editableTabsValue"
type="card"
closable
editable
@tab-remove="removeTab"
@tab-click="handleClickTab($event.name)"
>
<el-tab-pane
v-for="item in editableTabs"
:key="item.id"
:label="item.title"
:name="item.name"
>
</el-tab-pane>
</el-tabs>
<!-- <div class="tabsLone" v-show="editableTabs.length>=7"></div> -->
</div>
</div>
</template>
<script>
export default {
data () {
return {
editableTabsValue: '',
editableTabs: [],
tabIndex: 1,
openedTab: [],
chArr:[],
id:0
}
},
methods: {
handleClickTab (route) {
this.$store.commit('changeTab', route)
this.$router.push(route)
},
removeTab (targetName) {
try {
if(this.editableTabs.length>1){
// 首页不允许被关闭（为了防止el-tabs栏中一个tab都没有）
// if (targetName === 'index') {
// return false
// }
let tabs = this.editableTabs
let activeName = this.editableTabsValue
if (activeName === targetName) {
tabs.forEach((tab, index) => {
console.log("打印tabs")
console.log(tab);
console.log(index);
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
this.$store.commit('deductTab', targetName)
let deductIndex = this.openedTab.indexOf(targetName);
console.log(deductIndex)
this.openedTab.splice(deductIndex, 1)
this.$router.push(activeName)
this.editableTabsValue = activeName
this.editableTabs = tabs.filter(tab => tab.name !== targetName)
if (this.openedTab.length === 0) {
this.$store.commit('addTab', '/moduleManagement')
this.$router.push('/moduleManagement')
}
}
} catch (error) {
console.log(error)
}
}
},
computed: {
getOpenedTab () {
return this.$store.state.openedTab
},
changeTab () {
return this.$store.state.activeTab
}
},
watch: {
getOpenedTab (val) {
if (val.length > this.openedTab.length) {
// 添加了新的tab页
// 导致$store.state中的openedTab长度
// 大于
// 标签页中的openedTab长度
// 因此需要新增标签页
let newTab = val[val.length - 1]; // 新增的肯定在数组最后一个
let title = this.$store.state.arrList[this.$store.state.arrList.length-1];
let id = this.id++;
++this.tabIndex
this.editableTabs.push({
title: title,
name: newTab,
content: '',
id:id
})
this.editableTabsValue = newTab
this.openedTab.push(newTab);
console.log(this.editableTabs)
}
},
changeTab (val) {
// 监听activetab以实现点击左侧栏时激活已存在的标签
if (val !== this.editableTabsValue) {
this.editableTabsValue = val
}
}
},
created () {
// 刷新页面时（F11)
// 因为的，会保留刷新时所在的router
// 但是tab标签页因为刷新而被重构了，tab没有了
// 因此需要将router回到index
let that = this;
that.$router.push('/moduleManagement');
}
}
</script>
<style>
/* .el-tabs__header{
margin: 0;
} */
.tabsLone{
width: 1px;
height: 0.1333rem;
border-left: 2px solid #CDCDD9;
position: absolute;
left: 6.0625rem;
top: 45px;
}
.tabs{
overflow-y: hidden;
}
.tabs .el-tabs--card>.el-tabs__header .el-tabs__item{
background:rgba(244,244,244,1);
border:1px solid rgba(208,208,208,1);
margin-top: 18px;
font-size:15px;
font-family:Source Sans Pro;
font-weight:400;
line-height:40px;
color:rgba(158,157,171,1);
opacity:1;
}
.tabs .el-tabs__item+.el-tabs__item{
margin-left:4px;
}
.tabs .el-tabs--card>.el-tabs__header{
width: 100%;
background: #EAEAEA;
}
.tabs .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{
background: #fff;
border-bottom: none;
color: #3B86FF;
}
.tabs .el-tabs__nav-scroll{
height:60px;
background:rgba(234,234,234,1);
width: 770px;
}
.tabs .el-tabs__nav-wrap.is-scrollable{
width: 500px;
}
.tabs .el-tabs__nav-wrap.is-scrollable{
width: 5.166667rem;
box-sizing: content-box;
padding-left: 0;
}
.tabs .el-tabs__nav-prev,.el-tabs__nav-next{
top: 17px;
font-size: 22px;
}
.tabs .el-tabs__nav-prev{
left: 4.3625rem;
}
.tabs .el-tabs__nav-next{
right: 0.6052rem;
}
</style>
menu
<!--本页为左侧下拉菜单-->
<template>
<div class="tac_parent">
<!-- 侧边导航栏 -->
<el-row class="tac" style="isCollapse ? menuSmallStyle : menuStyle">
<el-col :span="24">
<el-menu
default-active=""
class="el-menu-vertical-demo"
background-color="rgba(67,66,93,1)"
text-color="#fff"
unique-opened
router
active-text-color="#A3A0FB"
:collapse="isCollapse"
v-model="isCollapse"
:style="isCollapse? menuSmallStyle : menuStyle"
>
<!-- 点击最上层小图标显示隐藏 -->
<div>
<div class="side_title" v-if="isCollapse">
<span style="text-align:center;">
<img src="./../../assets/tms/shouqi.png" alt="" @click="Boolchange" class="iconImgStyle">
</span>
</div>
<div class="side_title" v-else>
<table></table>
<div style="padding-top:28px;padding-left:17px;padding-bottom:15px;background:rgba(0,0,0,0.1);box-shadow:0px 2px 3px rgba(0,0,0,0.05);">
<span>
<span v-show="!isCollapse" class="transportation">运输管理系统</span>
<img class="iconImg" src="./../../assets/tms/shouqi.png" alt="" @click="Boolchange" style="margin-left:95px;">
</span>
</div>
</div>
</div>
<el-submenu
v-for="(item) of menu"
:index="`${item.id}`"
:key="item.id"
>
<template slot="title">
<img :src="pics+item.ico" alt="" class="menu_img"/>
<span>{{item.name}}</span>
</template>
<el-menu-item-group class="over-hide">
<el-menu-item
v-for="sub of item.secondpage"
:index="`${sub.pagepath}`"
:key="sub.id"
@click="clickMenu(sub.pagepath,sub.name)"
>
{{sub.name}}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
components:{
},
data () {
return {
pics:'',
// 高度
fullHeight:'960px',
// 导航栏
menu: [],
openedTab: [],
isCollapse:false,
menuSmallStyle:{
width:"65px !important",
'transition':'.3s',
},
menuStyle:{
width:"240px",
'transition':'.3s'
},
}
},
methods: {
// 获取屏幕高度
// 侧边导航栏
Boolchange () {
this.isCollapse = !this.isCollapse;
},
// 发送请求回来侧边栏列表
send () {
let that = this;
that.$api
.getleft_NavigationBar()
.then(res => {
console.log(res)
if (res.Code == 0) {
that.menu = res.Data;
}
})
.catch(error => {
this.$Message.info(error);
});
},
clickMenu (componentName,subTitle) {
this.$store.state.arrList.push(subTitle) ;
this.openedTab = this.$store.state.openedTab;
// tabNum 为当前点击的列表项在openedTab中的index，若不存在则为-1
let tabNum = this.openedTab.indexOf(componentName)
if (tabNum === -1) {
// 该标签当前没有打开
// 将componentName加入到已打开标签页state.openedTab数组中
this.$store.commit('addTab', componentName)
} else {
// 该标签是已经打开过的，需要激活此标签页
this.$store.commit('changeTab', componentName);
}
},
},
created(){
this.pics = this.GLOBAL.tupians
this.send();
},
mounted(){
},
watch: {
}
}
</script>
<style scoped>
.iconImgStyle{
margin-top:30px;
margin-left:30px;
}
.menu_img{
width:16px;
height:16px;
margin-right:6px;
}
.over-hide{
overflow-x:hidden;
}
.transportation{
color: #fff;
font-size: 18px;
text-align: center;
}
</style>
<style>
.tac_parent{
height: 5.58rem;
}
.tac{
/* overflow-y: hidden; */
background:rgba(67,66,93,1);
height: 100%;
}
.el-menu{
border-right: 0;
overflow-y: hidden;
}
.el-submenu__title:hover,.el-submenu .el-menu-item:hover{
background:rgba(0,0,0,0.15) !important;
}
.el-submenu__title{
font-size:16px;
padding-left: 35px !important;
}
.el-submenu__title:hover{
border-left: 5px solid #A3A0FB
}
.el-menu-item{
font-size:16px;
overflow: hidden;
padding-left: 85px !important;
}
.el-menu-item.is-active{
background:rgba(0,0,0,0.15) !important;
}
.el-icon-arrow-down:before{
color: #ffffff;
}
.el-menu-item-group__title{
padding: 0;
}
</style>
store state
export default {
// tabs
id: '123456',
openedTab: [{
title:'模块管理',
name:'/moduleManagement'
}],
activeTab: '',
arrList:[]
}
store mutations
export default {
setJwt: (state, payload) => {
state.jwt= payload.jwt;
},
// // 我添加的tabs
addTab (state, componentName) {
state.openedTab.push(componentName)
},
changeTab (state, componentName) {
state.activeTab = componentName
},
deductTab (state, componentName) {
let index = state.openedTab.indexOf(componentName)
if(index !== state.openedTab.length-1){
state.openedTab.splice(index, 1)
state.openedTab.splice(state.openedTab.length-1, 1)
}
state.openedTab.splice(index-1, 1)
}
}