|  |  | 
 |  |  | 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; |