<!-- 高级查询对话框组件
|
1、打开与关闭与el-dialog用法一致；
|
2、用户编辑好的查询条件通过@echoContion事件绑定相应的函数，实现子组件值传递回父组件；
|
3、用户输入的值会以conditionMap[field]的格式拼接好进行回传，然后就需要使用的地方自行进行查询的调用；
|
-->
|
<template>
|
<el-dialog
|
title="高级查询"
|
append-to-body
|
width="55vw"
|
style="height: 115vh; margin-top: -10vh; overflow: hidden"
|
:visible.sync="isShowDialog"
|
@close="recoverPage"
|
destroy-on-close>
|
<div class="search-total">
|
<!-- 头部按钮区域 -->
|
<div class="dialog-search-button">
|
<el-button
|
type="primary"
|
size="small"
|
icon="el-icon-search"
|
@click="searchSubmit">
|
查询
|
</el-button>
|
<el-button
|
type="warning"
|
size="small"
|
icon="el-icon-refresh"
|
@click="resetInput">
|
重置
|
</el-button>
|
</div>
|
<!-- 页面主体内容区域 -->
|
<div class="search-content">
|
<el-row
|
v-for="(item,index) in initOptions"
|
:key="item.queryField"
|
v-show="!item.hidden"
|
:span="24">
|
<el-col :span="5">
|
<div class="grid-content">
|
<el-select placeholder="请选择" v-model="searchFormArrays[index].queryField">
|
<el-option
|
v-for="feildName in initOptions"
|
:key="feildName.queryField"
|
:label="feildName.title"
|
:value="feildName.queryField">
|
</el-option>
|
</el-select>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="grid-content">
|
<el-select placeholder="请选择" v-model="searchFormArrays[index].condition">
|
<el-option
|
v-for="condition in item.fieldType=='text' ? searchConditions:switchSearchConditions"
|
:key="condition.value"
|
|
:label="condition.label"
|
:value="condition.value">
|
</el-option>
|
</el-select>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="grid-content">
|
<el-input v-show="item.fieldType==='text' || item.fieldType===''" v-model="searchFormArrays[index].fieldValue" type="text" placeholder="请输入"></el-input>
|
<el-select v-show="item.fieldType==='combox'" v-model="searchFormArrays[index].fieldValue" placeholder="请选择">
|
<el-option
|
v-for="option in item.data"
|
:key="option.value"
|
:label="option.key"
|
:value="option.value">
|
</el-option>
|
</el-select>
|
<el-switch v-show="item.fieldType==='truefalse'" v-model="searchFormArrays[index].fieldValue"></el-switch>
|
</div>
|
</el-col>
|
<el-col :span="2">
|
<div class="grid-content">
|
<i class="el-icon-close" @click="removeInput(index)"></i>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "advancedQuery",
|
props: {
|
// 对话框显示隐藏控制
|
visible: {
|
type: "Boolean",
|
default: false,
|
},
|
// 页面显示配置
|
options: {
|
type: "Object",
|
default: {},
|
},
|
conditionMapParams: {
|
type: "Object",
|
default: {},
|
},
|
},
|
data() {
|
return {
|
// 对话框显示控制
|
isShowDialog: this.visible,
|
initOptions: [],
|
// 字段是输入框类型的条件数组
|
searchConditions: [
|
{
|
value: "=",
|
label: "等于",
|
},{
|
value: "like",
|
label: "包含",
|
},{
|
value: "!=",
|
label: "不等于",
|
},{
|
value: ">",
|
label: "大于",
|
},{
|
value: "<",
|
label: "小于",
|
},
|
],
|
// 字段是单选或下拉框类型的条件数组
|
switchSearchConditions: [
|
{
|
value: "=",
|
label: "等于",
|
},{
|
value: "!=",
|
label: "不等于",
|
},
|
],
|
searchFormArrays: [],
|
}
|
},
|
watch: {
|
// 监听父组件传的窗口显示隐藏的值
|
visible (){
|
this.isShowDialog = this.visible;
|
},
|
// 对话框内容渲染配置
|
options(){
|
// 将options配置赋值到data中的option中，避免深浅拷贝的问题所以需要转json之后再赋值
|
const data = JSON.stringify(this.options);
|
this.initOptions = JSON.parse(data);
|
// console.log(this.initOptions);
|
this.initOptions.forEach((item,index) => {
|
let add = {
|
queryField: String(item.queryField),
|
condition: item.fieldType=='text' ? String("like"):String("="),
|
fieldValue: item.fieldType=='truefalse' ? Boolean(false):String(''),
|
}
|
this.searchFormArrays.push(add)
|
});
|
//console.log(this.searchFormArrays);
|
}
|
},
|
created () {
|
|
},
|
methods: {
|
// 移除搜索框
|
removeInput(index){
|
//console.log(this.initOptions);
|
this.$delete(this.initOptions,index);
|
this.$delete(this.searchFormArrays,index);
|
},
|
// 重置当前界面的输入框
|
resetInput(){
|
const data = JSON.stringify(this.options);
|
this.initOptions = JSON.parse(data);
|
let array = [];
|
this.initOptions.forEach((item,index) => {
|
let add = {
|
queryField: String(item.queryField),
|
condition:item.fieldType=='text' ? String("like"):String("="),
|
fieldValue: item.fieldType=='truefalse' ? Boolean(false):String(''),
|
}
|
array.push(add)
|
});
|
this.searchFormArrays = array;
|
//console.log(this.initOptions);
|
//console.log(this.searchFormArrays);
|
},
|
// 恢复页面
|
recoverPage(){
|
this.resetInput();
|
this.$emit('update:visible', false);
|
},
|
// 提交当前页面的输入的查询条件并做对应的过滤与检查
|
searchSubmit(){
|
let condtionParam = {};
|
const searchConditions = this.searchFormArrays;
|
for(let index = 0; index < searchConditions.length; index++) {
|
//console.log(condtionParam['conditionMap['+searchConditions[index].queryField+']']+'' == 'undefined');
|
if(searchConditions[index].fieldValue != '' || searchConditions[index].fieldValue+''==='false') {
|
// 存在相同的查询条件
|
if(condtionParam['conditionMap['+searchConditions[index].queryField+']']+''.trim() != 'undefined' ) {
|
this.$message.warning("存在重复查询条件，请仔细核对!");
|
return false;
|
}
|
condtionParam['conditionMap['+searchConditions[index].queryField+']'] = searchConditions[index].fieldValue;
|
}
|
}
|
//查询条件没有出现重复属性，并且过滤掉了空值，传递给父组件
|
//console.log(condtionParam);
|
// if(){
|
|
// }
|
this.$emit('echoContion',condtionParam)
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.search-total {
|
border-radius: 4px;
|
min-height: 70vh;
|
// margin-left: 35px;
|
margin-top: -8px;
|
overflow-y: auto;
|
height: 70vh;
|
}
|
.dialog-search-button {
|
border-top: 1px solid #E9E7E7;
|
border-bottom: 1px solid #E9E7E7;
|
padding: 10px 10px 10px;
|
position: fixed;
|
display: block;
|
background-color: #fff;
|
top: 90px;
|
width: 50%;
|
z-index: 1000;
|
}
|
// .search-total > .search-content > .el-row{
|
// margin-bottom: 5px;
|
// &:last-child {
|
// margin-bottom: 0;
|
// }
|
// }
|
.search-total > .search-content {
|
margin-top: 40px;
|
}
|
.search-total > .search-content > .el-row > .el-col {
|
border-radius: 4px;
|
}
|
.search-total > .search-content > .el-row > .el-col > .grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
.search-total > .search-content > .el-row > .el-col {
|
margin-right: 6px;
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
.grid-content > .el-icon-close {
|
font-size: 35px;
|
cursor: pointer;
|
color: rgb(222, 130, 105);
|
}
|
.grid-content > .el-icon-close:hover{
|
font-size: 38px;
|
color: rgb(219, 52, 6);
|
}
|
.grid-content > .el-select {
|
width: 100%;
|
}
|
.grid-content > .el-switch {
|
line-height: 40px;
|
height: 40px;
|
}
|
|
|
</style>
|
