feat: 优化Layout组件,添加动态路由

This commit is contained in:
xieyonghong 2023-01-29 17:16:16 +08:00
parent f66e483f18
commit f3bc5740af
27 changed files with 716 additions and 286 deletions

View File

@ -2,13 +2,13 @@ export default {
theme: { theme: {
'primary-color': '#1d39c4', 'primary-color': '#1d39c4',
}, },
logo: '/favicon.ico', logo: '/favicon.ico', // 浏览器标签页logo
title: 'Jetlinks', title: 'Jetlinks', // 浏览器标签页title
layout: { layout: {
title: '物联网平台', title: '物联网平台', // 平台title
logo: '/icons/icon-192x192.png', logo: '/icons/icon-192x192.png', // 平台logo
siderWidth: 208, siderWidth: 208, // 左侧菜单栏宽度
headerHeight: 48, headerHeight: 48, // 头部高度
collapsedWidth: 48, collapsedWidth: 48,
mode: 'inline', mode: 'inline',
theme: 'light', // 'dark' 'light' theme: 'light', // 'dark' 'light'

View File

@ -1,31 +1,8 @@
<template> <template>
<ProLayout
v-bind='layoutConf'
v-model:openKeys="state.openKeys"
v-model:collapsed="state.collapsed"
v-model:selectedKeys="state.selectedKeys"
>
<router-view /> <router-view />
</ProLayout>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ProLayout } from '@/components/Layout'
import DefaultSetting from '../config/config'
const layoutConf = reactive({
navTheme: DefaultSetting.layout.theme,
siderWidth: DefaultSetting.layout.theme,
logo: DefaultSetting.layout.logo,
title: DefaultSetting.layout.title,
menuData: [],
});
const state = reactive({
collapsed: false, // default value
openKeys: [],
selectedKeys: [],
});
</script> </script>
<style scoped> <style scoped>

View File

@ -23,3 +23,8 @@ export const getSearchHistory = (target:string) => server.get<SearchHistoryList[
* @param target * @param target
*/ */
export const deleteSearchHistory = (target:string, id:string) => server.remove<SearchHistoryList[]>(`/user/settings/${target}/${id}`) export const deleteSearchHistory = (target:string, id:string) => server.remove<SearchHistoryList[]>(`/user/settings/${target}/${id}`)
/**
*
*/
export const systemVersion = () => server.get<{edition?: string}>('/system/version')

View File

@ -47,3 +47,8 @@ export const bindInfo = () => server.get(`/application/sso/_all`)
* @returns * @returns
*/ */
export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`) export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)
/**
*
*/
export const userDetail = () => server.get<any>('/user/detail')

3
src/api/system/menu.ts Normal file
View File

@ -0,0 +1,3 @@
import server from '@/utils/request'
export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tree', data)

View File

@ -30,7 +30,8 @@ const iconKeys = [
'PlusCircleOutlined', 'PlusCircleOutlined',
'MenuUnfoldOutlined', 'MenuUnfoldOutlined',
'MenuFoldOutlined', 'MenuFoldOutlined',
'QuestionCircleOutlined' 'QuestionCircleOutlined',
'InfoCircleOutlined'
] ]
const Icon = (props: {type: string}) => { const Icon = (props: {type: string}) => {

View File

@ -4,7 +4,7 @@ import {
unref, unref,
defineComponent, defineComponent,
toRefs, toRefs,
provide, provide
} from 'vue' } from 'vue'
import type { DefineComponent, ExtractPropTypes, PropType, CSSProperties, Plugin, App } from 'vue' import type { DefineComponent, ExtractPropTypes, PropType, CSSProperties, Plugin, App } from 'vue'
@ -25,7 +25,7 @@ import type {
MenuHeaderRender, MenuHeaderRender,
MenuItemRender, MenuItemRender,
RightContentRender, RightContentRender,
SubMenuItemRender, SubMenuItemRender
} from './typings' } from './typings'
import SiderMenuWrapper, { siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu' import SiderMenuWrapper, { siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu'
import { getSlot } from '@/utils/comm' import { getSlot } from '@/utils/comm'
@ -54,6 +54,10 @@ export const basicLayoutProps = {
default: () => { default: () => {
return null return null
} }
},
pure: {
type: Boolean,
default: () => false
} }
} }
@ -94,11 +98,6 @@ export default defineComponent({
const onMenuClick = (args: any) => { const onMenuClick = (args: any) => {
emit('menuClick', args) emit('menuClick', args)
} }
const genLayoutStyle = reactive<CSSProperties>({
position: 'relative'
})
const headerRender = ( const headerRender = (
p: BasicLayoutProps & { p: BasicLayoutProps & {
hasSiderMenu: boolean; hasSiderMenu: boolean;
@ -108,10 +107,10 @@ export default defineComponent({
matchMenuKeys?: string[] matchMenuKeys?: string[]
): CustomRender | null => { ): CustomRender | null => {
if (p.headerRender === false) { if (p.headerRender === false) {
return null; return null
}
return <HeaderView {...p} />
} }
return <HeaderView {...p} />;
};
const breadcrumb = computed<BreadcrumbProps>(() => ({ const breadcrumb = computed<BreadcrumbProps>(() => ({
...props.breadcrumb, ...props.breadcrumb,
@ -119,9 +118,7 @@ export default defineComponent({
})) }))
const flatMenuData = computed( const flatMenuData = computed(
() => () => (props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0])) || [])
(props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0])) || []
)
const routeContext = reactive<RouteContextProps>({ const routeContext = reactive<RouteContextProps>({
...(pick(toRefs(props), [ ...(pick(toRefs(props), [
@ -140,6 +137,7 @@ export default defineComponent({
return () => { return () => {
const { const {
pure,
onCollapse: propsOnCollapse, onCollapse: propsOnCollapse,
onOpenKeys: propsOnOpenKeys, onOpenKeys: propsOnOpenKeys,
onSelect: propsOnSelect, onSelect: propsOnSelect,
@ -148,16 +146,13 @@ export default defineComponent({
} = props } = props
const collapsedButtonRender = getSlot<CollapsedButtonRender>(slots, props, 'collapsedButtonRender') const collapsedButtonRender = getSlot<CollapsedButtonRender>(slots, props, 'collapsedButtonRender')
const headerContentRender = getSlot<HeaderContentRender>(slots, props, 'headerContentRender')
const rightContentRender = getSlot<RightContentRender>(slots, props, 'rightContentRender') const rightContentRender = getSlot<RightContentRender>(slots, props, 'rightContentRender')
const customHeaderRender = getSlot<HeaderRender>(slots, props, 'headerRender') const customHeaderRender = getSlot<HeaderRender>(slots, props, 'headerRender')
const footerRender = getSlot<FooterRender>(slots, props, 'footerRender')
// menu // menu
const menuHeaderRender = getSlot<MenuHeaderRender>(slots, props, 'menuHeaderRender') const menuHeaderRender = getSlot<MenuHeaderRender>(slots, props, 'menuHeaderRender')
const menuExtraRender = getSlot<MenuExtraRender>(slots, props, 'menuExtraRender') const menuExtraRender = getSlot<MenuExtraRender>(slots, props, 'menuExtraRender')
const menuContentRender = getSlot<MenuContentRender>(slots, props, 'menuContentRender') const menuContentRender = getSlot<MenuContentRender>(slots, props, 'menuContentRender')
const menuFooterRender = getSlot<MenuFooterRender>(slots, props, 'menuFooterRender')
const menuItemRender = getSlot<MenuItemRender>(slots, props, 'menuItemRender') const menuItemRender = getSlot<MenuItemRender>(slots, props, 'menuItemRender')
const subMenuItemRender = getSlot<SubMenuItemRender>(slots, props, 'subMenuItemRender') const subMenuItemRender = getSlot<SubMenuItemRender>(slots, props, 'subMenuItemRender')
@ -178,20 +173,24 @@ export default defineComponent({
menuExtraRender, menuExtraRender,
menuContentRender, menuContentRender,
headerRender: customHeaderRender, headerRender: customHeaderRender,
theme: props.navTheme, theme: props.navTheme
}, },
[] []
) )
) )
return ( return (
<div class={'pro-layout'}> <>
{
pure ? (
slots.default?.()
) : (
<Layout <Layout
class={'pro-layout'}
style={{ style={{
minHeight: '100vh', minHeight: '100vh'
}} }}
> >
{headerDom.value}
<SiderMenuWrapper <SiderMenuWrapper
{...restProps} {...restProps}
theme={props.navTheme} theme={props.navTheme}
@ -206,11 +205,17 @@ export default defineComponent({
onOpenKeys={onOpenKeys} onOpenKeys={onOpenKeys}
onMenuClick={onMenuClick} onMenuClick={onMenuClick}
/> />
<Layout>
{headerDom.value}
<Layout> <Layout>
{slots.default?.()} {slots.default?.()}
</Layout> </Layout>
</Layout> </Layout>
</div> </Layout>
)
}
</>
) )
} }
} }

View File

@ -0,0 +1,59 @@
<template>
<ProLayout
v-bind='layoutConf'
v-model:openKeys="state.openKeys"
v-model:collapsed="state.collapsed"
v-model:selectedKeys="state.selectedKeys"
:pure='state.pure'
>
<router-view v-slot='{ Component}'>
<component :is='Component' />
</router-view>
</ProLayout>
</template>
<script setup lang="ts" name='BasicLayoutPage'>
import { ProLayout } from '@/components/Layout'
import DefaultSetting from '../../../config/config'
import { useMenuStore } from '@/store/menu'
type StateType = {
collapsed: boolean
openKeys: string[]
selectedKeys: string[]
pure: boolean
}
const router = useRouter()
const menu = useMenuStore()
const layoutConf = reactive({
navTheme: DefaultSetting.layout.theme,
siderWidth: DefaultSetting.layout.siderWidth,
logo: DefaultSetting.layout.logo,
title: DefaultSetting.layout.title,
menuData: menu.menus,
});
const state = reactive<StateType>({
pure: false,
collapsed: false, // default value
openKeys: [],
selectedKeys: [],
});
watchEffect(() => {
if (router.currentRoute) {
const matched = router.currentRoute.value.matched.concat()
state.selectedKeys = matched.map(r => r.path)
state.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map(r => r.path)
console.log(state.selectedKeys)
}
// TODO pure
})
</script>
<style scoped>
</style>

View File

@ -0,0 +1,13 @@
<template>
<router-view />
</template>
<script>
export default {
name: 'BlankLayoutPage'
}
</script>
<style scoped>
</style>

View File

@ -8,6 +8,9 @@ import { defaultSettingProps } from 'components/Layout/defaultSetting'
import PropTypes from 'ant-design-vue/es/_util/vue-types' import PropTypes from 'ant-design-vue/es/_util/vue-types'
import { CustomRender, MenuDataItem, ProProps, RightContentRender, WithFalse } from 'components/Layout/typings' import { CustomRender, MenuDataItem, ProProps, RightContentRender, WithFalse } from 'components/Layout/typings'
import './index.less' import './index.less'
import { omit } from 'lodash-es'
import { RouteRecordRaw } from 'vue-router'
import { clearMenuItem } from 'components/Layout/utils'
export const headerProps = { export const headerProps = {
...defaultSettingProps, ...defaultSettingProps,
@ -66,8 +69,18 @@ export default defineComponent({
const context = useRouteContext(); const context = useRouteContext();
const noChildrenMenuData = (menuData || []).map((item) => ({
...item,
children: undefined,
})) as RouteRecordRaw[];
const clearMenuData = clearMenuItem(noChildrenMenuData);
return () => ( return () => (
<div class={`header-content ${navTheme}`}> <>
<div
class={`header-content ${navTheme}`}
>
<div class={`header-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}> <div class={`header-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
<div class={'header-main-left'} onClick={onMenuHeaderClick}> <div class={'header-main-left'} onClick={onMenuHeaderClick}>
<div class={'header-logo'}> <div class={'header-logo'}>
@ -80,7 +93,8 @@ export default defineComponent({
<div style={{ flex: 1 }} class={'header-menu'}> <div style={{ flex: 1 }} class={'header-menu'}>
<BaseMenu <BaseMenu
theme={props.navTheme === 'realDark' ? 'dark' : props.navTheme} theme={props.navTheme === 'realDark' ? 'dark' : props.navTheme}
menuData={menuData} menuData={clearMenuData}
mode={'horizontal'}
menuItemRender={props.menuItemRender} menuItemRender={props.menuItemRender}
subMenuItemRender={props.subMenuItemRender} subMenuItemRender={props.subMenuItemRender}
openKeys={context.openKeys} openKeys={context.openKeys}
@ -108,6 +122,7 @@ export default defineComponent({
</div> </div>
</div> </div>
</div> </div>
</>
) )
} }
}) })

View File

@ -1,4 +1,9 @@
.header-content { .header-content {
position: relative;
width: 100%;
height: 100%;
box-shadow: 0 1px 4px 0 rgb(0 21 41 / 12%);
transition: background .3s,width .2s;
&.light { &.light {
background-color: #fff; background-color: #fff;

View File

@ -21,7 +21,7 @@ export const HeaderView = defineComponent({
inheritAttrs: false, inheritAttrs: false,
props: headerViewProps, props: headerViewProps,
setup(props) { setup(props) {
const { headerHeight, navTheme, onCollapse } = toRefs(props); const { headerHeight, onCollapse } = toRefs(props);
const context = useRouteContext(); const context = useRouteContext();
@ -30,6 +30,16 @@ export const HeaderView = defineComponent({
); );
return () => ( return () => (
<>
<Layout.Header
style={{
padding: 0,
height: `${headerHeight.value}px`,
lineHeight: `${headerHeight.value}px`,
width: `100%`,
}}
/>
<Layout.Header <Layout.Header
style={{ style={{
padding: 0, padding: 0,
@ -38,6 +48,8 @@ export const HeaderView = defineComponent({
width: `100%`, width: `100%`,
zIndex: 19, zIndex: 19,
position: 'fixed', position: 'fixed',
top: 0,
right: 0
}} }}
> >
<Header <Header
@ -46,6 +58,7 @@ export const HeaderView = defineComponent({
menuData={clearMenuData.value} menuData={clearMenuData.value}
/> />
</Layout.Header> </Layout.Header>
</>
) )
} }
}) })

View File

@ -122,7 +122,9 @@ class MenuUtil {
title={defaultTitle} title={defaultTitle}
key={item.path} key={item.path}
icon={<LazyIcon icon={item.meta?.icon} />} icon={<LazyIcon icon={item.meta?.icon} />}
/> >
{this.getNavMenuItems(item.children)}
</Menu.SubMenu>
) )
} }
@ -144,7 +146,7 @@ class MenuUtil {
const target = (meta.target || null) as string | null; const target = (meta.target || null) as string | null;
const hasUrl = isUrl(item.path); const hasUrl = isUrl(item.path);
const CustomTag: any = (target && 'a') || this.RouterLink; const CustomTag: any = (target && 'a') || this.RouterLink;
const props = { to: { name: item.name, ...item.meta } }; const props = { to: { path: item.path, ...item.meta } };
const attrs = hasUrl || target ? { ...item.meta, href: item.path, target } : {}; const attrs = hasUrl || target ? { ...item.meta, href: item.path, target } : {};
const icon = (item.meta?.icon && <LazyIcon icon={item.meta.icon} />) || undefined; const icon = (item.meta?.icon && <LazyIcon icon={item.meta.icon} />) || undefined;
@ -191,13 +193,14 @@ export default defineComponent({
} }
emit('update:selectedKeys', args.selectedKeys); emit('update:selectedKeys', args.selectedKeys);
}; };
const handleClick: MenuClickEventHandler = (args: MenuInfo) => { const handleClick: MenuClickEventHandler = (args: MenuInfo) => {
emit('click', args); emit('click', args);
}; };
return () => ( return () => (
<Menu <Menu
{...props.menuProps} {...props}
key='Menu' key='Menu'
inlineIndent={16} inlineIndent={16}
theme={props.theme as 'dark' | 'light'} theme={props.theme as 'dark' | 'light'}

View File

@ -0,0 +1,16 @@
.pro-layout-sider {
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
overflow: auto;
overflow-x: hidden;
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
.ant-layout-sider-children {
display: flex;
flex-direction: column;
height: 100%;
}
}

View File

@ -14,6 +14,9 @@ import { baseMenuProps } from 'components/Layout/components/SiderMenu/BaseMenu'
import AIcon from '@/components/AIcon' import AIcon from '@/components/AIcon'
import { useRouteContext } from 'components/Layout/RouteContext' import { useRouteContext } from 'components/Layout/RouteContext'
import BaseMenu from './BaseMenu' import BaseMenu from './BaseMenu'
import './SiderMenu.less'
import { computed } from 'vue'
import { omit } from 'lodash-es'
export type PrivateSiderMenuProps = { export type PrivateSiderMenuProps = {
matchMenuKeys?: string[]; matchMenuKeys?: string[];
@ -85,7 +88,6 @@ export const defaultRenderCollapsedButton = (collapsed?: boolean): CustomRender
const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) => { const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) => {
const { const {
collapsed, collapsed,
siderWidth,
collapsedWidth = 48, collapsedWidth = 48,
menuExtraRender = false, menuExtraRender = false,
menuContentRender = false, menuContentRender = false,
@ -97,15 +99,17 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) =
const extraDom = menuExtraRender && menuExtraRender(props); const extraDom = menuExtraRender && menuExtraRender(props);
const handleSelect = () => { const handleSelect = ($event: string[]) => {
if (props.onSelect) {
props.onSelect([context.selectedKeys[0], ...$event]);
}
} }
const defaultMenuDom = ( const defaultMenuDom = (
<BaseMenu <BaseMenu
theme={props.theme as 'dark' | 'light'} theme={props.theme as 'dark' | 'light'}
mode="inline" mode="inline"
menuData={context.menuData} menuData={context.flatMenuData}
collapsed={props.collapsed} collapsed={props.collapsed}
openKeys={context.openKeys} openKeys={context.openKeys}
selectedKeys={context.selectedKeys} selectedKeys={context.selectedKeys}
@ -122,8 +126,25 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) =
/> />
) )
const Style = computed(() => {
return {
overflow: 'hidden',
height: '100vh',
zIndex: 18,
paddingTop: `${props.headerHeight}px`,
flex: `0 0 ${sSideWidth.value}px`,
minWidth: `${sSideWidth.value}px`,
maxWidth: `${sSideWidth.value}px`,
width: `${sSideWidth.value}px`,
transition: 'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s'
}
})
return ( return (
<> <>
<div
style={Style.value}
></div>
<Sider <Sider
collapsible collapsible
trigger={null} trigger={null}
@ -132,12 +153,10 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) =
props.onCollapse?.(collapse); props.onCollapse?.(collapse);
}} }}
collapsedWidth={collapsedWidth} collapsedWidth={collapsedWidth}
style={{ style={omit(Style.value, ['transition'])}
overflow: 'hidden', width={sSideWidth.value}
height: '100vh',
}}
width={siderWidth}
theme={props.theme as 'dark' | 'light'} theme={props.theme as 'dark' | 'light'}
class={'pro-layout-sider'}
> >
<div style="flex: 1; overflow: hidden auto;"> <div style="flex: 1; overflow: hidden auto;">
{(menuContentRender && menuContentRender(props, defaultMenuDom)) || defaultMenuDom} {(menuContentRender && menuContentRender(props, defaultMenuDom)) || defaultMenuDom}

View File

@ -1 +1,3 @@
export { default as ProLayout } from './BasicLayout'; export { default as ProLayout } from './BasicLayout';
export { default as BasicLayoutPage } from './BasicLayoutPage.vue'
export { default as BlankLayoutPage } from './BlankLayoutPage.vue'

View File

@ -9,7 +9,7 @@ export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): Rout
return menusData return menusData
.map((item: RouteRecord | RouteRecordRaw) => { .map((item: RouteRecord | RouteRecordRaw) => {
const finalItem = { ...item }; const finalItem = { ...item };
if (!finalItem.name || finalItem.meta?.hideInMenu) { if (finalItem.meta?.hideInMenu) {
return null; return null;
} }
@ -17,7 +17,7 @@ export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): Rout
if ( if (
!finalItem.meta?.hideChildInMenu && !finalItem.meta?.hideChildInMenu &&
finalItem.children.some( finalItem.children.some(
(child: RouteRecord | RouteRecordRaw) => child && child.name && !child.meta?.hideInMenu (child: RouteRecord | RouteRecordRaw) => child && !child.meta?.hideInMenu
) )
) { ) {
return { return {

View File

@ -9,6 +9,7 @@ import Search from './Search'
import NormalUpload from './NormalUpload/index.vue' import NormalUpload from './NormalUpload/index.vue'
import FileFormat from './FileFormat/index.vue' import FileFormat from './FileFormat/index.vue'
import JUpload from './JUpload/index.vue' import JUpload from './JUpload/index.vue'
import { BasicLayoutPage, BlankLayoutPage } from './Layout'
export default { export default {
install(app: App) { install(app: App) {
@ -22,5 +23,7 @@ export default {
.component('NormalUpload', NormalUpload) .component('NormalUpload', NormalUpload)
.component('FileFormat', FileFormat) .component('FileFormat', FileFormat)
.component('JUpload', JUpload) .component('JUpload', JUpload)
.component('BasicLayoutPage', BasicLayoutPage)
.component('BlankLayoutPage', BlankLayoutPage)
} }
} }

View File

@ -1,7 +1,8 @@
import { createRouter, createWebHashHistory } from 'vue-router'; import { createRouter, createWebHashHistory } from 'vue-router'
import menus, { LoginPath } from './menu' import menus, { LoginPath } from './menu'
import { LocalStore } from "@/utils/comm"; import { getToken } from '@/utils/comm'
import { TOKEN_KEY } from "@/utils/variable"; import { useUserInfo } from '@/store/userInfo'
import { useSystem } from '@/store/system'
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
@ -14,10 +15,37 @@ const filterPath = [
] ]
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
const token = LocalStore.get(TOKEN_KEY)
// TODO 切换路由取消请求 // TODO 切换路由取消请求
if (token || filterPath.includes(to.path)) { const isFilterPath = filterPath.includes(to.path)
if (isFilterPath) {
next() next()
} else {
const token = getToken()
if (token) {
if (to.path === LoginPath) {
next({ path: '/' })
} else {
const userInfo = useUserInfo()
const system = useSystem()
if (!userInfo.$state.userInfos.username) {
userInfo.getUserInfo()
system.getSystemVersion().then((menuData: any[]) => {
menuData.forEach(r => {
router.addRoute('main', r)
})
const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
if(to.path === redirect) {
next({ ...to, replace: true })
} else {
next({ path: redirect })
}
})
} else {
next()
}
}
} else { } else {
if (to.path === LoginPath) { if (to.path === LoginPath) {
next() next()
@ -25,6 +53,7 @@ router.beforeEach((to, from, next) => {
next({ path: LoginPath }) next({ path: LoginPath })
} }
} }
}
}) })
export default router export default router

View File

@ -1,145 +1,205 @@
export const LoginPath = '/login' export const LoginPath = '/login'
import { BasicLayoutPage, BlankLayoutPage } from '@/components/Layout'
export default [ export default [
// { // {
// path: '/', // path: '/iot',
// redirect: LoginPath // redirect: '/iot/device',
// meta: {
// title: '物联网',
// icon: 'EditOutlined'
// },
// component: BasicLayoutPage,
// children: [
// {
// path: '/iot/device',
// redirect: '/iot/device/instance',
// meta: {
// title: '设备管理',
// icon: 'EditOutlined'
// },
// component: BlankLayoutPage,
// children: [
// {
// path: '/iot/device/instance',
// component: () => import('@/views/demo/Search.vue'),
// meta: {
// title: '设备'
// },
// }, // },
// { // {
// path: '/init', // path: '/iot/device/instance2',
// component: () => import('@/view/InitPage.vue') // component: () => import('@/views/demo/Search.vue'),
// meta: {
// title: '设备2'
// },
// }
// ]
// }
// ]
// }, // },
// { // {
// path: LoginPath, // path: '/iot2',
// name: 'login', // redirect: '/iot2/device',
// component: () => import('@/view/Login/index.vue') // meta: {
// title: '物联网2'
// }, // },
// component: BasicLayoutPage,
// children: [
// {
// path: '/iot2/device',
// redirect: '/iot2/device/instance',
// meta: {
// title: '设备管理2'
// },
// component: BlankLayoutPage,
// children: [
// {
// path: '/iot2/device/instance',
// component: () => import('@/views/demo/Search.vue'),
// meta: {
// title: '设备2'
// },
// }
// ]
// }
// ]
// },
// {
// path: '/init-home',
// component: () => import('@/view/init-home/index.vue')
// },
{
path: LoginPath,
name: 'login',
component: () => import('@/views/user/Login/index.vue')
},
// { // {
// path: '/initsetting', // path: '/initsetting',
// component: () => import('@/view/Login/initSet.vue') // component: () => import('@/view/Login/initSet.vue')
// } // }
// start: 测试用, 可删除 // start: 测试用, 可删除
{ // {
path: '/login', // path: '/login',
component: () => import('@/views/user/Login/index.vue') // component: () => import('@/views/user/Login/index.vue')
}, // },
{ // {
path: '/demo', // path: '/demo',
component: () => import('@/views/demo/index.vue') // component: () => import('@/views/demo/index.vue')
}, // },
{ // {
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')
}, // },
{ // {
path: '/form', // path: '/form',
component: () => import('@/views/demo/Form.vue') // component: () => import('@/views/demo/Form.vue')
}, // },
{ // {
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: '/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')
} // }
] ]

View File

@ -1,9 +1,12 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { queryOwnThree } from '@/api/system/menu'
import { filterAsnycRouter } from '@/utils/menu'
export const useMenuStore = defineStore({ export const useMenuStore = defineStore({
id: 'menu', id: 'menu',
state: () => ({ state: () => ({
menus: {} as {[key: string]: string}, menus: {},
menusKey: []
}), }),
getters: { getters: {
hasPermission(state) { hasPermission(state) {
@ -19,6 +22,47 @@ export const useMenuStore = defineStore({
} }
return false return false
} }
},
},
actions: {
queryMenuTree(isCommunity = false): Promise<any[]> {
return new Promise(async (res) => {
//过滤非集成的菜单
const params = [
{
terms: [
{
terms: [
{
column: 'owner',
termType: 'eq',
value: 'iot',
},
{
column: 'owner',
termType: 'isnull',
value: '1',
type: 'or',
},
],
},
],
},
];
const resp = await queryOwnThree({ paging: false, terms: params })
if (resp.success) {
const menus = filterAsnycRouter(resp.result)
// menus.push({
// path: '/',
// redirect: menus[0]?.path,
// meta: {
// hideInMenu: true
// }
// })
this.menus = menus
res(menus)
}
})
} }
} }
}) })

24
src/store/system.ts Normal file
View File

@ -0,0 +1,24 @@
import { defineStore } from 'pinia';
import { systemVersion } from '@/api/comm'
import { useMenuStore } from './menu'
export const useSystem = defineStore('system', {
state: () => ({
isCommunity: false
}),
actions: {
getSystemVersion(): Promise<any[]> {
return new Promise(async(res, rej) => {
const resp = await systemVersion()
if (resp.success && resp.result) {
const isCommunity = resp.result.edition === 'community'
this.isCommunity = isCommunity
// 获取菜单
const menu = useMenuStore()
const menuData: any[] = await menu.queryMenuTree(isCommunity)
res(menuData)
}
})
}
}
})

View File

@ -1,5 +1,5 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { authLogin } from '@/api/login'; import { authLogin, userDetail } from '@/api/login';
import { LocalStore } from '@/utils/comm'; import { LocalStore } from '@/utils/comm';
import { TOKEN_KEY } from '@/utils/variable'; import { TOKEN_KEY } from '@/utils/variable';
@ -38,5 +38,17 @@ export const useUserInfo = defineStore('userInfo', {
}); });
}); });
}, },
getUserInfo() {
return new Promise((res, rej) => {
userDetail().then(resp => {
if (resp.success) {
res(true)
this.userInfos = resp.result
} else {
rej()
}
}).catch(() => rej())
})
}
}, },
}); });

View File

@ -1,3 +1,5 @@
import { isObject } from 'lodash-es'
export default function encodeQuery(params: any) { export default function encodeQuery(params: any) {
if (!params) return {}; if (!params) return {};
const queryParam = { const queryParam = {
@ -15,7 +17,7 @@ export default function encodeQuery(params: any) {
terms[k] === '' || terms[k] === '' ||
terms[k] === undefined || terms[k] === undefined ||
terms[k].length === 0 || terms[k].length === 0 ||
terms[k] === {} || (isObject(terms[k]) && Object.keys(terms[k]).length === 0) ||
terms[k] === null terms[k] === null
) )
) { ) {

111
src/utils/menu.ts Normal file
View File

@ -0,0 +1,111 @@
const pagesComponent = import.meta.glob('../views/system/**/*.vue', { eager: true });
import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
type ExtraRouteItem = {
code: string
name: string
url?: string
}
// 额外子级路由
const extraRouteObj = {
'media/Cascade': {
children: [
{ code: 'Save', name: '新增' },
{ code: 'Channel', name: '选择通道' },
],
},
'media/Device': {
children: [
{ code: 'Save', name: '详情' },
{ code: 'Channel', name: '通道列表' },
{ code: 'Playback', name: '回放' },
],
},
'rule-engine/Scene': {
children: [
{ code: 'Save', name: '详情' },
{ code: 'Save2', name: '测试详情' },
],
},
'rule-engine/Alarm/Configuration': {
children: [{ code: 'Save', name: '详情' }],
},
'device/Firmware': {
children: [{ code: 'Task', name: '升级任务' }],
},
demo: {
children: [{ code: 'AMap', name: '地图' }],
},
'system/Platforms': {
children: [
{ code: 'Api', name: '赋权' },
{ code: 'View', name: 'Api详情' },
],
},
'system/DataSource': {
children: [{ code: 'Management', name: '管理' }],
},
'system/Menu': {
children: [{ code: 'Setting', name: '菜单配置' }],
},
'system/Apply': {
children: [
{ code: 'Api', name: '赋权' },
{ code: 'View', name: 'Api详情' },
{ code: 'Save', name: '详情' },
],
},
};
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?`);
// }
//@ts-ignore
return !importPage ? BlankLayoutPage : importPage.default
// return importPage.default
}
const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => {
if (extraRouteObj[code]) {
return extraRouteObj[code].children.map((route: ExtraRouteItem) => {
return {
url: `${url}/${route.code}`,
code: route.code,
name: route.name
}
})
}
return []
}
export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
return asyncRouterMap.map((route: any) => {
route.path = `${route.url}`
route.meta = {
icon: route.icon,
title: route.name
}
// 查看是否有隐藏子路由
route.children = route.children && route.children.length ? [...route.children, ...findChildrenRoute(route.code, route.url)] : findChildrenRoute(route.code, route.url)
// 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)
route.redirect = route.children[0].url
} else {
route.component = resolveComponent(route.code);
}
console.log(route.code, route)
return route
})
}

