Project-Annex/operationSupport/src/components/common/Home.vue

<!--
 * @Author: zouwenying
 * @Date: 2020-10-22 15:51:29
 * @LastEditTime: 2021-04-19 10:58:38
 * @LastEditors: zwy
 * @Description: In User Settings Edit
 * @FilePath: \vue-manage-system-master\src\components\others\Home.vue
-->
<template>
    <div class="dmp-app">
        <v-sidebar></v-sidebar>
        <div class="dmp-content" :style="{ width: collapse ? 'calc(100% - 85px)' : 'calc(100% - 220px)' }">
            <v-head></v-head>
            <div class="main-wrap">
                <transition name="move" mode="out-in">
                    <!-- <keep-alive :include="tagsList">
                            <router-view></router-view>
                        </keep-alive> -->
                    <router-view></router-view>
                </transition>
            </div>
        </div>
        <xk-modal></xk-modal>
        <div class="dmp-alert" v-if="popupsList.length !== 0">
            <div class="dmp-alert-body" v-for="item in popupsList" :key="item.id">
                <alert-modal :params="item"></alert-modal>
            </div>
        </div>
    </div>
</template>

<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
export default {
    data() {
        return {};
    },
    computed: {
        collapse() {
            return this.$store.getters['getCollapse'];
        },
        tagsList() {
            let arr = [],
                msg = this.$store.getters['getTagsList'];
            for (let i = 0, len = msg.length; i < len; i++) {
                msg[i].name && arr.push(msg[i].name);
            }
            return arr;
        },
        popupsList() {
            return this.$store.getters.getPopups;
        }
    },
    methods: {
        beforeunloadHandler() {
            //页面刷新
            let taglist = this.$store.getters['getTagsList'] || [];
            sessionStorage.setItem('tabs', JSON.stringify(taglist));
        },
        // 获取用户权限
        getElement() {
            this.$http.post('/sc-user-center/menu/selectAuthCode').then((res) => {
                let data = res.data || [];
                this.$store.commit('setPermissionList', new Set(data));
                console.log('获取到的权限标识为', data);
            });
        },
        beforeunload() {
            window.addEventListener('beforeunload', this.beforeunloadHandler, false);
        }
    },
    components: {
        vHead,
        vSidebar,
        vTags
    },
    created() {
        this.getElement();
        this.$store.dispatch('tags', JSON.parse(sessionStorage.getItem('tabs')) || []);
    },
    mounted() {
        this.beforeunload();
    },
    destroyed() {
        window.removeEventListener('beforeunload', this.beforeunloadHandler, false);
    }
};
</script>
<style lang='scss' scoped>
// .dmp-content{
//     flex-direction: column;
//     .dmp-main{
//         background-color: #f4f7f9;
//         position: relative;
//         overflow: hidden;
//         padding: 0;
//         .main-wrap{
//             width: 100%;
// 			height: 100%;
// 			position: absolute;
// 			overflow: auto;
// 			padding: 20px;
//         }
//     }
// }
.dmp-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 0;
}
.main-wrap {
    background-color: #f4f7f9;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 20px 10px 20px;
    height: 100%;
}
</style>