diff --git a/src/layouts/LeftMenuOne/index.tsx b/src/layouts/LeftMenuOne/index.tsx index 58b32d0..43d1ce6 100644 --- a/src/layouts/LeftMenuOne/index.tsx +++ b/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 = ({ data }) => { - const [list, setList] = useState([]); 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 (
{list.map((item: any, index: number) => { @@ -44,22 +123,57 @@ const LeftMenuCom: FC = ({ data }) => { {/* 列表 */}
{ - item.data.map((item1: any, index1: number) => { - return ( -
history.push(item1.url) }> -
-
- {item1.name} + item?.isTree ? + // 树结构 +
+ e.preventDefault()} + onRightClick={({ event, node }) => handleRightClick(event, node)} + onSelect={handleSelect} + selectedKeys={selectedKeys} + treeData={treeData} + blockNode={true} + defaultExpandAll={true} + /> + {showContextMenu && ( +
+ +
+ )} +
: + // 列表item + item.data.map((item1: any, index1: number) => { + return ( +
{ + setSelectedKeys([]) + history.push(item1.url) + }}> +
+
+ {item1.name} +
-
- ) - }) + ) + }) }
) })} -
+ ) } diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 79699a8..1f5ab70 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -59,6 +59,41 @@ export default function Layout() { const [active, setActive] = useState(1); const [activeName, setActiveName] = useState('GLQ远程维护'); + const [treeData, setTreeData] = useState([ + { + 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 0) { + history.push(`/registerManage/deviceRegister/${treeData[i].children[0].key}`) + break; + } + } + return + } + if (info[0].data) { history.push(`${info[0].data[0].url}`) } else { diff --git a/src/pages/Register/RegisterManage/DeviceRegister/index.tsx b/src/pages/Register/RegisterManage/DeviceRegister/index.tsx index e5635cd..c15f229 100644 --- a/src/pages/Register/RegisterManage/DeviceRegister/index.tsx +++ b/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 (
diff --git a/src/utils/menu.ts b/src/utils/menu.ts index 60fe261..e274189 100644 --- a/src/utils/menu.ts +++ b/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: '注册信息管理',