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'
    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",()=>{    
                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) {
                    if(!newVal && !this.businessKey) {
                        this.setShowBusiness(true)
                    }else {
                        if(!newVal) {
                            // 如果未选择业务，则关闭后继续弹出弹框
                            if(!this.businessKey) {
                                this.$nextTick(() => { this.setShowBusiness(true) })
                            }else {
                                // this.setTipsOperate('您正在进行' + this.businessKey + ',加油！');
                            }
                        }else {
                            this.$nextTick(() => { this.setShowBusiness(false) })
                        }
                    }
                },
                immediate: true
            }
        },
        computed: {
            ...mapState({
                businessKey: state => state.system.businessKey,
                showBusiness: state => state.system.showBusiness,
                businessKey: state => state.system.businessKey
            })
        },
    }
</script>

<style scoped>
#app {
    min-width: 1300px;
    min-height: 800px;
}
.selectBusiness {
    width: 100%;
    height: 100%;
}

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

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