| | |
| | | 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 trees = [] |
| | | // 用于管理展开项的状态 |
| | | 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; |
| | | }; |
| | | |
| | | useEffect(() => { |
| | | request.post('/matnrGroup/tree') |
| | | .then(res => { |
| | | console.log('Tree Data:', res); |
| | | if (res?.data?.code === 200) { |
| | | let data = res.data.data; |
| | | // for (let k of data) { |
| | | // k.id = k.id.toString(); |
| | | |
| | | // } |
| | | let items = haveChildren(data) |
| | | setTreeData(items) |
| | | console.log('Tree Data:', items); |
| | | let items = haveChildren(data); |
| | | setTreeData(items); |
| | | // 当树数据更新时,更新展开项状态 |
| | | setExpandedItems(collectAllNodeIds(items)); |
| | | } else { |
| | | notify(res.data.msg); |
| | | } |
| | |
| | | .catch(error => { |
| | | notify('Error fetching tree data'); |
| | | }); |
| | | |
| | | |
| | | |
| | | }, []); |
| | | |
| | | |
| | | |
| | | const treeData1 = [ |
| | | { |
| | |
| | | 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-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 }, |
| | |
| | | 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 |
| | | 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']} |
| | | // 使用 expandedItems 控制展开状态 |
| | | expandedItems={expandedItems} |
| | | // 处理展开项状态的变化 |
| | | onExpandedItemsChange={(newExpandedItems) => setExpandedItems(newExpandedItems)} |
| | | expansionTrigger="iconContainer" |
| | | items={treeData} |
| | | slots={CustomTreeItem} |
| | | onItemClick={handleNodeSelect} // 监听节点点击事件 |
| | | |
| | | /> |
| | | </CardContent> |
| | | </Card> |
| | | ) |
| | | } |
| | | ); |
| | | }; |
| | | |
| | | export default MatListAside; |
| | | export default MatListAside; |