hahaPension_admin/src/layouts/BasicLayout.vue

<template>
    <a-spin :spinning="spinning" tip="Loading..." size="large">
        <a-layout class="layout">
            <template #default>
                <!-- 上下布局 -->
                <template v-if="config.layout === 'topBottom'">
                    <!-- 侧边菜单 -->
                    <template v-if="config.menuMode === 'side'">
                        <basic-header :theme="config.headerTheme" @config="$refs.configDialogRef.handleOpen()">
                            <template #left>
                                <brand :theme="config.headerTheme"></brand>
                            </template>
                        </basic-header>
                        <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>
                            <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="{
                                    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>
        </a-layout>
    </a-spin>
    <config-dialog ref="configDialogRef"></config-dialog>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { useAppStore, useDicsStore } from '@/store'
import useMultiTab from './hooks/useMultiTab'
import useMenu from './hooks/useMenu'
import BasicContent from './components/BasicContent.vue'
import BasicHeader from './components/BasicHeader.vue'
import BasicMenu from './components/BasicMenu.vue'
import BasicSide from './components/BasicSide.vue'
import Brand from './components/Brand.vue'
import MultiTab from './components/MultiTab.vue'
import ConfigDialog from './components/ConfigDialog.vue'
import storage from '@/utils/storage'
defineOptions({
    name: 'BasicLayout',
})

useMultiTab()
const spinning = ref(false)
const appStore = useAppStore()
const dicsStore = useDicsStore()
initData()
async function initData() {
    try {
        spinning.value = true
        storage.local.setItem('companyId', 'C001')
        await dicsStore.loadProvinces() // 加载省份数据
        await dicsStore.loadAllDictData() // 加载字典数据
        await dicsStore.loadOrgTree()
        spinning.value = false
    } catch (error) {
        spinning.value = false
    }

}

const { sideMenuList, topMenuList } = useMenu()

const { config } = storeToRefs(appStore)

const configDialogRef = ref()
</script>

<style lang="less" scoped>
.layout {
    min-height: 100vh;
}
</style>