AdminLayout.vue

<template>
    <a-layout :class="['admin-layout', 'beauty-scroll']">
        <side-menu
            :class="[fixedSideBar ? 'fixed-side' : '']"
            :theme="theme.mode"
            v-if="layout === 'side' || layout === 'mix'"
            :menuData="sideMenuData"
            :collapsed="collapsed"
            :collapsible="true"
        />

        <div
            v-if="fixedSideBar"
            :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`"
            class="virtual-side"
        />

        <drawer v-if="!hideSettingExtend" v-model="showSetting" placement="right">
            <div class="setting" slot="handler">
                <a-icon :type="showSetting ? 'close' : 'setting'" />
            </div>
            <setting />
        </drawer>

        <a-layout class="admin-layout-main beauty-scroll">
            <layout-top-header
                :class="[{ 'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage }]"
                :style="headerStyle"
                :menuData="headMenuData"
                :collapsed="collapsed"
                @toggleCollapse="toggleCollapse"
                @menuSelect="menuSelect"
            />
            <a-layout-header
                :class="[
                    'virtual-header',
                    { 'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage },
                ]"
                v-show="fixedHeader"
            />
            <a-layout-content class="admin-layout-content">
                <slot />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script>
import LayoutTopHeader from '../components/header/LayoutTopHeader.vue';
import Drawer from '@/components/tool/Drawer.vue';
import SideMenu from '@/components/menu/SideMenu.vue';
import Setting from '../components/setting/Setting.vue';
import { mapState, mapMutations, mapGetters } from 'vuex';
import { convertListToTree, getUserInfo } from '@/utils';

// const minHeight = window.innerHeight - 64 - 122

export default {
    name: 'AdminLayout',
    components: { Setting, SideMenu, Drawer, LayoutTopHeader },
    data() {
        return {
            minHeight: window.innerHeight - 64 - 122,
            collapsed: false,
            showSetting: false,
            menuData: [],
            firstMenu: [],
            subMenu: [],
            menuList: [],
        };
    },
    provide() {
        return {
            adminLayout: this,
        };
    },
    watch: {
        layout(layout) {
            this.updateSildeMenu(layout);
        },
    },
    computed: {
        ...mapState('settingModule', [
            'theme',
            'layout',
            'fixedHeader',
            'fixedSideBar',
            'fixedTabs',
            'hideSetting',
            'multiPage',
        ]),

        hideSettingExtend() {
            if (this.hideSetting === false && process.env.NODE_ENV === 'development') {
                return false;
            }
            return true;
        },
        sideMenuWidth() {
            return this.collapsed ? '80px' : '256px';
        },
        headerStyle() {
            let width =
                this.fixedHeader && this.layout !== 'head' ? `calc(100% - ${this.sideMenuWidth})` : '100%';
            let position = this.fixedHeader ? 'fixed' : 'static';
            return `width: ${width}; position: ${position};`;
        },
        headMenuData() {
            const { layout, menuData, firstMenu } = this;
            return layout === 'mix' ? firstMenu : menuData;
        },
        sideMenuData() {
            const { layout, menuData, subMenu } = this;
            return layout === 'mix' ? subMenu : menuData;
        },
    },
    methods: {
        ...mapMutations('settingModule', ['correctPageMinHeight']),
        toggleCollapse() {
            this.collapsed = !this.collapsed;
        },

        onMenuSelect() {
            this.toggleCollapse();
        },
        updateSildeMenu(layout) {
            if (layout === 'mix') {
                const { path } = this.$route;
                let currentMenu = this.menuList.find((i) => i.menuUrl === path);
                let parentMenuId = currentMenu.parentMenuId;

                while (parentMenuId !== 0) {
                    currentMenu = this.menuList.find((i) => i.menuId === parentMenuId);
                    parentMenuId = currentMenu.parentMenuId;
                }
                this.subMenu = currentMenu.children || [];
            }
        },

        menuSelect(obj) {
            // 拿到 菜单id
            const menuId = obj.key;
            const currentMenu = this.menuList.find((i) => i.menuId === menuId);

            if (currentMenu.menuType === 'MENU') {
                this.subMenu = [];
                return;
            }

            this.subMenu = currentMenu.children || [];
        },
    },
    created() {
        this.correctPageMinHeight(this.minHeight - 24);
        const { menuList } = getUserInfo();
        const menuData = convertListToTree(menuList || [], false, true);
        this.menuData = menuData;
        this.menuList = menuList;
        this.firstMenu = JSON.parse(JSON.stringify(menuData)).map((i) => {
            delete i.children;
            return i;
        });
        this.updateSildeMenu(this.layout);
    },
    beforeDestroy() {
        this.correctPageMinHeight(-this.minHeight + 24);
    },
};
</script>

<style lang="less" scoped>
.admin-layout {
    height: 100%;
    .side-menu {
        &.fixed-side {
            position: fixed;
            height: 100vh;
            left: 0;
            top: 0;
        }
    }
    .virtual-side {
        transition: all 0.2s;
    }
    .virtual-header {
        transition: all 0.2s;
        opacity: 0;
        &.fixed-tabs.multi-page:not(.fixed-header) {
            height: 0;
        }
    }
    .admin-layout-main {
        display: flow-root;
        position: initial;

        .admin-header {
            top: 0;
            right: 0;
            overflow: hidden;
            transition: all 0.2s;
            &.fixed-tabs.multi-page:not(.fixed-header) {
                height: 0;
            }
        }
    }
    .admin-layout-content {
        padding: 24px;
    }
    .setting {
        background-color: @primary-color;
        color: @base-bg-color;
        border-radius: 5px 0 0 5px;
        line-height: 40px;
        font-size: 22px;
        width: 40px;
        height: 40px;
        box-shadow: -2px 0 8px @shadow-color;
    }
}
</style>