vue智能搜索表單

先來張效果圖

第一步:引入寫好的組件

<options-search :formObj="formObj" @data="getData"></options-search>

第二步:本身設置下傳入的表單,其中selfDefine能夠設置默認值,filterInfo是表單數組,field是數據庫對應的字段名稱,type是表單類型(input文本搜索框,time時間範圍,radio單選框,checkbox複選框,change數值範圍)

/**formObj格式以下:**/

 formObj: {
          selfDefine: true,
          filterInfo: [
            {
              field: 'companyName',
              type: 'input',
              name: '企業名稱',
              value: ''
            },
            {
               field: 'time',
                type: 'time',
               name: '時間範圍',
                 value: {
               startDate: '',
                  endDate: ''
             }
            },
            {
              field: 'companyType',
              type: 'radio',
              name: '單位類型',
              value: [{
                label: '生產',
                value: '生產'
              }, {
                label: '批發',
                value: '批發'
              }, {
                label: '燃放',
                value: '燃放'
              }, {
                label: '出口',
                value: '出口'
              }, {
                label: '長期零售',
                value: '長期零售'
              }, {
                label: '臨時零售',
                value: '臨時零售'
              }]
            },
            {
              field: 'companyStatus',
              type: 'checkbox',
              name: '單位狀態',
              value: [{
                label: '有效',
                value: '有效'
              }, {
                label: '無效',
                value: '無效'
              }, {
                label: '註銷',
                value: '註銷'
              }, {
                label: '過時',
                value: '過時'
              }]
            },
            {
              field: 'province',
              type: 'radio',
              name: '省內外',
              value: [{
                label: '省內',
                value: '省內'
              }, {
                label: '省外',
                value: '省外'
              }]
            },
            {
              field: 'loginMoney',
              type: 'range',
              name: '註冊資金(萬元)',
              value: {
                min: '',
                max: ''
              }
            },
            {
              field: 'productCount',
              type: 'range',
              name: '產量(件)',
              value: {
                min: '',
                max: ''
              }
            }
          ]
        },

OptionsSeach.vue組件

