Leo_Ding/hahaPension_admin
1
0
Fork 0
generated from Leo_Ding/web-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

加入全局加载效果

Browse Source
This commit is contained in:
Leo_Ding 2025-11-10 09:56:24 +08:00
parent 82b0108091
commit 36f5af21da
1 changed files with 105 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
src/layouts/BasicLayout.vue
View File

@ -1,110 +1,112 @@
<template> <template>
<a-layout class="layout"> <a-spin :spinning="spinning" tip="Loading...">
<template #default> <a-layout class="layout">
<!-- 上下布局 --> <template #default>
<template v-if="config.layout === 'topBottom'"> <!-- 上下布局 -->
<!-- 侧边菜单 --> <template v-if="config.layout === 'topBottom'">
<template v-if="config.menuMode === 'side'"> <!-- 侧边菜单 -->
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()"> <template v-if="config.menuMode === 'side'">
<template #left> <basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
<brand :theme="config.headerTheme"></brand> <template #left>
</template> <brand :theme="config.headerTheme"></brand>
</basic-header> </template>
<a-layout> </basic-header>
<basic-side :theme="config.sideTheme" :style="{
height: `calc(100vh - ${config.headerHeight}px)`,
top: `${config.headerHeight}px`,
}">
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
</basic-side>
<a-layout> <a-layout>
<multi-tab v-if="config.multiTab"></multi-tab>
<basic-content></basic-content>
</a-layout>
</a-layout>
</template>
<!-- 混合菜单 -->
<template v-if="config.menuMode === 'mix'">
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
<template #left>
<brand :theme="config.headerTheme"></brand>
</template>
<basic-menu mode="horizontal" :theme="config.headerTheme" :data-list="topMenuList"></basic-menu>
</basic-header>
<a-layout>
<template v-if="sideMenuList.length">
<basic-side :theme="config.sideTheme" :style="{ <basic-side :theme="config.sideTheme" :style="{
height: `calc(100vh - ${config.headerHeight}px)`, height: `calc(100vh - ${config.headerHeight}px)`,
top: `${config.headerHeight}px`, top: `${config.headerHeight}px`,
}"> }">
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu> <basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
</basic-side> </basic-side>
</template> <a-layout>
<a-layout> <multi-tab v-if="config.multiTab"></multi-tab>
<multi-tab v-if="config.multiTab"></multi-tab> <basic-content></basic-content>
<basic-content></basic-content> </a-layout>
</a-layout> </a-layout>
</a-layout> </template>
</template>
</template>
<!-- 左右布局 --> <!-- 混合菜单 -->
<template v-if="config.layout === 'leftRight'"> <template v-if="config.menuMode === 'mix'">
<!-- 侧边菜单 -->
<template v-if="config.menuMode === 'side'">
<basic-side :theme="config.sideTheme" :style="{
height: `100vh`,
top: 0,
}">
<template #header>
<brand :theme="config.sideTheme"></brand>
</template>
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
</basic-side>
<a-layout>
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
</basic-header>
<multi-tab v-if="config.multiTab"></multi-tab>
<basic-content></basic-content>
</a-layout>
</template>
<!-- 混合菜单 -->
<template v-if="config.menuMode === 'mix'">
<basic-side :theme="config.sideTheme" :style="{
height: `100vh`,
top: 0,
}">
<template #header>
<brand :theme="config.sideTheme"></brand>
</template>
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
</basic-side>
<a-layout>
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()"> <basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
<template #left>
<brand :theme="config.headerTheme"></brand>
</template>
<basic-menu mode="horizontal" :theme="config.headerTheme" <basic-menu mode="horizontal" :theme="config.headerTheme"
:data-list="topMenuList"></basic-menu> :data-list="topMenuList"></basic-menu>
</basic-header> </basic-header>
<multi-tab v-if="config.multiTab"></multi-tab> <a-layout>
<basic-content></basic-content> <template v-if="sideMenuList.length">
</a-layout> <basic-side :theme="config.sideTheme" :style="{
height: `calc(100vh - ${config.headerHeight}px)`,
top: `${config.headerHeight}px`,
}">
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
</basic-side>
</template>
<a-layout>
<multi-tab v-if="config.multiTab"></multi-tab>
<basic-content></basic-content>
</a-layout>
</a-layout>
</template>
</template>
<!-- 左右布局 -->
<template v-if="config.layout === 'leftRight'">
<!-- 侧边菜单 -->
<template v-if="config.menuMode === 'side'">
<basic-side :theme="config.sideTheme" :style="{
height: `100vh`,
top: 0,
}">
<template #header>
<brand :theme="config.sideTheme"></brand>
</template>
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
</basic-side>
<a-layout>
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
</basic-header>
<multi-tab v-if="config.multiTab"></multi-tab>
<basic-content></basic-content>
</a-layout>
</template>
<!-- 混合菜单 -->
<template v-if="config.menuMode === 'mix'">
<basic-side :theme="config.sideTheme" :style="{
height: `100vh`,
top: 0,
}">
<template #header>
<brand :theme="config.sideTheme"></brand>
</template>
<basic-menu :theme="config.sideTheme" :data-list="sideMenuList"></basic-menu>
</basic-side>
<a-layout>
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
<basic-menu mode="horizontal" :theme="config.headerTheme"
:data-list="topMenuList"></basic-menu>
</basic-header>
<multi-tab v-if="config.multiTab"></multi-tab>
<basic-content></basic-content>
</a-layout>
</template>
</template>
<!-- 顶部菜单，不区分布局方式 -->
<template v-if="config.menuMode === 'top'">
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
<template #left>
<brand :theme="config.headerTheme"></brand>
</template>
<basic-menu mode="horizontal" :theme="config.headerTheme" :data-list="topMenuList"></basic-menu>
</basic-header>
<multi-tab v-if="config.multiTab"></multi-tab>
<basic-content></basic-content>
</template> </template>
</template> </template>
</a-layout>
<!-- 顶部菜单，不区分布局方式 --> </a-spin>
<template v-if="config.menuMode === 'top'">
<basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
<template #left>
<brand :theme="config.headerTheme"></brand>
</template>
<basic-menu mode="horizontal" :theme="config.headerTheme" :data-list="topMenuList"></basic-menu>
</basic-header>
<multi-tab v-if="config.multiTab"></multi-tab>
<basic-content></basic-content>
</template>
</template>
</a-layout>
<config-dialog ref="configDialogRef"></config-dialog> <config-dialog ref="configDialogRef"></config-dialog>
</template> </template>
@ -127,15 +129,22 @@ defineOptions({
}) })
useMultiTab() useMultiTab()
const spinning = ref(false)
const appStore = useAppStore() const appStore = useAppStore()
const dicsStore = useDicsStore() const dicsStore = useDicsStore()
initData() initData()
async function initData() { async function initData() {
storage.local.setItem('companyId','C001') try {
await dicsStore.loadProvinces() // 加载省份数据 spinning.value = true
await dicsStore.loadAllDictData() // 加载字典数据 storage.local.setItem('companyId', 'C001')
await dicsStore.loadOrgTree() await dicsStore.loadProvinces() // 加载省份数据
await dicsStore.loadAllDictData() // 加载字典数据
await dicsStore.loadOrgTree()
spinning.value = false
} catch (error) {
spinning.value = false
}
} }
const { sideMenuList, topMenuList } = useMenu() const { sideMenuList, topMenuList } = useMenu()