import { defineComponent } from 'vue'; import { mapGetters } from 'vuex'; import TdesignHeader from './components/Header.vue'; import TdesignBreadcrumb from './components/Breadcrumb.vue'; import TdesignFooter from './components/Footer.vue'; import TdesignSideNav from './components/SideNav'; import TdesignContent from './components/Content.vue'; import { prefix } from '@/config/global'; import TdesignSetting from './setting.vue'; import { SettingType, ClassName } from '@/interface'; import '@/style/layout.less'; const name = `${prefix}-base-layout`; export default defineComponent({ name, components: { TdesignHeader, TdesignFooter, TdesignSideNav, TdesignSetting, TdesignBreadcrumb, TdesignContent, }, computed: { ...mapGetters({ showSidebar: 'setting/showSidebar', showHeader: 'setting/showHeader', showHeaderLogo: 'setting/showHeaderLogo', showSidebarLogo: 'setting/showSidebarLogo', showFooter: 'setting/showFooter', mode: 'setting/mode', menuRouters: 'permission/routers', }), setting(): SettingType { return this.$store.state.setting; }, mainLayoutCls(): ClassName { return [ { 't-layout-has-sider': this.showSidebar, }, ]; }, headerMenu() { const { layout, splitMenu } = this.$store.state.setting; const { menuRouters } = this; if (layout === 'mix') { if (splitMenu) { return menuRouters.map((menu) => ({ ...menu, children: [], })); } return []; } return menuRouters; }, sideMenu() { const { layout, splitMenu } = this.$store.state.setting; let { menuRouters } = this; if (layout === 'mix' && splitMenu) { menuRouters.forEach((menu) => { if (this.$route.path.indexOf(menu.path) === 0) { menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` })); } }); } return menuRouters; }, }, methods: { renderSidebar() { return ( this.showSidebar && ( ) ); }, renderHeader() { return ( this.showHeader && ( ) ); }, renderContent() { const { showBreadcrumb } = this.setting; const { showFooter } = this; return ( {showBreadcrumb && } {showFooter && this.renderFooter()} ); }, renderFooter() { return ( ); }, }, render() { const { layout } = this.setting; const header = this.renderHeader(); const sidebar = this.renderSidebar(); const content = this.renderContent(); return (
{layout === 'side' ? ( {sidebar} {[header, content]} ) : ( {header} {[sidebar, content]} )}
); }, });