SmartCommunity/energyManagement/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>
                    </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('SET_MENU_LIST');
        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>