参考

<template>
  <el-dialog title="高级检索" :visible.sync="dialogVisible" width="100%" fullscreen>
    <div class="container">
      <div class="head">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="高级搜索">
            <el-select v-model="form.region" 
            placeholder="活动区域" size="small" 
            style="width:140px" @change="changeoption">
              >
              <el-option
                v-for="(item,index) in data"
                :key="index"
                :label="item.fielezh"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="form.regiontype"
              placeholder="活动区域"
              size="small"
              style="margin-left:5px;width:80px"
            >
              <el-option v-for="(item,index) in select"
                :key="index"
                :label="item.name"
                :value="item.num"></el-option>
        
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchtext" placeholder="请输入搜索内容" size="small"></el-input>
          </el-form-item>
          <el-form-item class="clse">
            <el-button type="primary" @click="onSubmit" size="small">关闭检索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="midle">
        <div class="aside">
            <div>
                <el-button type="primary" size="small" @click="addoption">增加检索条件</el-button>
                <div style="float:right">
                    <el-button type="primary" size="small" plain @click="submit">确定</el-button>
                <el-button type="primary" size="small" plain>重置</el-button>
                </div>  
            </div>
            <div v-for="(item,index) in count" :key="index" class="opty">
            <el-select
              v-model="forms[index]"
              placeholder="活动区域"
              size="small"
              style="margin-left:5px;width:80px"
            >
              <el-option v-for="(item,index) in option"
                :key="index"
                :label="item.name"
                :value="item.num"></el-option>
            </el-select>

            <el-select v-model="forms1[index]" 
            placeholder="活动区域" size="small" 
            style="width:120px ; margin:0 5px" @change="changeoptions($event,index)">
              >
              <el-option
                v-for="(item,index) in data"
                :key="index"
                :label="item.fielezh"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
             v-if="!selectItem[index]"
              v-model="forms2[index]"
              placeholder="活动区域"
              size="small"
              style="margin-left:5px;width:80px"
            >
              <el-option v-for="(item,index) in selecttion"
                :key="index"
                :label="item.name"
                :value="item.num"></el-option>
            </el-select>
            <span v-else>
               <el-select
             v-show="selectItem[index].type == '字符'||selectItem[index].type == '值列表'
             ||selectItem[index].type == '布尔'"
              v-model="forms2[index]"
              placeholder="活动区域"
              size="small"
              style="margin-left:5px;width:80px"
            >
              <el-option v-for="(item,index) in selecttion"
                :key="index"
                :label="item.name"
                :value="item.num"></el-option>
            </el-select>

            <el-select
            v-show="selectItem[index].type == '数字'"
              v-model="forms2[index]"
              placeholder="活动区域"
              size="small"
              style="margin-left:5px;width:80px"
            >
              <el-option v-for="(item,index) in selecttion1"
                :key="index"
                :label="item.name"
                :value="item.num"></el-option>
            </el-select>
            
            <el-select
             v-show="selectItem[index].type == '日期'"
              v-model="forms2[index]"
              placeholder="活动区域"
              size="small"
              style="margin-left:5px;width:80px"
            >
              <el-option v-for="(item,index) in selecttion2"
                :key="index"
                :label="item.name"
                :value="item.num"></el-option>
            </el-select>

            </span>
            
            <span v-if="forms1[index]">
               <el-input v-model="stext[index]"
               v-if="selectItem[index].type == '字符'||
                selectItem[index].type == '值列表'"
                placeholder="请输入搜索内容"
                 size="small" style="width:75%; margin:8px"></el-input>

                 <el-input v-model="stext[index]"
               v-else-if=" selectItem[index].type == '数字' && forms2[index]!==5"
                placeholder="请输入搜索内容"
                 size="small" style="width:75%; margin:8px"></el-input>


                    <el-date-picker
                    v-else-if="selectItem[index].type == '日期' && forms2[index]!==5" style="width:75%; margin:8px"
                      size="small"
                      v-model="stext[index]"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                    
                      <el-radio-group v-model="stext[index]" v-else-if="selectItem[index].type == '布尔'" >
                          <el-radio :label="0">是</el-radio>
                          <el-radio :label="1">否</el-radio>
                    
                        </el-radio-group>
                        <el-date-picker
                      v-else-if="selectItem[index].type == '日期' && forms2[index]==5"
                      v-model="stext[index]"
                      size='small'
                      style="width:75%; margin:8px"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>

                    <el-form :inline="true"
                     class="demo-form-inline" v-else-if="selectItem[index].type == '数字' && forms2[index]==5">
                    <!-- <el-form-item label="审批人">
                      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                    </el-form-item> -->
                    <el-form-item >
                          <el-col :span="11">
                           <el-input v-model="stext[index]" placeholder="请输入" size='small'></el-input>
                          </el-col>
                          <el-col class="line" :span="2">-</el-col>
                          <el-col :span="11">
                            <el-input v-model="stexts[index]" placeholder="请输入" size='small'></el-input>
                          </el-col>
                        </el-form-item>
                   
                  
                  </el-form>
                  </span>
                 <el-button type="danger" size="small" @click="delitem(index)">删除</el-button>
            </div>

            </div>

        </div>
        <div class="main"></div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["opend"],
  data() {
    return {
      dialogVisible: false,
      searchtext: "",
      types:'',
      selectItem:[{type:'字符'}],
      select:'',
      count:[],
      forms:[],
      forms1:[],
      forms2:[],
      forms3:[],
      forms4:[],
      stext:[],
      stexts:[],
      listArr:[],
      form: {
        region: "",
        regiontype: "",

      },

      data: [
        { fielezh: "专业", type: "字符", id: 12 },
        { fielezh: "专家", type: "字符", id: 14 },
        { fielezh: "创建时间", type: "日期", id: 54 },
        { fielezh: "工本费", type: "值列表", id: 134 },
        { fielezh: "是否报销", type: "布尔", id: 123 },
        { fielezh: "价钱", type: "数字", id: 145 },
        { fielezh: "作者", type: "字符", id: 166 }
      ],
      selecttion: [
        { name: "包含", num: 0 },
        { name: "不包含", num: 1 },
        { name: "等于", num: 2 },
        { name: "不等于", num: 3},
        { name: "大于", num: 4 },
        { name: "介于", num: 5 },
        { name: "小于", num: 6 }
      ],
       selecttion1: [
        { name: "包含", num: 0 },
        { name: "不包含", num: 1 },
        { name: "等于", num: 2 },
        { name: "不等于", num: 3 },
        { name: "小于", num:6},
        { name: "不小于", num: 7 },
        { name: "介于", num: 5 },
        { name: "大于", num: 4 },
        { name: "大于或等于", num: 8 }
      ],
       selecttion2: [
        { name: "包含", num: 0 },
        { name: "不包含", num: 1 },
        { name: "等于", num: 2 },
        { name: "不等于", num: 3 },
        { name: "介于", num: 5},
      ],
      option:[
          { name: "或", num: 0 },
        { name: "并且", num: 1 },
      ]

    };
  },
  created(){
    this.select = this.selecttion
  },
  watch: {
    opend(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      console.log(val);
      this.$emit("onchange", val);
    }
  },
  methods: {
    // 关闭检索
    onSubmit() {
      this.dialogVisible = false;

    },

    changeoption(val){
       console.log(val)
       this.data.forEach(item => {
           if (item.id == val) {
             this.types= item.type 
               switch (item.type) {
                   case '字符':
                       this.select = this.selecttion
                       break;
                        case '日期':
                       this.select = this.selecttion1
                       break;
                        case '布尔':
                       this.select = this.selecttion2
                       break;
                        case '数字':
                       this.select = this.selecttion1
                       break;
                        case '值列表':
                       this.select = this.selecttion
                       break;  
               }
           }
       });
    },
        changeoptions(e,inx){
      console.log(e,inx)
      this.forms1[inx] = e.fielezh
      this.selectItem.splice(inx,1,e)
      this.selectItem.splice(inx+1,1,{type:'字符'})
      console.log(this.selectItem)
 
    },
    // 增加检索条件
    addoption(){
        if (this.count <= this.data.length+1) {
            this.count++
        }else{
          this.selectItem.splice(0,1,{type:'字符'})
            return this.$message.success('超出最大搜索条件')
        }
    },
    // 删除检索条件
    delitem(inx){
      // this.selectItem.splice(inx,1)
       if (this.count >=0) {
            this.count--
           this.selectItem.splice(inx,1)
           this.forms1.splice(inx,1)
           this.listArr?this.listArr.splice(inx,1):[]
        }else{
            return this.$message.success('超出最大搜索条件')
        }
    },
    // 确定
    submit(){
      console.log(this.forms2)
      console.log(this.selectItem)
      for (const index in this.forms1) {
        console.log(index)
        this.listArr.splice(index,1,{
        andor:this.forms[index],
        value:this.stext[index],
        fielezh:this.selectItem[index].fielezh,
        types:this.selectItem[index].type,
        option:this.forms2[index]
      })  
      }

      const query = [{
        andor:0,
        value:this.searchtext,
        fielezh:this.form.region,
        types:this.types,
        option:this.form.regiontype
      },...this.listArr]
      console.log(query)
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 1000px;
  width: 100%;
}
.head {
  height: 60px;
  .clse {
    float: right;
  }
}
.midle {
  display: flex;
  width: 100%;
  height: 640px;
  .aside {
    width: 310px;
    padding: 0 5px;
    .opty{
        margin: 10px 0;
        padding-bottom: 20px;
        border-bottom:rgb(197, 187, 191) solid 1px;
    }
  }
  .main {
    flex: 1;
    background: burlywood;
  }
}
</style>