|  |  | 
 |  |  |     const { setFilters } = useListContext(); // 获取列表上下文 | 
 |  |  |     const [selectedOption, setSelectedOption] = useState(null); | 
 |  |  |     const [treeData, setTreeData] = useState([]); | 
 |  |  |     const trees = [] | 
 |  |  |     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); | 
 |  |  |             } | 
 |  |  | 
 |  |  |                 if (res?.data?.code === 200) { | 
 |  |  |                     let data = res.data.data; | 
 |  |  |                     let items = haveChildren(data) | 
 |  |  |  | 
 |  |  |                     setTreeData(items) | 
 |  |  |                     setDefaultIds([items.at(0).id]) | 
 |  |  |  | 
 |  |  |  | 
 |  |  |                 } else { | 
 |  |  |                     notify(res.data.msg); | 
 |  |  |                 } | 
 |  |  | 
 |  |  |                 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); | 
 |  |  | 
 |  |  |     return ( | 
 |  |  |         <Card | 
 |  |  |             sx={{ | 
 |  |  |                 display: { xs: 'none', md: 'block', }, | 
 |  |  |                 order: -1, | 
 |  |  |                 mr: 2, | 
 |  |  |                 mt: 8, | 
 |  |  |                 alignSelf: 'flex-start', | 
 |  |  |                 border: theme.palette.mode === 'light' && '1px solid #e0e0e3', | 
 |  |  |                 width: 250 | 
 |  |  |                 width: 250, | 
 |  |  |                 minWidth: 150, | 
 |  |  |                 height: `calc(100% - 120px)`, | 
 |  |  |             }} | 
 |  |  |         > | 
 |  |  |             <CardContent> | 
 |  |  |                 <SavedQueriesList icon={<BookmarkIcon />} /> | 
 |  |  |                 <FilterLiveSearch source="condition" /> | 
 |  |  |                 <RichTreeView | 
 |  |  |                     defaultExpandedItems={['grid', 'pickers']} | 
 |  |  |                     defaultExpandedItems={defaultIds} | 
 |  |  |                     expansionTrigger="iconContainer" | 
 |  |  |                     items={treeData} | 
 |  |  |                     slots={CustomTreeItem} | 
 |  |  |                     onItemClick={handleNodeSelect} // 监听节点点击事件 | 
 |  |  |  | 
 |  |  |                 /> | 
 |  |  |  | 
 |  |  |             </CardContent> | 
 |  |  |         </Card> | 
 |  |  |     ) |