diff --git a/packages/app-operation/src/components/LeftMenu/index.tsx b/packages/app-operation/src/components/LeftMenu/index.tsx index 00a0932..24f2191 100644 --- a/packages/app-operation/src/components/LeftMenu/index.tsx +++ b/packages/app-operation/src/components/LeftMenu/index.tsx @@ -1,14 +1,14 @@ -import {MenuDataItem} from '@ant-design/pro-components'; -import {getMatchMenu} from '@umijs/route-utils'; -import {Layout, Menu} from 'antd'; -import {MenuItemType} from 'antd/es/menu/interface'; -import React from 'react'; +import { MenuDataItem } from '@ant-design/pro-components'; +import { getMatchMenu } from '@umijs/route-utils'; +import { Layout, Menu } from 'antd'; +import { MenuItemType } from 'antd/es/menu/interface'; +import React, { useEffect, useState } from 'react'; import useButtonStyle from './style.style'; interface ILeftMenuProps { - menuData: MenuDataItem[]; - pathname: string; - onClick: (item: MenuItemType) => void; + menuData: MenuDataItem[]; + pathname: string; + onClick: (item: MenuItemType) => void; } // 递归 menuData tree 树状结构 增加 label 参数 @@ -18,116 +18,122 @@ const notNullArray = (value: any[]) => Array.isArray(value) && value.length > 0; * 删除 hideInMenu 和 item.name 不存在的 */ const defaultFilterMenuData = (menuData: MenuDataItem[] = []): MenuItemType[] => - menuData - .filter( - (item) => - item && - (item.name || notNullArray(item.children as MenuItemType[])) && - !item.hideInMenu, - ) - .map((item) => { - const newItem = { ...item }; - const routerChildren = newItem.children || []; - delete newItem.children; + menuData + .filter( + (item) => + item && + (item.name || notNullArray(item.children as MenuItemType[])) && + !item.hideInMenu, + ) + .map((item) => { + const newItem = { ...item }; + const routerChildren = newItem.children || []; + delete newItem.children; - if ( - notNullArray(routerChildren) && - !newItem.hideInMenu && - routerChildren.some((child) => child && !!child.name) - ) { - const newChildren = defaultFilterMenuData(routerChildren); - if (newChildren.length) - return { - key: item.key, - label: item.name, - name: item.name, - path: item.path, - children: newChildren, - // type: 'group', - } as unknown as MenuItemType; - } - return { - key: newItem.key, - label: newItem.name, - name: item.name, - path: newItem.path, - } as MenuItemType; - }) - .filter((item) => item); + if ( + notNullArray(routerChildren) && + !newItem.hideInMenu && + routerChildren.some((child) => child && !!child.name) + ) { + const newChildren = defaultFilterMenuData(routerChildren); + if (newChildren.length) + return { + key: item.key, + label: item.name, + name: item.name, + path: item.path, + children: newChildren, + // type: 'group', + } as unknown as MenuItemType; + } + return { + key: newItem.key, + label: newItem.name, + name: item.name, + path: newItem.path, + } as MenuItemType; + }) + .filter((item) => item); const LeftMenu: React.FC = (props) => { - const { styles } = useButtonStyle(); - const { pathname, menuData, onClick } = props; + const { styles } = useButtonStyle(); + const { pathname, menuData, onClick } = props; - if (!menuData) { - return null; - } + // 根据提供的 menuData 提供的 tree 结构,获取第一层等级菜单 + // moduleMenu + const moduleMenu = menuData.map((item: MenuDataItem) => { + return { + key: item.key, + label: item.name, + path: item.path, + } as MenuItemType; + }); - // 根据提供的 menuData 提供的 tree 结构,获取第一层等级菜单 - // moduleMenu - const moduleMenu = menuData.map((item: MenuDataItem) => { - return { - key: item.key, - label: item.name, - path: item.path, - } as MenuItemType; - }); + const [openKeys, setOpenKeys] = useState([]); + const [activeMenuKey, setActiveMenuKey] = useState(); + const [subMenuList, setSubMenuList] = useState([]); - // 通过循环 moduleMenu 判断 history.location.pathname 是否包含 key - const activeMenu = getMatchMenu(pathname, menuData, true); - // pluck activeMenu key - const activeMenuKey = activeMenu.map( - (item: MenuDataItem) => item.key as string, - ); - const openKeys = activeMenu.flatMap((item: MenuDataItem) => item.children).map( - (item: any) => item?.key as string, - ); + useEffect(() => { + // 通过循环 moduleMenu 判断 history.location.pathname 是否包含 key + const activeMenu = getMatchMenu(pathname, menuData, true); + const activeMenuKey = activeMenu.map( + (item: MenuDataItem) => item.key as string, + ); - let subMenu: MenuItemType[] = []; - if (activeMenu[0]?.children) { - subMenu = defaultFilterMenuData(activeMenu[0]?.children); - } + setSubMenuList( + activeMenu[0]?.children + ? defaultFilterMenuData(activeMenu[0]?.children) + : [], + ); + setActiveMenuKey(activeMenuKey); + setOpenKeys([...openKeys, ...activeMenuKey]); + }, [pathname]); - return ( - <> -
0 ? '248px' : '100px', - }} - >
- - { - onClick(item); - }} - /> - {subMenu.length > 0 && ( - { - onClick(item); - }} - /> - )} - - - ); + if (!menuData) { + return null; + } + + return ( + <> +
0 ? '248px' : '100px', + }} + >
+ + { + onClick(item as any); + }} + /> + {subMenuList.length > 0 && ( + setOpenKeys(keys)} + mode="inline" + inlineIndent={12} + onClick={(item) => { + onClick(item as any); + }} + /> + )} + + + ); }; export default LeftMenu; diff --git a/packages/app-operation/src/services/business/typings.d.ts b/packages/app-operation/src/services/business/typings.d.ts index 7e6da97..ca13201 100644 --- a/packages/app-operation/src/services/business/typings.d.ts +++ b/packages/app-operation/src/services/business/typings.d.ts @@ -4908,8 +4908,6 @@ declare namespace BusinessAPI { taskName: string; /** 任务类型:1-瓜农付款任务 */ taskType: 'MELON_FARMER'; - /** 付款编码 */ - paymentTaskSn: string; /** 付款任务对象ID */ targetId: string; /** 付款总金额 */