xiaoshi_system/src/views/components/import/conditionImport/customSearch.vue

<template>
  <div class="customSearch height_100" v-DivHeight="getDivHeight">
    <el-container style=" border: 1px solid #eee" :style="{height:tableHeight+'px'}">
        <el-aside v-if="DBType == 'WD'">
             <div>
                <div class="clearfix">
                    <span><el-checkbox v-model="checked" @change="change">全部国家地区</el-checkbox></span>
                    <span style="float: right; padding: 3px 0" type="text">{{ checkList.length }}/{{countryList1.length}}</span>
                </div>
                    <div style="padding:10px">
                      <el-input style="width:100%" v-model="suggest" @input="querySearch" placeholder="请输入内容"></el-input>
                    </div>
                    <div style="overflow-y:auto;overflow-x:hidden;" :style="{height:tableHeight-120+'px'}">
                       <el-checkbox-group v-model="checkList">
                        <div v-for="item in countryList1" :key="item.value" class="item">
                            <el-checkbox :label="item.value">{{ item.label }}({{ item.value }})</el-checkbox>
                        </div>
                            
                        </el-checkbox-group> 
                    </div>
                     
             </div>
        </el-aside>
        <el-main>
            <div>
                <myFormSearch :list="(editData && editData.component == 'customSearch')?editData.data:list" :field="field" :searchValue="true" @search="search"></myFormSearch>
            </div>
        </el-main>
    </el-container>
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
export default {
  name:'customSearch',
  components: {
  },
  mixins: [ getTableHeight],
  props: ['countryList','DBType','selected','editData'],
  data() {
    return {
      list:[],
        
        checkList:[],
        checked:false,
        //搜索值
        field:JSON.parse(JSON.stringify(this.$constants.searchField)),
        countryList1:[],
        suggest:'',
    };
  },
  watch: {
    'checkList'(val){
      if(val.length == this.countryList1.length){
        this.checked = true
      }else{
        this.checked = false
      }
    },
    DBType(){
      this.getField()
    },
    'countryList'(){
      this.countryList1 = this.countryList.filter(item=>item.value!='CN')
    },
  },
  computed: {},
  created() {},
  mounted() {
    if(this.selected){
      this.checkList = JSON.parse(JSON.stringify(this.selected))
    }
    this.countryList1 = this.countryList.filter(item=>item.value!='CN')
    this.getField()
    if(this.editData && this.editData.component == 'customSearch'){
      if(this.editData.checkList){
        this.checkList = this.editData.checkList
      }     
    }
  },
  methods: {
    querySearch() {
        var restaurants = this.countryList.filter(item=>item.value!='CN')
        var results = this.suggest ? restaurants.filter(this.createFilter(this.suggest)) : restaurants;
        this.countryList1 = results
       
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.label.indexOf(queryString) !== -1 || restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },
    getField(){
      // var a = JSON.parse(JSON.stringify(this.$constants.searchField))
      // this.field = a.map(item=>{ 
      //   item.children = item.children.filter(item1 =>{return item1.value!='GJ' && item1.type != (this.DBType != 'WD'?'2':'1')}) 
      //   return item
      // })

      var a = JSON.parse(JSON.stringify(this.$constants.searchField))
      this.field = a.map(item=>{ 
        item.children = item.children.filter(item1 =>{return item1.value!='GJ' && item1.type != (this.DBType != 'WD'?'2':'1')}) 
        return item
      }).filter(item=>{
        return item.children.length>0
      })
    },
    search(val,data){
      var params = {
        data:data,
        DBType:this.DBType,
        component:'customSearch'
      }
      if(this.DBType == 'WD' && this.checkList.length>0){
        params.checkList = this.checkList
        if(val){
          if(this.checkList.length==1){
            var a = `GJ=${this.checkList[0]}`
          }else{
            var a = `GJ=(${this.checkList.join(" OR ")})`
          }
          var str = `${val} AND ${a}`
        }else{
          if(this.checkList.length==1){
            var str = `GJ=${this.checkList[0]}`
          }else{
            var str = `GJ=(${this.checkList.join(" OR ")})`
          }
        }
        this.$emit('search',str,params)
      }else{
        this.$emit('search',`${val}`,params)
      }
      
    },
    change(val){
      if(val){
        this.checkList = this.countryList1.filter(item=>item.value!='CN').map(item=>item.value)
      }else{
        this.checkList = []
      }
    },
  },
};
</script>
<style lang="scss" scoped>

  .clearfix {
    // padding-left:20px ;
    padding:10px 20px ;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item{
    padding:10px 20px;
  }
</style>