提交 | 用户 | age
|
2f6253
|
1 |
import { defineComponent, unref, onMounted, computed } from 'vue'; |
陈 |
2 |
import { Layout, BackTop } from 'ant-design-vue'; |
|
3 |
import LayoutHeader from './LayoutHeader'; |
|
4 |
|
|
5 |
import { appStore } from '/@/store/modules/app'; |
|
6 |
import LayoutContent from './LayoutContent'; |
|
7 |
import LayoutSideBar from './LayoutSideBar'; |
|
8 |
import SettingBtn from './setting/index.vue'; |
|
9 |
import MultipleTabs from './multitabs/index'; |
|
10 |
import { FullLoading } from '/@/components/Loading/index'; |
|
11 |
|
|
12 |
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum'; |
|
13 |
import { useFullContent } from '/@/hooks/web/useFullContent'; |
|
14 |
|
|
15 |
import LockPage from '/@/views/sys/lock/index.vue'; |
968f79
|
16 |
import { registerGlobComp } from '/@/components/registerGlobComp'; |
2f6253
|
17 |
|
陈 |
18 |
import './index.less'; |
|
19 |
export default defineComponent({ |
|
20 |
name: 'DefaultLayout', |
|
21 |
setup() { |
968f79
|
22 |
// ! 在这里才注册全局组件 |
V |
23 |
// ! 可以减少首屏代码体积 |
|
24 |
// default layout是在登录后才加载的。所以不会打包到首屏去 |
|
25 |
registerGlobComp(); |
|
26 |
|
2f6253
|
27 |
// 获取项目配置 |
陈 |
28 |
const { getFullContent } = useFullContent(); |
|
29 |
|
|
30 |
const getProjectConfigRef = computed(() => { |
|
31 |
return appStore.getProjectConfig; |
|
32 |
}); |
|
33 |
const getLockMainScrollStateRef = computed(() => { |
|
34 |
return appStore.getLockMainScrollState; |
|
35 |
}); |
|
36 |
|
|
37 |
const showHeaderRef = computed(() => { |
|
38 |
const { |
|
39 |
headerSetting: { show }, |
|
40 |
} = unref(getProjectConfigRef); |
|
41 |
return show; |
|
42 |
}); |
|
43 |
const isShowMixHeaderRef = computed(() => { |
|
44 |
const { |
|
45 |
menuSetting: { type }, |
|
46 |
} = unref(getProjectConfigRef); |
|
47 |
return type !== MenuTypeEnum.SIDEBAR && unref(showHeaderRef); |
|
48 |
}); |
|
49 |
|
|
50 |
const showSideBarRef = computed(() => { |
|
51 |
const { |
|
52 |
menuSetting: { show, mode }, |
|
53 |
} = unref(getProjectConfigRef); |
|
54 |
return show && mode !== MenuModeEnum.HORIZONTAL && !unref(getFullContent); |
|
55 |
}); |
|
56 |
|
|
57 |
// const { currentRoute } = useRouter(); |
|
58 |
onMounted(() => { |
|
59 |
// Each refresh will request the latest user information, if you don’t need it, you can delete it |
21d0ed
|
60 |
// userStore.getUserInfoAction({ userId: userStore.getUserInfoState.userId }); |
2f6253
|
61 |
}); |
陈 |
62 |
|
|
63 |
// Get project configuration |
|
64 |
// const { getFullContent } = useFullContent(currentRoute); |
|
65 |
function getTarget(): any { |
|
66 |
const { |
|
67 |
headerSetting: { fixed }, |
|
68 |
} = unref(getProjectConfigRef); |
|
69 |
return document.querySelector(`.default-layout__${fixed ? 'main' : 'content'}`); |
|
70 |
} |
|
71 |
return () => { |
|
72 |
const { getPageLoading, getLockInfo } = appStore; |
|
73 |
const { |
|
74 |
openPageLoading, |
|
75 |
useOpenBackTop, |
|
76 |
showSettingButton, |
|
77 |
multiTabsSetting: { show: showTabs }, |
|
78 |
headerSetting: { fixed }, |
|
79 |
} = unref(getProjectConfigRef); |
|
80 |
// const fixedHeaderCls = fixed ? ('fixed' + getLockMainScrollState ? ' lock' : '') : ''; |
|
81 |
const fixedHeaderCls = fixed |
|
82 |
? 'fixed' + (unref(getLockMainScrollStateRef) ? ' lock' : '') |
|
83 |
: ''; |
|
84 |
const { isLock } = getLockInfo; |
|
85 |
return ( |
|
86 |
<Layout class="default-layout relative"> |
|
87 |
{() => ( |
|
88 |
<> |
|
89 |
{isLock && <LockPage />} |
31e271
|
90 |
|
2f6253
|
91 |
{!unref(getFullContent) && unref(isShowMixHeaderRef) && unref(showHeaderRef) && ( |
陈 |
92 |
<LayoutHeader /> |
|
93 |
)} |
31e271
|
94 |
|
2f6253
|
95 |
{showSettingButton && <SettingBtn />} |
31e271
|
96 |
|
2f6253
|
97 |
<Layout> |
陈 |
98 |
{() => ( |
|
99 |
<> |
|
100 |
{unref(showSideBarRef) && <LayoutSideBar />} |
|
101 |
<Layout class={[`default-layout__content`, fixedHeaderCls]}> |
|
102 |
{() => ( |
|
103 |
<> |
|
104 |
{!unref(getFullContent) && |
|
105 |
!unref(isShowMixHeaderRef) && |
|
106 |
unref(showHeaderRef) && <LayoutHeader />} |
|
107 |
|
|
108 |
{showTabs && !unref(getFullContent) && ( |
|
109 |
<Layout.Header class={`default-layout__tabs`}> |
|
110 |
{() => <MultipleTabs />} |
|
111 |
</Layout.Header> |
|
112 |
)} |
31e271
|
113 |
|
2f6253
|
114 |
{useOpenBackTop && <BackTop target={getTarget} />} |
31e271
|
115 |
|
2f6253
|
116 |
<div class={[`default-layout__main`, fixedHeaderCls]}> |
陈 |
117 |
{openPageLoading && ( |
|
118 |
<FullLoading |
|
119 |
class={[`default-layout__loading`, !getPageLoading && 'hidden']} |
|
120 |
/> |
|
121 |
)} |
|
122 |
<LayoutContent /> |
|
123 |
</div> |
|
124 |
</> |
|
125 |
)} |
|
126 |
</Layout> |
|
127 |
</> |
|
128 |
)} |
|
129 |
</Layout> |
|
130 |
</> |
|
131 |
)} |
|
132 |
</Layout> |
|
133 |
); |
|
134 |
}; |
|
135 |
}, |
|
136 |
}); |