163 lines
4.5 KiB
Vue
163 lines
4.5 KiB
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);
|
|
}
|
|
if(this.props.lazyLoad){
|
|
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> |