Project-Annex/operationSupport/src/components/common/newsearch.vue

<!--
 * @Author: zZ(zzy6937@qq.com)
 * @Date: 2019-11-01 11:11:28
 * @LastEditors: zwy
 * @LastEditTime: 2021-02-02 18:22:13
 * @Description: 通用搜索
-->
<template>
  <form class="zz-search" ref="searchForm" @submit.prevent="search" action="">
    <div class="search-normal">
      <div class="col" v-for='(item, index) in normal' :key='index'>
        <span class="search-box">
					<span v-if="item.label" class='search-label'>{{item.label}}</span>
          <span class="search-content">
            <el-select v-if='item.options' :class="item.class" v-model="query[item.prop]" :placeholder="item.placeholder" clearable>
              <el-option v-for='(o, ot) in item.options' :key='ot' :label="o.label" :value="o.value || o.id"></el-option>
            </el-select>
            <slot v-else-if='item.slot' :name="item.slot"></slot>
            <el-input v-else :type="item.type" @input="(val)=> inputChange(val, item)" :class="item.class" :placeholder="item.placeholder" v-model.trim="query[item.prop]" clearable></el-input>
          </span>
				</span>
      </div>
      <el-button plain v-if='more.length'  @click="showMore = !showMore" class="more-search el-mgRight-md">
					高级搜索<i  :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" class="el-icon--right"></i></el-button>	
      <el-button v-if="normal.length && !showMore" native-type="submit" :disabled="btnDisabled" type='primary' class='search-btn' icon="el-icon-search">搜索</el-button>

      <!-- <el-button class="button-has-icon" v-if='more.length' @click="showMore = !showMore">
        高级搜索<i class="el-icon-caret-bottom el-icon--right" :class="{'top': showMore}"></i></el-button>
      <el-button type="primary" native-type="submit" v-if='normal.length && !showMore'>搜索</el-button> -->
    </div>
    <el-collapse-transition>
      <div class='search-more' v-show="showMore">
        <div v-for="(item, index) in more" :key='index' class="col" :class="{'margin0': (index+1) % 6 === 0}">
          <span class="search-box">
            <span v-if="item.label" class='search-label'>{{item.label}}</span>
            <span class="search-content">
              <el-select v-if='item.options' :class="item.class" v-model="query[item.prop]" :placeholder="item.placeholder" clearable>
                <el-option v-for='(o, ot) in item.options' :key='ot' :label="o.label" :value="o.value || o.id"></el-option>
              </el-select>
              <slot v-else-if='item.slot' :name="item.slot"></slot>
              <el-input v-else :type="item.type"  @input="(val)=> inputChange(val, item)" :class="item.class" :placeholder="item.placeholder" v-model.trim="query[item.prop]" clearable></el-input>
            </span>
          </span>
        </div>
        <div  class="col">
          <el-button type="primary" native-type="submit" icon="el-icon-search">搜索</el-button>
          <el-button class="reset_button" @click="reset">重置</el-button>
        </div>
      </div>
    </el-collapse-transition>
    <slot name='right-opt'></slot>
  </form>
</template>
<script>
/**
 * @description: 搜索控件
 * @param {Object} normal: 基本搜索条件
 * @param {Object} more: 更多搜索条件
 * @param {Object} query: 绑定的数据对象
 * @return {type}: null
 * @author: zZ(zzy6937@qq.com)
 */
