114 lines
3.0 KiB
Vue
114 lines
3.0 KiB
Vue
<template>
|
|
<div style="margin-left:10px; font-size: 1.2rem">
|
|
<el-tabs
|
|
v-model='selectedTabName'
|
|
type='card'
|
|
@tab-click='clickTab'
|
|
@tab-remove='removeTab'
|
|
>
|
|
<el-tab-pane
|
|
:closable = "item.name !== '0-0'"
|
|
v-for='item in tabs'
|
|
:key='item.name'
|
|
:label='item.title'
|
|
:name='item.name'
|
|
>
|
|
<el-row>
|
|
<el-col :span="10" style="padding: 10px; font-weight: bolder">{{ item.title }}</el-col>
|
|
<el-col :span="2" :offset ="12">
|
|
<img src="@/../public/image/BKLogoSmall.png" alt="logo" style="width: 80px; height: 40px">
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-scrollbar height="calc(100vh - 180px)">
|
|
<router-view v-slot="{ Component }">
|
|
<keep-alive><component :is="Component"/></keep-alive>
|
|
</router-view>
|
|
</el-scrollbar>
|
|
</el-row>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import 《组件名称》 from '《组件路径》 ';
|
|
import router from '@/router';
|
|
|
|
export default {
|
|
|
|
// import 引入的组件需要注入到对象中才能使用
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
// 这里存放数据
|
|
return {
|
|
|
|
}
|
|
},
|
|
// 计算属性 类似于 data 概念
|
|
computed: {
|
|
selectedTabName: {
|
|
get() {
|
|
return this.$store.state.tab.selectedTab
|
|
},
|
|
set(value) {
|
|
this.$store.commit('setSelectedTab', value)
|
|
}
|
|
},
|
|
tabs: {
|
|
get() {
|
|
return this.$store.state.tab.tabs
|
|
},
|
|
set(value) {
|
|
this.$store.commit('setTabs', value)
|
|
}
|
|
},
|
|
menuList: {
|
|
get() {
|
|
return this.$store.state.menu.menuList
|
|
},
|
|
set(value) {
|
|
this.$store.commit('setMenuList', value)
|
|
}
|
|
}
|
|
},
|
|
// 监控 data 中的数据变化
|
|
watch: {},
|
|
// 方法集合
|
|
methods: {
|
|
// 点击tab时触发
|
|
clickTab(tabsPaneContext, event) {
|
|
const tabName = tabsPaneContext.paneName
|
|
const tabRouterInfo = this.menuList.filter(f => f.index === tabName)
|
|
if(tabRouterInfo === undefined || tabRouterInfo === null || tabRouterInfo.length < 1) {
|
|
router.push({ name: 'nullPage' })
|
|
} else {
|
|
router.push({ name: tabRouterInfo[0].router })
|
|
}
|
|
},
|
|
removeTab(tabName) {
|
|
if(tabName === '0-0') {
|
|
return // 主页不让关
|
|
}
|
|
this.tabs = this.tabs.filter(f => f.name !== tabName)
|
|
const lastTab = this.tabs[this.tabs.length - 1]
|
|
const tabRouterInfo = this.menuList.filter(f => f.index === lastTab.name)
|
|
if(tabRouterInfo === undefined || tabRouterInfo === null || tabRouterInfo.length < 1) {
|
|
router.push({ name: 'nullPage' })
|
|
} else {
|
|
this.$store.commit('setSelectedTab', lastTab.name)
|
|
router.push({ name: tabRouterInfo[0].router })
|
|
}
|
|
},
|
|
|
|
},
|
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
|
mounted() {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |