|
@@ -1,13 +1,5 @@
|
|
<template>
|
|
<template>
|
|
<div class="_layout">
|
|
<div class="_layout">
|
|
- <!-- <Header />
|
|
|
|
- <div class="tagBoss">
|
|
|
|
- <TagList />
|
|
|
|
- </div>
|
|
|
|
- <div class="_content">
|
|
|
|
- <router-view />
|
|
|
|
- </div> -->
|
|
|
|
-
|
|
|
|
<div class="layout-left">
|
|
<div class="layout-left">
|
|
<Menus />
|
|
<Menus />
|
|
</div>
|
|
</div>
|
|
@@ -16,19 +8,22 @@
|
|
<Header />
|
|
<Header />
|
|
<TagList />
|
|
<TagList />
|
|
</div>
|
|
</div>
|
|
- <div class="layout-content">
|
|
|
|
- <template v-if="iframeViews.length > 0 && currentIframe">
|
|
|
|
- <component v-for="(item, index) in iframeViews" :key="index" :is="item['name']" />
|
|
|
|
- </template>
|
|
|
|
- <template v-else>
|
|
|
|
- <router-view>
|
|
|
|
- <template #default="{ Component, route }">
|
|
|
|
- <keep-alive :include="getCaches">
|
|
|
|
- <component :is="Component" :key="route.fullPath" />
|
|
|
|
- </keep-alive>
|
|
|
|
- </template>
|
|
|
|
- </router-view>
|
|
|
|
- </template>
|
|
|
|
|
|
+ <div class="layout-content" v-show="isFrameView">
|
|
|
|
+ <iframe
|
|
|
|
+ v-show="currentIframeId === item['query']['iFrameId']"
|
|
|
|
+ v-for="(item, index) in iframeViews"
|
|
|
|
+ :key="index"
|
|
|
|
+ :src="item['query']['url']"
|
|
|
|
+ ></iframe>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="layout-content" v-show="!isFrameView">
|
|
|
|
+ <router-view>
|
|
|
|
+ <template #default="{ Component, route }">
|
|
|
|
+ <keep-alive :include="getCaches">
|
|
|
|
+ <component :is="Component" :key="route.fullPath" />
|
|
|
|
+ </keep-alive>
|
|
|
|
+ </template>
|
|
|
|
+ </router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -38,23 +33,18 @@ import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
import Header from './header.vue'
|
|
import Header from './header.vue'
|
|
import TagList from './tagList.vue'
|
|
import TagList from './tagList.vue'
|
|
import Menus from './menus.vue'
|
|
import Menus from './menus.vue'
|
|
|
|
+import subscribe from '@/utils/Subscribe'
|
|
|
|
|
|
defineOptions({ name: 'Layout' })
|
|
defineOptions({ name: 'Layout' })
|
|
|
|
|
|
const tagsViewStore = useTagsViewStore()
|
|
const tagsViewStore = useTagsViewStore()
|
|
|
|
|
|
|
|
+const route = useRoute()
|
|
|
|
+const isFrameView = ref<boolean>(false)
|
|
const iframeViews = ref<any[]>([])
|
|
const iframeViews = ref<any[]>([])
|
|
-const currentIframe = ref<string>()
|
|
|
|
|
|
+const currentIframeId = ref<string>('')
|
|
|
|
|
|
-const { name } = useRoute()
|
|
|
|
const getCaches = computed((): string[] => {
|
|
const getCaches = computed((): string[] => {
|
|
- console.log('tagsViewStore------------------')
|
|
|
|
- console.log(tagsViewStore.visitedViews, name)
|
|
|
|
- iframeViews.value = filterIframe(tagsViewStore.visitedViews)
|
|
|
|
- const arr = iframeViews.value.filter((item) => item.name === name)
|
|
|
|
- currentIframe.value = arr[0]
|
|
|
|
- console.log('currentIframe------------------')
|
|
|
|
- console.log(arr)
|
|
|
|
return tagsViewStore.getCachedViews
|
|
return tagsViewStore.getCachedViews
|
|
})
|
|
})
|
|
const filterIframe = (arr): any[] => {
|
|
const filterIframe = (arr): any[] => {
|
|
@@ -64,6 +54,35 @@ const filterIframe = (arr): any[] => {
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+subscribe.on('update:tagsView', () => {
|
|
|
|
+ isFrameView.value = route.query.iframe === '1' ? true : false
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ iframeViews.value = filterIframe(tagsViewStore.visitedViews)
|
|
|
|
+ if (!route.query.iframe) {
|
|
|
|
+ currentIframeId.value = ''
|
|
|
|
+ } else {
|
|
|
|
+ currentIframeId.value = route.query.iFrameId as string
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+})
|
|
|
|
+watch(
|
|
|
|
+ () => route.query,
|
|
|
|
+ () => {
|
|
|
|
+ isFrameView.value = route.query.iframe === '1' ? true : false
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ iframeViews.value = filterIframe(tagsViewStore.visitedViews)
|
|
|
|
+ if (!route.query.iframe) {
|
|
|
|
+ currentIframeId.value = ''
|
|
|
|
+ } else {
|
|
|
|
+ currentIframeId.value = route.query.iFrameId as string
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ immediate: true
|
|
|
|
+ }
|
|
|
|
+)
|
|
</script>
|
|
</script>
|
|
<style>
|
|
<style>
|
|
@import url('./content.scss');
|
|
@import url('./content.scss');
|
|
@@ -114,4 +133,10 @@ ul,
|
|
li {
|
|
li {
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+iframe {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ border: 0px;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|