skyouc
2025-03-18 031e36213941ad3430da2b0429701e742f09f5d8
rsf-admin/src/page/basicInfo/matnr/MatnrListAside.jsx
@@ -11,14 +11,27 @@
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)) {
@@ -40,19 +53,16 @@
        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);
                }
@@ -60,12 +70,7 @@
            .catch(error => {
                notify('Error fetching tree data');
            });
    }, []);
    const treeData1 = [
        {
@@ -74,8 +79,12 @@
            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 },
@@ -101,15 +110,16 @@
            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} />;
@@ -127,33 +137,35 @@
        );
    });
    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;