FE_bankTeaching/src/App.vue

<template>
  <div id="app">
    <select-business class="selectBusiness"
                     :showIt.sync="showIt"
                     v-show="!showIt && showBusiness" />
    <router-view></router-view>
    <vCase :showIt.sync="showIt"></vCase>
    <tip-dialog class="Z-9999" />
  </div>
</template>
<script>
import vCase from '@/components/case'
import Setting from '@/setting';
import util from '@/libs/util';
import selectBusiness from '@/components/selectBusiness'
import TipDialog from '@/components/tipDialog'
import { mapState, mapMutations } from 'vuex'
import Bus from '@/libs/bus'
export default {
  name: 'App',
  components: {
    vCase,
    selectBusiness,
    TipDialog
  },
  created () {
    //在页面加载时读取localStorage里的状态信息
    if (util.local.get(Setting.storeKey)) {
      this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey)))
      this.$store.system.replaceState(Object.assign({}, sessionStorage.getItem('systemData')))

    }

    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload", () => {
      if (this.$route.fullPath.includes('/counter/list/manage')) {
        sessionStorage.setItem('computerPath', this.$route.fullPath)
      }

      util.local.get(Setting.tokenKey) && util.local.set(Setting.storeKey, this.$store.state)
      sessionStorage.setItem('systemData', this.$store.system.state)
    })
  },
  data () {
    return {
      showIt: true,
      showSelect: false
    }
  },
  methods: {
    ...mapMutations({
      setShowBusiness: 'system/setShowBusiness',
      setTipsOperate: 'system/setTipsOperate'
    }),
  },
  watch: {
    showIt: {
      handler (newVal) {
        console.log("🚀 ~ file: App.vue:58 ~ handler ~ newVal:", newVal, this.businessKey, sessionStorage.getItem('submited'))
        if (!newVal && !this.businessKey && !sessionStorage.getItem('submited')) {
          this.setShowBusiness(true)
        } else {
          if (!newVal) {
            // 如果未选择业务，则关闭后继续弹出弹框
            if (!this.businessKey && !sessionStorage.getItem('submited')) {
              this.$nextTick(() => { this.setShowBusiness(true) })
            } else {
              // this.setTipsOperate('您正在进行' + this.businessKey + ',加油！');
            }
          } else {
            this.$nextTick(() => { this.setShowBusiness(false) })
          }
        }
      },
      immediate: true
    }
  },
  mounted () {
    Bus.$on('setShowIt', data => {
      this.showIt = data
    })
  },
  computed: {
    ...mapState({
      businessKey: state => state.system.businessKey,
      showBusiness: state => state.system.showBusiness,
    })
  },
}
</script>

<style lang="scss" scoped>
#app {
    font-size: 16px;
    min-width: $inner-width;
}
.selectBusiness {
    width: 100%;
    height: 100%;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

.Z-9999 {
    position: absolute;
    z-index: 9999;
}
</style>