BasicLayout.js 4.8 KB
Newer Older
wanli's avatar
wanli committed
1 2 3 4 5 6 7
import './BasicLayout.less'
import { Layout } from "ant-design-vue";
import pathToRegexp from 'path-to-regexp';
import SiderMenu from "@/components/SiderMenu";
import Header from './Header';
import Footer from './Footer';
import eventBus from '@/utils/eventBus.js'
wanli's avatar
wanli committed
8
import logo from "@/assets/app-store.svg";
wanli's avatar
wanli committed
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
import { mapGetters } from "vuex";
const BasicLayout = {
    data: () => ({
        layout: 'topmenu',
        logo
    }),
    methods: {
        formatter(data, parentPath = '', parentName) {
            return data.map(item => {
                let locale = 'menu';
                if (parentName && item.name) {
                    locale = `${parentName}.${item.name}`;
                } else if (item.name) {
                    locale = `menu.${item.name}`;
                } else if (parentName) {
                    locale = parentName;
                }
                const result = {
                    ...item,
                    locale
                };

                if (!item.leaf) {
                    const menus = this.formatter(item.children, `${parentPath}${item.path}/`, locale);
                    // Reduce memory usage
                    result.menus = menus;
                }
                delete result.children;
                return result;
            });
        },
        getMenuData() {
            return this.formatter(this.menuNav.data);
        },
        /**
         * 获取面包屑映射
         * @param {Object} menuData 菜单配置
         */
        getBreadcrumbNameMap() {
            const routerMap = {};
            const mergeMenuAndRouter = data => {
                data.forEach(menuItem => {
                    if (menuItem.menus) {
                        mergeMenuAndRouter(menuItem.menus);
                    }
                    // Reduce memory usage
                    routerMap[menuItem.path] = menuItem;
                });
            };
            mergeMenuAndRouter(this.getMenuData());
            return routerMap;
        },

        matchParamsPath(pathname) {
            const breadcrumbNameMap = this.getBreadcrumbNameMap()
            const pathKey = Object.keys(breadcrumbNameMap).find(key =>
                pathToRegexp(key).test(pathname)
            );
            return breadcrumbNameMap[pathKey];
        },

        getPageTitle(pathname) {
            const currRouterData = this.matchParamsPath(pathname);
            if (!currRouterData) {
                return this.settings.leftMenuTitle;
            }
            const message = this.$t(currRouterData.locale || currRouterData.name)
            return `${message} - ${this.settings.leftMenuTitle}`;
        },
        onResizeCollapsed() {
            if (window.innerWidth <= 900) {
                this.$store.commit('global/UpdateChangeLayoutCollapsed', true)
            } else {
                this.$store.commit('global/UpdateChangeLayoutCollapsed', false)
            }
        }
    },
    computed: {
        ...mapGetters({
            collapsed: "global/getChangeLayoutCollapsed",
            settings: "global/settings",
            menuNav: "global/nav/getMenuNav"
        }),
        getContentStyle() {
            return {
                margin: '24px 24px 0',
                paddingTop: this.settings.fixedHeader ? 64 : 0,
            }
        },
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            // 通过 `vm` 访问组件实例
            document.title = vm.getPageTitle(to.path)
        })
    },
    beforeRouteUpdate(to, from, next) {
        this.$store.commit('global/UpdateBasicLayoutSpinning', true)
        document.title = this.getPageTitle(to.path)
        this.$nextTick(() => {
            next();
        })
    },
    mounted() {
        this.$store.dispatch('global/nav/getMenuNav');

        this.onResizeCollapsed()

        window.onresize = () => {
            // 通过捕获系统的onresize事件触发我们需要执行的事件
            this.onResizeCollapsed()
        }
    },
    render() {
        const { collapsed, getContentStyle, logo } = this;
        const { layout } = this.settings;
        const isTop = layout === 'topmenu';
        const isMobile = false;
        const menuData = this.getMenuData();
        eventBus.breadcrumbNameMap = this.getBreadcrumbNameMap()
        return (
            <Layout class="ai-basic-layout-container">
                {isTop && !isMobile ? null : (
                    <SiderMenu collapsed={collapsed} menuData={menuData} logo={logo}/>
                )}

                <Layout>
                    <Header menuData={menuData} logo={logo}/>
                    <Layout.Content style={getContentStyle}>
                        <router-view />
                    </Layout.Content>
                    <Footer />
                </Layout>
            </Layout>
        )
    }
}
export default BasicLayout