PageLayout.vue

<template>
    <div class="page-layout">
        <page-header
            ref="pageHeader"
            :style="`margin-top: ${multiPage ? 0 : -24}px`"
            :breadcrumb="breadcrumb"
            :logo="logo"
            :avatar="avatar"
        >
            <slot name="action" slot="action" />
            <slot slot="content" name="headerContent" />
            <div slot="content" v-if="!this.$slots.headerContent && desc">
                <p>{{ desc }}</p>
                <div v-if="this.linkList" class="link">
                    <template v-for="(link, index) in linkList">
                        <a :key="index" :href="link.href"> <a-icon :type="link.icon" />{{ link.title }} </a>
                    </template>
                </div>
            </div>
            <slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
        </page-header>
        <slot />
    </div>
</template>

<script>
import PageHeader from '@/components/page/PageHeader.vue';
import { mapState, mapMutations } from 'vuex';
import { getI18nKey } from '@/utils/routerUtil';
import { getUserInfo } from '@/utils';

export default {
    name: 'PageLayout',
    components: { PageHeader },
    props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
    data() {
        return {
            page: {},
            pageHeaderHeight: 0,
        };
    },
    watch: {
        $route() {
            this.page = this.$route.meta.page;
        },
    },
    updated() {
        if (!this._inactive) {
            this.updatePageHeight();
        }
    },
    activated() {
        this.updatePageHeight();
    },
    deactivated() {
        this.updatePageHeight(0);
    },
    mounted() {
        this.updatePageHeight();
    },
    created() {
        const { menuList } = getUserInfo();
        this.menuList = menuList;
        this.page = this.$route.meta.page;
    },
    beforeDestroy() {
        this.updatePageHeight(0);
    },
    computed: {
        ...mapState('settingModule', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth']),
        breadcrumb() {
            return this.getRouteBreadcrumb();
        },
        marginCorrect() {
            return this.multiPage ? 24 : 0;
        },
    },
    methods: {
        ...mapMutations('settingModule', ['correctPageMinHeight']),
        getRouteBreadcrumb() {
            const path = this.$route.path;
            const currentMenu = this.menuList.find(m => m.menuUrl === path);
            let parentMenuId = currentMenu.parentMenuId;
            const breadcrumb = [currentMenu.menuName];
            while (parentMenuId !== 0) {
                const parentMenu = this.menuList.find(m => m.menuId === parentMenuId);
                breadcrumb.unshift(parentMenu.menuName);
                parentMenuId = parentMenu.parentMenuId;
            }
            return breadcrumb;
        },
        /**
         * 用于计算页面内容最小高度
         * @param newHeight
         */
        updatePageHeight(newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
            this.correctPageMinHeight(this.pageHeaderHeight - newHeight);
            this.pageHeaderHeight = newHeight;
        },
    },
};
</script>

<style lang="less">
.link {
    line-height: 24px;
    a {
        font-size: 14px;
        margin-right: 32px;
        i {
            font-size: 22px;
            margin-right: 8px;
        }
    }
}
</style>