vue智能搜索表单

时间 2020-04-20

标签 vue 智能搜索表单栏目 HTML 繁體版

原文原文链接

先来张效果图

第一步:引入写好的组件

<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>