AddConfig.jsx

import React, {useEffect, useState} from 'react';
import { connect } from 'umi';
import {MinusCircleOutlined, PlusOutlined} from '@ant-design/icons'
import { dispatchHandle } from '@/utils/publicHandle';
import useFormTable from '@/useHooks/useFormTable';
import {Form, Modal, Button, Space, Select, InputNumber, Row, Col, message} from 'antd'
import {createSubmitForm} from "@/utils/createForm";
import styles from '../index.less';
import AutoNum from './AutoNum'


const AddConfig = (props) => {
  const {dispatch, visible, loading,
    handleClose, update, groupId, maxNum,
    opsGather: {roundRobinSelect}
  } = props

  const [preNum, setPreNum] = useState(maxNum)
  /**
   * @表单提交
   */
  const [form] = Form.useForm();

  const handleSubmit =  e => {
    e.preventDefault();
    form.validateFields().then(values => {
      values.roundRobinGroupId =  groupId;
      const numPollingIdMap = {};
      const polNum = []
      if (values.groupList?.length === 0 || !values.groupList) {
        message.error('请创建添加轮询！')
        return
      }
      values.groupList.forEach(item => {
        if (!polNum.includes(item.num)) polNum.push(item.num)
        numPollingIdMap[item.num] = item.last
      })
      if (values.groupList.length !== polNum.length){
        message.error('轮询序号不可重复，请修改后重新提交！')
        return
      }
      delete values.groupList
      values.numPollingIdMap = numPollingIdMap
      dispatchHandle(dispatch, 'opsGather/device_service_round_robin_group_relation_batch_post', values, () => {
        update()
        closeModal();
      });
    }).catch((err) => {
      console.log(err)
    });
  };
  const closeModal = () => {
    handleClose();
    setPreNum(maxNum)
    form.resetFields()
  }

  const roundSelect = roundRobinSelect.map(item => ({
    label: `轮询id：${item.pollingId} 执行命令 : ${item.command}`,
    value: item.pollingId
  }))

  const handleAdd = (callBack) => {
    setPreNum(preNum + 1)
    callBack && callBack()
  }

  useEffect(() => {
    if (groupId && visible){
      dispatchHandle(dispatch,
        'opsGather/device_service_round_robin_group_relation_post',
        {roundRobinGroupId: groupId},
        res => {
        form.setFieldsValue(res)
      })
    }
  }, [groupId, visible])

  useEffect(() => {
    setPreNum(maxNum)
  }, [maxNum])

  return (
    <Modal
      width={700}
      title="轮询组配置"
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      getContainer={false}
      forceRender
      loading={loading}
    >
      <Form form={form} onFinish={ handleSubmit }>
        <Form.List name="groupList">
          {(fields, { add, remove }) => (
            <>
              {fields.map((field, index) => (
                <Row gutter={12}>
                  <Col span={8}>
                    <Form.Item
                      label="轮询序号"
                      name={[index, 'num']}
                      rules={[{ required: true, message: '请输入轮询序号' }]}
                    >
                      <AutoNum preNum={preNum} onPreChange={setPreNum}/>
                    </Form.Item>
                  </Col>
                  <Col span={15}>
                    <Form.Item
                      label="轮询"
                      name={[index, 'last']}
                      rules={[{ required: true, message: '请选择轮询' }]}
                    >
                      <Select
                        showSearch
                        style={{width: '100%'}}
                        filterOption={(input, option) =>
                          parseInt(input, 10) === parseInt(option.value, 10)
                        }
                      >
                        {roundSelect.map(child => (
                          <Select.Option value={child.value}>{child.label}</Select.Option>
                        ))}
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={1}>
                    <Form.Item>
                      <MinusCircleOutlined onClick={() => remove(index)} />
                    </Form.Item>
                  </Col>
                </Row>
              ))}
              <Button style={{width: '100%'}} type="dashed" onClick={() => handleAdd(add)} block icon={<PlusOutlined />}>
                添加轮询
              </Button>
            </>
          )}
        </Form.List>

        <div style={{ marginTop: 32, textAlign: 'right' }}>
          <Button style={{ width: 100, marginRight: 20 }} onClick={closeModal}>
            取消
          </Button>
          <Button style={{ width: 100}} type="primary" loading={loading} onClick={handleSubmit}>
            保存
          </Button>
        </div>
      </Form>

    </Modal>
  );
};

export default connect(({ opsGather, loading }) => ({
  opsGather,
  loading: loading.models.opsGather,
}))(AddConfig);