0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 1.优化动态路由

This commit is contained in:
xieyonghong 2023-01-31 11:35:54 +08:00
parent a3451187a4
commit e550fe67e5
7 changed files with 134 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/initHome.ts
View File

@ -1,7 +1,7 @@
import server from '@/utils/request';
// 更新全部菜单
export const updateMenus = (data: any) => server.path(`/menu/iot/_all`, data)
export const updateMenus = (data: any) => server.patch(`/menu/iot/_all`, data)
// 添加角色
export const addRole = (data: any) => server.post(`/role`, data)

11
src/main.ts
View File

@ -1,17 +1,14 @@
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import components from './components'
import router from './router'
import './style.less'
import 'ant-design-vue/es/notification/style/css';
import Antd from 'ant-design-vue/es'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(components)
app.use(Antd)
app.mount('#app')
.use(store)
.use(components)
.mount('#app')

19
src/router/index.ts
View File

@ -3,6 +3,8 @@ import menus, { LoginPath } from './menu'
import { cleanToken, getToken } from '@/utils/comm'
import { useUserInfo } from '@/store/userInfo'
import { useSystem } from '@/store/system'
import NotFindPage from '@/views/404.vue'
import { useMenuStore } from 'store/menu'
const router = createRouter({
history: createWebHashHistory(),
@ -27,22 +29,23 @@ router.beforeEach((to, from, next) => {
} else {
const userInfo = useUserInfo()
const system = useSystem()
const menu = useMenuStore()
if (!userInfo.userInfos.username) {
if (!menu.menuData.length) {
userInfo.getUserInfo().then(() => {
system.getSystemVersion().then((menuData: any[]) => {
menuData.forEach(r => {
router.addRoute('main', r)
router.addRoute('base', r)
})
const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
if(to.path === redirect) {
router.addRoute('base',{
path: '/:pathMatch(.*)*',
component: () => NotFindPage
})
console.log(to)
next({ ...to, replace: true })
} else {
next({ path: redirect })
}
})
}).catch(() => {
console.log('userInfo', userInfo)
cleanToken()
next({ path: LoginPath })
})

184
src/router/menu.ts
View File

@ -32,10 +32,10 @@ export default [
path: '/account/center/bind',
component: () => import('@/views/account/Center/bind/index.vue')
},
{
path: '/iot/home',
component: () => import('@/views/home/index.vue')
},
// {
// path: '/iot/home',
// component: () => import('@/views/home/index.vue')
// },
{
path: '/table',
component: () => import('@/views/demo/table/index.vue')
@ -48,107 +48,107 @@ export default [
path: '/search',
component: () => import('@/views/demo/Search.vue')
},
{
path: '/notice/Config',
component: () => import('@/views/notice/Config/index.vue')
},
{
path: '/notice/Config/detail/:id',
component: () => import('@/views/notice/Config/Detail/index.vue')
},
{
path: '/notice/Template',
component: () => import('@/views/notice/Template/index.vue')
},
{
path: '/notice/Template/detail/:id',
component: () => import('@/views/notice/Template/Detail/index.vue')
},
// {
// path: '/notice/Config',
// component: () => import('@/views/notice/Config/index.vue')
// },
// {
// path: '/notice/Config/detail/:id',
// component: () => import('@/views/notice/Config/Detail/index.vue')
// },
// {
// path: '/notice/Template',
// component: () => import('@/views/notice/Template/index.vue')
// },
// {
// path: '/notice/Template/detail/:id',
// component: () => import('@/views/notice/Template/Detail/index.vue')
// },
// end: 测试用, 可删除
// 设备管理
{
path: '/device/Instance',
component: () => import('@/views/device/Instance/index.vue')
},
// {
// path: '/device/Instance',
// component: () => import('@/views/device/Instance/index.vue')
// },
// link 运维管理
{
path: '/link/log',
component: () => import('@/views/link/Log/index.vue')
},
{
path: '/link/certificate',
component: () => import('@/views/link/Certificate/index.vue')
},
{
path: '/link/certificate/detail/add',
component: () => import('@/views/link/Certificate/Detail/index.vue')
},
{
path: '/link/accessConfig',
component: () => import('@/views/link/AccessConfig/index.vue')
},
{
path: '/link/accessConfig/detail/add',
component: () => import('@/views/link/AccessConfig/Detail/index.vue')
},
// {
// path: '/link/log',
// component: () => import('@/views/link/Log/index.vue')
// },
// {
// path: '/link/certificate',
// component: () => import('@/views/link/Certificate/index.vue')
// },
// {
// path: '/link/certificate/detail/add',
// component: () => import('@/views/link/Certificate/Detail/index.vue')
// },
// {
// path: '/link/accessConfig',
// component: () => import('@/views/link/AccessConfig/index.vue')
// },
// {
// path: '/link/accessConfig/detail/add',
// component: () => import('@/views/link/AccessConfig/Detail/index.vue')
// },
// system 系统管理
{
path:'/system/Basis',
component: ()=>import('@/views/system/Basis/index.vue')
},
{
path:'/system/api',
component: ()=>import('@/views/system/apiPage/index.vue')
},
{
path:'/system/Role',
component: ()=>import('@/views/system/Role/index.vue')
},
{
path:'/system/Role/detail/:id',
component: ()=>import('@/views/system/Role/Detail/index.vue')
},
{
path:'/system/Permission',
component: ()=>import('@/views/system/Permission/index.vue')
},
// {
// path:'/system/Basis',
// component: ()=>import('@/views/system/Basis/index.vue')
// },
// {
// path:'/system/api',
// component: ()=>import('@/views/system/apiPage/index.vue')
// },
// {
// path:'/system/Role',
// component: ()=>import('@/views/system/Role/index.vue')
// },
// {
// path:'/system/Role/detail/:id',
// component: ()=>import('@/views/system/Role/Detail/index.vue')
// },
// {
// path:'/system/Permission',
// component: ()=>import('@/views/system/Permission/index.vue')
// },
// 初始化
{
path: '/init-home',
component: () => import('@/views/init-home/index.vue')
},
// 物联卡 iot-card
{
path: '/iot-card/Home',
component: () => import('@/views/iot-card/Home/index.vue')
},
{
path: '/iot-card/Dashboard',
component: () => import('@/views/iot-card/Dashboard/index.vue')
},
{
path: '/iot-card/CardManagement',
component: () => import('@/views/iot-card/CardManagement/index.vue')
},
// {
// path: '/iot-card/Home',
// component: () => import('@/views/iot-card/Home/index.vue')
// },
// {
// path: '/iot-card/Dashboard',
// component: () => import('@/views/iot-card/Dashboard/index.vue')
// },
// {
// path: '/iot-card/CardManagement',
// component: () => import('@/views/iot-card/CardManagement/index.vue')
// },
// 北向输出
{
path: '/northbound/DuerOS',
component: () => import('@/views/northbound/DuerOS/index.vue')
},
{
path: '/northbound/AliCloud',
component: () => import('@/views/northbound/AliCloud/index.vue')
},
// {
// path: '/northbound/DuerOS',
// component: () => import('@/views/northbound/DuerOS/index.vue')
// },
// {
// path: '/northbound/AliCloud',
// component: () => import('@/views/northbound/AliCloud/index.vue')
// },
// 产品分类
{
path: '/iot/device/Category',
component: () => import('@/views/device/Category/index.vue')
} ,
// {
// path: '/iot/device/Category',
// component: () => import('@/views/device/Category/index.vue')
// } ,
// 产品
{
path: '/iot/device/Product',
component: () => import('@/views/device/Product/index.vue')
}
// {
// path: '/iot/device/Product',
// component: () => import('@/views/device/Product/index.vue')
// }
]

3
src/store/menu.ts
View File

@ -6,6 +6,7 @@ export const useMenuStore = defineStore({
id: 'menu',
state: () => ({
menus: {},
menuData: [],
menusKey: []
}),
getters: {
@ -59,7 +60,7 @@ export const useMenuStore = defineStore({
hideInMenu: true
}
})
this.menus = menus
this.menuData = menus
res(menus)
}
})

20
src/utils/menu.ts
View File

@ -1,4 +1,4 @@
const pagesComponent = import.meta.glob('../views/system/**/*.vue', { eager: true });
const pagesComponent = import.meta.glob('../views/**/*.vue', { eager: true });
import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
type ExtraRouteItem = {
@ -61,13 +61,11 @@ const extraRouteObj = {
const resolveComponent = (name: any) => {
// TODO 暂时用system进行测试
const importPage = pagesComponent[`../views/${name}/index.vue`];
// if (!importPage) {
// throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`);
// }
if (!importPage) {
console.warn(`Unknown page ${name}. Is it located under Pages with a .vue extension?`)
}
//@ts-ignore
return !importPage ? BlankLayoutPage : importPage.default
// return importPage.default
return !!importPage ? importPage.default : BlankLayoutPage
}
const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => {
@ -85,7 +83,7 @@ const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => {
export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
return asyncRouterMap.map((route: any) => {
console.log(route.name, route)
route.path = `${route.url}`
route.meta = {
icon: route.icon,
@ -93,11 +91,11 @@ export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level =
}
// 查看是否有隐藏子路由
route.children = route.children && route.children.length ? [...route.children, ...findChildrenRoute(route.code, route.url)] : findChildrenRoute(route.code, route.url)
const extraChildren = findChildrenRoute(route.code, route.url)
route.children = route.children && route.children.length ? [...route.children, ...extraChildren] : extraChildren
// TODO 查看是否具有详情页
// route.children = [...route.children, ]
if (route.children && route.children.length) {
route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
@ -105,7 +103,7 @@ export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level =
} else {
route.component = resolveComponent(route.code);
}
console.log(route.code, route)
return route
})
}

14
src/views/404.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<a-result status="404" title="404" sub-title="Sorry, the page you visited does not exist.">
</a-result>
</template>
<script>
export default {
name: '404.vue'
}
</script>
<style scoped>
</style>