SOURCE

<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>
console 命令行工具 X clear

                    
>
console