MedicalQualificationMana/src/components/qualificationClassTree/index.tsx

/*
 * @Author: your name
 * @Date: 2022-02-24 15:53:38
 * @LastEditTime: 2022-02-28 10:02:15
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /MedicalQualificationMana/src/components/qualificationClassTree/index.tsx
 */


import react, { useState } from 'react';
import { Input } from 'antd';

import './style.less';


const treeData = [
    {
        title: 'parent 1',
        key: '0-0',
        children: [
            {
                title: 'parent 1-0',
                key: '0-0-0',
                disabled: true,
                children: [
                    {
                        title: 'leaf',
                        key: '0-0-0-0',
                        disableCheckbox: true,
                    },
                    {
                        title: 'leaf',
                        key: '0-0-0-1',
                    },
                ],
            },
            {
                title: 'parent 1-1',
                key: '0-0-1',
                children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
            },
        ],
    },
];


export interface QualificationClassTreePropsType {

}


export interface TreeType {
    [key: string]: any;
    children?: TreeType[]
}


const TreeNode = (data: TreeType, index: number, indent: number) => {

    const [ifShowChild, setifShowChild] = useState(false);

    const parentsNodeClickhandle = (e: react.MouseEvent) => {
        e.preventDefault();
        setifShowChild(!ifShowChild);
    }

    return (

        data.children ? (
            <div className='parents' key={index}>
                <div className={ifShowChild?'parentsNode open':'parentsNode'} style={{ paddingLeft: `${indent * 10}px` }} onClick={(e) => parentsNodeClickhandle(e)}>
                    <div className='parentsTitle'>{data.title}</div>
                </div>


                <div className='childrenWraper' style={{ height: ifShowChild ? '100%' :0}}>
                    {
                        data.children.map((item, i) => (TreeNode(item, i, indent + 1)))
                    }
                </div>

            </div>
        ) : (<div className='child' key={index}>{data.title}</div>)

    )

}


const QualificationClassTree: react.FC<QualificationClassTreePropsType> = () => {

    return (
        <div className='QualificationClassTree'>
            <div className='searchArea'>
                <Input className='inputArea' placeholder="请输入类目名称" /><img className='searchIcon' alt="" />
            </div>
            <div className='treeContainer'>
                {
                    treeData.map((data, index) => {
                        return (
                            TreeNode(data, index, 0)
                        )
                    })
                }
            </div>
        </div>
    )
}


export default QualificationClassTree;