<template>
|
<div class="layout-tabs-compontent">
|
<div class="tabs-scroll-box">
|
<el-scrollbar :key="resizeKey">
|
<div class="tabs-group">
|
<div class="tab-item" :class="[!currentTab?'active':'']" @click.stop="onClickTab({path:'/sub-home',id:''})">
|
<span class="text">首页</span>
|
</div>
|
<div class="tab-item" v-for="(item,index) in tabs" :key="'ment-tab-'+index"
|
:class="[currentTab===item.id?'active':'']" @click.stop="onClickTab(item)">
|
<span class="text">{{item.name}}</span>
|
<div class="close-target" @click.stop="onCloseTab(index,item.id)"><el-icon><e-icon-close /></el-icon></div>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
<div class="more-dropdown-view">
|
<el-dropdown @command="onTabDropDownCommand">
|
<div class="circle-view"><el-icon><arrow-down-bold /></el-icon></div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="current">关闭当前</el-dropdown-item>
|
<el-dropdown-item command="other">关闭其它</el-dropdown-item>
|
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
<!-- ******divider******* -->
|
</div>
|
</template>
|
|
<script>
|
import {Close,ArrowDownBold} from '@element-plus/icons'
|
export default {
|
name:'layoutTabsCompontent',
|
components:{eIconClose:Close,ArrowDownBold},
|
data(){
|
return {
|
resizeKey:0
|
}
|
},
|
computed:{
|
tabs(){
|
let res = [];
|
let temp = this.$store.getters['system/getMenuTabs'];
|
if (temp && temp.tabs) {
|
res = temp.tabs;
|
}
|
this.resizeKey = new Date().getTime();
|
return res;
|
},
|
currentTab(){
|
let temp = this.$store.getters['system/getCurrentFullMenuPath']
|
let res = '';
|
if (temp.length>0) {
|
res = temp[temp.length-1].id
|
if (Number(res)<=0) {
|
res = ''
|
}
|
}
|
return res
|
}
|
},
|
methods:{
|
onClickTab(tab){
|
if (tab.id!==this.currentTab) {
|
this.$router.push(tab.path)
|
}
|
},
|
onCloseTab(index,id){
|
let oldTemp = this.$store.getters['system/getMenuTabs'];
|
this.closeSingleTab(index,oldTemp,(id===this.currentTab))
|
},
|
onTabDropDownCommand(command){
|
if (command==='current') {
|
this.closeCurrentTab()
|
} else if (command==='other') {
|
this.closeOtherTabs()
|
} else if (command==='all') {
|
this.closeAllTabs()
|
}
|
},
|
closeCurrentTab(){
|
let compareid = this.currentTab;
|
let oldTemp = this.$store.getters['system/getMenuTabs'];
|
let index = -1;
|
for (let i=0;i<oldTemp.tabs.length;i++) {
|
if (oldTemp.tabs[i].id === compareid) {
|
index = i;
|
break;
|
}
|
}
|
if (index>=0) {
|
this.closeSingleTab(index,oldTemp,true)
|
}
|
},
|
closeOtherTabs(){
|
let compareid = this.currentTab;
|
let oldTemp = this.$store.getters['system/getMenuTabs'];
|
let arr = [];
|
for (let i=0;i<oldTemp.tabs.length;i++) {
|
if (oldTemp.tabs[i].id === compareid) {
|
arr.push(oldTemp.tabs[i])
|
break;
|
}
|
}
|
let newTemp = {uid:oldTemp.uid,tabs:arr}
|
this.$store.commit('system/setMenuTabs',newTemp)
|
},
|
closeAllTabs(){
|
let oldTemp = this.$store.getters['system/getMenuTabs'];
|
let newTemp = {uid:oldTemp.uid,tabs:[]}
|
this.$store.commit('system/setMenuTabs',newTemp)
|
this.$router.push('/sub-home')
|
},
|
closeSingleTab(index,oldTabs,isCurrent){
|
/* 如果删除tab是当前子页面，则需要开启新的子页面 */
|
let goPath = '';
|
if (isCurrent) {
|
goPath = this.getPathById(index+1,oldTabs.tabs);
|
if (!goPath) {
|
goPath = this.getPathById(index-1,oldTabs.tabs);
|
}
|
if (!goPath) {
|
goPath = '/sub-home'
|
}
|
}
|
/* 删除tab */
|
let tempTabs = [...oldTabs.tabs];
|
tempTabs.splice(index,1);
|
let newTemp = {uid:oldTabs.uid,tabs:tempTabs}
|
this.$store.commit('system/setMenuTabs',newTemp)
|
/* 跳转到新的子页面 */
|
if (goPath){
|
this.$router.push(goPath)
|
}
|
},
|
getPathById(index,tabs){
|
if (tabs[index]) {
|
return tabs[index].path
|
} else {
|
return '';
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.layout-tabs-compontent{
|
$moreSize:36px;
|
position: absolute;
|
top:0;
|
left: 0;
|
width: 100%;
|
height: 40px;
|
box-sizing: border-box;
|
padding-left: 24px;
|
padding-top: 8px;
|
padding-right: $moreSize;
|
.tabs-scroll-box{
|
box-sizing: border-box;
|
height: 100%;
|
border-bottom: 1px solid #e4e4e4;
|
}
|
.tabs-group{
|
display: flex;
|
height: 31px;
|
}
|
.tab-item{
|
height: 100%;
|
border-radius: 6px 6px 0 0;
|
margin-right: 8px;
|
display: flex;
|
align-items: center;
|
background-color: #FFFFFF;
|
border-color: #e4e4e4;
|
border-style: solid;
|
border-width: 1px 1px 0 1px;
|
padding: 0 24px;
|
cursor: pointer;
|
position: relative;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
.close-target{
|
position: absolute;
|
height: 100%;
|
top:0;
|
right: 0;
|
display: none;
|
align-items: center;
|
padding: 0 8px 0 8px;
|
z-index: 2;
|
color: #999999;
|
cursor: pointer;
|
}
|
&:hover{
|
color: $color-primary;
|
.close-target{
|
display: flex;
|
}
|
}
|
&.active{
|
background-color: $color-primary;
|
border-color: $color-primary;
|
color: #FFFFFF;
|
cursor: default;
|
&:hover{
|
background-color: $color-primary-hover;
|
border-color: $color-primary;
|
color: #FFFFFF;
|
.close-target{
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
.more-dropdown-view{
|
position: absolute;
|
top:0;
|
right: 0;
|
height: 100%;
|
width: $moreSize;
|
border-bottom: 1px solid #e4e4e4;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
.circle-view{
|
$circleSize:20px;
|
$dropColor: #999999;
|
width: $circleSize;
|
height: $circleSize;
|
color: $dropColor;
|
border: 1px solid $dropColor;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
