|
|
|
@ -1,98 +1,126 @@ |
|
|
|
<template> |
|
|
|
<main :class="['aui-content']"> |
|
|
|
<!-- 其他方式, 展示内容 --> |
|
|
|
<!-- tab展示内容 --> |
|
|
|
<template> |
|
|
|
<keep-alive> |
|
|
|
<router-view /> |
|
|
|
<template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|
|
|
<iframe |
|
|
|
:src=" |
|
|
|
$router.currentRoute.meta.iframeURL + |
|
|
|
'?token=' + |
|
|
|
token + |
|
|
|
'&customerId=' + |
|
|
|
customerId |
|
|
|
" |
|
|
|
ref="iframe" |
|
|
|
class="m-iframe" |
|
|
|
id="iframe" |
|
|
|
width="100%" |
|
|
|
height="100%" |
|
|
|
frameborder="0" |
|
|
|
scrolling="yes" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
<keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|
|
|
<router-view @changeCustomerName="changeCustomerName" /> |
|
|
|
</keep-alive> |
|
|
|
</template> |
|
|
|
</main> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { isURL } from '@/utils/validate' |
|
|
|
import Cookie from 'js-cookie' |
|
|
|
import { isURL } from "@/utils/validate"; |
|
|
|
import Cookie from "js-cookie"; |
|
|
|
export default { |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
iframeUrl: '', |
|
|
|
token: '', |
|
|
|
customerId: '' |
|
|
|
} |
|
|
|
iframeUrl: "", |
|
|
|
token: "", |
|
|
|
customerId: "", |
|
|
|
}; |
|
|
|
}, |
|
|
|
created () { |
|
|
|
// this.$nextTick(() => { |
|
|
|
// this.sendMessage() |
|
|
|
// }) |
|
|
|
this.token = localStorage.getItem('token') |
|
|
|
this.customerId = localStorage.getItem('customerId') |
|
|
|
watch: { |
|
|
|
// "$router.currentRoute.name": function () { |
|
|
|
// console.log($router.currentRoute); |
|
|
|
// }, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.token = localStorage.getItem("token"); |
|
|
|
this.customerId = localStorage.getItem("customerId"); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
changeCustomerName (customerName) { |
|
|
|
this.$emit('changeCustomerName', customerName) |
|
|
|
changeCustomerName(customerName) { |
|
|
|
this.$emit("changeCustomerName", customerName); |
|
|
|
}, |
|
|
|
// tabs, 是否通过iframe展示 |
|
|
|
tabIsIframe (url) { |
|
|
|
tabIsIframe(url) { |
|
|
|
// this.appendIframe(url) |
|
|
|
this.iframeUrl = url + '?token=' + localStorage.getItem('token') + '&customerId=' + localStorage.getItem('customerId') |
|
|
|
return isURL(url) |
|
|
|
// this.iframeUrl = |
|
|
|
// url + |
|
|
|
// "?token=" + |
|
|
|
// localStorage.getItem("token") + |
|
|
|
// "&customerId=" + |
|
|
|
// localStorage.getItem("customerId"); |
|
|
|
return isURL(url); |
|
|
|
}, |
|
|
|
// tabs, 选中tab |
|
|
|
tabSelectedHandle (tab) { |
|
|
|
tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0] |
|
|
|
tabSelectedHandle(tab) { |
|
|
|
tab = this.$store.state.contentTabs.filter( |
|
|
|
(item) => item.name === tab.name |
|
|
|
)[0]; |
|
|
|
if (tab) { |
|
|
|
this.$router.push({ |
|
|
|
'name': tab.name, |
|
|
|
'params': { ...tab.params }, |
|
|
|
'query': { ...tab.query } |
|
|
|
}) |
|
|
|
name: tab.name, |
|
|
|
params: { ...tab.params }, |
|
|
|
query: { ...tab.query }, |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
// tabs, 删除tab |
|
|
|
tabRemoveHandle (tabName) { |
|
|
|
if (tabName === 'home') { |
|
|
|
return false |
|
|
|
tabRemoveHandle(tabName) { |
|
|
|
if (tabName === "home") { |
|
|
|
return false; |
|
|
|
} |
|
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName) |
|
|
|
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 |
|
|
|
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] |
|
|
|
let tab = |
|
|
|
this.$store.state.contentTabs[ |
|
|
|
this.$store.state.contentTabs.length - 1 |
|
|
|
]; |
|
|
|
this.$router.push({ |
|
|
|
name: tab.name, |
|
|
|
params: { ...tab.params }, |
|
|
|
query: { ...tab.query } |
|
|
|
}) |
|
|
|
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 |
|
|
|
}) |
|
|
|
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' }) |
|
|
|
tabsCloseAllHandle() { |
|
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|
|
|
(item) => item.name === "home" |
|
|
|
); |
|
|
|
this.$router.push({ name: "home" }); |
|
|
|
}, |
|
|
|
sendMessage () { |
|
|
|
// const iframe = this.$refs.iframes.contentWindow |
|
|
|
const iframe = document.getElementsByClassName('iframes')[0].contentWindow |
|
|
|
|
|
|
|
console.log('iframe', iframe) |
|
|
|
// iframe.postMessage({ |
|
|
|
// token: localStorage.getItem('token'), |
|
|
|
// customerId: localStorage.getItem('customerId') |
|
|
|
// }, '*') |
|
|
|
iframe.postMessage({ name: 'lalalal' }, '*') |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style> |
|
|
|
|
|
|
|
|
dai
3 years ago