ServiceModal.tsx

import React, { FC, useState } from 'react';
import { Modal, Form, Select, Tree, Input, Button } from 'antd';

const { Item } = Form;
const { Option } = Select;

const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
      {
        title: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' },
    ],
  },
  {
    title: '0-2',
    key: '0-2',
  },
];

interface ServiceProp {
  modalVisible: boolean
  onCreate: (values: any) => void
  onCancel: () => void
}

const ServiceModal: FC<ServiceProp> = ({ modalVisible, onCreate, onCancel }) => {
  const [expandedKeys, setExpandedKeys] = useState<string[]>(['0-0-0', '0-0-1']);
  const [checkedKeys, setCheckedKeys] = useState<string[]>(['0-0-0']);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);

  const onExpand = (expandedKeys: any) => {
    console.log('onExpand', expandedKeys);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeys: any) => {
    console.log('onCheck', checkedKeys);
    setCheckedKeys(checkedKeys);
  };

  const onSelect = (selectedKeys: any, info: any) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeys);
  };

  const onChange = (value: string) => console.log(`selected ${value}`)
  const onBlur = () => console.log(`onBlur`)
  const onFocus = () => console.log(`onFocus`)
  const onSearch = (value: string) => console.log(`search ${value}`)

  const [form] = Form.useForm()
  const onFinish = async () => {
    try {
      const validateRes = await form.validateFields()
      console.log('onFinish::', validateRes)
      if (validateRes.errorFields) return
      onCreate(validateRes)
      form.resetFields()
    } catch (error) {
      console.log(error)
    }
  }

  const onClose = () => {
    form.resetFields()
    onCancel()
  }

  return (
    <Modal
      title="创建应用"
      visible={modalVisible}
      destroyOnClose={true}
      onOk={onFinish}
      onCancel={onClose}
      footer={[
        <Button type="primary" key="submit" onClick={ onFinish }>
          确定
        </Button>,
      ]}
    >
      <Form
        name="systemForm"
        form={form}
        initialValues={{
          name: '',
          description: ''
        }}
      >
        <Item
          label="系统名称"
          name="name"
          rules={[{ required: true, message: 'Please select system' }]}
        >
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="Select a person"
            optionFilterProp="children"
            onChange={onChange}
            onFocus={onFocus}
            onBlur={onBlur}
            onSearch={onSearch}
            filterOption={(input, option: any) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="tom">Tom</Option>
          </Select>
        </Item>
        <Item
          label="应用名称"
          name="name"
          rules={[{ required: true, message: 'Please input app name' }]}
        >
          <Input />
        </Item>
        <Item
          label="应用菜单"
          name="appMenu"
          rules={[{ required: true, message: 'Please check menu' }]}
        >
          <Tree
            checkable
            onExpand={onExpand}
            expandedKeys={expandedKeys}
            autoExpandParent={autoExpandParent}
            onCheck={onCheck}
            checkedKeys={checkedKeys}
            onSelect={onSelect}
            selectedKeys={selectedKeys}
            treeData={treeData}
          />
        </Item>
      </Form>
    </Modal>
  )
}

export default ServiceModal;