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();
  console.log(osType)
  if (!data) {
    return null;
  }

  const { validateFields } = form;

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

  const onFinish = (values) => {
    console.log('Success:', 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);