337 lines
14 KiB
Vue
337 lines
14 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 } from '@/api/common'
|
|
import { BasicDictData } from '@/stores/interface'
|
|
|
|
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()]).then(res => {
|
|
dictData.state.area = res[0].data
|
|
dictData.state.basic = res[1].data
|
|
})
|
|
/**
|
|
* 后台初始化请求，获取站点配置，动态路由等信息
|
|
*/
|
|
getRouteMenu().then((res: any) => {
|
|
// const arr = [
|
|
// {
|
|
// id: 1,
|
|
// pid: 0,
|
|
// type: 'menu',
|
|
// title: '控制台',
|
|
// name: 'dashboard',
|
|
// path: 'dashboard',
|
|
// icon: 'fa fa-dashboard',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/dashboard/index.vue',
|
|
// keepalive: 'dashboard',
|
|
// extend: 'none',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// pid: 0,
|
|
// type: 'menu',
|
|
// title: '审计管理',
|
|
// name: 'test',
|
|
// path: 'test',
|
|
// icon: 'el-icon-List',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/dashboard/test.vue',
|
|
// keepalive: 'test',
|
|
// extend: 'none',
|
|
// children: [
|
|
// {
|
|
// id: 1,
|
|
// pid: 3,
|
|
// type: 'menu',
|
|
// title: '审计列表',
|
|
// name: 'comptroller/list',
|
|
// path: 'comptroller/list',
|
|
// icon: 'el-icon-List',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/comptroller/list.vue',
|
|
// keepalive: 'auth/role',
|
|
// extend: 'none',
|
|
// children: []
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// pid: 0,
|
|
// type: 'menu_dir',
|
|
// title: '电压暂降',
|
|
// name: 'voltage/sags',
|
|
// path: 'voltage/sags',
|
|
// icon: 'el-icon-BellFilled',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// extend: 'none',
|
|
// children: [
|
|
// {
|
|
// id: 1,
|
|
// pid: 3,
|
|
// type: 'menu_dir',
|
|
// title: '运行管理',
|
|
// name: 'voltage/sags/operationsManagement',
|
|
// path: 'voltage/sags/operationsManagement',
|
|
// icon: 'fa-solid fa-bars-progress',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// extend: 'none',
|
|
// children: [
|
|
// {
|
|
// id: 1,
|
|
// pid: 3,
|
|
// type: 'menu',
|
|
// title: '终端运行管理',
|
|
// name: 'voltage/sags/operationsManagement/index',
|
|
// path: 'voltage/sags/operationsManagement/index',
|
|
// icon: 'fa-solid fa-recycle',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/voltage/sags/operationsManagement/index.vue',
|
|
// keepalive: 'voltage/sags/operationsManagement/index',
|
|
// extend: 'none',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// id: 1,
|
|
// pid: 3,
|
|
// type: 'menu',
|
|
// title: '终端运行统计',
|
|
// name: 'voltage/sags/operationsManagement/statistics',
|
|
// path: 'voltage/sags/operationsManagement/statistics',
|
|
// icon: 'fa-solid fa-chart-column',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
|
|
// keepalive: 'voltage/sags/operationsManagement/statistics',
|
|
// extend: 'none',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// id: 1,
|
|
// pid: 3,
|
|
// type: 'menu',
|
|
// title: '监测点台账信息',
|
|
// name: 'voltage/sags/operationsManagement/point',
|
|
// path: 'voltage/sags/operationsManagement/point',
|
|
// icon: 'fa-brands fa-square-pinterest',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/voltage/sags/operationsManagement/point.vue',
|
|
// keepalive: 'voltage/sags/operationsManagement/point',
|
|
// extend: 'none',
|
|
// children: []
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// pid: 3,
|
|
// type: 'menu',
|
|
// title: '区域',
|
|
// name: 'Event-boot/Region/distribution',
|
|
// path: 'Event-boot/Region/distribution',
|
|
// icon: 'el-icon-Management',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/Event-boot/Region/distribution.vue',
|
|
// keepalive: 'Event-boot/Region/distribution',
|
|
// extend: 'none',
|
|
// children: [
|
|
// {
|
|
// id: 2,
|
|
// pid: 3,
|
|
// type: 'menu',
|
|
// title: '区域概览',
|
|
// name: 'Region/overview',
|
|
// path: 'Region/overview',
|
|
// icon: 'el-icon-Promotion',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/dashboard/index.vue',
|
|
// keepalive: 'Region/overview',
|
|
// extend: 'none',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// id: 1,
|
|
// pid: 3,
|
|
// type: 'menu',
|
|
// title: '监测网分布',
|
|
// name: 'Region/distribution',
|
|
// path: 'Region/distribution',
|
|
// icon: 'el-icon-Share',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/Event-boot/Region/distribution.vue',
|
|
// keepalive: 'Region/distribution',
|
|
// extend: 'none',
|
|
// children: []
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// pid: 0,
|
|
// type: 'menu_dir',
|
|
// title: '权限管理',
|
|
// name: 'auth',
|
|
// path: 'auth',
|
|
// icon: 'fa-solid fa-layer-group',
|
|
// menu_type: null,
|
|
// url: '',
|
|
// component: '',
|
|
// keepalive: 0,
|
|
// extend: 'none',
|
|
// children: [
|
|
// {
|
|
// id: 3,
|
|
// pid: 2,
|
|
// type: 'menu',
|
|
// title: '角色管理',
|
|
// name: 'auth/role',
|
|
// path: 'auth/role',
|
|
// icon: 'el-icon-Avatar',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/auth/role/index.vue',
|
|
// keepalive: 'auth/role',
|
|
// extend: 'none',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// id: 13,
|
|
// pid: 2,
|
|
// type: 'menu',
|
|
// title: '菜单规则管理',
|
|
// name: 'auth/menu',
|
|
// path: 'auth/menu',
|
|
// icon: 'el-icon-Menu',
|
|
// menu_type: 'tab',
|
|
// url: '',
|
|
// component: '/src/views/auth/menu/index.vue',
|
|
// keepalive: 'auth/menu',
|
|
// extend: 'none',
|
|
// children: []
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
|
|
const handlerMenu = (data: any) => {
|
|
data.forEach((item: any) => {
|
|
|
|
item.path = item.routePath
|
|
item.name = item.title
|
|
item.component = item.routeName || '/src/views/dashboard/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(arr)
|
|
handleAdminRoute(res.data)
|
|
// handleAdminRoute([...arr, ...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
|
|
}
|
|
}
|
|
|
|
// 跳转到第一个菜单
|
|
console.log(navTabs.state.tabsViewRoutes)
|
|
let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
|
|
console.log(firstRoute)
|
|
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>
|