machinery-admin/src/pages/Machinery/Person/components/OrgTree.jsx

import React, { useState, useEffect } from 'react';
import {
  Card,
  Tree,
} from 'antd';
import { getCooperativeList } from '@/services/cooperative';

export default (props) => {
  const { setOrgId, setCooperativeList } = props
  const [data, setData] = useState([]);

  // 动态生成树
  const handelNode = (item) => {
    let node = (
      <div
        key={item.orgId}
        style={{
          justifyContent: 'space-between',
          display: 'flex',
          padding: '8px 0',
        }}
      >
        <span>{item.title}</span>
      </div>
    );
    return node;
  };
  const onSelect = (checkedKeys, info) => {
    if (info.selected) {
      setOrgId(info.node.key);
    } else {
      setOrgId();
    }
  };
  useEffect(() => {
    getCooperativeList({ pageSize: 500 })
      .then((res) => {
        setCooperativeList(res.records);
        const list = res.records?.map((item) => {
          return { title: item.name, key: item.orgId };
        });
        setData(list);
      })
      .catch((err) => {
        console.log(err.message);
      });
  }, [])
  return (
    <Card title="合作社列表">
      <Tree
        onSelect={onSelect}
        className="treeClass"
        titleRender={(data) => handelNode(data)}
        treeData={data}
      />
    </Card>
  )
}