render()

in src/routes/Plugin/PluginRuleHandle/RequestRuleHandle.js [403:503]


  render() {
    const {
      headerOperateType,
      parameterOperateType,
      cookieOperateType,
      currentType,
      headerList,
      parameterList,
      cookieList,
    } = this.state;
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const rowStyle = { display: "flex", alignItems: "center" };
    return (
      <FormItem
        required={true}
        label={getIntlContent("SHENYU.COMMON.DEAL.COMPONENT")}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        className={styles.rootFormItem}
      >
        <Tabs defaultActiveKey={currentType} onChange={this.handleTabChange}>
          <TabPane tab="Params" key="parameter">
            {parameterList &&
              parameterList.length > 0 &&
              parameterList.map((row, rowIndex) => {
                return (
                  <Row gutter={24} key={rowIndex} style={rowStyle}>
                    {row.map((field, i) => {
                      let rules = [];
                      let placeholder = field.fieldLabel;
                      return (
                        <Col span={6} key={i}>
                          {field.fieldName.includes("type") ? (
                            <FormItem>
                              {getFieldDecorator(field.fieldName, {
                                rules,
                                initialValue: field.fieldValue,
                              })(
                                <Select
                                  onChange={(val) => {
                                    this.handleTypeChange(
                                      val,
                                      "parameter",
                                      rowIndex,
                                    );
                                  }}
                                  placeholder={placeholder}
                                  style={{ width: 200 }}
                                >
                                  {parameterOperateType.map((opt) => {
                                    return (
                                      <Option value={opt.value}>
                                        {opt.label}
                                      </Option>
                                    );
                                  })}
                                </Select>,
                              )}
                            </FormItem>
                          ) : (
                            <FormItem>
                              {getFieldDecorator(field.fieldName, {
                                rules,
                                initialValue: field.fieldValue,
                              })(
                                <Input
                                  allowClear
                                  // addonBefore={<div style={{width: labelWidth}}>{item.label}</div>}
                                  placeholder={placeholder}
                                  key={field.fieldName}
                                  // type="number"
                                />,
                              )}
                            </FormItem>
                          )}
                        </Col>
                      );
                    })}
                    <Col span={6}>
                      <Button
                        type="danger"
                        style={{ marginRight: "20px" }}
                        onClick={() => {
                          this.handleDeleteRow("parameter", rowIndex);
                        }}
                      >
                        {getIntlContent("SHENYU.COMMON.DELETE.NAME")}
                      </Button>
                      {rowIndex === 0 && (
                        <Button
                          onClick={() => this.handleAddRow("parameter")}
                          type="primary"
                        >
                          {getIntlContent("SHENYU.COMMON.ADD")}
                        </Button>
                      )}
                    </Col>
                  </Row>
                );
              })}