BigScreen/src/components/FloodControl/PersonManagement.jsx

import { Component } from "react";
import { Collapse } from "antd";
import { CustomCollapse, PersonCon } from "./style";
const { Panel } = Collapse;

const PersonManagement = () => {
  const data = [
    {
      name: "管理中心",
      children: [
        {
          name: "官网中心",
          children: [
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
          ],
        },
        {
          name: "官网中心2",
          children: [
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
            {
              name: "李某某",
              phone: "132999900900",
              state: "在线",
            },
          ],
        },
      ],
    },
    {
      name: "泵站运维",
      children: [
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
      ],
    },
    {
      name: "官网运维",
      children: [
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
        {
          name: "李某某",
          phone: "132999900900",
          state: "在线",
        },
      ],
    },
  ];
  const CollapseRender = (data) => {
    return data.map((item, idx) => {
      if (item.children?.length > 0) {
        return (
          <CustomCollapse defaultActiveKey={[`${item.name}_${idx}`]}>
            <Panel key={`${item.name}_${idx}`} header={item.name}>
              {CollapseRender(item.children)}
            </Panel>
          </CustomCollapse>
        );
      } else {
        return (
          <div
            style={{
              color: "#fff",
              padding: "0 26px",
              display: "flex",
              justifyContent: "space-around",
            }}
          >
            <div>{item.name}</div>
            <div>{item.phone}</div>
            <div>{item.state}</div>
          </div>
        );
      }
    });
  };

  return <PersonCon>{CollapseRender(data)}</PersonCon>;
};

export default PersonManagement;