render()

in src/routes/Plugin/Common/Rule.js [478:773]

• 245 lines of code
• 7 McCabe index (conditional complexity)

  render() {
    let {
      onCancel,
      form,
      name = "",
      matchMode = "",
      loged = true,
      enabled = true,
      matchRestful = false,
      sort = "",
      multiRuleHandle,
      pluginName,
      handle,
    } = this.props;
    const {
      ruleConditions,
      pluginHandleList,
      operatorDics,
      matchModeDics,
      paramTypeDics,
      customRulePage,
      visible,
    } = this.state;

    let RuleHandleComponent;
    if (customRulePage) {
      RuleHandleComponent = ComposeRuleHandle;
    } else if (pluginHandleList) {
      RuleHandleComponent = CommonRuleHandle;
    }

    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        sm: { span: 4 },
      },
      wrapperCol: {
        sm: { span: 20 },
      },
    };
    const formCheckLayout = {
      labelCol: {
        sm: { span: 18 },
      },
      wrapperCol: {
        sm: { span: 4 },
      },
    };
    return (
      <Modal
        width={1000}
        centered
        title={getIntlContent("SHENYU.RULE.NAME")}
        visible
        okText={getIntlContent("SHENYU.COMMON.SURE")}
        cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
        onOk={this.handleSubmit}
        onCancel={onCancel}
      >
        <Form onSubmit={this.handleSubmit} className="login-form">
          <FormItem
            label={getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.COLUMN.NAME")}
            {...formItemLayout}
          >
            {getFieldDecorator("name", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.COMMON.INPUTNAME"),
                },
              ],
              initialValue: name,
            })(
              <Input
                allowClear
                placeholder={getIntlContent(
                  "SHENYU.PLUGIN.SELECTOR.LIST.COLUMN.NAME",
                )}
                addonAfter={
                  <Button
                    size="small"
                    type="link"
                    onClick={() => {
                      this.setState({ visible: true });
                    }}
                  >
                    {getIntlContent("SHENYU.PLUGIN.SEARCH.RULE.COPY")}
                  </Button>
                }
              />,
            )}
          </FormItem>
          <RuleCopy
            visible={visible}
            onOk={this.handleCopyData}
            onCancel={() => {
              this.setState({ visible: false });
            }}
          />
          <FormItem
            label={getIntlContent("SHENYU.COMMON.MATCHTYPE")}
            {...formItemLayout}
          >
            {getFieldDecorator("matchMode", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.COMMON.INPUTMATCHTYPE"),
                },
              ],
              initialValue: `${matchMode}`,
            })(
              <Select>
                {matchModeDics &&
                  matchModeDics.map((item) => {
                    return (
                      <Option key={item.dictValue} value={item.dictValue}>
                        {item.dictName}
                      </Option>
                    );
                  })}
              </Select>,
            )}
          </FormItem>
          <div className={styles.condition}>
            <FormItem
              label={getIntlContent("SHENYU.COMMON.CONDITION")}
              required
              {...formItemLayout}
            >
              {ruleConditions.map((item, index) => {
                return (
                  <Row key={index} gutter={8}>
                    <Col span={5}>
                      <Select
                        onChange={(value) => {
                          this.conditionChange(index, "paramType", value);
                        }}
                        value={item.paramType}
                      >
                        {paramTypeDics &&
                          paramTypeDics.map((type) => {
                            return (
                              <Option
                                key={type.dictValue}
                                value={type.dictValue}
                              >
                                {type.dictName}
                              </Option>
                            );
                          })}
                      </Select>
                    </Col>
                    <Col
                      span={4}
                      style={{
                        display: this.state[`paramTypeValueEn${index}`]
                          ? "none"
                          : "block",
                      }}
                    >
                      <Input
                        allowClear
                        onChange={(e) => {
                          this.conditionChange(
                            index,
                            "paramName",
                            e.target.value,
                          );
                        }}
                        placeholder={item.paramName}
                      />
                    </Col>
                    <Col span={4}>
                      <Select
                        onChange={(value) => {
                          this.conditionChange(index, "operator", value);
                        }}
                        value={item.operator}
                      >
                        {this.renderOperatorOptions(
                          operatorDics,
                          item.paramType,
                        )}
                      </Select>
                    </Col>
                    <Col
                      span={7}
                      style={{
                        display: item.operator === "isBlank" ? "none" : "block",
                      }}
                    >
                      {this.getParamValueInput(item, index)}
                    </Col>
                    <Col span={4}>
                      <Button
                        type="danger"
                        onClick={() => {
                          this.handleDelete(index);
                        }}
                      >
                        {getIntlContent("SHENYU.COMMON.DELETE.NAME")}
                      </Button>
                    </Col>
                  </Row>
                );
              })}
            </FormItem>
            <FormItem label={" "} colon={false} {...formItemLayout}>
              <Button
                className={styles.addButton}
                onClick={this.handleAdd}
                type="primary"
              >
                {getIntlContent("SHENYU.COMMON.ADD")}{" "}
                {getIntlContent("SHENYU.COMMON.CONDITION")}
              </Button>
            </FormItem>
          </div>
          {RuleHandleComponent && (
            <RuleHandleComponent
              onRef={(handleComponentRef) => {
                this.handleComponentRef = handleComponentRef;
              }}
              pluginName={pluginName}
              onAddPluginHandle={this.handleAddHandle}
              onDeletePluginHandle={this.handleDeleteHandle}
              form={form}
              pluginHandleList={pluginHandleList}
              handle={handle}
              multiRuleHandle={multiRuleHandle}
            />
          )}
          <FormItem
            label={getIntlContent("SHENYU.SELECTOR.EXEORDER")}
            {...formItemLayout}
          >
            {getFieldDecorator("sort", {
              initialValue: sort,
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.SELECTOR.INPUTNUMBER"),
                },
                {
                  pattern: /^([1-9][0-9]{0,2}|1000)$/,
                  message: getIntlContent("SHENYU.SELECTOR.INPUTNUMBER"),
                },
              ],
            })(
              <Input
                allowClear
                placeholder={getIntlContent("SHENYU.SELECTOR.INPUTORDER")}
              />,
            )}
          </FormItem>
          <FormItem label={" "} colon={false} {...formItemLayout}>
            <div className={styles.layout}>
              <FormItem
                style={{ margin: "0 30px" }}
                {...formCheckLayout}
                label={getIntlContent("SHENYU.SELECTOR.PRINTLOG")}
              >
                {getFieldDecorator("loged", {
                  initialValue: loged,
                  valuePropName: "checked",
                  rules: [{ required: true }],
                })(<Switch />)}
              </FormItem>
              <FormItem
                {...formCheckLayout}
                label={getIntlContent("SHENYU.SELECTOR.WHETHEROPEN")}
              >
                {getFieldDecorator("enabled", {
                  initialValue: enabled,
                  valuePropName: "checked",
                  rules: [{ required: true }],
                })(<Switch />)}
              </FormItem>
              <FormItem
                style={{ margin: "0 30px" }}
                {...formCheckLayout}
                label={getIntlContent("SHENYU.SELECTOR.MATCHRESTFUL")}
              >
                {getFieldDecorator("matchRestful", {
                  initialValue: matchRestful,
                  valuePropName: "checked",
                  rules: [{ required: true }],
                })(<Switch />)}
              </FormItem>
            </div>
          </FormItem>
        </Form>
      </Modal>
    );
  }