@tongfun/tf-widget 0.1.21 → 0.1.22

package/package/tf-widget/src/children/basic-data/dependcy/condition-filter.vue

@@ -1,519 +1,519 @@
-<template>
-  <div class="condition-filter-component">
-
-    <!--  快捷过滤-->
-    <div v-if="isQuickFilter" style="display: flex;height: 100%">
-      <!-- <template v-for="(item,index) in quickFilterData.filterArr">
-        <el-date-picker
-          v-if="item.fieldType==='DATETIME'"
-          :key="index"
-          v-model="quickFilterData[item.id]"
-          value-format="yyyy-MM-dd"
-          type="date"
-          :placeholder="item.valueDescription"
-        />
-        <el-autocomplete
-          v-else
-          :key="index"
-          v-model="quickFilterData[item.id]"
-          :placeholder="item.valueDescription"
-          :fetch-suggestions="querySearch"
-          @focus="suggestConditionFocus(item)"
-        />
-      </template>-->
-      <div v-if="placeholderData !== ''" class="quick-filter">
-        <el-input
-          v-model="testData"
-          :placeholder="`以${placeholderData}查询`"
-          @keyup.enter.native="getFilterTableData"
-        >
-          <i slot="prefix" class="el-icon-search" />
-        </el-input>
-      </div>
-
-      <div class="button-group">
-        <!-- <el-button type="primary" @click="quickFilterStartMethod">快捷过滤</el-button>-->
-        <!-- <el-button type="primary" @click="quickConditionClear">重置</el-button>-->
-        <el-button type="primary" @click="changeIsQuickFilter">高级过滤</el-button>
-      </div>
-    </div>
-
-    <!--  高级过滤-->
-    <div v-else style="display: flex;align-items: flex-start">
-
-      <!--  单行高级过滤-->
-      <div v-if="rotateValue" class="single-line">
-        <el-select v-model="moreConditionFilterData.name.value[0]" placeholder="" class="field-select" @change="changeMoreConditionName">
-          <el-option
-            v-for="(item,index) in moreConditionFilterData.name.arr"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-select v-model="moreConditionFilterData.condition.value[0]" placeholder="" class="condition-select" @change="clearDateTime(0)">
-          <el-option
-            v-for="(item,index) in moreConditionFilterData.condition.arr[0]"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-date-picker
-          v-if="moreConditionFilterData.type[0] === 'datetime'"
-          v-model="moreConditionFilterData.value[0]"
-          value-format="yyyy-MM-dd"
-          type="date"
-          placeholder="请选择"
-          class="value-input"
-          :disabled="getDateTimeIsDisabled(0)"
-        />
-        <el-input v-else v-model="moreConditionFilterData.value[0]" class="value-input" />
-      </div>
-
-      <!--   多行高级过滤-->
-      <div v-else class="multiple-lines">
-        <div v-for="(item,index) in moreConditionFilterData.value" :key="index" class="multiple-line">
-          <el-select v-model="moreConditionFilterData.leftBracket.value[index]" placeholder="" class="bracket-select">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.leftBracket.arr"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <el-select v-model="moreConditionFilterData.name.value[index]" placeholder="" class="field-select" @change="changeMoreConditionName">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.name.arr"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <el-select v-model="moreConditionFilterData.condition.value[index]" placeholder="" class="condition-select" @change="clearDateTime(index)">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.condition.arr[index]"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <el-date-picker
-            v-if="moreConditionFilterData.type[index] === 'datetime'"
-            v-model="moreConditionFilterData.value[index]"
-            value-format="yyyy-MM-dd"
-            type="date"
-            placeholder="请选择"
-            class="value-input"
-            :disabled="getDateTimeIsDisabled(0)"
-          />
-          <el-input v-else v-model="moreConditionFilterData.value[index]" class="value-input" />
-          <el-select v-model="moreConditionFilterData.rightBracket.value[index]" placeholder="" class="bracket-select">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.rightBracket.arr"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <el-select v-if="index !== moreConditionFilterData.name.value.length - 1" v-model="moreConditionFilterData.relatedCondition.value[index]" placeholder="" class="bracket-select">
-            <el-option
-              v-for="(item2, index2) in moreConditionFilterData.relatedCondition.arr"
-              :key="index2"
-              :label="item2.label"
-              :value="item2.value"
-            />
-          </el-select>
-          <SvgIcon v-if="index !== moreConditionFilterData.name.value.length -1" icon-class="remove" class="remove-icon" @click="removeMultipleLine(index)" />
-        </div>
-        <SvgIcon icon-class="add" class="add-icon" @click="addMultipleLine" />
-      </div>
-      <div class="button-group">
-        <el-button type="primary" @click="moreConditionSearchMethod">搜索</el-button>
-        <el-button type="primary" @click="moreConditionClear">重置</el-button>
-        <el-button type="primary" @click="changeIsQuickFilter">快捷</el-button>
-        <SvgIcon icon-class="push-down" class="push-down" :class="rotateValue ? 'down' :'up'" @click="changeRotate" />
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'ConditionFilter',
-  props: {
-    // 是否为快捷过滤
-    isQuickFilter: {
-      type: Boolean,
-      default: true
-    },
-    // 快捷过滤搜索框
-    quickFilterData: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 快捷过滤搜索框建议
-    conditionFilterSuggest: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 高级过滤为单行/多行
-    rotate: {
-      type: Boolean,
-      default: true
-    },
-    moreConditionFilterMap: {
-      type: Map,
-      default: new Map()
-    },
-    moreConditionFilterData: {
-      type: Object,
-      default: new Map()
-    },
-    placeholderData: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      conditionFilterSuggestArr: [], // 快捷过滤搜索建议
-      rotateValue: this.rotate,
-      quickFilterStartMethod: null, // 快捷过滤防抖查询
-      moreConditionSearchMethod: null, // 高级过滤防抖查询
-      testData: '' // 内容过滤关键字
-    }
-  },
-  created () {
-    // 定义防抖方法
-    this.quickFilterStartMethod = this.utils.debounce(this.quickFilterStart)
-    this.moreConditionSearchMethod = this.utils.debounce(this.moreConditionSearch)
-  },
-  methods: {
-
-    getFilterTableData (event) {
-      this.$emit('getFilterTableData', event.target.value)
-    },
-
-    // 过滤字段为时间类型时，清除时间值
-    clearDateTime (index) {
-      if (this.moreConditionFilterData.type[index] === 'datetime') {
-        if (this.moreConditionFilterData.condition.value[index] !== 'less' &&
-                this.moreConditionFilterData.condition.value[index] !== 'greater' &&
-                this.moreConditionFilterData.condition.value[index] !== 'equal') {
-          this.moreConditionFilterData.value[index] = ''
-        }
-      }
-    },
-
-    // 判断日期选择框是否可选
-    getDateTimeIsDisabled (index) {
-      return this.moreConditionFilterData.condition.value[index] !== 'less' &&
-              this.moreConditionFilterData.condition.value[index] !== 'greater' &&
-              this.moreConditionFilterData.condition.value[index] !== 'equal'
-    },
-
-    suggestConditionFocus (value) {
-      this.conditionFilterSuggestArr = this.conditionFilterSuggest[value.id]
-    },
-
-    // 切换快捷过滤 与 高级过滤
-    changeIsQuickFilter () {
-      this.$emit('changeIsQuickFilter', this.isQuickFilter)
-    },
-
-    querySearch (queryString, cb) {
-      const restaurants = this.conditionFilterSuggestArr
-      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    },
-
-    createFilter (queryString) {
-      return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
-      }
-    },
-
-    // 快捷过滤重置
-    quickConditionClear () {
-      this.$emit('quickConditionClear')
-    },
-
-    // 快捷过滤
-    quickFilterStart () {
-      this.$emit('quickFilterStart')
-    },
-
-    // 高级过滤改变名称
-    changeMoreConditionName (val) {
-      // 此校验在父组件watch中实现
-      // // 校验该字段是否已经选择过
-      // if (this.checkCondition(val)) {
-      //   this.$message.error('字段重复，请重新选择！')
-      //   return false
-      // }
-      // 更新高级过滤条件数组
-      this.$emit('updateMoreCondition', val)
-    },
-
-    // 高级过滤搜索
-    moreConditionSearch () {
-      // 如果是多行模式下，点击搜索切换显示模式
-      if (!this.rotateValue) {
-        // 多行模式下，先校验信息是否完整,此处的校验方法与父组件的方法类似
-        // if (this.checkMoreCondition()) {
-        //   this.$message.error('请完整填写！')
-        //   return false
-        // }
-        this.changeRotate()
-      }
-      this.$emit('moreConditionSearch')
-    },
-
-    // 高级过滤重置
-    moreConditionClear () {
-      this.$emit('moreConditionClear')
-    },
-
-    // 切换单行过滤或者是多行过滤
-    changeRotate () {
-      this.rotateValue = !this.rotateValue
-      this.$emit('changeRotate', this.rotateValue)
-    },
-
-    // 新增筛选行
-    addMultipleLine () {
-      this.$emit('addMultipleLine')
-    },
-
-    // 移除当前筛选行
-    removeMultipleLine (index) {
-      this.$emit('removeMultipleLine', index)
-    },
-
-    // 校验高级过滤条件重复
-    checkCondition (val) {
-      let flag = false
-      this.moreConditionFilterData.name.value.forEach((item, index) => {
-        // 排除当前index
-        const indexValue = this.moreConditionFilterData.name.value.findIndex(d => d === val)
-        if (this.moreConditionFilterData.name.value[index] === val && index !== indexValue) {
-          flag = true
-        }
-      })
-      return flag
-    },
-
-    // 校验高级过滤条件是否填写完整
-    checkMoreCondition () {
-      // 校验
-      let flag = false
-      this.moreConditionFilterData.name.value.forEach((item, index) => {
-        // 如果选中了字段，代表需要过滤条件
-        if (this.moreConditionFilterData.name.value[0] !== '') {
-          if (!this.moreConditionFilterData.leftBracket.value[index] ||
-                  !this.moreConditionFilterData.name.value[index] ||
-                  !this.moreConditionFilterData.condition.value[index] ||
-                  !this.moreConditionFilterData.value[index] ||
-                  !this.moreConditionFilterData.rightBracket.value[index]) {
-            flag = true
-          }
-        }
-      })
-      return flag
-    }
-
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-.el-select-dropdown__item{
-  height: 2.222vh;
-  line-height: 2.222vh;
-  font-size: 0.625vw;
-}
-
-.condition-filter-component{
-  height: 2.222vh;
-  display: flex;
-  align-items: flex-start;
-
-  // 内容过滤样式
-  .quick-filter {
-    height: 100%;
-    border-bottom: 1px solid #dcdcdc;
-    ::v-deep .el-input__inner {
-      height: calc(100% - 1px);
-      border: none;
-    }
-    ::v-deep .el-input--prefix{
-      height: 100%;
-      display: flex;
-      //align-items: center;
-      font-size: 0.8vw;
-    }
-    ::v-deep .el-input__inner::placeholder{
-      color: #999999;
-      font-size: 0.625vw;
-    }
-    // ::v-deep .el-input__prefix{
-    //   //height: calc(100% - 2px);
-    //   //color: #999999;
-    //   //font-size: 0.8vw;
-    // }
-  }
-
-  ::v-deep .el-input{
-    height: 100%;
-    display: flex;
-  }
-  ::v-deep .el-input__suffix{
-    display: flex;
-    align-items: center;
-  }
-  // ::v-deep .el-icon-arrow-up{
-  //   //display: flex;
-  //   //align-items: center;
-  // }
-  ::v-deep .el-icon-arrow-up:before{
-    font-size: 0.625vw;
-  }
-  /*筛选框统一高度*/
-  ::v-deep .el-input__inner{
-    height: 2.222vh;
-    font-size: 0.625vw;
-  }
-  /*下拉框图标统一高度*/
-  ::v-deep .el-input__icon{
-    height: 2.222vh;
-    line-height: 2.222vh;
-  }
-  /*字段下拉框样式*/
-  .field-select{
-    margin-right: 0.1vh;
-    ::v-deep .el-input {
-      width: 8vw;
-    }
-  }
-  /*条件下拉框样式*/
-  .condition-select{
-    margin-right:0.1vh;
-    ::v-deep .el-input {
-      width: 6vw;
-    }
-  }
-  /*括号下拉框样式*/
-  .bracket-select{
-    margin-right:0.1vh;
-    ::v-deep .el-input {
-      width: 6vw;
-    }
-  }
-  /*值输入框样式*/
-  .value-input{
-    width: 5vw;
-    margin-right:0.1vh;
-    ::v-deep .el-input__inner{
-      width: 5vw;
-    }
-  }
-
-  /*单行筛选框*/
-  .single-line{
-    width: 20vw;
-    height: 100%;
-    display: flex;
-    //margin-right: -1.5vw;
-    .el-select:nth-child(2){
-      margin: 0 0.5vw;
-    }
-    .el-input:nth-last-child(1){
-      margin-right: 1vw;
-    }
-  }
-  @media screen and (max-width: 1920px){
-    .single-line{
-      width: 20vw;
-    }
-  }
-  @media screen and (max-width: 1366px){
-    .single-line{
-      width: 20vw;
-    }
-  }
-  /*多行筛选框*/
-  .multiple-lines{
-    z-index: 999;
-    border: 1px solid #0261a4;
-    border-radius: 0.9259vh;
-    box-sizing: border-box;
-    padding: 1.3889vh;
-    background: #FFFFFF;
-    .multiple-line{
-      height: 2.222vh;
-      margin-bottom: 1vh;
-      display: flex;
-      align-items: center;
-      ::v-deep .el-select{
-        height: 100%;
-      }
-    }
-    .remove-icon{
-      width: 0.625vw;
-      height: 0.625vw;
-      margin-left: 10px;
-      cursor: pointer;
-    }
-    .add-icon{
-      width: 0.625vw;
-      height: 0.625vw;
-      cursor: pointer;
-    }
-  }
-  /*按钮组样式*/
-  .button-group {
-    display: flex;
-    align-items: center;
-    margin-left: 1.2vw;
-    ::v-deep .el-button--primary{
-      width: 3.5vw;
-      height: 2.2222vh;
-      padding: 0;
-      background: #ecf5ff;
-      border: 1px solid #0c4c8e;
-      border-radius: 5px;
-      font-size: 0.625vw;
-      font-family: Source Han Sans SC, Source Han Sans SC-Normal;
-      font-weight: Normal;
-      text-align: center;
-      color: #085497;
-    }
-    ::v-deep .el-button:nth-child(2) {
-      margin: 0 0.5vw;
-    }
-    /*图标按钮样式*/
-    .push-down{
-      width: 2vh;
-      height: 2vh;
-      margin-left: 0.5vw;
-      cursor: pointer;
-    }
-    .up{
-      transform: rotate(-180deg);
-      transition: all 0.5s;
-    }
-    .down{
-      transition: all 0.5s;
-    }
-  }
-}
-</style>
+<template>
+  <div class="condition-filter-component">
+
+    <!--  快捷过滤-->
+    <div v-if="isQuickFilter" style="display: flex;height: 100%">
+      <!-- <template v-for="(item,index) in quickFilterData.filterArr">
+        <el-date-picker
+          v-if="item.fieldType==='DATETIME'"
+          :key="index"
+          v-model="quickFilterData[item.id]"
+          value-format="yyyy-MM-dd"
+          type="date"
+          :placeholder="item.valueDescription"
+        />
+        <el-autocomplete
+          v-else
+          :key="index"
+          v-model="quickFilterData[item.id]"
+          :placeholder="item.valueDescription"
+          :fetch-suggestions="querySearch"
+          @focus="suggestConditionFocus(item)"
+        />
+      </template>-->
+      <div v-if="placeholderData !== ''" class="quick-filter">
+        <el-input
+          v-model="testData"
+          :placeholder="`以${placeholderData}查询`"
+          @keyup.enter.native="getFilterTableData"
+        >
+          <i slot="prefix" class="el-icon-search" />
+        </el-input>
+      </div>
+
+      <div class="button-group">
+        <!-- <el-button type="primary" @click="quickFilterStartMethod">快捷过滤</el-button>-->
+        <!-- <el-button type="primary" @click="quickConditionClear">重置</el-button>-->
+        <el-button type="primary" @click="changeIsQuickFilter">高级过滤</el-button>
+      </div>
+    </div>
+
+    <!--  高级过滤-->
+    <div v-else style="display: flex;align-items: flex-start">
+
+      <!--  单行高级过滤-->
+      <div v-if="rotateValue" class="single-line">
+        <el-select v-model="moreConditionFilterData.name.value[0]" placeholder="" class="field-select" @change="changeMoreConditionName">
+          <el-option
+            v-for="(item,index) in moreConditionFilterData.name.arr"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="moreConditionFilterData.condition.value[0]" placeholder="" class="condition-select" @change="clearDateTime(0)">
+          <el-option
+            v-for="(item,index) in moreConditionFilterData.condition.arr[0]"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-date-picker
+          v-if="moreConditionFilterData.type[0] === 'datetime'"
+          v-model="moreConditionFilterData.value[0]"
+          value-format="yyyy-MM-dd"
+          type="date"
+          placeholder="请选择"
+          class="value-input"
+          :disabled="getDateTimeIsDisabled(0)"
+        />
+        <el-input v-else v-model="moreConditionFilterData.value[0]" class="value-input" />
+      </div>
+
+      <!--   多行高级过滤-->
+      <div v-else class="multiple-lines">
+        <div v-for="(item,index) in moreConditionFilterData.value" :key="index" class="multiple-line">
+          <el-select v-model="moreConditionFilterData.leftBracket.value[index]" placeholder="" class="bracket-select">
+            <el-option
+              v-for="(item2, index2) in moreConditionFilterData.leftBracket.arr"
+              :key="index2"
+              :label="item2.label"
+              :value="item2.value"
+            />
+          </el-select>
+          <el-select v-model="moreConditionFilterData.name.value[index]" placeholder="" class="field-select" @change="changeMoreConditionName">
+            <el-option
+              v-for="(item2, index2) in moreConditionFilterData.name.arr"
+              :key="index2"
+              :label="item2.label"
+              :value="item2.value"
+            />
+          </el-select>
+          <el-select v-model="moreConditionFilterData.condition.value[index]" placeholder="" class="condition-select" @change="clearDateTime(index)">
+            <el-option
+              v-for="(item2, index2) in moreConditionFilterData.condition.arr[index]"
+              :key="index2"
+              :label="item2.label"
+              :value="item2.value"
+            />
+          </el-select>
+          <el-date-picker
+            v-if="moreConditionFilterData.type[index] === 'datetime'"
+            v-model="moreConditionFilterData.value[index]"
+            value-format="yyyy-MM-dd"
+            type="date"
+            placeholder="请选择"
+            class="value-input"
+            :disabled="getDateTimeIsDisabled(0)"
+          />
+          <el-input v-else v-model="moreConditionFilterData.value[index]" class="value-input" />
+          <el-select v-model="moreConditionFilterData.rightBracket.value[index]" placeholder="" class="bracket-select">
+            <el-option
+              v-for="(item2, index2) in moreConditionFilterData.rightBracket.arr"
+              :key="index2"
+              :label="item2.label"
+              :value="item2.value"
+            />
+          </el-select>
+          <el-select v-if="index !== moreConditionFilterData.name.value.length - 1" v-model="moreConditionFilterData.relatedCondition.value[index]" placeholder="" class="bracket-select">
+            <el-option
+              v-for="(item2, index2) in moreConditionFilterData.relatedCondition.arr"
+              :key="index2"
+              :label="item2.label"
+              :value="item2.value"
+            />
+          </el-select>
+          <SvgIcon v-if="index !== moreConditionFilterData.name.value.length -1" icon-class="remove" class="remove-icon" @click="removeMultipleLine(index)" />
+        </div>
+        <SvgIcon icon-class="add" class="add-icon" @click="addMultipleLine" />
+      </div>
+      <div class="button-group">
+        <el-button type="primary" @click="moreConditionSearchMethod">搜索</el-button>
+        <el-button type="primary" @click="moreConditionClear">重置</el-button>
+        <el-button type="primary" @click="changeIsQuickFilter">快捷</el-button>
+        <SvgIcon icon-class="push-down" class="push-down" :class="rotateValue ? 'down' :'up'" @click="changeRotate" />
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ConditionFilter',
+  props: {
+    // 是否为快捷过滤
+    isQuickFilter: {
+      type: Boolean,
+      default: true
+    },
+    // 快捷过滤搜索框
+    quickFilterData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 快捷过滤搜索框建议
+    conditionFilterSuggest: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 高级过滤为单行/多行
+    rotate: {
+      type: Boolean,
+      default: true
+    },
+    moreConditionFilterMap: {
+      type: Map,
+      default: new Map()
+    },
+    moreConditionFilterData: {
+      type: Object,
+      default: new Map()
+    },
+    placeholderData: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      conditionFilterSuggestArr: [], // 快捷过滤搜索建议
+      rotateValue: this.rotate,
+      quickFilterStartMethod: null, // 快捷过滤防抖查询
+      moreConditionSearchMethod: null, // 高级过滤防抖查询
+      testData: '' // 内容过滤关键字
+    }
+  },
+  created () {
+    // 定义防抖方法
+    this.quickFilterStartMethod = this.utils.debounce(this.quickFilterStart)
+    this.moreConditionSearchMethod = this.utils.debounce(this.moreConditionSearch)
+  },
+  methods: {
+
+    getFilterTableData (event) {
+      this.$emit('getFilterTableData', event.target.value)
+    },
+
+    // 过滤字段为时间类型时，清除时间值
+    clearDateTime (index) {
+      if (this.moreConditionFilterData.type[index] === 'datetime') {
+        if (this.moreConditionFilterData.condition.value[index] !== 'less' &&
+                this.moreConditionFilterData.condition.value[index] !== 'greater' &&
+                this.moreConditionFilterData.condition.value[index] !== 'equal') {
+          this.moreConditionFilterData.value[index] = ''
+        }
+      }
+    },
+
+    // 判断日期选择框是否可选
+    getDateTimeIsDisabled (index) {
+      return this.moreConditionFilterData.condition.value[index] !== 'less' &&
+              this.moreConditionFilterData.condition.value[index] !== 'greater' &&
+              this.moreConditionFilterData.condition.value[index] !== 'equal'
+    },
+
+    suggestConditionFocus (value) {
+      this.conditionFilterSuggestArr = this.conditionFilterSuggest[value.id]
+    },
+
+    // 切换快捷过滤 与 高级过滤
+    changeIsQuickFilter () {
+      this.$emit('changeIsQuickFilter', this.isQuickFilter)
+    },
+
+    querySearch (queryString, cb) {
+      const restaurants = this.conditionFilterSuggestArr
+      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+
+    createFilter (queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
+      }
+    },
+
+    // 快捷过滤重置
+    quickConditionClear () {
+      this.$emit('quickConditionClear')
+    },
+
+    // 快捷过滤
+    quickFilterStart () {
+      this.$emit('quickFilterStart')
+    },
+
+    // 高级过滤改变名称
+    changeMoreConditionName (val) {
+      // 此校验在父组件watch中实现
+      // // 校验该字段是否已经选择过
+      // if (this.checkCondition(val)) {
+      //   this.$message.error('字段重复，请重新选择！')
+      //   return false
+      // }
+      // 更新高级过滤条件数组
+      this.$emit('updateMoreCondition', val)
+    },
+
+    // 高级过滤搜索
+    moreConditionSearch () {
+      // 如果是多行模式下，点击搜索切换显示模式
+      if (!this.rotateValue) {
+        // 多行模式下，先校验信息是否完整,此处的校验方法与父组件的方法类似
+        // if (this.checkMoreCondition()) {
+        //   this.$message.error('请完整填写！')
+        //   return false
+        // }
+        this.changeRotate()
+      }
+      this.$emit('moreConditionSearch')
+    },
+
+    // 高级过滤重置
+    moreConditionClear () {
+      this.$emit('moreConditionClear')
+    },
+
+    // 切换单行过滤或者是多行过滤
+    changeRotate () {
+      this.rotateValue = !this.rotateValue
+      this.$emit('changeRotate', this.rotateValue)
+    },
+
+    // 新增筛选行
+    addMultipleLine () {
+      this.$emit('addMultipleLine')
+    },
+
+    // 移除当前筛选行
+    removeMultipleLine (index) {
+      this.$emit('removeMultipleLine', index)
+    },
+
+    // 校验高级过滤条件重复
+    checkCondition (val) {
+      let flag = false
+      this.moreConditionFilterData.name.value.forEach((item, index) => {
+        // 排除当前index
+        const indexValue = this.moreConditionFilterData.name.value.findIndex(d => d === val)
+        if (this.moreConditionFilterData.name.value[index] === val && index !== indexValue) {
+          flag = true
+        }
+      })
+      return flag
+    },
+
+    // 校验高级过滤条件是否填写完整
+    checkMoreCondition () {
+      // 校验
+      let flag = false
+      this.moreConditionFilterData.name.value.forEach((item, index) => {
+        // 如果选中了字段，代表需要过滤条件
+        if (this.moreConditionFilterData.name.value[0] !== '') {
+          if (!this.moreConditionFilterData.leftBracket.value[index] ||
+                  !this.moreConditionFilterData.name.value[index] ||
+                  !this.moreConditionFilterData.condition.value[index] ||
+                  !this.moreConditionFilterData.value[index] ||
+                  !this.moreConditionFilterData.rightBracket.value[index]) {
+            flag = true
+          }
+        }
+      })
+      return flag
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.el-select-dropdown__item{
+  height: 2.222vh;
+  line-height: 2.222vh;
+  font-size: 0.625vw;
+}
+
+.condition-filter-component{
+  height: 2.222vh;
+  display: flex;
+  align-items: flex-start;
+
+  // 内容过滤样式
+  .quick-filter {
+    height: 100%;
+    border-bottom: 1px solid #dcdcdc;
+    ::v-deep .el-input__inner {
+      height: calc(100% - 1px);
+      border: none;
+    }
+    ::v-deep .el-input--prefix{
+      height: 100%;
+      display: flex;
+      //align-items: center;
+      font-size: 0.8vw;
+    }
+    ::v-deep .el-input__inner::placeholder{
+      color: #999999;
+      font-size: 0.625vw;
+    }
+    // ::v-deep .el-input__prefix{
+    //   //height: calc(100% - 2px);
+    //   //color: #999999;
+    //   //font-size: 0.8vw;
+    // }
+  }
+
+  ::v-deep .el-input{
+    height: 100%;
+    display: flex;
+  }
+  ::v-deep .el-input__suffix{
+    display: flex;
+    align-items: center;
+  }
+  // ::v-deep .el-icon-arrow-up{
+  //   //display: flex;
+  //   //align-items: center;
+  // }
+  ::v-deep .el-icon-arrow-up:before{
+    font-size: 0.625vw;
+  }
+  /*筛选框统一高度*/
+  ::v-deep .el-input__inner{
+    height: 2.222vh;
+    font-size: 0.625vw;
+  }
+  /*下拉框图标统一高度*/
+  ::v-deep .el-input__icon{
+    height: 2.222vh;
+    line-height: 2.222vh;
+  }
+  /*字段下拉框样式*/
+  .field-select{
+    margin-right: 0.1vh;
+    ::v-deep .el-input {
+      width: 8vw;
+    }
+  }
+  /*条件下拉框样式*/
+  .condition-select{
+    margin-right:0.1vh;
+    ::v-deep .el-input {
+      width: 6vw;
+    }
+  }
+  /*括号下拉框样式*/
+  .bracket-select{
+    margin-right:0.1vh;
+    ::v-deep .el-input {
+      width: 6vw;
+    }
+  }
+  /*值输入框样式*/
+  .value-input{
+    width: 5vw;
+    margin-right:0.1vh;
+    ::v-deep .el-input__inner{
+      width: 5vw;
+    }
+  }
+
+  /*单行筛选框*/
+  .single-line{
+    width: 20vw;
+    height: 100%;
+    display: flex;
+    //margin-right: -1.5vw;
+    .el-select:nth-child(2){
+      margin: 0 0.5vw;
+    }
+    .el-input:nth-last-child(1){
+      margin-right: 1vw;
+    }
+  }
+  @media screen and (max-width: 1920px){
+    .single-line{
+      width: 20vw;
+    }
+  }
+  @media screen and (max-width: 1366px){
+    .single-line{
+      width: 20vw;
+    }
+  }
+  /*多行筛选框*/
+  .multiple-lines{
+    z-index: 999;
+    border: 1px solid #0261a4;
+    border-radius: 0.9259vh;
+    box-sizing: border-box;
+    padding: 1.3889vh;
+    background: #FFFFFF;
+    .multiple-line{
+      height: 2.222vh;
+      margin-bottom: 1vh;
+      display: flex;
+      align-items: center;
+      ::v-deep .el-select{
+        height: 100%;
+      }
+    }
+    .remove-icon{
+      width: 0.625vw;
+      height: 0.625vw;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+    .add-icon{
+      width: 0.625vw;
+      height: 0.625vw;
+      cursor: pointer;
+    }
+  }
+  /*按钮组样式*/
+  .button-group {
+    display: flex;
+    align-items: center;
+    margin-left: 1.2vw;
+    ::v-deep .el-button--primary{
+      width: 3.5vw;
+      height: 2.2222vh;
+      padding: 0;
+      background: #ecf5ff;
+      border: 1px solid #0c4c8e;
+      border-radius: 5px;
+      font-size: 0.625vw;
+      font-family: Source Han Sans SC, Source Han Sans SC-Normal;
+      font-weight: Normal;
+      text-align: center;
+      color: #085497;
+    }
+    ::v-deep .el-button:nth-child(2) {
+      margin: 0 0.5vw;
+    }
+    /*图标按钮样式*/
+    .push-down{
+      width: 2vh;
+      height: 2vh;
+      margin-left: 0.5vw;
+      cursor: pointer;
+    }
+    .up{
+      transform: rotate(-180deg);
+      transition: all 0.5s;
+    }
+    .down{
+      transition: all 0.5s;
+    }
+  }
+}
+</style>