React Antd Form 组件：动态添加和删除筛选项

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 ? [...list, {}] : [{}]; form.setFieldsValue({ list: nextList, }); console.log(nextList, 107); }

// 删除 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; ; // getFieldDecorator('list', { initialValue: Object.keys(formVals).length > 0 ? formVals.typeList : [{}] }); // const list = getFieldValue('list'); const list = formVals?.typeList || [{}]; 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; // 添加 add = () => { const { form } = this.props; const list = form.getFieldValue('list'); const nextList = list ? [...list, {}] : [{}]; form.setFieldsValue({ list: nextList, }); console.log(nextList, 107);