OnlineMenu.vue
4.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
<iframe
ref="iframeContainer"
:src="url"
class="online-menu-iframe"
style="width: 100%"
height="100%"
frameborder="no"
border="0"
scrolling="auto"
></iframe>
</template>
<script>
import { mapGetters } from 'vuex'
import { getSysMenuById, getUrlTicket } from '@/api/portal.js'
export default {
name: 'OnlineMenu',
computed: {
...mapGetters('user', ['accessToken']),
},
mounted() {
let that = this
//监听url菜单流程页面的取消
window.addEventListener('message', function (e) {
// 获取消息内容 data
const { data } = e
if (data.message && data.message == 'closeTab') {
that.$tabs.close()
}
})
const frameWindow = this.$refs.iframeContainer.contentWindow
let flag = 0
const this_ = this
frameWindow.onscroll = function () {
this_.$nextTick(() => {
var scrollTop =
frameWindow.document.documentElement.scrollTop ||
frameWindow.document.body.scrollTop
if (scrollTop && flag < 1) {
frameWindow.document.documentElement.scrollTop = 0
frameWindow.document.body.scrollTop = 0
}
flag += 1
})
}
this.iframeSrc()
},
beforeDestroy() {
window.removeEventListener('message', () => {})
},
data() {
return {
url: '',
}
},
methods: {
iframeSrc() {
let href = this.$route.meta.href
//获取url菜单id
var varsPath = this.$route.path.split('/')
if (varsPath && varsPath.length > 0) {
const dataId = varsPath[varsPath.length - 1]
if (dataId && dataId != '') {
this.appendUrlTicket(href, dataId)
return
}
}
this.url = this.checkUrlPrev(href, true)
},
checkUrlPrev(href, isAddToken) {
let srcUrl = ''
if (!(href.startsWith('http://') || href.startsWith('https://'))) {
href = window.context.front + this.$route.meta.href
const isQuery = href && href.indexOf('?')
if (isAddToken) {
srcUrl = `${href}${isQuery > -1 ? '&' : '?'}token=${
this.accessToken
}&__isFull__=true`
} else {
srcUrl = `${href}${isQuery > -1 ? '&' : '?'}__isFull__=true`
}
} else {
srcUrl = href
}
return srcUrl
},
appendUrlTicket(url, dataId) {
getSysMenuById(dataId)
.then((menu) => {
if (!menu || !menu.tokenEnabled) {
this.url = this.checkUrlPrev(url, true)
return
}
var tokenType = menu.tokenType
var tokenKey = menu.tokenKey || 'token'
if (tokenType == 0) {
url = this.handleUrlToken(url, tokenKey, this.accessToken)
this.url = this.checkUrlPrev(url, false)
} else if (tokenType == 1) {
var tokenApiObj = JSON.parse(Base64.decode(menu.tokenApi) || '{}')
if (tokenApiObj && tokenApiObj != {}) {
//通过接口获取token
getUrlTicket(tokenApiObj)
.then((res) => {
if (!res || !res.value) {
this.$message.error(
`未获取到页面跳转的票据，请检查配置信息！`
)
this.url = this.checkUrlPrev(url, true)
}
url = this.handleUrlToken(url, tokenKey, res.value)
this.url = this.checkUrlPrev(url, false)
})
.catch((err) => {
console.error(`获取页面跳转票据失败，${err}`)
this.$message.error(`获取页面跳转票据失败！`)
this.url = this.checkUrlPrev(url, true)
})
} else {
this.url = this.checkUrlPrev(url, true)
}
} else {
this.url = this.checkUrlPrev(url, true)
}
})
.catch((err) => {
console.error(`根据id【${dataId}】获取菜单信息失败，${err}`)
this.$message.error(`根据id【${dataId}】获取菜单信息失败！`)
this.url = this.checkUrlPrev(url, true)
})
},
handleUrlToken(url, tokenKey, tokenValue) {
if (
typeof tokenKey === 'undefined' ||
tokenKey == null ||
tokenKey === ''
) {
return url
}
if (url.indexOf('?') != -1) {
url = `${url}&${tokenKey}=${tokenValue}`
} else {
url = `${url}?${tokenKey}=${tokenValue}`
}
return url
},
},
}
</script>
<style lang="scss" scoped>
.online-menu-iframe {
height: 100%;
background: #fff;
}
</style>