dzhh-frontend/.svn/pristine/b0/b07454626daa07a782d208a55bf242df2f19b4ec.svn-base

<template>
  <div>
    <div class="table-page-search-wrapper" v-if="isShow">
      <a-form layout="inline"  @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <template v-for="(item,i) in searchData">
            <a-col :xl="6" :lg="7" :md="8" :sm="24" :key="i" v-if="i<3 || !isCollapse">
              <a-form-item :label="item.fieldTxt" v-if="item.searchMode === 'single'" style="padding:4px 0px;">
                <a-input type="text" v-if="item.fieldType === 'String'" v-model="item.value" :placeholder="'请输入'+item.fieldTxt"/>
                <a-input type="number" v-else-if="item.fieldType === 'Integer' || item.fieldType === 'Long'" v-model="item.value" :placeholder="'请输入'+item.fieldTxt"/>
                <a-date-picker v-else-if="item.fieldType === 'Date'" format="YYYY-MM-DD" v-model="item.value" :placeholder="'请输入'+item.fieldTxt"/>
              </a-form-item>
              <a-form-item :label="item.fieldTxt" v-else style="margin-bottom:0;padding:4px 0px;">
                <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 20px)','margin-right': '0px'}">
                  <a-input type="text" v-if="item.fieldType === 'String'" v-model="item.value[0]" :placeholder="'请输入'+item.fieldTxt"/>
                  <a-input type="number" v-else-if="item.fieldType === 'Integer' || item.fieldType === 'Long'" v-model="item.value[0]" :placeholder="'请输入'+item.fieldTxt"/>
                  <a-date-picker v-else-if="item.fieldType === 'Date' " format="YYYY-MM-DD" v-model="item.value[0]" :placeholder="'请输入'+item.fieldTxt"/>
                </a-form-item>
                <span style="padding: 0px 8px;">~</span>
                <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 20px)','margin-right': '0px' }">
                  <a-input type="text" v-if="item.fieldType === 'String'" v-model="item.value[1]" :placeholder="'请输入'+item.fieldTxt"/>
                  <a-input type="number" v-else-if="item.fieldType === 'Integer' || item.fieldType === 'Long'" v-model="item.value[1]" :placeholder="'请输入'+item.fieldTxt"/>
                  <a-date-picker v-else-if="item.fieldType === 'Date'" format="YYYY-MM-DD" v-model="item.value[1]" :placeholder="'请输入'+item.fieldTxt"/>
                </a-form-item>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24" style="padding:4px 0px;">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button  type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
              <a href="javascript:;" v-if="searchData.length>3" @click="handlerCollapse">
                {{isCollapse? '展开':'收回'}}
                <a-icon :type="isCollapse? 'down':'up'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GroupSearch',
  props: {
    items: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      searchData: [], // 查询数据
      isShow: false, // 控制组件是否显示
      isCollapse: true,
      isRestSearchData: true// 控制是否重新渲染查询组件
    }
  },
  watch: {
    items: {
      handler(newValue, oldValue) {
        this.getSearchData()
      },
      deep: true
    }
  },
  mounted() {
    this.getSearchData()
  },
  methods: {
    handlerCollapse() {
      this.isCollapse = !this.isCollapse
    },
    searchReset() {
      this.searchData.forEach(item => {
        if (item.searchMode === 'single') {
          item.value = null
        } else {
          item.value = [null, null]
        }
      })

      this.$emit('chartLoad', this.searchData)
    },
    searchQuery() {
      this.isRestSearchData = false
      this.$emit('chartLoad', this.searchData)
    },
    getSearchData() {
      if (!this.isRestSearchData) {
        return false
      }
      this.isRestSearchData = true
      this.searchData = []
      const itemsCopy = JSON.parse(JSON.stringify(this.items))
      itemsCopy.forEach((item, i) => {
        if (item.searchFlag === 1) {
          if (item.searchMode === 'single' || !item.searchMode) {
            this.searchData.push({
              value: null,
              fieldTxt: item.fieldTxt,
              fieldType: item.fieldType,
              fieldName: item.fieldName,
              searchMode: 'single'
            })
          } else if (item.searchMode === 'group') {
            this.searchData.push({
              value: [null, null],
              fieldTxt: item.fieldTxt,
              fieldType: item.fieldType,
              fieldName: item.fieldName,
              searchMode: 'group'
            })
          }
        }
      })
      if (this.searchData.length > 0) {
        this.isShow = true
      }
    }
  }
}
</script>
<style scoped>
.table-page-search-wrapper{
  padding: 10px 20px;
  margin-bottom: 20px;
  background-color: #fff;
}
.table-page-search-wrapper .ant-form-inline .ant-form-item,.table-page-search-submitButtons{
  margin-right: 16px;
  margin-bottom: 0;
}
.table-page-search-wrapper .ant-calendar-picker{
  width: 100%;
}
</style>