feat: enhance menu and routing data handling
This commit is contained in:
@ -1,5 +1,6 @@
|
|||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
|
name: '首页',
|
||||||
path: '/Dashboard',
|
path: '/Dashboard',
|
||||||
component: './MainPage/ProjectManager',
|
component: './MainPage/ProjectManager',
|
||||||
},
|
},
|
||||||
|
@ -14,7 +14,7 @@ export default {
|
|||||||
},
|
},
|
||||||
UAT: {
|
UAT: {
|
||||||
'/api/sys-manager-ebtp-project': {
|
'/api/sys-manager-ebtp-project': {
|
||||||
target: 'http://localhost:18030',
|
target: 'http://192.168.110.231:18030',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: { '/api/sys-manager-ebtp-project': '' },
|
pathRewrite: { '/api/sys-manager-ebtp-project': '' },
|
||||||
},
|
},
|
||||||
@ -58,7 +58,11 @@ export default {
|
|||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: { '/api/biz-supplier-manage': '' },
|
pathRewrite: { '/api/biz-supplier-manage': '' },
|
||||||
},
|
},
|
||||||
|
'/api/biz-service-ebtp-resps': {
|
||||||
|
target: 'http://192.168.110.51:18013',
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite: { '/api/biz-service-ebtp-resps': '' },
|
||||||
|
},
|
||||||
// '/api/wfap/v1/audit/bill/find/by/procid': {
|
// '/api/wfap/v1/audit/bill/find/by/procid': {
|
||||||
// target: 'http://10.242.31.158:8891/',//审批单 uat环境自动审批,暂时用不到
|
// target: 'http://10.242.31.158:8891/',//审批单 uat环境自动审批,暂时用不到
|
||||||
// changeOrigin: true,
|
// changeOrigin: true,
|
||||||
|
@ -98,6 +98,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@alita/plugins": "^3.5.5",
|
"@alita/plugins": "^3.5.5",
|
||||||
"@types/classnames": "^2.2.7",
|
"@types/classnames": "^2.2.7",
|
||||||
|
"@types/cookie": "0.5.4",
|
||||||
"@types/express": "^4.17.0",
|
"@types/express": "^4.17.0",
|
||||||
"@types/history": "^4.7.2",
|
"@types/history": "^4.7.2",
|
||||||
"@types/jest": "^26.0.0",
|
"@types/jest": "^26.0.0",
|
||||||
|
12
src/app.tsx
12
src/app.tsx
@ -50,7 +50,8 @@ function TabLayout({
|
|||||||
const items = Object.entries(keepElements.current).map(
|
const items = Object.entries(keepElements.current).map(
|
||||||
([pathname]: any) => {
|
([pathname]: any) => {
|
||||||
const pathnameLowerCase = pathname.toLowerCase();
|
const pathnameLowerCase = pathname.toLowerCase();
|
||||||
const label = pathKeyMap.get(pathnameLowerCase)?.name || 'Unknown';
|
const pathKeyMapItem = pathKeyMap.get(pathnameLowerCase);
|
||||||
|
const label = pathKeyMapItem?.name || pathKeyMapItem?.routeName || 'Unknown';
|
||||||
const active = pathnameLowerCase === activeKeyLowerCase;
|
const active = pathnameLowerCase === activeKeyLowerCase;
|
||||||
return ({ label, key: pathnameLowerCase, closeIcon: <CloseIcon style={{ fontSize: 10, color: active ? '#fff' : '#575B66' }} /> })
|
return ({ label, key: pathnameLowerCase, closeIcon: <CloseIcon style={{ fontSize: 10, color: active ? '#fff' : '#575B66' }} /> })
|
||||||
},
|
},
|
||||||
@ -61,7 +62,8 @@ function TabLayout({
|
|||||||
<Tabs
|
<Tabs
|
||||||
hideAdd
|
hideAdd
|
||||||
onChange={(key: string) => {
|
onChange={(key: string) => {
|
||||||
navigate(key);
|
const { pathname, search } = keepElements.current[key].location;
|
||||||
|
navigate(`${pathname}${search}`);
|
||||||
}}
|
}}
|
||||||
activeKey={activeKeyLowerCase}
|
activeKey={activeKeyLowerCase}
|
||||||
type="editable-card"
|
type="editable-card"
|
||||||
@ -79,12 +81,14 @@ function TabLayout({
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
dropByCacheKey(targetKey)
|
dropByCacheKey(targetKey)
|
||||||
if (targetKey === activeKey) {
|
if (targetKey === activeKey?.toLowerCase()) {
|
||||||
// 删除当前选中的tab时:
|
// 删除当前选中的tab时:
|
||||||
// 1.如果当前tab是第一个时自动选中后一个
|
// 1.如果当前tab是第一个时自动选中后一个
|
||||||
// 2.不是第一个时自动选中前一个
|
// 2.不是第一个时自动选中前一个
|
||||||
const i = pathList.indexOf(targetKey)
|
const i = pathList.indexOf(targetKey)
|
||||||
navigate(pathList[i === 0 ? i + 1 : i - 1])
|
const to = pathList[i === 0 ? i + 1 : i - 1]
|
||||||
|
const { pathname, search } = keepElements.current[to].location;
|
||||||
|
navigate(`${pathname}${search}`)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
items={items}
|
items={items}
|
||||||
|
@ -4,7 +4,7 @@ import ProLayout, {
|
|||||||
Settings,
|
Settings,
|
||||||
} from '@ant-design/pro-layout';
|
} from '@ant-design/pro-layout';
|
||||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { Link, connect, Dispatch, history, Outlet, useLocation, useKeepOutlets } from '@umijs/max';
|
import { Link, connect, Dispatch, history, useLocation, useKeepOutlets, useAppData } from '@umijs/max';
|
||||||
import { Result, Button, message } from 'antd';
|
import { Result, Button, message } from 'antd';
|
||||||
import Authorized from '@/utils/Authorized';
|
import Authorized from '@/utils/Authorized';
|
||||||
import RightContent from '@/components/GlobalHeader/RightContent';
|
import RightContent from '@/components/GlobalHeader/RightContent';
|
||||||
@ -105,6 +105,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
|
|||||||
const mall3_token: any = sessionStorage.getItem('Authorization');//当前登录token
|
const mall3_token: any = sessionStorage.getItem('Authorization');//当前登录token
|
||||||
const userData: any = getSessionUserData();//当前登录人信息
|
const userData: any = getSessionUserData();//当前登录人信息
|
||||||
const children = useKeepOutlets();
|
const children = useKeepOutlets();
|
||||||
|
const routeData = useAppData();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (getSessionRoleData()?.roleId) {
|
if (getSessionRoleData()?.roleId) {
|
||||||
let params = {
|
let params = {
|
||||||
@ -116,7 +118,10 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
|
|||||||
if (dispatch) {
|
if (dispatch) {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: 'user/saveMenuData',
|
type: 'user/saveMenuData',
|
||||||
payload: res.data || [],
|
payload: {
|
||||||
|
menuData: res.data || [],
|
||||||
|
routeData: routeData.routes,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
setmenuShow(true)
|
setmenuShow(true)
|
||||||
|
@ -16,10 +16,16 @@ export interface CurrentUser {
|
|||||||
unreadCount?: number;
|
unreadCount?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface PathKeyMap {
|
||||||
|
name: string;
|
||||||
|
icon?: string;
|
||||||
|
routeName?: string;
|
||||||
|
}
|
||||||
|
|
||||||
export interface UserModelState {
|
export interface UserModelState {
|
||||||
currentUser?: CurrentUser;
|
currentUser?: CurrentUser;
|
||||||
menuData?: any[];
|
menuData?: any[];
|
||||||
pathKeyMap?: Map<string, {name: string, icon?: string}>;
|
pathKeyMap?: Map<string, PathKeyMap>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface UserModelType {
|
export interface UserModelType {
|
||||||
@ -42,7 +48,7 @@ const UserModel: UserModelType = {
|
|||||||
state: {
|
state: {
|
||||||
currentUser: {},
|
currentUser: {},
|
||||||
menuData: [],
|
menuData: [],
|
||||||
pathKeyMap: new Map<string, {name: string, icon?: string}>(),
|
pathKeyMap: new Map<string, PathKeyMap>(),
|
||||||
},
|
},
|
||||||
|
|
||||||
effects: {
|
effects: {
|
||||||
@ -70,8 +76,9 @@ const UserModel: UserModelType = {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
saveMenuData(state, action) {
|
saveMenuData(state, action) {
|
||||||
const menuData = action.payload || [];
|
const menuData = action.payload.menuData || [];
|
||||||
const pathKeyMap = new Map<string, {name: string, icon?: string}>();
|
const routeData = action.payload.routeData || [];
|
||||||
|
const pathKeyMap = new Map<string, PathKeyMap>();
|
||||||
// 将menuData转换为pathKeyMap 递归处理
|
// 将menuData转换为pathKeyMap 递归处理
|
||||||
const convertToPathKeyMap = (menuData: any[]) => {
|
const convertToPathKeyMap = (menuData: any[]) => {
|
||||||
menuData.forEach((item: any) => {
|
menuData.forEach((item: any) => {
|
||||||
@ -83,7 +90,24 @@ const UserModel: UserModelType = {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
convertToPathKeyMap(menuData);
|
convertToPathKeyMap(menuData);
|
||||||
pathKeyMap.set('/dashboard', { name: '首页' });
|
let i = 1;
|
||||||
|
while (routeData[i]) {
|
||||||
|
const item = routeData[i];
|
||||||
|
if (item.name) {
|
||||||
|
const pathname = item.path.toLowerCase();
|
||||||
|
if (pathKeyMap.has(pathname)) {
|
||||||
|
const target = pathKeyMap.get(pathname)!;
|
||||||
|
const newItem = {
|
||||||
|
...target,
|
||||||
|
routeName: item.name,
|
||||||
|
}
|
||||||
|
pathKeyMap.set(pathname, newItem);
|
||||||
|
} else {
|
||||||
|
pathKeyMap.set(pathname, { name: item.name, icon: item.icon });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
i++;
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
menuData: action.payload || [],
|
menuData: action.payload || [],
|
||||||
|
@ -11,7 +11,6 @@
|
|||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
"noImplicitReturns": true,
|
"noImplicitReturns": true,
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
Reference in New Issue
Block a user