org-chart-frant/src/components/dialog/copyDialog.jsx

import { Form, Input, Modal, TreeSelect, message } from 'antd';
import React, { useState, useEffect } from 'react';
import * as d3 from 'd3';
import './index.less';

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const CopyDialog = ({ open, onCreate, onCancel }) => {
  const [form] = Form.useForm();

  const [treeData, setData] = useState([]);
  console.log(treeData);
  useEffect(() => {
    d3.json('/api/bs/hrmorganization/orgchart/getSubCompanyTree').then(
      (data) => {
        setData(data.companyTree);
      },
    );
  }, [true]);

  /**
   * 根节点树异步加载
   * @param {} parentId
   * @returns
   */
  const onRootLoadData = (treeNode) =>
    new Promise((resolve) => {
      const { id } = treeNode.props;
      setTimeout(() => {
        d3.json(
          `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`,
        ).then((data) => {
          debugger;
          let arr = [...treeData, ...data.companyTree];
          setData(arr);
        });
        resolve(undefined);
      }, 200);
    });

  return (
    <Modal
      open={open}
      title="部门复制"
      okText="确认"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form {...layout} form={form} name="form_in_modal">
        <Form.Item
          name="department"
          label="合并到部门"
          rules={[
            {
              required: true,
              message: '【合并到部门】为必填项!',
            },
          ]}
        >
          <TreeSelect
            treeDataSimpleMode
            allowClear
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            loadData={onRootLoadData}
            treeData={treeData}
          />
        </Form.Item>

        <Form.Item
          name="mergeName"
          label="合并后名称"
          rules={[
            {
              required: true,
              message: '【合并后的名称】为必填项!',
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default CopyDialog;