<template>
|
<main style="display: flex;flex-direction: column;position: relative" >
|
<!-- tab展示内容 -->
|
<template v-if="$route.meta.isTab">
|
<!--<el-dropdown class="aui-content--tabs-tools">-->
|
<!--<i class="el-icon-arrow-down"></i>-->
|
<!--<el-dropdown-menu slot="dropdown" :show-timeout="0">-->
|
<!--<el-dropdown-item @click.native="tabRemoveHandle($store.state.contentTabsActiveName)">{{-->
|
<!--$t('contentTabs.closeCurrent') }}-->
|
<!--</el-dropdown-item>-->
|
<!--<el-dropdown-item @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</el-dropdown-item>-->
|
<!--<el-dropdown-item @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</el-dropdown-item>-->
|
<!--</el-dropdown-menu>-->
|
<!--</el-dropdown>-->
|
<el-form :inline="true" style="position:absolute;right:10px; margin-top:3px;z-index:9;overflow: hidden;white-space: nowrap">
|
<zt-button class="CloseHandle" type="primary" @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</zt-button>
|
<zt-button class="CloseHandle" type="primary" @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</zt-button>
|
</el-form>
|
<el-tabs class="tabNext" v-model="$store.state.contentTabsActiveName" @tab-click="tabSelectedHandle"
|
@tab-remove="tabRemoveHandle"
|
>
|
<el-tab-pane
|
v-if="isRouterAlive"
|
:lazy="true"
|
v-for="item in $store.state.contentTabs.filter(item => item.title!='首页')"
|
:key="item.name"
|
:name="item.name"
|
:label="item.remark || item.title"
|
:closable="item.name !== 'home'"
|
:class="{ 'is-iframe': tabIsIframe(item.iframeURL) }">
|
<template v-if="item.name === 'home'">
|
<svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true">
|
<use xlink:href="#icon-home"></use>
|
</svg>
|
</template>
|
<iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%" frameborder="0"
|
scrolling="yes"></iframe>
|
<keep-alive v-else>
|
<router-view :key="key" v-if="item.name === $store.state.contentTabsActiveName"/>
|
</keep-alive>
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
<!-- 其他方式, 展示内容 -->
|
<template v-else>
|
<keep-alive>
|
<router-view/>
|
</keep-alive>
|
</template>
|
</main>
|
</template>
|
|
<script>
|
import {isURL} from '../../../packages/utils/validate'
|
|
export default {
|
data() {
|
return {
|
menuConfigs: [],
|
products: [],
|
isRouterAlive: true
|
}
|
},
|
created() {
|
let that = this
|
Promise.all([
|
this.getConfig(),
|
this.getProducts()
|
]).then(() => {
|
that.$store.registerModule('product', {
|
state: {
|
menuConfigs: that.menuConfigs || [],
|
products: that.products || []
|
},
|
getters: {},
|
mutations: {},
|
actions: {}
|
})
|
})
|
|
console.log(this.$store.state.contentTabs, 'this.$store.state.contentTabs')
|
},
|
computed: {
|
key() {
|
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
|
}
|
},
|
methods: {
|
// tabs, 是否通过iframe展示
|
tabIsIframe(url) {
|
return isURL(url)
|
},
|
reload() {
|
this.isRouterAlive = false
|
this.$nextTick(() => {
|
this.isRouterAlive = true
|
})
|
},
|
// tabs, 选中tab
|
tabSelectedHandle(tab) {
|
tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0]
|
if (tab && (tab.name === 'miantainHome-home' || 'replaceProblemHome-home')) {
|
this.$nextTick(() => {
|
this.$router.push({
|
'name': tab.name,
|
'remark': tab.remark,
|
'params': {...tab.params},
|
'query': {...tab.query}
|
})
|
})
|
// this.reload()
|
} else if (tab && tab.name !== this.$router.history.current.name) {
|
this.$nextTick(() => {
|
this.$router.push({
|
'name': tab.name,
|
'remark': tab.remark,
|
'params': {...tab.params},
|
'query': {...tab.query}
|
})
|
})
|
}
|
},
|
tabRemoveCurrentHandle(){
|
let tabName = this.$route.name
|
tabRemoveHandle(tabName)
|
},
|
// tabs, 删除tab
|
tabRemoveHandle(tabName) {
|
if (tabName === 'home') {
|
return false
|
}
|
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
|
if (this.$store.state.contentTabs.length <= 0) {
|
this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
|
return false
|
}
|
// 当前选中tab被删除
|
if (tabName === this.$store.state.contentTabsActiveName) {
|
let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
|
this.$router.push({
|
name: tab.name,
|
params: {...tab.params},
|
query: {...tab.query}
|
})
|
}
|
},
|
// tabs, 关闭其它
|
tabsCloseOtherHandle() {
|
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => {
|
return item.name === 'home' || item.name === this.$store.state.contentTabsActiveName
|
})
|
},
|
// tabs, 关闭全部
|
tabsCloseAllHandle() {
|
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
|
this.$router.push({name: 'home'})
|
},
|
// 获取所有菜单配置
|
getConfig() {
|
let that = this
|
return this.$http.get('/sys/menuConfig/list').then(({data: res}) => {
|
that.menuConfigs = res
|
}).catch(() => {
|
})
|
},
|
// 获取产品树
|
getProducts() {
|
return
|
let that = this
|
return this.$http.get('/product/treeSelect').then(({data: res}) => {
|
that.products = res
|
}).catch(() => {
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
/*.hide-tabs.aui-wrapper,*/
|
/*.hide-tabs .aui-content {*/
|
/* padding-top: 0;*/
|
/*}*/
|
/*.hide-tabs .aui-content > .el-tabs > .el-tabs__header,*/
|
/*.hide-tabs .aui-content > .aui-content--tabs-tools {*/
|
/* display: none;*/
|
/*}*/
|
/*.el-tabs__nav.is-top{*/
|
/* transform:translateX(50px) !important;*/
|
/*}*/
|
/* #tabNext .el-tabs__nav-next{*/
|
/* right: 21% !important;*/
|
/*}*/
|
.zt .tabNext>.el-tabs__header>.el-tabs__nav-wrap{
|
width:80% ;
|
}
|
.zt .tabNext .el-tabs__nav-wrap.is-scrollable{
|
width:80% ;
|
}
|
#tab-home{
|
padding-left: 10px;
|
}
|
</style>
|
