2022-02-28 18:28:14 +08:00
|
|
|
import { defineComponent, computed } from 'vue';
|
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import { usePermissionStore, useSettingStore } from '@/store';
|
|
|
|
|
2021-12-24 11:24:14 +08:00
|
|
|
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';
|
2021-12-12 01:04:13 +08:00
|
|
|
|
2021-12-22 12:07:29 +08:00
|
|
|
import { prefix } from '@/config/global';
|
2021-12-12 01:04:13 +08:00
|
|
|
import TdesignSetting from './setting.vue';
|
|
|
|
import '@/style/layout.less';
|
|
|
|
|
2021-12-22 12:07:29 +08:00
|
|
|
const name = `${prefix}-base-layout`;
|
2021-12-12 01:04:13 +08:00
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
name,
|
2022-02-28 18:28:14 +08:00
|
|
|
setup() {
|
|
|
|
const route = useRoute();
|
|
|
|
const permissionStore = usePermissionStore();
|
|
|
|
const settingStore = useSettingStore();
|
|
|
|
const { routers: menuRouters } = storeToRefs(permissionStore);
|
|
|
|
const setting = storeToRefs(settingStore);
|
|
|
|
|
|
|
|
const mainLayoutCls = computed(() => [
|
|
|
|
{
|
|
|
|
't-layout--with-sider': settingStore.showSidebar,
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
|
|
|
|
const headerMenu = computed(() => {
|
|
|
|
if (settingStore.layout === 'mix') {
|
|
|
|
if (settingStore.splitMenu) {
|
|
|
|
console.log(menuRouters);
|
|
|
|
return menuRouters.value.map((menu) => ({
|
2021-12-12 15:46:02 +08:00
|
|
|
...menu,
|
|
|
|
children: [],
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
return [];
|
|
|
|
}
|
2022-02-28 18:28:14 +08:00
|
|
|
return menuRouters.value;
|
|
|
|
});
|
|
|
|
|
|
|
|
const sideMenu = computed(() => {
|
|
|
|
const { layout, splitMenu } = settingStore;
|
|
|
|
let newMenuRouters = menuRouters.value;
|
2021-12-12 15:46:02 +08:00
|
|
|
if (layout === 'mix' && splitMenu) {
|
2022-02-28 18:28:14 +08:00
|
|
|
newMenuRouters.forEach((menu) => {
|
|
|
|
if (route.path.indexOf(menu.path) === 0) {
|
|
|
|
newMenuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
|
2021-12-12 15:46:02 +08:00
|
|
|
}
|
2021-12-20 12:32:33 +08:00
|
|
|
});
|
2021-12-12 15:46:02 +08:00
|
|
|
}
|
2022-02-28 18:28:14 +08:00
|
|
|
return newMenuRouters;
|
|
|
|
});
|
|
|
|
|
|
|
|
const renderSidebar = () => {
|
2021-12-12 01:04:13 +08:00
|
|
|
return (
|
2022-02-28 18:28:14 +08:00
|
|
|
settingStore.showSidebar && (
|
2021-12-24 11:24:14 +08:00
|
|
|
<TDesignSideNav
|
2022-02-28 18:28:14 +08:00
|
|
|
showLogo={settingStore.showSidebarLogo}
|
|
|
|
layout={settingStore.layout}
|
|
|
|
isFixed={settingStore.isSidebarFixed}
|
|
|
|
menu={sideMenu.value}
|
|
|
|
theme={settingStore.displayMode}
|
|
|
|
isCompact={settingStore.isSidebarCompact}
|
2021-12-12 01:04:13 +08:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
);
|
2022-02-28 18:28:14 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const renderHeader = () => {
|
2021-12-12 01:04:13 +08:00
|
|
|
return (
|
2022-02-28 18:28:14 +08:00
|
|
|
settingStore.showHeader && (
|
2021-12-24 11:24:14 +08:00
|
|
|
<TDesignHeader
|
2022-02-28 18:28:14 +08:00
|
|
|
showLogo={settingStore.showHeaderLogo}
|
|
|
|
theme={settingStore.displayMode}
|
|
|
|
layout={settingStore.layout}
|
|
|
|
isFixed={settingStore.isHeaderFixed}
|
|
|
|
menu={headerMenu.value}
|
|
|
|
isCompact={settingStore.isSidebarCompact}
|
2021-12-12 01:04:13 +08:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
);
|
2022-02-28 18:28:14 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const renderFooter = () => {
|
|
|
|
return (
|
|
|
|
<t-footer class={`${prefix}-footer-layout`}>
|
|
|
|
<TDesignFooter />
|
|
|
|
</t-footer>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const renderContent = () => {
|
|
|
|
const { showBreadcrumb, showFooter } = settingStore;
|
2021-12-12 01:04:13 +08:00
|
|
|
return (
|
2021-12-22 12:07:29 +08:00
|
|
|
<t-layout class={[`${prefix}-layout`]}>
|
|
|
|
<t-content class={`${prefix}-content-layout`}>
|
2021-12-24 11:24:14 +08:00
|
|
|
{showBreadcrumb && <TDesignBreadcrumb />}
|
|
|
|
<TDesignContent />
|
2021-12-12 01:04:13 +08:00
|
|
|
</t-content>
|
2022-02-28 18:28:14 +08:00
|
|
|
{showFooter && renderFooter()}
|
2021-12-12 01:04:13 +08:00
|
|
|
</t-layout>
|
|
|
|
);
|
2022-02-28 18:28:14 +08:00
|
|
|
};
|
2021-12-12 01:04:13 +08:00
|
|
|
|
2022-02-28 18:28:14 +08:00
|
|
|
return {
|
|
|
|
setting,
|
|
|
|
mainLayoutCls,
|
|
|
|
renderSidebar,
|
|
|
|
renderHeader,
|
|
|
|
renderContent,
|
|
|
|
};
|
2021-12-12 01:04:13 +08:00
|
|
|
},
|
|
|
|
render() {
|
|
|
|
const { layout } = this.setting;
|
|
|
|
const header = this.renderHeader();
|
|
|
|
const sidebar = this.renderSidebar();
|
|
|
|
const content = this.renderContent();
|
|
|
|
return (
|
2021-12-24 11:24:14 +08:00
|
|
|
<div>
|
2021-12-12 01:04:13 +08:00
|
|
|
{layout === 'side' ? (
|
|
|
|
<t-layout class={this.mainLayoutCls} key="side">
|
2021-12-12 15:46:02 +08:00
|
|
|
<t-aside>{sidebar}</t-aside>
|
2021-12-12 01:04:13 +08:00
|
|
|
<t-layout>{[header, content]}</t-layout>
|
|
|
|
</t-layout>
|
|
|
|
) : (
|
|
|
|
<t-layout key="no-side">
|
|
|
|
{header}
|
|
|
|
<t-layout class={this.mainLayoutCls}>{[sidebar, content]}</t-layout>
|
|
|
|
</t-layout>
|
|
|
|
)}
|
2021-12-24 11:24:14 +08:00
|
|
|
<TdesignSetting />
|
2021-12-12 01:04:13 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|