TreeSelector.jsx

import React,{useState} from 'react';
import { connect } from 'umi';
import { TreeSelect } from 'antd'

const TreeSelector = (props) => {
    const { treeData, onChange , value , setChargePeople , disabled} = props
    console.log(props)
    let allUser = []
    const initTreeData = (tree) => {
        if (!tree || tree?.length === 0) return;
        return tree && tree.length && tree.map(item => {
            const users = item?.userList || []
            let children = initTreeData(item.subList);
            if (users.length > 0) {
                const userList = users.map(user => ({
                    title: user.name,
                    key: user.id,
                    id: user.id,
                    avatarUrl: user.avatarUrl,
                    selectable: true
                }))
                children = children?.length > 0 ? children.concat(userList) : userList
                allUser = allUser.concat(item.userList)
            }
            return {
                title: item.name,
                key: `user-${item.id}`,
                id: item.id,
                children,
                disabled: true
            }
        })
    }
    const treeDataList = initTreeData(treeData)
    const onSelect = (value, node, extra) => {
        console.log(value, node, extra)
        onChange(node.id)
        if(setChargePeople){
            setChargePeople({
                id: node.id,
                name: node.title
            })
        }
    }
    const changeAction = (value) => {
        onChange(value)
    }

    return <TreeSelect
        value={value}
        style={{ width: '100%' }}
        allowClear
        placeholder="请选择"
        treeData={treeDataList}
        onSelect={onSelect}
        onChange={changeAction}
        disabled={disabled || false}
    />
}

export default connect(({ user,commonDevice, loading }) => ({
    user,commonDevice,
    loading:loading.models.commonDevice || loading.models.user
}))(TreeSelector)