108 lines
2.8 KiB
TypeScript
108 lines
2.8 KiB
TypeScript
/**
|
||
* 菜单数据转换工具，将API返回的菜单数据转换为前端使用的格式
|
||
*/
|
||
|
||
// API返回的菜单项类型
|
||
export interface ApiMenuItem {
|
||
menuId: string;
|
||
parentId: string;
|
||
menuName: string;
|
||
menuType: string; // 'catalog' | 'route'
|
||
orderNum: number;
|
||
visible: string;
|
||
children?: ApiMenuItem[];
|
||
[key: string]: any; // 其他可能的字段
|
||
}
|
||
|
||
// 前端需要的菜单项类型
|
||
export interface FrontendMenuItem {
|
||
id: number | string;
|
||
parentId: number | string;
|
||
title: string;
|
||
type: number; // 1表示目录，2表示菜单
|
||
path: string;
|
||
name: string;
|
||
component: string;
|
||
icon: string;
|
||
isExternal: boolean;
|
||
isCache: boolean;
|
||
isHidden: boolean;
|
||
sort: number;
|
||
children?: FrontendMenuItem[];
|
||
}
|
||
|
||
/**
|
||
* 转换菜单类型: catalog -> 1, route -> 2
|
||
*/
|
||
const convertMenuType = (menuType: string): number => {
|
||
switch (menuType.toLowerCase()) {
|
||
case 'catalog':
|
||
return 1;
|
||
case 'route':
|
||
return 2;
|
||
case 'button':
|
||
return 3;
|
||
default:
|
||
// 默认为菜单类型
|
||
return 2;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 是否隐藏: '0' -> false, '1' -> true
|
||
*/
|
||
const convertVisible = (visible: string): boolean => {
|
||
return visible === '1'; // '1'为隐藏，'0'为显示
|
||
}
|
||
|
||
/**
|
||
* 转换单个菜单项
|
||
*/
|
||
const convertMenuItem = (apiItem: ApiMenuItem): FrontendMenuItem => {
|
||
// 根据menuType生成默认的path和component
|
||
let path = '';
|
||
let component = '';
|
||
let name = '';
|
||
|
||
// 简单的名称生成，去掉空格，保持首字母大写，非首字母小写
|
||
const generateName = (menuName: string): string => {
|
||
return menuName.replace(/\s+/g, '')
|
||
.replace(/^./, (match) => match.toUpperCase())
|
||
.replace(/[\u4e00-\u9fa5]/g, ''); // 移除中文字符
|
||
};
|
||
|
||
if (apiItem.menuType.toLowerCase() === 'catalog') {
|
||
path = `/${apiItem.menuName.toLowerCase().replace(/\s+/g, '-')}`;
|
||
component = 'Layout';
|
||
name = generateName(apiItem.menuName);
|
||
} else {
|
||
// 假设route类型菜单都在某个catalog下
|
||
const parentName = apiItem.menuName.toLowerCase().replace(/\s+/g, '-');
|
||
path = `/system/${parentName}`;
|
||
component = `system/${parentName}/index`;
|
||
name = `System${generateName(apiItem.menuName)}`;
|
||
}
|
||
|
||
return {
|
||
id: apiItem.menuId,
|
||
parentId: apiItem.parentId,
|
||
title: apiItem.menuName,
|
||
type: convertMenuType(apiItem.menuType),
|
||
path: path,
|
||
name: name,
|
||
component: component,
|
||
icon: 'settings', // 默认图标
|
||
isExternal: false,
|
||
isCache: false,
|
||
isHidden: convertVisible(apiItem.visible),
|
||
sort: apiItem.orderNum || 0,
|
||
children: apiItem.children ? apiItem.children.map(child => convertMenuItem(child)) : []
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 转换API返回的菜单数据为前端需要的格式
|
||
*/
|
||
export const convertMenuData = (apiMenuData: ApiMenuItem[]): FrontendMenuItem[] => {
|
||
return apiMenuData.map(item => convertMenuItem(item));
|
||
}
|