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'; 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) export const addRole = (data: any) => server.post(`/role`, data)

11
src/main.ts
View File

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

21
src/router/index.ts
View File

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

184
src/router/menu.ts
View File

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

3
src/store/menu.ts
View File

@ -6,6 +6,7 @@ export const useMenuStore = defineStore({
id: 'menu', id: 'menu',
state: () => ({ state: () => ({
menus: {}, menus: {},
menuData: [],
menusKey: [] menusKey: []
}), }),
getters: { getters: {
@ -59,7 +60,7 @@ export const useMenuStore = defineStore({
hideInMenu: true hideInMenu: true
} }
}) })
this.menus = menus this.menuData = menus
res(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' import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
type ExtraRouteItem = { type ExtraRouteItem = {
@ -61,13 +61,11 @@ const extraRouteObj = {
const resolveComponent = (name: any) => { const resolveComponent = (name: any) => {
// TODO 暂时用system进行测试 // TODO 暂时用system进行测试
const importPage = pagesComponent[`../views/${name}/index.vue`]; const importPage = pagesComponent[`../views/${name}/index.vue`];
// if (!importPage) { if (!importPage) {
// throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`); console.warn(`Unknown page ${name}. Is it located under Pages with a .vue extension?`)
// } }
//@ts-ignore //@ts-ignore
return !importPage ? BlankLayoutPage : importPage.default return !!importPage ? importPage.default : BlankLayoutPage
// return importPage.default
} }
const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => { 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) { export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
return asyncRouterMap.map((route: any) => { return asyncRouterMap.map((route: any) => {
console.log(route.name, route)
route.path = `${route.url}` route.path = `${route.url}`
route.meta = { route.meta = {
icon: route.icon, 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 查看是否具有详情页 // TODO 查看是否具有详情页
// route.children = [...route.children, ] // route.children = [...route.children, ]
if (route.children && route.children.length) { if (route.children && route.children.length) {
route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1) route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
@ -105,7 +103,7 @@ export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level =
} else { } else {
route.component = resolveComponent(route.code); route.component = resolveComponent(route.code);
} }
console.log(route.code, route)
return 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>