|  |  |  | 
|---|
|  |  |  | 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 [defaultIds, setDefaultIds] = useState(['29']); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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)); | 
|---|
|  |  |  | let items = haveChildren(data) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | setTreeData(items) | 
|---|
|  |  |  | setDefaultIds([items.at(0).id]) | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } 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} />; | 
|---|
|  |  |  | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Card | 
|---|
|  |  |  | 
|---|
|  |  |  | <SavedQueriesList icon={<BookmarkIcon />} /> | 
|---|
|  |  |  | <FilterLiveSearch source="condition" /> | 
|---|
|  |  |  | <RichTreeView | 
|---|
|  |  |  | // 使用 expandedItems 控制展开状态 | 
|---|
|  |  |  | expandedItems={expandedItems} | 
|---|
|  |  |  | // 处理展开项状态的变化 | 
|---|
|  |  |  | onExpandedItemsChange={(newExpandedItems) => setExpandedItems(newExpandedItems)} | 
|---|
|  |  |  | defaultExpandedItems={defaultIds} | 
|---|
|  |  |  | expansionTrigger="iconContainer" | 
|---|
|  |  |  | items={treeData} | 
|---|
|  |  |  | slots={CustomTreeItem} | 
|---|
|  |  |  | onItemClick={handleNodeSelect} // 监听节点点击事件 | 
|---|
|  |  |  | /> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </CardContent> | 
|---|
|  |  |  | </Card> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default MatListAside; | 
|---|
|  |  |  | export default MatListAside; | 
|---|