前端 高级筛选器

高级筛选器，支持文本和日期类型判断，支持级联字段选择，多用于大数据筛选！ 

 

 

 前端代码，主要是通过递归的方式实现

    <el-main style="padding: 10px">
      <el-row>
        <el-row class="child">
          <el-button
            size="small"
            type="primary"
            plain
            icon="el-icon-circle-plus-outline"
            @click='addRule()'
          >新增规则</el-button>
          <el-button
            size="small"
            type="primary"
            plain
            icon="el-icon-circle-plus-outline"
            @click="addRuleList()"
          >新增规则组</el-button>
        </el-row>

        <template v-for="(item, index) in conditionVlueList.list">
          <el-row
            :key="'condition' + index"
            class="child"
            v-if="item.type == 'condition'"
          >
            <el-select
              class="newSeclect"
              v-model="item.concat"
              size="small"
              placeholder="请选择"
            >
              <el-option
                label="and"
                value="and"
              > </el-option>
              <el-option
                label="or"
                value="or"
              > </el-option>
            </el-select>
            <el-cascader
              v-model="item.codeCasder"
              class="codeSeclect"
              filterable
              v-show="caseCarderShow == true"
              :options="codeOptions"
              :show-all-levels="false"
              size="small"
              @change="changeCodeOption(item)"
            ></el-cascader>
            <el-select
              v-show="caseCarderShow == false"
              v-model="item.code"
              placeholder="请选择"
              class="codeSeclect"
              size="small"
              filterable
              @change="changeSelectOption(item)"
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.fieldName"
                :label="item.fieldCaptionByname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="item.inputLabel"
              placeholder="请选择"
              class="codeSeclect"
              size="small"
              v-show=false
            >
              <el-option
                v-for="item in codeOptions"
                :key="item.fieldCaption"
                :label="item.fieldCaption"
                :value="item.fieldCaption"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="item.fileter"
              size="small"
              placeholder="请选择"
              class="filterSelect"
            >
              <el-option
                v-for="item in filterList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="item.inputValue"
              v-show="item.codeType !== 'datetime'"
              size="small"
              class="inputSelect"
              placeholder="请输入规则"
            ></el-input>
            <el-date-picker
              v-show="item.codeType == 'datetime'"
              v-model="item.inputValue"
              class="inputSelect"
              type="date"
              size="small"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <i
              @click="parDelete(item,index)"
              size="mini"
              type="danger"
              style="margin-left:10px"
              class="el-icon-delete deleIcon"
            ></i>
          </el-row>
          <el-row
            v-if="item.type == 'group' && item.list.length > 0"
            :key="'group' + index"
            class="child"
          >
            <createChild
              :conditionVlueList="item"
              :codeOptions="codeOptions"
              :filterList="filterList"
              :caseCarderShow="caseCarderShow"
              :selectOptions="selectOptions"
            ></createChild>
          </el-row>
        </template>
      </el-row>
      <el-button
        v-show="saveButton == true"
        @click="save"
        type="primary"
        class="saveButton"
      >保存</el-button>
      <el-button
        v-show="saveButton == false"
        @click="save"
        type="success"
        icon="el-icon-edit"
        size="small"
        plain
        class="getButton"
      >保存</el-button>
    </el-main>

 递归函数，并且判断数据源是否为sqlServer，对拼接字段进行特殊处理

    // 递归将数组转为字符串
    foreachArr(arr) {
      let sql = ''
      let newCode = ''
      for (let i = 0; i < arr.length; i++) {
        if (this.isSqlServer == 'sqlserver') {
          newCode = '[' + arr[i].code + ']'
        }
        else {
          newCode = arr[i].code
        }
        // 判断是否为规则组
        if (arr[i].type == 'group' && arr[i].list.length > 0) {
          sql = sql + ' ' + arr[i].concat + ' (' + this.foreachArr(arr[i].list) + ') '
        }
        else if (arr[i].concat == '') {
          if (arr[i].codeType == 'DateTime' || arr[i].codeType == 'String' || arr[i].codeType == 'Date') {
            sql = sql + ' ' + newCode + ' ' + arr[i].fileter + ' ' + "'" + arr[i].inputValue + "'"
          }
          else {
            sql = sql + ' ' + newCode + ' ' + arr[i].fileter + ' ' + "'" + arr[i].inputValue + "'"
          }
        }
        else if (arr[i].type == 'condition') {
          // 判断是否为日期
          if (arr[i].codeType == 'DateTime' || arr[i].codeType == 'String' || arr[i].codeType == 'Date') {
            sql = sql + ' ' + arr[i].concat + ' ' + newCode + ' ' + arr[i].fileter + ' ' + "'" + arr[i].inputValue + "'"
          }
          else {
            sql = sql + ' ' + arr[i].concat + ' ' + newCode + ' ' + arr[i].fileter + ' ' + "'" + arr[i].inputValue + "'"
          }
        }
      }
      return sql
    },

保存进行传参 

    save() {
      // 数组插入key
      if (this.conditionVlueList.list.length > 0) {
        this.conditionVlueList.list[0].concat = ''
        this.sqlCode = ' and ' + '(' + this.foreachArr(this.conditionVlueList.list) + ')'
        this.sqlZh = this.foreachArrZh(this.conditionVlueList.list)
      }
      else {
        this.sqlCode = ''
        this.sqlZh = ''
      }
      this.$emit("saveFilter", this.conditionVlueList.list, this.sqlCode, this.sqlZh);
    },