<script>
|
import events from './events'
|
import { mapActions, mapState } from 'vuex'
|
|
export default {
|
name: 'MultiTab',
|
data() {
|
return {
|
fullPathList: [],
|
pages: [],
|
activeKey: '',
|
newTabIndex: 0,
|
}
|
},
|
created() {
|
// bind event
|
events
|
.$on('open', (val) => {
|
if (!val) {
|
throw new Error(`multi-tab: open tab ${val} err`)
|
}
|
this.activeKey = val
|
})
|
.$on('close', (val) => {
|
if (!val) {
|
this.closeThat(this.activeKey)
|
return
|
}
|
this.closeThat(val)
|
})
|
.$on('rename', ({ key, name }) => {
|
// console.log('rename', key, name)
|
try {
|
const item = this.pages.find((item) => item.path === key)
|
item.meta.customTitle = name
|
this.$forceUpdate()
|
} catch (e) {}
|
})
|
|
this.pages.push(this.$route)
|
this.fullPathList.push(this.$route.fullPath)
|
// console.log(this.$route,42)
|
this.selectedLastPath()
|
},
|
computed: {
|
...mapState({
|
defApp: (state) => state.app.selectedKeys,
|
}),
|
},
|
methods: {
|
...mapActions(['SetModelSelectKeys','SetKeepAliveKeys']),
|
onEdit(targetKey, action) {
|
this[action](targetKey)
|
},
|
remove(targetKey) {
|
this.pages = this.pages.filter((page) => page.fullPath !== targetKey)
|
this.fullPathList = this.fullPathList.filter((path) => path !== targetKey)
|
// 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页
|
if (!this.fullPathList.includes(this.activeKey)) {
|
this.selectedLastPath()
|
}
|
},
|
selectedLastPath() {
|
this.activeKey = this.fullPathList[this.fullPathList.length - 1]
|
},
|
|
// content menu
|
closeThat(e) {
|
// 判断是否为最后一个标签页，如果是最后一个，则无法被关闭
|
if (this.fullPathList.length > 1) {
|
this.remove(e)
|
} else {
|
this.$message.info('这是最后一个标签了, 无法被关闭')
|
}
|
},
|
closeLeft(e) {
|
const currentIndex = this.fullPathList.indexOf(e)
|
if (currentIndex > 0) {
|
this.fullPathList.forEach((item, index) => {
|
if (index < currentIndex) {
|
this.remove(item)
|
}
|
})
|
} else {
|
this.$message.info('左侧没有标签')
|
}
|
},
|
closeRight(e) {
|
const currentIndex = this.fullPathList.indexOf(e)
|
if (currentIndex < this.fullPathList.length - 1) {
|
this.fullPathList.forEach((item, index) => {
|
if (index > currentIndex) {
|
this.remove(item)
|
}
|
})
|
} else {
|
this.$message.info('右侧没有标签')
|
}
|
},
|
closeAll(e) {
|
const currentIndex = this.fullPathList.indexOf(e)
|
this.fullPathList.forEach((item, index) => {
|
if (index !== currentIndex) {
|
this.remove(item)
|
}
|
})
|
},
|
closeMenuClick(key, route) {
|
this[key](route)
|
},
|
renderTabPaneMenu(e) {
|
return (
|
<a-menu
|
{...{
|
on: {
|
click: ({ key, item, domEvent }) => {
|
this.closeMenuClick(key, e)
|
},
|
},
|
}}
|
>
|
<a-menu-item key="closeThat">关闭当前标签</a-menu-item>
|
<a-menu-item key="closeRight">关闭右侧</a-menu-item>
|
<a-menu-item key="closeLeft">关闭左侧</a-menu-item>
|
<a-menu-item key="closeAll">关闭全部</a-menu-item>
|
</a-menu>
|
)
|
},
|
// render
|
renderTabPane(title, keyPath) {
|
const menu = this.renderTabPaneMenu(keyPath)
|
return (
|
<a-dropdown overlay={menu} trigger={['contextmenu']}>
|
<span style={{ userSelect: 'none' }}>{title}</span>
|
</a-dropdown>
|
)
|
},
|
},
|
watch: {
|
$route: function (newVal) {
|
this.activeKey = newVal.fullPath
|
// console.log(newVal,newVal.meta.belongid,141)
|
if (this.defApp && this.defApp.length > 0 && newVal.meta.belongid && this.defApp[0] != newVal.meta.belongid) {
|
this.SetModelSelectKeys([newVal.meta.belongid])
|
}
|
if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
|
this.fullPathList.push(newVal.fullPath)
|
this.pages.push(newVal)
|
}
|
},
|
activeKey: function (newPathKey) {
|
this.$router.push({ path: newPathKey })
|
},
|
pages(newVal){
|
let arr = newVal.map(x=>{
|
let name = null
|
x.matched.forEach(y=>{
|
if(y.name===x.name){
|
name = y.components.default.name
|
}
|
})
|
return name
|
})
|
this.SetKeepAliveKeys(arr)
|
}
|
},
|
|
render() {
|
const {
|
onEdit,
|
$data: { pages },
|
} = this
|
const panes = pages.map((page) => {
|
return (
|
<a-tab-pane
|
style={{ height: 0 }}
|
tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}
|
key={page.fullPath}
|
closable={pages.length > 1}
|
></a-tab-pane>
|
)
|
})
|
|
return (
|
<div class="ant-pro-multi-tab topMultiTabBox">
|
<div class="ant-pro-multi-tab-wrapper">
|
<a-tabs
|
hideAdd
|
type={'editable-card'}
|
v-model={this.activeKey}
|
tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }}
|
{...{ on: { edit: onEdit } }}
|
>
|
{panes}
|
</a-tabs>
|
</div>
|
</div>
|
)
|
},
|
}
|
</script>
|
|
<style>
|
.topMultiTabBox{
|
width:calc(100% - 40px);
|
}
|
.topMultiTabBox .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
|
border-bottom:1px solid #e8e8e8;
|
height: 38px;
|
}
|
.topMultiTabBox .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
|
border-radius: 20px;
|
height: 38px;
|
}
|
.topMultiTabBox .ant-tabs-bar{
|
border-bottom: unset;
|
padding-left: 0px!important;
|
}
|
</style>
|
