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

<template>
  <div class="customSearch">
    <el-container style=" border: 1px solid #eee" :style="{height:height-70+'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 }}/{{countryList.length}}</span>
                </div>
                    <div style="overflow-y:auto;overflow-x:hidden;" :style="{height:height-120+'px'}">
                       <el-checkbox-group v-model="checkList">
                        <div v-for="item in countryList" :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>
                <search :logical="logical" :logicalProps="logicalProps" :operator="operator" :field="field" :searchValue="true" @search="search"></search>
            </div>
        </el-main>
    </el-container>
  </div>
</template>

<script>
import search from '@/views/workspace/components/common/search.vue'
export default {
  components: {
    search
  },
  props: ['countryList','DBType'],
  data() {
    return {
        height:document.getElementsByClassName('el-main')[0].clientHeight,
        checkList:[],
        checked:false,
        //逻辑符
        logical:[
                {
                    name:'并且',
                    value:'AND'
                },
                {
                    name:'或者',
                    value:'OR'
                },
                {
                    name:'非',
                    value:'NOT'
                },
            ],
            logicalProps:{
                label:'name',
                value:'value'
            },
            //运算符
            operator:[
                {
                    label:'=',
                    value:'='
                },
                // {
                //     label:'>',
                //     value:'>'
                // },
                // {
                //     label:'<',
                //     value:'<'
                // },
                // {
                //     label:'<=',
                //     value:'<='
                // },
            ],
            //搜索值
            field:JSON.parse(JSON.stringify(this.$constants.searchField)),
    };
  },
  watch: {
    'checkList'(val){
      if(val.length == this.countryList.length){
        this.checked = true
      }else{
        this.checked = false
      }
    },
    DBType(){
      this.getField()
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.getField()
  },
  methods: {
    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
      })
    },
    search(val){
      if(this.DBType == 'WD' && this.checkList.length>0){
        var str = `${val} AND (GJ=${this.checkList})`
        this.$emit('search',str)
      }else{
        this.$emit('search',`${val}`)
      }
      
    },
    change(val){
      if(val){
        this.checkList = this.countryList.map(item=>item.value)
      }else{
        this.checkList = []
      }
    },
  },
};
</script>
<style lang="scss" scoped>

  .clearfix {
    // padding-left:20px ;
    padding:10px 20px ;
    border-bottom: 1px solid #eeeeee;
  }
  .item{
    padding:10px 20px;
  }
</style>