admin-govern/src/layouts/admin/index.vue

<template>
    <component :is='config.layout.layoutMode'></component>
</template>

<script setup lang='ts'>
import { reactive } from 'vue'
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { useRoute } from 'vue-router'
import Default from '@/layouts/admin/container/default.vue'
import Classic from '@/layouts/admin/container/classic.vue'
import Streamline from '@/layouts/admin/container/streamline.vue'
import Double from '@/layouts/admin/container/double.vue'
import { onMounted, onBeforeMount } from 'vue'
import { handleAdminRoute, getFirstRoute, routePush } from '@/utils/router'
import router from '@/router/index'
import { useEventListener } from '@vueuse/core'
import { isEmpty } from 'lodash-es'
import { setNavTabsWidth } from '@/utils/layout'
import { adminBaseRoutePath } from '@/router/static'
import { getRouteMenu, dictDataCache } from '@/api/auth'
import { getAreaList, areaSelect } from '@/api/common'
import { BasicDictData } from '@/stores/interface'
import { getAllUserSimpleList, getUserById } from '@/api/user-boot/user'

defineOptions({
    components: { Default, Classic, Streamline, Double }
})

const navTabs = useNavTabs()
const config = useConfig()
const route = useRoute()
const adminInfo = useAdminInfo()
const dictData = useDictData()
const state = reactive({
    autoMenuCollapseLock: false
})

onMounted(() => {
    // if (!adminInfo.token) return router.push({ name: 'login' })

    init()
    setNavTabsWidth()
    useEventListener(window, 'resize', setNavTabsWidth)
})
onBeforeMount(() => {
    onAdaptiveLayout()
    useEventListener(window, 'resize', onAdaptiveLayout)
})

const init = async () => {
    await Promise.all([getAreaList(), dictDataCache(), getUserById(), areaSelect(),getAllUserSimpleList()]).then(res => {
        dictData.state.area = res[0].data
        dictData.state.basic = res[1].data
        // dictData.state.userList=res[4].data
        adminInfo.dataFill(res[2].data)
        // dictData.state.areaTree = res[3].data
    })
    /**
     * 后台初始化请求，获取站点配置，动态路由等信息
     */
    getRouteMenu().then((res: any) => {
        const handlerMenu = (data: any) => {
            data.forEach((item: any) => {
                item.routePath =
                    item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
                item.path = item.routePath
                item.name = item.routePath
                item.keepalive = item.routePath
                item.component = item.routeName
                    ? item.routeName.indexOf('/src/views/') > -1
                        ? item.routeName
                        : `/src/views/${item.routeName}/index.vue`
                    : ''
                item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
                item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
                if (item.children) {
                    handlerMenu(item.children)
                }
            })
        }
        handlerMenu(res.data)
        handleAdminRoute(res.data)
        if (route.params.to) {
            const lastRoute = JSON.parse(route.params.to as string)

            if (lastRoute.path != adminBaseRoutePath) {
                let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
                routePush({ path: lastRoute.path, query: query })
                return
            }
        }
        // 跳转到第一个菜单
        let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
        if (firstRoute) routePush(firstRoute.path)
    })
}

const onAdaptiveLayout = () => {
    let defaultBeforeResizeLayout = {
        layoutMode: config.layout.layoutMode,
        menuCollapse: config.layout.menuCollapse
    }

    const clientWidth = document.body.clientWidth
    if (clientWidth < 1024) {
        /**
         * 锁定窗口改变自动调整 menuCollapse
         * 避免已是小窗且打开了菜单栏时，意外的自动关闭菜单栏
         */
        if (!state.autoMenuCollapseLock) {
            state.autoMenuCollapseLock = true
            config.setLayout('menuCollapse', true)
        }
        config.setLayout('shrink', true)
        config.setLayoutMode('Classic')
    } else {
        state.autoMenuCollapseLock = false
        config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
        config.setLayout('shrink', false)
        config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
    }
}
</script>