crowd-service-frontend/src/pages/edit/components/Step1/index.jsx

import React, { useEffect } from 'react';
import { Form, Button, Divider, Input, Select } from 'antd';
import { connect } from 'umi';
import styles from './index.less';

const { Option } = Select;
const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const Step1 = (props) => {
  const { dispatch, data, osType } = props;
  const [form] = Form.useForm();
  if (!data) {
    return null;
  }

  const { validateFields } = form;

  useEffect(() => {
    dispatch({
      type: 'editReport/getOsType',
      payload: { examId: 1718 },
    });
  }, [dispatch]);

  const onFinish = (values) => {
    let formData = new FormData();
    formData.append('name', values.reportName);
    formData.append('case_id', '1718');
    formData.append('task_id', '1718');
    formData.append('worker_id', '1');
    formData.append('case_take_id', '1718-1718');
    formData.append('device_model', values.deviceBrand);
    formData.append('device_brand', values.deviceName);
    formData.append('device_os', values.os);
    dispatch({
      type: 'editReport/saveReportCommonDetail',
      payload: formData,
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const onValidateForm = async () => {
    const isValid = await validateFields();
    if (!isValid.outOfDate) {
      //表单验证通过，开始发送请求
      var request = new XMLHttpRequest();
      request.open('POST', 'http://foo.com/submitform.php');
      request.send(formData);
      dispatch({
        type: 'editReport/getOsTypeAction',
        payload: { examId: 1945 },
      });
    }
    // if (dispatch) {
    //   dispatch({
    //     type: 'editReport/saveStepFormData',
    //     payload: values,
    //   });
    //   dispatch({
    //     type: 'editReport/saveCurrentStep',
    //     payload: 'confirm',
    //   });
    //
    // }
  };

  return (
    <>
      <Form
        {...formItemLayout}
        form={form}
        layout="horizontal"
        className={styles.stepForm}
        initialValues={data}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item label="报告名称" name="reportName" rules={[{ required: true, message: '请输入报告名称' }]}>
          <Input placeholder="请输入报告名称" />
        </Form.Item>
        <Form.Item label="设备名称" name="deviceName" rules={[{ required: true, message: '请输入设备品牌' }]}>
          <Input placeholder="请输入设备名称" />
        </Form.Item>
        <Form.Item label="设备品牌" name="deviceBrand" rules={[{ required: true, message: '请输入设备品牌' }]}>
          <Input placeholder="请输入设备品牌" />
        </Form.Item>
        <Form.Item label="操作系统" name="os" rules={[{ required: true, message: '请输入操作系统' }]}>
          <Select placeholder="请选择操作系统">
            {osType.map((option) => {
              return <Select.Option value={option} key={option}>{option}</Select.Option>;
            })}
          </Select>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button colSpan={12} type="primary" htmlType="submit"
                  style={{ float: 'right' }}>
            下一步
          </Button>
        </Form.Item>
      </Form>
    </>
  )
};

export default connect(({ editReport }) => ({
  data: editReport.step,
  osType: editReport.osType,
}))(Step1);