ag-element-ui/packages/agQuery/src/index.vue

<template>
    <div class="ag-querybox">
        <el-popover
        placement="bottom" 
        :width="width"
        v-model="popState"
       trigger="click">
        <ag-input  slot="reference" size="small" class="queryplacetext" :style="{width:labelWidth}" :clearable="false" :value="placeholderValue" :placeholder="placeholder"></ag-input>
        <el-form label-position="left" size="small" :model="values" :inline="false"  v-if="inputs.length>0" ref="queryformref">
            <ag-row>
                <ag-col :span="12" v-for="(item,index) in inputs" :key="index">
                <el-form-item :label="item.label" :rules="item.rules" :prop="item.name"> 
                    <ag-input :placeholder="item.placeholder" :value="item.value||''" closeable v-if="item.elem=='el-input'" @change="onSelect($event,item,index)"/>
                    <ag-select :placeholder="item.placeholder" :value="item.value||''" closeable v-if="item.elem=='el-select'" :options="item.options" style="width:100%" @change="onSelect($event,item,index)"/>
                </el-form-item> 
            </ag-col>
            <ag-col :offset="16" :span="8">
              <el-form-item > 
                <el-button size="small" @click="onCancel">取消</el-button>
                <el-button size="small" type="primary" @click="onQuery">查询</el-button>
                </el-form-item>
            </ag-col>
         </ag-row>
        </el-form>
      </el-popover>
    </div>
  </template>
  
  <script>
  import agSelect from "../../agSelect/src/index.vue";
  import agInput from "../../agInput/src/index.vue"; 
  import agRow from "./../../agRow/src/index.vue";
  import AgCol from "./../../agCol/src/index.vue";

  export default {
    name: "agQuery",
    components: {
      agSelect,
      agInput, 
      AgCol,
      agRow
    },
    props: { 
      width:{
        type: Number,
        default: 450,  
      },
      labelWidth:{
        type: Number,
        default: 200,  
      },
      inputs:{
        type: Array,
        default: () => {
          return [];
        },
      }, 
    },
    mounted(){  
       let newinput=this.inputs.map((g)=>g.label); 
       this.placeholder="请选择"+newinput.join("/");
    },
    data() {
      return {
        values: {},
        placeholderValue:"",
        placeholder:"请选择",
        popState:false,
        
      }
    }, 
    methods: {
      onSelect(value,item,index){  
          item.value=value;   
          this.$set(this.inputs,index,item);
          let newvalues={};
          let newplaceholderValue=[];
          this.inputs.map((g)=>{
            if(g.value&&g.name){
              newvalues[g.name]=g.value;  
              g.options.find((f)=>f.value==g.value).label&&(newplaceholderValue.push(g.options.find((f)=>f.value==g.value).label)); 
            } 
          });
          this.$emit('change',newvalues);
              this.values=newvalues;
              this.placeholderValue=newplaceholderValue.join("/")
      },
      onCancel(){
        this.popState=false;
        this.$emit('cancel');
      },
      onQuery(){ 
        console.log(this.$refs.queryformref,'this.$refs.queryformref');
        if(this.$refs.queryformref){
          this.$refs.queryformref.validate((valid) => {
          console.log(valid,"valid"); 
          if (valid) { 
            this.$emit('onSearch',this.values);
            this.popState=false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        }  
      }
    },
  };
  </script>
  
  <style scoped lang='scss'>
  .ag-querybox {
    display: flex;
    align-items: center;
    .queryplacetext{
        color:#333;
        max-width:200px;
        box-sizing: border-box;
        cursor: pointer;
        caret-color: transparent; /* 隐藏光标 */
    } 
  }
  ::v-deep {
    .el-form-item--small .el-form-item__label{
      line-height: 40px;
    }
    .el-form-item--small.el-form-item{
      margin-bottom:5px;
     
    }
  }
  </style>