export default {
  name: 'dmp-newsearch',
  props: {
    normal: {
      type: Array,
      default() {
        return []
      }
    },
    more: {
      type: Array,
      default() {
        return []
      }
    },
    query: {
      type: Object,
      default() {
        return {}
      }
    },
    resetQuery: {
      type: Object,
      default() {
        return {}
      }
    },
    // 不重置的字段集合
    noSetKeys: {
      type: Array,
      default() {
        return []
      }
    },
    btnDisabled: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      showMore: false
    }
  },
  methods: {
    search() {
      //this.showMore = false;
      this.$emit('search');
    },
    reset() {
      const set = new Set(this.noSetKeys)
      if (_.isEmpty(this.resetQuery)) {
        Object.keys(this.query).forEach((item) => {
          if (!set.has(item)) {
            this.query[item] = ''
          }
        })
      } else {
        const obj = {}
        Object.keys(this.resetQuery).forEach((item) => {
          if (!set.has(item)) {
            obj[item] = ''
          }
        })
        Object.assign(this.query, obj);
      }
      this.$emit("reset");
    },
    inputChange(val, item) {
      const {type, maxlength} = item;
      if(type == 'number' && maxlength) {
        if(val.toString().length > maxlength) {
          this.query[item.prop] = Number(val.toString().slice(0, maxlength));
        }
      }
    }
  },
  /* mounted() {
    this.$refs.searchForm.onkeydown = (event) => {
      const e = event || window.event;
      if (e && e.keyCode == 13) {
        this.search();
      }
    };
  }, */
  created() {
    const data = {}
    this.more.forEach((item) => {
      data[item.prop] = ''
    })
    this.normal.forEach((item) => {
      data[item.prop] = ''
    })
    this.data = data;
  }
  /* beforeDestroy() {
    this.$refs.searchForm.onkeydown = undefined;
  } */
}
</script>
<style lang="scss">
.zz-search {
  position:relative;
	
  .col {
    display:inline-block;
    vertical-align:middle;
    .el-input,.el-select,.el-calendar,.el-cascader {
      width: 180px;
      input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      input[type="number"] {
        -moz-appearance: textfield;
      }
    }
    .inherit-css {
      width: 140px !important;
      .el-input {
        width: 100% !important;
      }
    }
    .min-css{
      width: 110px !important;
      .el-input {
        width: 100% !important;
      }
    }
  }
  .search-box {
    display: flex;
    align-items:center;
    .search-label {
      margin-right: 0.520833333333333vw;
      color: #3b4045;
      font-size: 0.729166666666667vw;
      vertical-align: middle;
      display: inline-block;
      //min-width vw(60)
      text-align: justify;
      text-align-last: justify;
    }
  }
  .search-normal {
    
    // margin: 20px 0;
    .col, .el-button {
      margin-right: 20px;
    }
    .el-button {
      vertical-align: middle;
      margin-right: 15px;
    }
    .el-button +.el-button {
      margin-left: 0;
    }
    &:before {
      content:' ';
      width: 0;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
    .button-has-icon {
      padding-right: 5px;
      .el-icon-caret-bottom {
        transition: all .3s;
        &.top {
          transform: scale(0.8) rotate(180deg);
        }
      }
    }
  }
  .search-more {
    padding: 0 15px;
    font-size: 0;
    width: 100%;
    .el-input, .el-select {
      width: 100%;
    }
    .col {
      margin-right: 20px;
      margin-bottom: 20px;
      .el-input,.el-select,.el-calendar,.el-cascader {
        width: 180px;
      }
    }
    
    .el-button {
      min-width: 68px;	
    }
		.reset_button{
			border: 1px solid #0D87F9;
			opacity: 1;
			border-radius: 4px;
		}
    .el-button--default {
      margin-left: 20px;
    }
    .dmp-date-picker .el-input__inner {
      border: none;
      padding: 0 15px;
    }
  }
  .opt {
    position: absolute;
    top: 0;
    right: 0;
    img{
      width:30px;
      height:30px;
      margin-right: 10px;
    }
    &>.dmp-icon-big, &>.dmp-icon-big .dmp-icon-big{
      width: 32px;
      height: 32px;
      margin-left: 20px;
      font-size: 14px !important;
      justify-content: center;
      display: flex;
      align-items: center;
      padding: 0;
    }
    &>.dmp-icon-big .dmp-icon-big {
      margin: 0;
    }
  }
}
@media screen and (min-width: 1600px) {
  .zz-search {
    .search-normal .col {
      .el-input,.el-select,.el-calendar,.el-cascader {
        width: 180px;
      }
    }
  }
}
@media screen and (max-width: 1599px) {
  .zz-search {
    .search-normal .col {
      .el-input,.el-select,.el-calendar,.el-cascader {
        width: 125px !important
      }
    }
  }
}
</style>