import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
|
import request from '@/utils/request';
|
import {
|
SavedQueriesList,
|
FilterLiveSearch,
|
useNotify,
|
useListContext
|
} from 'react-admin';
|
import BookmarkIcon from '@mui/icons-material/BookmarkBorder';
|
import { Box, Typography, Card, CardContent, useTheme, TextField } from '@mui/material';
|
import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
|
import { TreeItem2 } from "@mui/x-tree-view/TreeItem2";
|
|
const MatListAside = () => {
|
const theme = useTheme();
|
const notify = useNotify();
|
const { setFilters } = useListContext(); // 获取列表上下文
|
const [selectedOption, setSelectedOption] = useState(null);
|
const [treeData, setTreeData] = useState([]);
|
// 用于管理展开项的状态
|
const [expandedItems, setExpandedItems] = useState([]);
|
|
// 递归收集所有节点的 id
|
const collectAllNodeIds = (nodes) => {
|
let allIds = [];
|
nodes.forEach((node) => {
|
allIds.push(node.id.toString());
|
if (node.children && Array.isArray(node.children)) {
|
allIds = allIds.concat(collectAllNodeIds(node.children));
|
}
|
});
|
return allIds;
|
};
|
|
const haveChildren = (item) => {
|
// 如果 item 是一个数组，遍历数组中的每个元素
|
if (Array.isArray(item)) {
|
return item.map((k) => haveChildren(k));
|
}
|
|
// 如果 item 是一个对象
|
if (item && typeof item === 'object') {
|
// 将 id 转换为字符串
|
if (item.id !== undefined) {
|
item.id = item.id.toString();
|
}
|
|
// 如果存在 children，递归处理 children
|
if (item.children && Array.isArray(item.children)) {
|
item.children = haveChildren(item.children);
|
}
|
}
|
|
return item;
|
};
|
|
useEffect(() => {
|
request.post('/matnrGroup/tree')
|
.then(res => {
|
if (res?.data?.code === 200) {
|
let data = res.data.data;
|
let items = haveChildren(data);
|
setTreeData(items);
|
// 当树数据更新时，更新展开项状态
|
setExpandedItems(collectAllNodeIds(items));
|
} else {
|
notify(res.data.msg);
|
}
|
})
|
.catch(error => {
|
notify('Error fetching tree data');
|
});
|
}, []);
|
|
const treeData1 = [
|
{
|
id: '19',
|
label: '半成品 ',
|
editable: true,
|
children: [
|
{
|
id: 'grid-community',
|
label: '@mui/x-data-grid',
|
editable: true,
|
children: [
|
{ id: 'grid-community22', label: '@mui/x-data-grid', editable: true },
|
],
|
},
|
{ id: 'grid-pro', label: '@mui/x-data-grid-pro', editable: true },
|
{ id: 'grid-premium', label: '@mui/x-data-grid-premium', editable: true },
|
],
|
},
|
{
|
id: '18',
|
label: '原材料',
|
},
|
{
|
id: 'charts',
|
label: 'Charts',
|
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
|
},
|
{
|
id: 'tree-view',
|
label: 'Tree View',
|
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
|
},
|
{
|
id: 'tree-view2',
|
label: 'Tree View3',
|
children: [{ id: 'tree-view-community1', label: '@mui/x-tree-view' }],
|
},
|
];
|
|
const handleNodeSelect = (event, nodeId) => {
|
console.log('Selected Node ID:', nodeId);
|
setFilters({ groupId: nodeId });
|
// 在这里可以根据 nodeId 更新主内容区域
|
};
|
|
const handleSearch = () => {
|
console.log('Search Input:', selectedOption);
|
};
|
|
const CustomCheckbox = React.forwardRef(function CustomCheckbox(props, ref) {
|
return <input type="checkbox" ref={ref} {...props} />;
|
});
|
|
const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
|
return (
|
<TreeItem2
|
{...props}
|
ref={ref}
|
slots={{
|
checkbox: CustomCheckbox,
|
}}
|
/>
|
);
|
});
|
|
return (
|
<Card
|
sx={{
|
order: -1,
|
mr: 2,
|
mt: 8,
|
alignSelf: 'flex-start',
|
border: theme.palette.mode === 'light' && '1px solid #e0e0e3',
|
width: 250,
|
minWidth: 150,
|
height: `calc(100% - 120px)`,
|
}}
|
>
|
<CardContent>
|
<SavedQueriesList icon={<BookmarkIcon />} />
|
<FilterLiveSearch source="condition" />
|
<RichTreeView
|
// 使用 expandedItems 控制展开状态
|
expandedItems={expandedItems}
|
// 处理展开项状态的变化
|
onExpandedItemsChange={(newExpandedItems) => setExpandedItems(newExpandedItems)}
|
expansionTrigger="iconContainer"
|
items={treeData}
|
slots={CustomTreeItem}
|
onItemClick={handleNodeSelect} // 监听节点点击事件
|
/>
|
</CardContent>
|
</Card>
|
);
|
};
|
|
export default MatListAside;
|
