React Antd Modal 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\ })\ =>\ ({\n 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, // }); const\ {\ form\ }\ =\ this.props; const\ list\ =\ form.getFieldValue('list')\ ||\ []; const\ nextList\ =\ [...list,\ {}]; form.setFieldsValue({ list:\ 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\ {\n 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,
      })(\n            <Select\ {...selectProps}\ onChange={value\ =>\ this.projectChange(value)}>
          {filterList?.length\ &&\n                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(','),
              })(\n                    <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;