View File

@ -118,6 +118,7 @@ const errorHandler = (error: any) => {
const status = error.response.status const status = error.response.status
if (status === 403) { if (status === 403) {
Notification.error({ Notification.error({
key: '403',
message: 'Forbidden', message: 'Forbidden',
description: (data.message + '').substr(0, 90) description: (data.message + '').substr(0, 90)
}) })
@ -129,22 +130,25 @@ const errorHandler = (error: any) => {
}, 0) }, 0)
} else if (status === 500) { } else if (status === 500) {
Notification.error({ Notification.error({
key: '500',
message: 'Server Side Error', message: 'Server Side Error',
description: (data.message + '').substr(0, 90) description: (data.message + '').substr(0, 90)
}) })
} else if (status === 400) { } else if (status === 400) {
Notification.error({ Notification.error({
key: '400',
message: 'Request Error', message: 'Request Error',
description: (data.message + '').substr(0, 90) description: (data.message + '').substr(0, 90)
}) })
} else if (status === 401) { } else if (status === 401) {
Notification.error({ Notification.error({
key: '401',
message: 'Unauthorized', message: 'Unauthorized',
description: 'Authorization verification failed' description: 'Authorization verification failed'
}) })
setTimeout(() => { setTimeout(() => {
router.replace({ router.replace({
name: 'login' path: LoginPath
}) })
}, 0) }, 0)
} }

View File

@ -22,7 +22,7 @@
"store/*": ["./src/store/*"], "store/*": ["./src/store/*"],
"style/*": ["./src/style/*"], "style/*": ["./src/style/*"],
}, },
"types": ["ant-design-vue/typings/global"], "types": ["ant-design-vue/typings/global", "vite/client"],
"suppressImplicitAnyIndexErrors": true "suppressImplicitAnyIndexErrors": true
}, },
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],