master_basic
鲁誉程 2 years ago
parent 2cbf8c49b9
commit 4ecb424bb5

@ -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 >
)
}

@ -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 {

@ -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}`}>

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

Loading…
Cancel
Save