更新

src/layouts/LeftMenuOne/index.tsx

@@ -1,6 +1,7 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import styles from './index.less';
-import {history, useLocation, useParams} from 'umi';
+import { history, useLocation, useParams } from 'umi';
+import { Menu, Tree } from 'antd';
 
 interface PageProps {
   data: Array<{
@@ -8,26 +9,104 @@ interface PageProps {
     name: string;
     // 是否展开
     check: boolean;
+    // 内容是否有目录结构
+    isTree?: boolean;
     // 菜单列表 ： name: 名称; url: 路由; img: 图标;
-    data: Array<{name: string; url: string; img: any;}>
+    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([]);
+  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+  const [showContextMenu, setShowContextMenu] = useState(false);
+  const treeRef = useRef(null);
 
   useEffect(() => {
-    data.forEach((item,index) => {
+    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 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) => {
+    setSelectedKeys(selectedKeys);
+    history.push(`/registerManage/deviceRegister/${selectedKeys[0]}`)
+  };
+
+  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',
+        },
+      ],
+    },
+  ];
+
+  const menuItems = [
+    { key: '1', label: '删除' },
+    { key: '2', label: '刷新' }
+  ];
+
   return (
     <div>
       {list.map((item: any, index: number) => {
@@ -44,22 +123,57 @@ const LeftMenuCom: FC<PageProps> = ({ data }) => {
             {/* 列表 */}
             <div className={styles.item_warp} style={{ display: list[index].check ? 'block' : 'none' }}>
               {
-                item.data.map((item1: any, index1: number) => {
-                  return (
-                    <div className={styles.item1} key={index1}  onClick={() => history.push(item1.url) }>
-                      <div className={styles.item1_img}></div>
-                      <div className={styles.item1_name} style={{color: (route.pathname == item1.url ? 'red' : '')}}>
-                        {item1.name}
+                item?.isTree ?
+                  // 树结构
+                  <div>
+                    <Tree
+                      style={{ padding: 20 }}
+                      onContextMenu={(e) => e.preventDefault()}
+                      onRightClick={({ event, node }) => handleRightClick(event, node)}
+                      onSelect={handleSelect}
+                      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>
         )
       })}
-    </div>
+    </div >
   )
 }
 

src/layouts/index.tsx

@@ -59,6 +59,41 @@ export default function Layout() {
   const [active, setActive] = useState<number>(1);
   const [activeName, setActiveName] = useState<any>('GLQ远程维护');
 
+  const [treeData, setTreeData] = useState<any>([
+    {
+      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',
+        },
+      ],
+    },
+  ]);
+
   // 获取布局信息
   let layoutInfo: any = localStorage.getItem('layoutInfo');
   layoutInfo = JSON.parse(layoutInfo);
@@ -90,6 +125,17 @@ export default function Layout() {
     if (tabList.length > 0 && !layoutInfo) {
       setActiveName(tabList[0].name)
       let info = MenuType[tabList[0].name];
+
+      if (info[0].name == '设备注册') {
+        for(let i=0; i<treeData.length; i++) {
+          if (treeData[i].children.length > 0) {
+            history.push(`/registerManage/deviceRegister/${treeData[i].children[0].key}`) 
+            break;
+          }
+        }
+        return
+      }
+
       if (info[0].data) {
         history.push(`${info[0].data[0].url}`)
       } else {

src/pages/Register/RegisterManage/DeviceRegister/index.tsx

@@ -1,12 +1,18 @@
 import TabsComp from '@/components/TabsComp';
 import styles from '../../../GLQ/index.less';
 import styles1 from './index.less';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import DeviceTab from './DeviceTab';
 import AdminsTab from './AdminsTab';
+import { useParams } from 'umi';
 
 export default function Page() {
   const [activeTab, setActiveTab] = useState(1)
+  const urlParams = useParams();
+  
+  useEffect(() => {
+    setActiveTab(1)
+  }, [urlParams?.id])
 
   return (
     <div className={`${styles.params_warp} ${styles.params_warp}`}>

src/utils/menu.ts

@@ -211,9 +211,8 @@ export const MenuType: any = {
     { 
       name: '设备注册', 
       check: true, 
-      data: [
-        { name: '树', url: '/registerManage/deviceRegister/1', img: '' },
-      ] 
+      isTree: true,
+      data: [] 
     },
     {
       name: '注册信息管理',