127 lines
4.7 KiB
Vue
127 lines
4.7 KiB
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>
|