react FormList

需求：点击查询页面的时候，一键报工，报当前页面所有数据的值。并且在Form表单中展示。

后端返回的数据

这样的返回也是前端要求的，因为这样是最好处理的。

代码 处理
查询页面的跳转

  handleAwork = async () => {
    // 获取列表所有值的id 
    const getItemSupData = await this.tableRef.getRows().map((item) => {
      return item.id;
    });
    // 处理当前时间
    var time = new Date();
    var dayTime = dayjs(time).startOf('day').format('YYYY-MM-DD 00:00:00');
    let res = null;
    let params = {
      capaBoardId: getItemSupData,
      currTime: dayTime,
      type: 'REPORT' // 一键报工
    };
    res = await service.Workkey(params);
    if (res.success) {
      this.setState({
        synLoading: true,
        modalVisible: true,
        getData: res.data  // 拿到数据给弹框
      });
    } else {
      ElNotification({
        type: 'error',
        message: res.msg || '操作失败'
      });
    }
  };

// 编辑一键报工弹框的页面

import React from 'react';
import { ElCard, ElNotification } from '@/components/el';
import { Modal, Form, Row, Col, Button, InputNumber, Input, Space } from 'antd';
import * as service from '../service';
class EditModal extends React.Component<any, any> {
  formOnRef = null;
  constructor(props) {
    super(props);
    this.state = {
      userModalloading: false
    };
  }
	// 取消事件，传给父组件也就是查询页面 只是把弹框消失掉，然后更新列表，你也可以在这个页面做，建议传过去，因为这个只是form，可能检测不到表格的方法不能更新列表
  cancelWork = async () => {
    this.props.cancelBtn();
    await this.formOnRef.resetFields();
  };

  // 保存
  saveWork = async () => {
    try {
      const fieldsValue = await this.formOnRef
        .validateFields()
        .catch((info) => {
          ElNotification({
            type: 'warning',
            message: '请检查必填项！'
          });
          return Promise.reject();
        });
        // 这里是二维数组，我们要处理一下，后端就收的是 [{},{}]
        // 之所以是二维数据，是因为返回的数据是 [ 0 :{ list:[{},{}]}，1:{ list:[{},{}]}]
      let oneArr = fieldsValue.user.map((el) => {
        return el.detailsList.map((item) => {
          return {
            reportId: item.id,
            reportQty: item.editReportQty
          };
        });
      });
      // 二维数组展示成一维数组对象[[{},{}]] => [{},{}]
      var params = [].concat.apply([], oneArr);
      const res = await service.getWorkSave(params);
      if (res.success) {
        ElNotification({ type: 'success', message: res.msg });
        this.props.cancelBtn();
        await this.formOnRef.resetFields();
      } else {
        ElNotification({
          type: 'error',
          message: res.msg || res.data || '操作失败！'
        });
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  };
 // 页面渲染
  render() {
    const { modalVisible, getData, title } = this.props;
    return (
      <Modal
        title={title}
        width={700}
        visible={modalVisible}
        keyboard={true}
        footer={null}
        okButtonProps={{
          loading: this.state.userModalloading
        }}
        maskClosable={false}
        onCancel={this.cancelWork}
      >
        <Form
          initialValues={{ user: getData }}
          ref={(form) => {
            this.formOnRef = form;
          }}
        >
          <Form.List name='user'>
            {(getData, { add, remove }) => {
              return (
                <>
                  {getData.map((item, i) => (
                    <Space
                      key={item.key}
                      style={{ display: 'flex', marginBottom: 8 }}
                      align='baseline'
                    >
                      <br />
                      <ElCard style={{ marginTop: '0.2%' }} title='报工物料'>
                        <Row>
                          <Col span={10}>
                            <Form.Item
                              name={[item.name, 'itemCode']}
                              label='短项目号'
                            >
                              <Input disabled={true} />
                            </Form.Item>
                          </Col>
                          <Col span={10}>
                            <Form.Item
                              name={[item.name, 'itemName']}
                              label='说明1'
                            >
                              <Input disabled={true} />
                            </Form.Item>
                          </Col>
                          <Col span={10}>
                            <Form.Item
                              name={[item.name, 'docNo']}
                              label='采购订单编码'
                            >
                              <Input disabled={true} />
                            </Form.Item>
                          </Col>
                          <Col span={10}>
                            <Form.Item
                              name={[item.name, 'techName']}
                              label='工艺流程'
                            >
                              <Input disabled={true} />
                            </Form.Item>
                          </Col>
                        </Row>
                        <ElCard
                          style={{ marginTop: '0.5%', marginLeft: '50px' }}
                          title='报工工序'
                        >
                        	// 注意这里啊， 如果是数组我们就在执行一下formList的步骤，定义一下 明细的名称name
                          <Form.List
                            {...item}
                            name={[item.name, 'detailsList']}
                          >
                            {(
                              detailsList,
                              { add: addtest, remove: removetest }
                            ) => (
                              <>
                                {detailsList.map((testItem) => {
                                  return (
                                    <Row key={testItem.key}>
                                      <Col span={10}>
                                        <Form.Item
                                          name={[testItem.name, 'equiProcName']}
                                          label='工序名称'
                                        >
                                          <Input disabled={true} />
                                        </Form.Item>
                                      </Col>
                                      {/* <Col span={10}>
                                        <Form.Item
                                          name={[testItem.name, 'xxx']}
                                          label='设备名称'
                                        >
                                          <Input disabled={true} />
                                        </Form.Item>
                                      </Col> */}
                                      <Col span={10}>
                                        <Form.Item
                                          name={[testItem.name, 'scheduleQty']}
                                          label='任务数量'
                                        >
                                          <Input disabled={true} />
                                        </Form.Item>
                                      </Col>
                                      <Col span={10}>
                                        <Form.Item
                                          name={[testItem.name, 'reportQty']}
                                          label='已报工数量'
                                        >
                                          <Input disabled={true} />
                                        </Form.Item>
                                      </Col>
                                      <Col span={10}>
                                        <Form.Item
                                          rules={[
                                            {
                                              required: true
                                            }
                                          ]}
                                          name={[
                                            testItem.name,
                                            'editReportQty'
                                          ]}
                                          label='此次报工数量'
                                        >
                                          <InputNumber  min={0}   />
                                        </Form.Item>
                                      </Col>
                                    </Row>
                                  );
                                })}
                              </>
                            )}
                          </Form.List>
                        </ElCard>
                      </ElCard>
                    </Space>
                  ))}
                </>
              );
            }}
          </Form.List>
          <Row justify='center' align='middle'>
            <Col span={3} style={{ textAlign: 'center' }}>
              <Form.Item>
                <Button type='primary' onClick={this.cancelWork}>
                  取消
                </Button>
              </Form.Item>
            </Col>
            <Col span={3} style={{ textAlign: 'center' }}>
              <Form.Item>
                <Button type='primary' onClick={this.saveWork}>
                  保存
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default EditModal;

搞定。
多看看API没坏处。