<template>
  <div class="show-more-box">
    <div class="show-more" @click="clickMore()">+</div>
    <div class="show-more-child">
      <div class="more-header">
        <span class="more-title">智能篩選</span>
        <span class="close" @click="closeMore()"></span>
      </div>
      <div class="more-body">
        <el-col :span="24">
          <el-form label-width="120px" ref="form" :model="form" class="search-form">
            <div v-for="(item,index) in formObj.filterInfo" :key="index">
              <el-form-item :label="item.name" v-if="item.type==='input'" :prop="item.field">
                <el-autocomplete
                  size="mini"
                  v-model="form[item.field]"
                  :fetch-suggestions="querySearch"
                  placeholder="請輸入內容"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                ></el-autocomplete>
              </el-form-item>
              <el-form-item :label="item.name" v-else-if="item.type === 'time'" :prop="item.field">
                <div class="block">
                  <el-date-picker
                    v-model="form[item.field].startDate"
                    type="date"
                    size="mini"
                    style="width:140px;"
                    :editable=false
                    placeholder="選擇開始日期">
                  </el-date-picker>
                  <el-date-picker
                    v-model="form[item.field].endDate"
                    type="date"
                    size="mini"
                    style="width:140px;"
                    :editable=false
                    placeholder="選擇結束日期">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item :label="item.name" v-else-if="item.type === 'range'" :prop="item.field">
                <el-input style="width:120px;" size="mini" type="number" v-model="form[item.field].min"></el-input>
                ~
                <el-input style="width:120px;" size="mini" type="number" v-model="form[item.field].max"></el-input>
              </el-form-item>
              <el-form-item :label="item.name" v-else-if="item.type === 'select'" :prop="item.field">
                <el-select v-model="form[item.field]" clearable placeholder="請選擇" size="mini">
                  <el-option
                    v-for="k in item.value"
                    :key="k.value"
                    :label="k.label"
                    :value="k.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="item.name" v-else-if="item.type==='radio'" :prop="item.field">
                <el-radio-group v-model="form[item.field]" size="mini">
                  <el-radio-button v-for="k in item.value" :label="k.value" :key="k.value">{{k.label}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="item.name" v-else-if="item.type === 'checkbox'" :prop="item.field">
                <el-checkbox-group v-model="form[item.field]" size="mini">
                  <el-checkbox-button v-for="k in item.value" :label="k.value" :key="k.value">{{k.label}}
                  </el-checkbox-button>
                </el-checkbox-group>
              </el-form-item>
            </div>
            <div class="m-b-15">
              <el-form-item>
                <el-button type="primary" size="mini" @click="onSubmitForm">搜索</el-button>
                <el-button type="warning" size="mini" @click="onResetForm('form')">重置</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'

  export default {
    props: ['formObj'],
    data() {
      return {
        form: {}, // 搜索參數的表單
        companySuggest: [] // 煤礦名稱提示框
      }
    },
    created() {
      let self = this
      if (self.formObj.selfDefine === false) { // 判斷是否爲自定義表單
        self.formObj.filterInfo = [
          {
            field: 'mineCompany',
            type: 'input',
            name: '煤礦企業',
            value: ''
          },
          {
            field: 'size',
            type: 'range',
            name: '產能區間(萬噸)',
            value: {
              min: '',
              max: ''
            }
          },
//          {
//            field: 'timechange',
//            type: 'time',
//            name: '時間範圍',
//            value: {
//                startDate: '',
//                endDate: ''
//            }
//          },
          {
            field: 'economy',
            type: 'radio',
            name: '顯示關閉礦井',
            value: [{
              label: '是',
              value: '是'
            }, {
              label: '否',
              value: '否'
            }]
          }, {
            field: 'mineClassify',
            type: 'radio',
            name: '瓦斯等級',
            value: [{
              label: '低瓦斯礦井',
              value: '低瓦斯礦井'
            }, {
              label: '高瓦斯礦井',
              value: '高瓦斯礦井'
            }, {
              label: '突出礦井',
              value: '突出礦井'
            }, {
              label: '待定',
              value: '待定'
            }]
          }, {
            field: 'mineStatus',
            type: 'radio',
            name: '許可證狀態',
            value: [{
              label: '未辦證',
              value: '未辦證'
            }, {
              label: '持證(正常)',
              value: '持證(正常)'
            }, {
              label: '持證(暫扣)',
              value: '持證(暫扣)'
            }, {
              label: '正常註銷',
              value: '正常註銷'
            }, {
              label: '吊銷',
              value: '吊銷'
            }]
          }, {
            field: 'standarLevel',
            type: 'radio',
            name: '標準化等級',
            value: [{
              label: '一級',
              value: '一級'
            }, {
              label: '二級',
              value: '二級'
            }, {
              label: '三級',
              value: '三級'
            }, {
              label: '未達標',
              value: '未達標'
            }, {
              label: '未評定',
              value: '未評定'
            }]
          }, {
            field: 'mineType',
            type: 'radio',
            name: '煤礦類型',
            value: [{
              label: '國有重點',
              value: '國有重點'
            }, {
              label: '地方國有',
              value: '地方國有'
            }, {
              label: '鄉鎮煤礦',
              value: '鄉鎮煤礦'
            }]
          }, {
            field: 'economicsType',
            type: 'select',
            name: '經濟類型',
            value: [{
              label: '公有經濟',
              value: '公有經濟'
            }, {
              label: '國有經濟',
              value: '國有經濟'
            }, {
              label: '集體經濟',
              value: '集體經濟'
            }, {
              label: '非公有經濟',
              value: '非公有經濟'
            }, {
              label: '私有經濟',
              value: '私有經濟'
            }, {
              label: '港澳臺經濟',
              value: '港澳臺經濟'
            }, {
              label: '外商經濟',
              value: '外商經濟'
            }]
          }, {
            field: 'mineState',
            type: 'select',
            name: '礦井情況',
            value: [{
              label: '擬建礦井',
              value: '擬建礦井'
            }, {
              label: '新建礦井',
              value: '新建礦井'
            }, {
              label: '生產礦井',
              value: '生產礦井'
            }, {
              label: '改擴建礦井',
              value: '改擴建礦井'
            }, {
              label: '改建礦井',
              value: '改建礦井'
            }, {
              label: '擴建礦井',
              value: '擴建礦井'
            }, {
              label: '長期停產礦井',
              value: '長期停產礦井'
            }, {
              label: '停工礦井',
              value: '停工礦井'
            }, {
              label: '已關閉礦井',
              value: '已關閉礦井'
            }, {
              label: '正在實施關閉礦井',
              value: '正在實施關閉礦井'
            }, {
              label: '停建礦井',
              value: '停建礦井'
            }, {
              label: '長期停產礦井(長期沒法聯繫)',
              value: '長期停產礦井(長期沒法聯繫)'
            }]
          }, {
            field: 'mineLevel',
            type: 'radio',
            name: '礦井井型',
            value: [{
              label: '特大型煤礦',
              value: '特大型煤礦'
            }, {
              label: '大型礦井',
              value: '大型礦井'
            }, {
              label: '中型礦井',
              value: '中型礦井'
            }, {
              label: '小型礦井',
              value: '小型礦井'
            }]
          }, {
            field: 'methodType',
            type: 'radio',
            name: '開採類型',
            value: [{
              label: '露天',
              value: '露天'
            }, {
              label: '井工',
              value: '井工'
            }]
          }, {
            field: 'productMethods',
            type: 'select',
            name: '開拓方式',
            value: [{
              label: '立井',
              value: '立井'
            }, {
              label: '斜井',
              value: '斜井'
            }, {
              label: '平硐',
              value: '平硐'
            }, {
              label: '立井斜井混合',
              value: '立井斜井混合'
            }, {
              label: '平硐斜井混合',
              value: '平硐斜井混合'
            }, {
              label: '片盤斜井混合',
              value: '片盤斜井混合'
            }, {
              label: '其餘',
              value: '其餘'
            }, {
              label: '公路運輸',
              value: '公路運輸'
            }, {
              label: '固定坑線',
              value: '固定坑線'
            }]
          }, {
            field: 'transportMethod',
            type: 'radio',
            name: '運輸方式',
            value: [{
              label: '皮帶運輸',
              value: '皮帶運輸'
            }, {
              label: '電機車牽引',
              value: '電機車牽引'
            }, {
              label: '調度絞車',
              value: '調度絞車'
            }, {
              label: '人力絞車',
              value: '人力絞車'
            }, {
              label: '人力手推礦車',
              value: '人力手推礦車'
            }, {
              label: '其餘',
              value: '其餘'
            }]
          }, {
            field: 'windMethod',
            type: 'select',
            name: '通風方式',
            value: [{
              label: '中央並列壓入',
              value: '中央並列壓入'
            }, {
              label: '中央分列壓入',
              value: '中央分列壓入'
            }, {
              label: '對角壓入',
              value: '對角壓入'
            }, {
              label: '中央並列推出',
              value: '中央並列推出'
            }, {
              label: '中央分列抽出',
              value: '中央分列抽出'
            }, {
              label: '對角抽出',
              value: '對角抽出'
            }, {
              label: '其餘',
              value: '其餘'
            }]
          }, {
            field: 'electricMethod',
            type: 'radio',
            name: '供電方式',
            value: [{
              label: '雙迴路',
              value: '雙迴路'
            }, {
              label: '雙電源',
              value: '雙電源'
            }, {
              label: '單迴路',
              value: '單迴路'
            }]
          }, {
            field: 'mineFire',
            type: 'radio',
            name: '煤層自燃傾向性',
            value: [{
              label: '不易自燃',
              value: '不易自燃'
            }, {
              label: '容易自燃',
              value: '容易自燃'
            }, {
              label: '自燃',
              value: '自燃'
            }, {
              label: '未檢測',
              value: '未檢測'
            }]
          }
        ]
      }
      let newForm = {}
      self.formObj.filterInfo.forEach(item => {
        if (item.type === 'range') {
          newForm[item.field] = {min: '', max: ''}
        } else if (item.type === 'time') {
          newForm[item.field] = {startDate: '', endDate: ''}
        } else if (item.type === 'checkbox') {
          newForm[item.field] = []
        } else {
          newForm[item.field] = ''
        }
      })
      // 獲取搜索參數表單
      self.form = newForm
    },
    mounted() {
    },
    components: {},
    methods: {
      /**
       * 點擊+,顯示更多篩選
       * */
      clickMore() {
        $('.show-more-child').toggleClass('slow-show')
      },
      /**
       * 關閉更多篩選
       * */
      closeMore() {
        $('.show-more-child').toggleClass('slow-show')
      },
      /**
       * 點擊智能搜索
       * */
      onSubmitForm() {
        let self = this
        let data = {}
        data.action = 'optionsSearch'
        data.data = self.form
        self.$emit('data', data)
      },
      /**
       * 重置搜索
       * */
      onResetForm(formName) {
        let self = this
        self.$refs[formName].resetFields()
        self.formObj.filterInfo.forEach(item => {
          if (item.type === 'range') {
            self.form[item.field] = {min: '', max: ''}
          } else if (item.type === 'time') {
            self.form[item.field] = {startDate: '', endDate: ''}
          }
        })
      },
      /**
       * 輸入內容開始匹配,顯示提示框
       * */
      querySearch(queryString, cb) {
        // 這裏設置智能提示內容數組
        let restaurants = [
          {value: '北京聯華礦業有限公司'}
        ]
        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 調用 callback 返回建議列表的數據
        cb(results)
      },
      /**
       * 檢索搜索內容的匹配,只匹配開頭===0或是含有!==-1
       * */
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
        }
      },
      handleSelect(item) {
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .show-more-box {
    display: inline-block;
    width: 40px;
    margin-left: 30px;
    margin-top: 15px;
    height: 40px;
    position: relative;
    color: #fff;
    .show-more {
      display: inline-block;
      width: 40px;
      height: 40px;
      color: #fff;
      font-size: 2em;
      text-align: center;
      line-height: 35px;
      border-radius: 15px;
      background: rgba(51, 69, 255, 0.8);
      cursor: pointer;
    }
    .show-more-child {
      width: 600px;
      background: radial-gradient(ellipse at center, #4266C1 0%, #0A339A 47%, rgba(21, 42, 95, 1) 100%);
      /*background: rgba(21, 42, 95, 1);*/
      transform: scale(0);
      transform-origin: top left;
      transition: all 0.5s;
      position: absolute;
      top: 0;
      left: 0px;
      z-index: 9;
      border-radius: 15px;
    }
    .more-header {
      background: #20a0ff;
      height: 50px;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }
    .more-title {
      line-height: 50px;
      margin-left: 20px;
      color: #fff;
      font-size: 1em;
    }
    .more-body {
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
      border: 1px solid #20a0ff;
    }
    .search-form {
      margin-top: 15px;
      .el-form-item {
        margin-bottom: 0px;
      }
      label {
        color: #fff;
      }
      input {
        background: transparent;
        border: 1px solid #20a0ff;
        color: #fff;
      }
      .el-radio-button__inner {
        background: transparent;
        border: 1px solid #20a0ff;
        color: #fff;
      }
      .el-checkbox-button__inner {
        background: transparent;
        border: 1px solid #20a0ff;
        color: #fff;
      }
      .is-active {
        .el-radio-button__inner {
          background: #20a0ff;
          border: 1px solid #20a0ff;
          color: #fff;
        }
        span {
          border: none;
        }
      }
      .is-checked {
        .el-checkbox-button__inner {
          background: #20a0ff;
          border: 1px solid #20a0ff;
          color: #fff;
        }
        span {
          border: none;
        }
      }
      .date-picker {
        width: 94%;
        margin: 0;
        .el-form-item {
          margin-bottom: 0;
        }
      }
      input[type=number] {
        -moz-appearance: textfield;
      }
      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
    .close {
      color: #fff;
      border-radius: 12px;
      line-height: 20px;
      text-align: center;
      height: 20px;
      width: 20px;
      font-size: 22px;
      padding: 5px;
      top: 10px;
      right: 10px;
      position: absolute;
      transition: all 0.5s;
    }
    .close::before {
      content: "\2716";
    }
    .close:hover {
      /*background: rgba(51, 69, 255, 0.8);*/
      background: #ED1C24;
    }
    .slow-show {
      transform: scale(1);
    }
    .m-b-15 {
      margin-bottom: 15px;
    }
  }
</style>