feat: 优化Layout组件,添加动态路由
This commit is contained in:
parent
f66e483f18
commit
f3bc5740af
|
@ -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'
|
||||||
|
|
25
src/App.vue
25
src/App.vue
|
@ -1,31 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<ProLayout
|
<router-view />
|
||||||
v-bind='layoutConf'
|
|
||||||
v-model:openKeys="state.openKeys"
|
|
||||||
v-model:collapsed="state.collapsed"
|
|
||||||
v-model:selectedKeys="state.selectedKeys"
|
|
||||||
>
|
|
||||||
<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>
|
||||||
|
|
|
@ -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')
|
|
@ -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')
|
|
@ -0,0 +1,3 @@
|
||||||
|
import server from '@/utils/request'
|
||||||
|
|
||||||
|
export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tree', data)
|
|
@ -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}) => {
|
||||||
|
|
|
@ -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,39 +173,49 @@ export default defineComponent({
|
||||||
menuExtraRender,
|
menuExtraRender,
|
||||||
menuContentRender,
|
menuContentRender,
|
||||||
headerRender: customHeaderRender,
|
headerRender: customHeaderRender,
|
||||||
theme: props.navTheme,
|
theme: props.navTheme
|
||||||
},
|
},
|
||||||
[]
|
[]
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class={'pro-layout'}>
|
<>
|
||||||
<Layout
|
{
|
||||||
style={{
|
pure ? (
|
||||||
minHeight: '100vh',
|
slots.default?.()
|
||||||
}}
|
) : (
|
||||||
>
|
<Layout
|
||||||
{headerDom.value}
|
class={'pro-layout'}
|
||||||
<SiderMenuWrapper
|
style={{
|
||||||
{...restProps}
|
minHeight: '100vh'
|
||||||
theme={props.navTheme}
|
}}
|
||||||
menuHeaderRender={menuHeaderRender}
|
>
|
||||||
menuExtraRender={menuExtraRender}
|
<SiderMenuWrapper
|
||||||
menuContentRender={menuContentRender}
|
{...restProps}
|
||||||
menuItemRender={menuItemRender}
|
theme={props.navTheme}
|
||||||
subMenuItemRender={subMenuItemRender}
|
menuHeaderRender={menuHeaderRender}
|
||||||
collapsedButtonRender={collapsedButtonRender}
|
menuExtraRender={menuExtraRender}
|
||||||
onCollapse={onCollapse}
|
menuContentRender={menuContentRender}
|
||||||
onSelect={onSelect}
|
menuItemRender={menuItemRender}
|
||||||
onOpenKeys={onOpenKeys}
|
subMenuItemRender={subMenuItemRender}
|
||||||
onMenuClick={onMenuClick}
|
collapsedButtonRender={collapsedButtonRender}
|
||||||
/>
|
onCollapse={onCollapse}
|
||||||
<Layout>
|
onSelect={onSelect}
|
||||||
{slots.default?.()}
|
onOpenKeys={onOpenKeys}
|
||||||
</Layout>
|
onMenuClick={onMenuClick}
|
||||||
</Layout>
|
/>
|
||||||
</div>
|
|
||||||
|
<Layout>
|
||||||
|
{headerDom.value}
|
||||||
|
<Layout>
|
||||||
|
{slots.default?.()}
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<router-view />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'BlankLayoutPage'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
|
@ -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,48 +69,60 @@ 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-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
|
<div
|
||||||
<div class={'header-main-left'} onClick={onMenuHeaderClick}>
|
class={`header-content ${navTheme}`}
|
||||||
<div class={'header-logo'}>
|
>
|
||||||
<a>
|
<div class={`header-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
|
||||||
{defaultRenderLogo(logo, logoStyle)}
|
<div class={'header-main-left'} onClick={onMenuHeaderClick}>
|
||||||
<h1 title={title}>{ title }</h1>
|
<div class={'header-logo'}>
|
||||||
</a>
|
<a>
|
||||||
|
{defaultRenderLogo(logo, logoStyle)}
|
||||||
|
<h1 title={title}>{ title }</h1>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<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={clearMenuData}
|
||||||
menuData={menuData}
|
mode={'horizontal'}
|
||||||
menuItemRender={props.menuItemRender}
|
menuItemRender={props.menuItemRender}
|
||||||
subMenuItemRender={props.subMenuItemRender}
|
subMenuItemRender={props.subMenuItemRender}
|
||||||
openKeys={context.openKeys}
|
openKeys={context.openKeys}
|
||||||
selectedKeys={context.selectedKeys}
|
selectedKeys={context.selectedKeys}
|
||||||
{...{
|
{...{
|
||||||
'onUpdate:openKeys': ($event: string[]) => onOpenKeys && onOpenKeys($event),
|
'onUpdate:openKeys': ($event: string[]) => onOpenKeys && onOpenKeys($event),
|
||||||
'onUpdate:selectedKeys': ($event: string[]) => onSelect && onSelect($event),
|
'onUpdate:selectedKeys': ($event: string[]) => onSelect && onSelect($event),
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class={'header-right'} style={{ minWidth: rightSize.value }}>
|
|
||||||
<div>
|
|
||||||
<ResizeObserver
|
|
||||||
onResize={({ width }: { width: number}) => {
|
|
||||||
rightSize.value = width
|
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
{
|
</div>
|
||||||
rightContentRender && typeof rightContentRender === 'function' ? (
|
<div class={'header-right'} style={{ minWidth: rightSize.value }}>
|
||||||
<div>{rightContentRender({...props})}</div>
|
<div>
|
||||||
) : rightContentRender
|
<ResizeObserver
|
||||||
}
|
onResize={({ width }: { width: number}) => {
|
||||||
</ResizeObserver>
|
rightSize.value = width
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
rightContentRender && typeof rightContentRender === 'function' ? (
|
||||||
|
<div>{rightContentRender({...props})}</div>
|
||||||
|
) : rightContentRender
|
||||||
|
}
|
||||||
|
</ResizeObserver>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
})
|
})
|
|
@ -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;
|
||||||
|
|
|
@ -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,22 +30,35 @@ export const HeaderView = defineComponent({
|
||||||
);
|
);
|
||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<Layout.Header
|
<>
|
||||||
style={{
|
<Layout.Header
|
||||||
padding: 0,
|
style={{
|
||||||
height: `${headerHeight.value}px`,
|
padding: 0,
|
||||||
lineHeight: `${headerHeight.value}px`,
|
height: `${headerHeight.value}px`,
|
||||||
width: `100%`,
|
lineHeight: `${headerHeight.value}px`,
|
||||||
zIndex: 19,
|
width: `100%`,
|
||||||
position: 'fixed',
|
|
||||||
}}
|
}}
|
||||||
>
|
|
||||||
<Header
|
|
||||||
{...props}
|
|
||||||
onCollapse={onCollapse.value}
|
|
||||||
menuData={clearMenuData.value}
|
|
||||||
/>
|
/>
|
||||||
</Layout.Header>
|
<Layout.Header
|
||||||
|
style={{
|
||||||
|
padding: 0,
|
||||||
|
height: `${headerHeight.value}px`,
|
||||||
|
lineHeight: `${headerHeight.value}px`,
|
||||||
|
width: `100%`,
|
||||||
|
zIndex: 19,
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
right: 0
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Header
|
||||||
|
{...props}
|
||||||
|
onCollapse={onCollapse.value}
|
||||||
|
menuData={clearMenuData.value}
|
||||||
|
/>
|
||||||
|
</Layout.Header>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
})
|
})
|
|
@ -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'}
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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}
|
||||||
|
|
|
@ -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'
|
|
@ -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 {
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,12 @@
|
||||||
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(),
|
||||||
routes: menus
|
routes: menus
|
||||||
})
|
})
|
||||||
|
|
||||||
const filterPath = [
|
const filterPath = [
|
||||||
|
@ -14,17 +15,45 @@ const filterPath = [
|
||||||
]
|
]
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
const token = LocalStore.get(TOKEN_KEY)
|
// TODO 切换路由取消请求
|
||||||
// TODO 切换路由取消请求
|
const isFilterPath = filterPath.includes(to.path)
|
||||||
if (token || filterPath.includes(to.path)) {
|
if (isFilterPath) {
|
||||||
next()
|
next()
|
||||||
} else {
|
} else {
|
||||||
if (to.path === LoginPath) {
|
const token = getToken()
|
||||||
next()
|
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 {
|
} else {
|
||||||
next({ path: LoginPath })
|
next()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
if (to.path === LoginPath) {
|
||||||
|
next()
|
||||||
|
} else {
|
||||||
|
next({ path: LoginPath })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
|
@ -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: '/iot/device/instance2',
|
||||||
|
// component: () => import('@/views/demo/Search.vue'),
|
||||||
|
// meta: {
|
||||||
|
// title: '设备2'
|
||||||
|
// },
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
// },
|
// },
|
||||||
// {
|
// {
|
||||||
// path: '/init',
|
// path: '/iot2',
|
||||||
// component: () => import('@/view/InitPage.vue')
|
// redirect: '/iot2/device',
|
||||||
|
// 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: LoginPath,
|
// path: '/init-home',
|
||||||
// name: 'login',
|
// component: () => import('@/view/init-home/index.vue')
|
||||||
// component: () => import('@/view/Login/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')
|
||||||
}
|
// }
|
||||||
]
|
]
|
|
@ -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)
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
|
@ -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)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
|
@ -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())
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
|
|
|
@ -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
|
||||||
|
})
|
||||||
|
}
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"],
|
||||||
|
|
Loading…
Reference in New Issue