前端项目实战叁佰肆拾壹react-admin和material ui-rc-tree demo

最新推荐文章于 2024-08-21 14:09:37 发布

前端歌谣

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量36

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/132215917

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

import { Paper } from '@mui/material';
import Tree from 'rc-tree';
import 'rc-tree/assets/index.css';
import React, { Key, useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
import UseGetTree from '../../components/usegettree/usegettree';

const PlantModel = () => {

    return(
        <div style = {{display: 'flex', flexDirection: 'row', width: '100%'}}>
            <div style = {{width: '200px', marginRight: '10px'}}>
                <PlantTree />
            </div>
            <div>
                <Outlet/>
            </div>
            
        </div>
    )
}

interface ITreeData extends Record<string, any> {
    key: string;
    title: string;
    children?: ITreeData[];
}

const PlantTree = () => {
    const [treeData, setTreeData] = useState<ITreeData[]>([]);
    const [keys, setKeys] = useState<Key[]>([]);

    const {data} = UseGetTree('t_lps_plant', 't_lps_line');

    useEffect(() => {
        if(data !== undefined) {
            console.log('raw data is: ', data);
            let temp: ITreeData[] = [{key: '0', title: '工厂管理', children: new Array<ITreeData>()}];

            //向从数据库查询到的数据中添加Tree结构所需要的字段，key使用id，title使用name;
            data.forEach(it => {
                it['key'] = `${it.id}`;
                it['title'] = it.name;
                it.children && it.children.forEach((item: any)=>{
                    item['key'] = `${it.id}-${item.id}`;
                    item['title'] = item.name
                })
            });

            temp[0].children = data;
            setTreeData(temp);
        }
    }, [data]);

    const handleTreeItemSelect = (keys: Key[]) => {
        setKeys(keys);
        const key = keys[0];

        if(key === '0') {
        }
    }


    return(
        <Paper sx = {{height: '100vh'}}>
            <Tree
                treeData={treeData}
                selectable = {true}
                selectedKeys={keys}
                onSelect={handleTreeItemSelect}

            />
        </Paper>
    )
}
export default PlantModel;