<template>
<router-view v-if="isReload" :class="getClass()" />
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'App',
components: {
},
data () {
return {
allLoading: this.$ueLoading({ visible: true }),
isReload: true
}
},
provide () {
return {
commonDialog: this.commonDialog,
reload: this.reload
}
},
computed: {
...mapGetters(['allLoadingStatus'])
},
methods: {
...mapActions(['setKeyValue']),
// 样式
getClass () {
const { $i18n } = this
return `app-lang-${$i18n.locale.split('_')[0]}`
},
// 设置全局loading实例状态
setLoading (status = true) {
if (status) {
return this.allLoading.updateLoading(status)
}
setTimeout(() => {
this.allLoading.updateLoading(status)
}, 250)
},
// 二次确定弹窗
commonDialog (data, { type = 'confirm', customClass = '', title, desc = '', tips = '', render, labels = [], header = [], confirmButtonText = '我知道了', confirmCallback, cancelCallbck = () => { } }) {
const h = this.$createElement
if (!['confirm', 'view'].includes(type)) {
return
}
let message = render || h('div', null, [
h('h6', null, desc + ' ?'),
h('p', null, tips)
])
if (type === 'view') {
let list = []
labels.map(item => {
header.map(item2 => {
const { key, label } = item2
if (key === item) {
list.push({ label, value: data[key] })
}
})
})
message = render || h('ul', list.map(item => {
return h('li', null, [
h('div', null, [
h('label', null, item.label + ':'),
h('p', null, item.value || '--')
])
])
}))
}
this.$msgbox({
title,
message,
center: true,
showCancelButton: type === 'confirm',
closeOnClickModal: true,
closeOnPressEscape: true,
customClass: `${type}-dialog ${customClass}`,
confirmButtonText: type === 'confirm' ? '确定' : confirmButtonText,
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm' && type !== 'view') {
instance.confirmButtonLoading = true
// instance.confirmButtonText = '处理中'
confirmCallback({ action, instance, done, data })
} else {
cancelCallbck({ action, instance, done, data })
instance.confirmButtonLoading = false
done()
}
}
}).then(() => {
}).catch(action => {
})
},
// 重载事件
reload () {
this.isReload = false
this.$nextTick(() => {
this.isReload = true
})
},
addAppEventListener () {
// window.addEventListener('beforeunload', () => {
// sessionStorage.setItem('user', JSON.stringify(this.user))
// })
// window.addEventListener('load', () => {
// sessionStorage.removeItem('user')
// })
// const that = this
// document.addEventListener('visibilitychange', () => {
// if (!document.hidden) {
// that.$nextTick(() => {
// localStorage.setItem('getSessionStorage', Date.now())
// })
// }
// })
// if (!sessionStorage.length) {
// localStorage.setItem('getSessionStorage', Date.now())
// }
// window.addEventListener('storage', (event) => {
// if (event.key === 'getSessionStorage') {
// // 已存在的标签页会收到这个事件
// localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage))
// localStorage.removeItem('sessionStorage')
// } else if (event.key === 'sessionStorage') {
// if (sessionStorage.length) {
// if (sessionStorage.getItem('user') && that.$route.name !== 'login') {
// const user = JSON.parse(sessionStorage.getItem('user'))
// if (user.adminId !== that.getUserName && that.getUserName) {
// location.reload()
// }
// }
// if (that.$route.name === 'login') {
// location.reload()
// }
// } else {
// const data = JSON.parse(event.newValue)
// data && data['user'] && sessionStorage.setItem('user', data['user'])
// }
// }
// })
}
},
created () {
},
mounted () {
// this.addAppEventListener()
},
watch: {
// 监测全局loading状态
allLoadingStatus: {
handler: 'setLoading',
immediate: true
},
'$route' (to, from) {
const { meta: { noLoading } } = to
// 根据meta.loading重置全局加载loading状态
noLoading && this.setKeyValue()
}
}
}
</script>
<style lang="scss">
</style>