xgd_system/src/layouts/LeftMenuTree/index.tsx

import { FC, useEffect, useRef, useState } from 'react';
import styles from './index.less';
import { history, useLocation, useParams } from 'umi';
import { Menu, Tree } from 'antd';

interface PageProps {
  data: Array<{
    // 菜单名称
    name: string;
    // 是否展开
    check: boolean;
    // 内容是否有目录结构
    isTree?: boolean;
    // 菜单列表 ： name: 名称; url: 路由; img: 图标;
    data: Array<{ name: string; url: string; img: any; }>
  }>;
}

const LeftMenuCom: FC<PageProps> = ({ data }) => {
  const [list, setList] = useState<any>([]);
  const route = useLocation();
  const urlParams = useParams();

  const [selectedKeys, setSelectedKeys] = useState<any>([]);
  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
  const [showContextMenu, setShowContextMenu] = useState(false);
  const treeRef = useRef(null);

  const [menuItems, setMenuItems] = useState<any>([]);

  useEffect(() => {
    menuItemsConfig();

    data.forEach((item, index) => {
      // 默认展开第一个
      // item.check = (index == 0 ? true : false);
      // 默认全部展开
      item.check = true;

      if (item?.isTree) setSelectedKeys([urlParams?.id])
    })
    setList([...data])

    const handleClickOutside = (e: any) => {
      if (treeRef.current && !treeRef.current.contains(e.target)) {
        // 点击了 MyTree 组件以外的地方，隐藏菜单
        setShowContextMenu(false);
      }
    };
    document.addEventListener('click', handleClickOutside);
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, [])

  const menuItemsConfig = () => {
    if (`/registerManage/deviceRegister/${urlParams?.id}` == route?.pathname) {
      setMenuItems([
        {key: '1', label: '删除'},
        {key: '2', label: '刷新'},
      ])
    }else if (`/registerManage/unitLocation/${urlParams?.id}` == route?.pathname) {
      setMenuItems([
        {key: '1', label: '修改'},
        {key: '2', label: '刷新'},
        {key: '3', label: '新建'},
        {key: '4', label: '删除'}
      ])
    }
  }

  const handleRightClick = (e: any, node: any) => {
    if (node?.isFolder) return

    e.preventDefault();
    setContextMenuPosition({ x: e.clientX, y: e.clientY }); // 记录右键菜单位置
    setSelectedKeys([node.key]); // 根据节点设置选中的 keys
    setShowContextMenu(true); // 显示右键菜单
  };

  const handleSelect = (selectedKeys: any, name: any) => {
    if (selectedKeys.length == 0) return;

    setSelectedKeys(selectedKeys);
    switch (name) {
      case '设备注册':
        history.push(`/registerManage/deviceRegister/${selectedKeys[0]}`)
        break;
      case '单位位置管理':
        history.push(`/registerManage/unitLocation/${selectedKeys[0]}`)
        break;
    }
  };

  const handleContextMenuClick = (e: any) => {
    setShowContextMenu(false); // 隐藏右键菜单    
  };

  const treeData = [
    {
      title: 'Parent 1',
      key: '0-1',
      selectable: false,
      isFolder: true,
      children: [
        {
          title: 'Child 1',
          key: '0-1-1',
        },
        {
          title: 'Child 2',
          key: '0-1-2',
        },
      ],
    },
    {
      title: 'Parent 2',
      key: '0-2',
      selectable: false,
      isFolder: true,
      children: [
        {
          title: 'Child 3',
          key: '0-2-1',
        },
        {
          title: 'Child 4',
          key: '0-2-2',
        },
      ],
    },
  ];

  return (
    <div>
      {list.map((item: any, index: number) => {
        return (
          <div key={index}>
            {/* 类型 */}
            <div className={styles.menu_item} onClick={() => {
              list[index].check = !list[index].check;
              setList([...list])
            }}>
              <div>{item.name}</div>
              <div className={styles.triangle} style={{ transform: list[index].check ? 'rotate(90deg)' : '' }}></div>
            </div>

            {/* 列表 */}
            <div className={styles.item_warp} style={{ display: list[index].check ? 'block' : 'none' }}>
              {
                item?.isTree ?
                  // 树结构
                  <div>
                    <Tree
                      style={{ padding: 20 }}
                      onContextMenu={(e) => e.preventDefault()}
                      onRightClick={({ event, node }) => handleRightClick(event, node)}
                      onSelect={(e) => { handleSelect(e, item.name) }}
                      selectedKeys={selectedKeys}
                      treeData={treeData}
                      blockNode={true}
                      defaultExpandAll={true}
                    />
                    {showContextMenu && (
                      <div ref={treeRef}>
                        <Menu
                          style={{
                            zIndex: 99,
                            width: 111,
                            position: 'absolute',
                            left: contextMenuPosition.x,
                            top: contextMenuPosition.y,
                            boxShadow: '0px 4px 8px 0px rgba(156, 172, 180, 0.5)'
                          }}
                          mode="vertical"
                          onClick={handleContextMenuClick}
                          items={menuItems}
                        />
                      </div>
                    )}
                  </div> :
                  // 列表item
                  item.data.map((item1: any, index1: number) => {
                    return (
                      <div className={styles.item1} key={index1} onClick={() => {
                        setSelectedKeys([])
                        history.push(item1.url)
                      }}>
                        <div className={styles.item1_img}></div>
                        <div className={styles.item1_name} style={{ color: (route.pathname == item1.url ? 'red' : '') }}>
                          {item1.name}
                        </div>
                      </div>
                    )
                  })
              }
            </div>
          </div>
        )
      })}
    </div >
  )
}

export default LeftMenuCom