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

import React, { useEffect, useState } 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 ,commonId} = props;
  const [form] = Form.useForm();
  if (!data) {
    return null;
  }

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

  const onFinish = (values) => {
    let formData = new FormData();
    formData.append('name', values.name);
    formData.append('case_id', commonId.caseId);
    formData.append('task_id', commonId.examId);
    formData.append('worker_id', commonId.userId);
    formData.append('case_take_id', `${commonId.caseId}-${commonId.examId}`);
    formData.append('device_model', values.device_brand);
    formData.append('device_brand', values.device_name);
    formData.append('device_os', values.device_os);
    dispatch({
      type: 'editReport/saveReportCommonDetail',
      payload: {
        formData,
        case_take_id:`${commonId.caseId}-${commonId.examId}`,
        worker_id:commonId.userId
      },
    });
  };

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

  return (
    <>
      <Form
        {...formItemLayout}
        form={form}
        layout="horizontal"
        className={styles.stepForm}
        initialValues={data}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item label="报告名称" name="name" rules={[{ required: true, message: '请输入报告名称' }]}>
          <Input placeholder="请输入报告名称" />
        </Form.Item>
        <Form.Item label="设备名称" name="device_name" rules={[{ required: true, message: '请输入设备品牌' }]}>
          <Input placeholder="请输入设备名称" />
        </Form.Item>
        <Form.Item label="设备品牌" name="device_brand" rules={[{ required: true, message: '请输入设备品牌' }]}>
          <Input placeholder="请输入设备品牌" />
        </Form.Item>
        <Form.Item label="操作系统" name="device_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,
  commonId: editReport.commonId,
}))(Step1);