|  |  |  | 
|---|
|  |  |  | SavedQueriesList, | 
|---|
|  |  |  | FilterLiveSearch, | 
|---|
|  |  |  | useNotify, | 
|---|
|  |  |  | FilterList, | 
|---|
|  |  |  | FilterListItem, | 
|---|
|  |  |  | useStore, | 
|---|
|  |  |  | FilterFormInput, | 
|---|
|  |  |  | FilterLiveForm, | 
|---|
|  |  |  | TextInput, | 
|---|
|  |  |  | useGetList, | 
|---|
|  |  |  | useListContext | 
|---|
|  |  |  | useListContext, | 
|---|
|  |  |  | SearchInput | 
|---|
|  |  |  | } from 'react-admin'; | 
|---|
|  |  |  | import BookmarkIcon from '@mui/icons-material/BookmarkBorder'; | 
|---|
|  |  |  | import { Box, Typography, Card, CardContent, useTheme, TextField } from '@mui/material'; | 
|---|
|  |  |  | import { Box, Typography, Card, CardContent, useTheme, Input } from '@mui/material'; | 
|---|
|  |  |  | import { RichTreeView } from "@mui/x-tree-view/RichTreeView"; | 
|---|
|  |  |  | import { TreeItem2 } from "@mui/x-tree-view/TreeItem2"; | 
|---|
|  |  |  | import WcIcon from '@mui/icons-material/Wc'; | 
|---|
|  |  |  | import AccessTimeIcon from '@mui/icons-material/AccessTime'; | 
|---|
|  |  |  | import { useForm, Controller } from "react-hook-form"; | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const MatListAside = () => { | 
|---|
|  |  |  | const theme = useTheme(); | 
|---|
|  |  |  | 
|---|
|  |  |  | const { setFilters } = useListContext(); // 获取列表上下文 | 
|---|
|  |  |  | const [selectedOption, setSelectedOption] = useState(null); | 
|---|
|  |  |  | const [treeData, setTreeData] = useState([]); | 
|---|
|  |  |  | const [defaultIds, setDefaultIds] = useState(['65']); | 
|---|
|  |  |  | const [condition, setCondition] = useState(''); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const haveChildren = (item) => { | 
|---|
|  |  |  | if (Array.isArray(item)) { | 
|---|
|  |  |  | return item.map((k) => haveChildren(k)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (item && typeof item === 'object') { | 
|---|
|  |  |  | if (item.id !== undefined) { | 
|---|
|  |  |  | item.id = item.id.toString(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (item.children && Array.isArray(item.children)) { | 
|---|
|  |  |  | item.children = haveChildren(item.children); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return item; | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | request.post('/matnrGroup/tree') | 
|---|
|  |  |  | http() | 
|---|
|  |  |  | }, [condition]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const http = () => { | 
|---|
|  |  |  | request.post('/matnrGroup/tree', { condition }) | 
|---|
|  |  |  | .then(res => { | 
|---|
|  |  |  | console.log('Tree Data:', res); | 
|---|
|  |  |  | if (res?.data?.code === 200) { | 
|---|
|  |  |  | setTreeData(res.data.data); | 
|---|
|  |  |  | let data = res.data.data; | 
|---|
|  |  |  | 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 handleSearch = (e) => { | 
|---|
|  |  |  | setCondition(e.target.value) | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | 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: `100%`, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <CardContent> | 
|---|
|  |  |  | <SavedQueriesList icon={<BookmarkIcon />} /> | 
|---|
|  |  |  | <FilterLiveSearch source="condition"  /> | 
|---|
|  |  |  | <RichTreeView | 
|---|
|  |  |  | defaultExpandedItems={['grid', 'pickers']} | 
|---|
|  |  |  | expansionTrigger="iconContainer" | 
|---|
|  |  |  | items={ treeData } | 
|---|
|  |  |  | slots={ CustomTreeItem } | 
|---|
|  |  |  | onItemClick={handleNodeSelect} // 监听节点点击事件 | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Input | 
|---|
|  |  |  | placeholder="搜索物料分组" | 
|---|
|  |  |  | sx={{ '--Input-focused': 1, marginBottom: '10px' }} | 
|---|
|  |  |  | onChange={handleSearch} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <RichTreeView | 
|---|
|  |  |  | defaultExpandedItems={defaultIds} | 
|---|
|  |  |  | expansionTrigger="iconContainer" | 
|---|
|  |  |  | items={treeData} | 
|---|
|  |  |  | slots={CustomTreeItem} | 
|---|
|  |  |  | onItemClick={handleNodeSelect} // 监听节点点击事件 | 
|---|
|  |  |  | /> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </CardContent> | 
|---|
|  |  |  | </Card> | 
|---|
|  |  |  | ) | 
|---|