React UpdateForm 组件：编辑和创建筛选项列表

import React, { PureComponent } from 'react'; import { connect } from 'dva'; import { Form, Input, Modal, Select, Row, Col } from 'antd';

const { Option } = Select; const FormItem = Form.Item;

@Form.create() @connect(({ filterBlock }) => ({ filterBlock,}))class UpdateForm extends PureComponent { constructor(props) { super(props); this.state = { visible: false, formVals: props.record || {}, filterSelect: [], keyId: '', };

this.formLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 },
};

this.formLayout1 = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 },
};
this.formLayout2 = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

}

componentDidMount() { const { dispatch } = this.props; // eslint-disable-next-line no-unused-vars const { formVals, filterSelect } = this.state; if (formVals.key) { dispatch({ type: 'filterBlock/fetchItemsList', payload: formVals.key, callback: res => { if (res && res.status === 200) { const centerData = res.data.map(item => { return { label: item, value: ${item}, }; }); this.setState({ filterSelect: centerData }); } }, }); } }

handleSave = () => { const { form, okChange, index, record, filterList } = this.props; const { formVals, keyId } = this.state; form.validateFields((err, fieldsValue) => { if (err) return;

  const arrData = fieldsValue.content.reduce((arr, next) => {
    const typeList = next.type.map(type => {
      return { type, name: next.name };
    });
    return arr.concat(typeList);
  }, []);

  const nameValue = (filterList || []).find(item => item.id === keyId)?.title;
  const formItem = {
    key: keyId || formVals?.key,
    value: fieldsValue?.value || nameValue,
    typeList: arrData,
  };
  console.log(formItem, 80);
  okChange(formItem, index);
  this.handleVisible();
});

};

handleVisible = (flag, record) => { this.setState({ visible: !!flag, formVals: record || {}, });

};

// 添加 add = () => { const { form } = this.props; const list = form.getFieldValue('list') || []; const nextList = list.concat({}); form.setFieldsValue({ list: nextList }); form.getFieldDecorator('list', { initialValue: nextList }); }

// 删除 deleteRow = index => { const { form } = this.props; const list = form.getFieldValue('list'); const content = form.getFieldValue('content');

if (list.length === 1) {
  return;
}

form.setFieldsValue({
  list: list.filter((item, key) => key !== index),
  content: content.filter((item, key) => key !== index),
});

};

projectChange = keys => { const { dispatch } = this.props; // eslint-disable-next-line no-unused-vars const { filterSelect, keyId } = this.state; dispatch({ type: 'filterBlock/fetchItemsList', payload: keys, callback: res => { if (res && res.status === 200) { const centerData = res.data.map(item => { return { label: item, value: ${item}, }; }); this.setState({ filterSelect: centerData, keyId: keys }); } }, });

};

renderContent = formVals => { // console.log(formVals, 144); const { filterSelect } = this.state; const { formLayout, formLayout1, formLayout2 } = this const { form: { getFieldDecorator, getFieldValue }, filterList } = this.props; ;

const list = formVals?.typeList || [{}];
getFieldDecorator('list', { initialValue: list });
console.log(list, 155);
const selectProps = {
  placeholder: '请选择',
  optionFilterProp: 'children',
  style: { width: '100%' },
  allowClear: true,
  showSearch: true,
};

return (
  <Form>
    <FormItem key="value" {...formLayout} label="筛选项">
      {getFieldDecorator('value', {
        rules: [{ required: true, message: '请选择筛选项' }],
        initialValue: formVals.value,
      })(<Select {...selectProps} onChange={value => this.projectChange(value)}>
        {filterList?.length && filterList?.map(items => (
          <Option key={items.id} value={items.id} disabled={(this.props?.sourceData || []).find(item => item.key == items.id)}>
            {items.title}
          </Option>
        ))}
      </Select>          )}
    </FormItem>
    ,
    {(list || []).map((item, index) => {
      return (
        <Row>
          <Col span={10}>
            <FormItem label={`筛选类${index + 1}`} key={index} {...formLayout1}>
              {getFieldDecorator(`content[${index}].type`, {
                rules: [{ required: true, message: '请选择筛选类！' }],
                initialValue: item.type?.split(','),
              })(<Select {...selectProps} mode="multiple">
                {filterSelect.map(item1 => (
                  <Option key={item1.label} value={item1.value}>
                    {item1.label}
                  </Option>
                ))}
              </Select>                  )}
            </FormItem>
          </Col>
          <Col span={10}>
            <FormItem label="别称" key={index} {...formLayout2}>
              {getFieldDecorator(`content[${index}].name`, {
                initialValue: item.name,
                rules: [{ required: true, message: '请输入别称' }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col span={4}>
            <div style={{ width: '100%', height: '27px', marginTop: '10px', marginLeft: '10px' }}>
              {index > 0 ? (
                <span style={{ color: '#1890FF', cursor: 'pointer' }} onClick={this.deleteRow.bind(this, index)}>
                  删除
                </span>
              ) : null}
              {index === 0 ? (
                <span style={{ paddingRight: '12px', color: '#1890FF', cursor: 'pointer' }} onClick={this.add}>
                  新增
                </span>
              ) : null}
            </div>
          </Col>
        </Row>
      );
    })}
  </Form>
);

};

render() { const { children, record } = this.props; const { visible, formVals } = this.state; return ( <> {React.cloneElement(children, { onClick: () => this.handleVisible(true, record) })} <Modal width={800} bodyStyle={{ padding: '15px 30px' }} destroyOnClose title={Object.keys(formVals).length > 0 ? '编辑' : '新建'} visible={visible} onOk={() => this.handleSave()} onCancel={() => this.handleVisible()} maskClosable={false} > {this.renderContent(formVals)} </> ); } }

UpdateForm.defaultProps = { okChange: () => { }, };

export default UpdateForm;