refactor(left-menu): 重构左侧菜单组件状态管理

- 添加 useState 和 useEffect 钩子管理菜单状态
- 将菜单展开状态和激活菜单项改为状态变量
- 实现动态子菜单列表管理功能
- 修复菜单项点击事件类型转换问题
- 优化菜单展开状态更新逻辑
- 删除过时的付款编码字段定义

packages/app-operation/src/components/LeftMenu/index.tsx

@@ -2,7 +2,7 @@ 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 React, { useEffect, useState } from 'react';
 import useButtonStyle from './style.style';
 
 interface ILeftMenuProps {
@@ -59,10 +59,6 @@ const LeftMenu: React.FC<ILeftMenuProps> = (props) => {
 	const { styles } = useButtonStyle();
 	const { pathname, menuData, onClick } = props;
 
-  if (!menuData) {
-    return null;
-  }
-
 	// 根据提供的 menuData 提供的 tree 结构，获取第一层等级菜单
 	// moduleMenu
 	const moduleMenu = menuData.map((item: MenuDataItem) => {
@@ -73,19 +69,28 @@ const LeftMenu: React.FC<ILeftMenuProps> = (props) => {
 		} as MenuItemType;
 	});
 
+	const [openKeys, setOpenKeys] = useState<string[]>([]);
+	const [activeMenuKey, setActiveMenuKey] = useState<string[]>();
+	const [subMenuList, setSubMenuList] = useState<MenuItemType[]>([]);
+
+	useEffect(() => {
 		// 通过循环 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,
-  );
 
-  let subMenu: MenuItemType[] = [];
+		setSubMenuList(
-  if (activeMenu[0]?.children) {
+			activeMenu[0]?.children
-    subMenu = defaultFilterMenuData(activeMenu[0]?.children);
+				? defaultFilterMenuData(activeMenu[0]?.children)
+				: [],
+		);
+		setActiveMenuKey(activeMenuKey);
+		setOpenKeys([...openKeys, ...activeMenuKey]);
+	}, [pathname]);
+
+	if (!menuData) {
+		return null;
 	}
 
 	return (
@@ -94,7 +99,7 @@ const LeftMenu: React.FC<ILeftMenuProps> = (props) => {
 				className={styles.box}
 				style={{
 					// @ts-ignore
-          '--box-with': subMenu.length > 0 ? '248px' : '100px',
+					'--box-with': subMenuList.length > 0 ? '248px' : '100px',
 				}}
 			></div>
 			<Layout.Sider
@@ -109,19 +114,20 @@ const LeftMenu: React.FC<ILeftMenuProps> = (props) => {
 					selectedKeys={activeMenuKey}
 					theme={'dark'}
 					onClick={(item) => {
-            onClick(item);
+						onClick(item as any);
 					}}
 				/>
-        {subMenu.length > 0 && (
+				{subMenuList.length > 0 && (
 					<Menu
-            items={subMenu}
+						items={subMenuList}
 						className={styles.subMenu}
 						selectedKeys={activeMenuKey}
 						openKeys={openKeys}
+						onOpenChange={(keys) => setOpenKeys(keys)}
 						mode="inline"
 						inlineIndent={12}
 						onClick={(item) => {
-              onClick(item);
+							onClick(item as any);
 						}}
 					/>
 				)}

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;
 		/** 付款总金额 */