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>