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-select :placeholder="item.placeholder" :value="item.value||''" closeable :options="item.options" style="width:100%" @change="onSelect($event,item,index)"/>
                </el-form-item> 
            </ag-col> 
         </ag-row>
         <div class="footerbox">
          <el-button size="small" @click="onCancel">取消</el-button>
          <el-button size="small" type="primary" @click="onQuery">查询</el-button>
         </div>
        </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 [];
        },
      }, 
      props:{
        type: Object,
        default: () => {
          return { 
            lazyLoad (node, resolve) { 
            }
          };
        }, 
      }
    },
    model: {  
      prop: 'values', // 明确指定 prop 为 'value'  
      event: 'onSearch' // 自定义事件名，用于更新 value  
  },  
     mounted(){  
       let newinput=this.inputs.map((g)=>g.label); 
       this.placeholder="请选择"+newinput.join("/");
       if(this.props.lazyLoad){
             this.props.lazyLoad({level:0,pathLabels:this.values,value:""},(datas)=>{
                this.inputs[index+1].options=datas;
              }); 
       }
    },
    data() {
      return {
        values: {},
        placeholderValue:"",
        placeholder:"请选择",
        popState:false, 
      }
    }, 
    methods: {
      onReset(){
         this.values={};
         this.$emit('onSearch',this.values);
      },
      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.values=newvalues;
            if(this.$listeners.change){
              this.$emit('change',newvalues);
            }
            this.props.lazyLoad({level:index+1,pathLabels:newvalues,value},(datas)=>{
                this.inputs[index+1].options=datas;
              }); 
            this.placeholderValue=newplaceholderValue.join("/")
      },
      onCancel(){
        this.popState=false;
        if(this.$listeners.onCancel){
          this.$emit('onCancel');
        } 
      },
      onQuery(){  
        if(this.$refs.queryformref){
          this.$refs.queryformref.validate((valid) => { 
          if (valid) { 
            this.$emit('onSearch',this.values);
            this.popState=false;
          } else { 
            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; /* 隐藏光标 */
    } 
  }
  .footerbox{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top:5px;
  }
  ::v-deep {
    .el-form-item--small .el-form-item__label{
      line-height: 40px;
    }
    .el-form-item--small.el-form-item{
      margin-bottom:5px;
     
    }
  }
  </style>