This commit is contained in:
hj 2023-05-17 17:23:45 +08:00
parent 0bb7b761f9
commit 951f4ae1f5

View File

@ -1,31 +1,48 @@
<template> <template>
<main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }"> <main
class="site-content"
:class="{ 'site-content--tabs': $route.meta.isTab }"
>
<!-- 主入口标签页 s --> <!-- 主入口标签页 s -->
<el-tabs <el-tabs
v-if="$route.meta.isTab" v-if="$route.meta.isTab"
v-model="mainTabsActiveName" v-model="mainTabsActiveName"
:closable="true" :closable="true"
@tab-click="selectedTabHandle" @tab-click="selectedTabHandle"
@tab-remove="removeTabHandle"> @tab-remove="removeTabHandle"
>
<el-dropdown class="site-tabs__tools" :show-timeout="0"> <el-dropdown class="site-tabs__tools" :show-timeout="0">
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item> <el-dropdown-item @click.native="tabsCloseCurrentHandle"
<el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item> >关闭当前标签页</el-dropdown-item
<el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item> >
<el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item> <el-dropdown-item @click.native="tabsCloseOtherHandle"
>关闭其它标签页</el-dropdown-item
>
<el-dropdown-item @click.native="tabsCloseAllHandle"
>关闭全部标签页</el-dropdown-item
>
<el-dropdown-item @click.native="refresh()"
>刷新当前标签页</el-dropdown-item
>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<el-tab-pane <el-tab-pane
v-for="item in mainTabs" v-for="item in mainTabs"
:key="item.name" :key="item.name"
:label="item.title" :label="item.title"
:name="item.name"> :name="item.name"
>
<el-card :body-style="siteContentViewHeight"> <el-card :body-style="siteContentViewHeight">
<iframe <iframe
v-if="item.type === 'iframe'" v-if="item.type === 'iframe'"
:src="item.iframeUrl" :src="item.iframeUrl"
width="100%" height="100%" frameborder="0" scrolling="yes"> width="100%"
height="100%"
frameborder="0"
scrolling="yes"
>
</iframe> </iframe>
<keep-alive v-else> <keep-alive v-else>
<router-view v-if="item.name === mainTabsActiveName" /> <router-view v-if="item.name === mainTabsActiveName" />
@ -43,85 +60,112 @@
</template> </template>
<script> <script>
import { isURL } from '@/utils/validate' import { isURL } from "@/utils/validate";
export default { export default {
inject: ['refresh'], inject: ["refresh"],
data () { data() {
return { return {};
},
computed: {
documentClientHeight: {
get() {
return this.$store.state.common.documentClientHeight;
},
},
menuActiveName: {
get() {
return this.$store.state.common.menuActiveName;
},
set(val) {
this.$store.commit("common/updateMenuActiveName", val);
},
},
mainTabs: {
get() {
return this.$store.state.common.mainTabs;
},
set(val) {
this.$store.commit("common/updateMainTabs", val);
},
},
mainTabsActiveName: {
get() {
return this.$store.state.common.mainTabsActiveName;
},
set(val) {
this.$store.commit("common/updateMainTabsActiveName", val);
},
},
siteContentViewHeight() {
var height = this.documentClientHeight - 50 - 30 - 2;
if (this.$route.meta.isTab) {
height -= 40;
return isURL(this.$route.meta.iframeUrl)
? { height: height + "px" }
: { minHeight: height + "px" };
}
return { minHeight: height + "px" };
},
},
methods: {
// tabs, tab
selectedTabHandle(tab) {
tab = this.mainTabs.filter((item) => item.name === tab.name);
if (tab.length >= 1) {
this.$router.push({
name: tab[0].name,
query: tab[0].query,
params: tab[0].params,
});
} }
}, },
computed: { // tabs, tab
documentClientHeight: { removeTabHandle(tabName) {
get () { return this.$store.state.common.documentClientHeight } this.mainTabs = this.mainTabs.filter((item) => item.name !== tabName);
}, if (this.mainTabs.length >= 1) {
menuActiveName: { // tab
get () { return this.$store.state.common.menuActiveName }, if (tabName === this.mainTabsActiveName) {
set (val) { this.$store.commit('common/updateMenuActiveName', val) } var tab = this.mainTabs[this.mainTabs.length - 1];
}, this.$router.push(
mainTabs: { { name: tab.name, query: tab.query, params: tab.params },
get () { return this.$store.state.common.mainTabs }, () => {
set (val) { this.$store.commit('common/updateMainTabs', val) } this.mainTabsActiveName = this.$route.name;
}, }
mainTabsActiveName: { );
get () { return this.$store.state.common.mainTabsActiveName },
set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
},
siteContentViewHeight () {
var height = this.documentClientHeight - 50 - 30 - 2
if (this.$route.meta.isTab) {
height -= 40
return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
} }
return { minHeight: height + 'px' } } else {
this.menuActiveName = "";
this.$router.push({ name: "home" });
} }
}, },
methods: { // tabs,
// tabs, tab tabsCloseCurrentHandle() {
selectedTabHandle (tab) { this.removeTabHandle(this.mainTabsActiveName);
tab = this.mainTabs.filter(item => item.name === tab.name) },
if (tab.length >= 1) { // tabs,
this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params }) tabsCloseOtherHandle() {
} this.mainTabs = this.mainTabs.filter(
}, (item) => item.name === this.mainTabsActiveName
// tabs, tab );
removeTabHandle (tabName) { },
this.mainTabs = this.mainTabs.filter(item => item.name !== tabName) // tabs,
if (this.mainTabs.length >= 1) { tabsCloseAllHandle() {
// tab this.mainTabs = [];
if (tabName === this.mainTabsActiveName) { this.menuActiveName = "";
var tab = this.mainTabs[this.mainTabs.length - 1] this.$router.push({ name: "home" });
this.$router.push({ name: tab.name, query: tab.query, params: tab.params }, () => { },
this.mainTabsActiveName = this.$route.name // tabs,
}) tabsRefreshCurrentHandle() {
} var tab = this.$route;
} else { this.removeTabHandle(tab.name);
this.menuActiveName = '' this.$nextTick(() => {
this.$router.push({ name: 'home' }) this.$router.push({
} name: tab.name,
}, query: tab.query,
// tabs, params: tab.params,
tabsCloseCurrentHandle () { });
this.removeTabHandle(this.mainTabsActiveName) });
}, },
// tabs, },
tabsCloseOtherHandle () { };
this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
},
// tabs,
tabsCloseAllHandle () {
this.mainTabs = []
this.menuActiveName = ''
this.$router.push({ name: 'home' })
},
// tabs,
tabsRefreshCurrentHandle () {
var tab = this.$route
this.removeTabHandle(tab.name)
this.$nextTick(() => {
this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
})
}
}
}
</script> </script>