<!-- 高级查询对话框组件
|
1、打开与关闭与el-dialog用法一致；
|
2、用户编辑好的查询条件通过@echoContion事件绑定相应的函数，实现子组件值传递回父组件；
|
3、用户输入的值会以conditionMap[field]的格式拼接好进行回传，然后就需要使用的地方自行进行查询的调用；
|
-->
|
<template>
|
<el-dialog
|
v-dialogDrag
|
:visible.sync="isShowDialog"
|
append-to-body
|
class="avue-dialog avue-dialog--top"
|
destroy-on-close
|
lock-scroll
|
style="height: 100vh;overflow: hidden"
|
title="高级查询"
|
top="-3%"
|
width="46vw"
|
@close="recoverPage">
|
<div class="search-total">
|
<!-- 头部按钮区域 -->
|
<div slot="title" class="dialog-search-button">
|
<el-button
|
icon="el-icon-search"
|
size="small"
|
type="primary"
|
@click="searchSubmit">
|
查询
|
</el-button>
|
<el-button
|
icon="el-icon-refresh"
|
size="small"
|
type="warning"
|
@click="resetInput">
|
重置
|
</el-button>
|
</div>
|
<!-- 页面主体内容区域 -->
|
<div class="search-content">
|
<el-row
|
v-for="(item,index) in initOptions"
|
:key="item.queryField"
|
:span="24">
|
<el-col :span="6">
|
<div class="grid-content">
|
<el-select v-model="searchFormArrays[index].queryField" disabled placeholder="请选择">
|
<el-option
|
v-for="feildName in options"
|
: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 v-model="searchFormArrays[index].condition" placeholder="请选择">
|
<el-option
|
v-for="condition in item.conditions"
|
: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-if="item.fieldType==='text' || item.fieldType===''"
|
v-model="searchFormArrays[index].fieldValue" placeholder="请输入" type="text"></el-input>
|
<el-select v-else-if="item.fieldType==='combox'" v-model="searchFormArrays[index].fieldValue"
|
placeholder="请选择">
|
<el-option
|
v-for="option in item.data"
|
:key="option.itemValue || option.value"
|
:label="option.itemName || option.label"
|
:value="option.itemValue || option.value">
|
</el-option>
|
</el-select>
|
<el-switch v-else-if="item.fieldType==='truefalse'"
|
v-model="searchFormArrays[index].fieldValue"></el-switch>
|
<el-date-picker v-else-if="item.fieldType==='datetime'"
|
v-model="searchFormArrays[index].fieldValue"
|
placeholder="选择日期"
|
type="date">
|
</el-date-picker>
|
<vci-web-refer
|
v-else-if="item.fieldType==='refer'"
|
:display="!item.hidden"
|
:referConfig="item.referConfigData || {}"
|
:text="item.showField"
|
:value="searchFormArrays[index].fieldValue"
|
@setReferValue="val=>setReferValue(val,index)">
|
</vci-web-refer>
|
</div>
|
</el-col>
|
<el-col :span="1">
|
<div class="grid-content">
|
<i class="el-icon-close" @click="removeInput(index)"></i>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {getDictionary} from "@/api/omd/enum";
|
import moment from 'moment';
|
import vciWebRefer from '../refer/vciWebRefer.vue';
|
|
export default {
|
components: {vciWebRefer},
|
name: "advancedQuery",
|
props: {
|
// 对话框显示隐藏控制
|
visible: {
|
type: "Boolean",
|
default: false,
|
},
|
// 页面显示配置
|
options: {
|
type: "Object",
|
default: {},
|
},
|
},
|
data() {
|
return {
|
// 对话框显示控制
|
isShowDialog: this.visible,
|
initOptions: [],
|
// 字段类型是输入框类型的条件数组
|
searchConditions: [
|
{
|
value: "_equal",
|
label: "等于",
|
}, {
|
value: "_notequal",
|
label: "不等于",
|
}, {
|
value: "_like",
|
label: "包含",
|
}, {
|
value: "_notlike",
|
label: "不包含",
|
},{
|
value: "_in",
|
label: "范围(,间隔)",
|
}
|
],
|
// 字段类型是单选或下拉框类型的条件数组
|
switchSearchConditions: [
|
{
|
value: "_equal",
|
label: "等于",
|
}, {
|
value: "_notequal",
|
label: "不等于",
|
}
|
],
|
// 参照类型的条件数组
|
referSearchConditions: [
|
{
|
value: "_equal",
|
label: "等于",
|
}, {
|
value: "_notequal",
|
label: "不等于",
|
}, {
|
value: "_like",
|
label: "包含",
|
}, {
|
value: "_notlike",
|
label: "不包含",
|
}
|
],
|
// 字段类型是日期
|
dateConditions: [
|
{
|
value: "_equal",
|
label: "等于",
|
}, {
|
value: "_notequal",
|
label: "不等于",
|
}, {
|
value: "_ge", //大于，默认为大于等于
|
label: "大于",
|
}, {
|
value: "_le", //小于，默认为小于等于
|
label: "小于",
|
},
|
],
|
searchFormArrays: [],
|
fieldValue: '',
|
}
|
},
|
watch: {
|
// 监听父组件传的窗口显示隐藏的值
|
visible() {
|
this.isShowDialog = this.visible;
|
},
|
// 对话框内容渲染配置
|
options() {
|
this.initData();
|
}
|
},
|
created() {
|
this.resetInput()
|
},
|
methods: {
|
|
initData() {
|
// 将options配置赋值到data中的option中，避免深浅拷贝的问题所以需要转json之后再赋值
|
const data = JSON.stringify(this.options);
|
this.initOptions = JSON.parse(data);
|
//console.log(this.initOptions);
|
if (this.initOptions.length > 0) {
|
let array = [];
|
this.initOptions.forEach((item, index) => {
|
if (item.fieldType === 'combox') {
|
let enumCach = item.data || JSON.parse(localStorage.getItem(item.comboxKey));
|
if (enumCach != null && enumCach.length > 0) {
|
item.data = enumCach;
|
} else {
|
getDictionary({code: item.comboxKey}).then(res => {
|
item.data = res.data.data;
|
localStorage.setItem(item.comboxKey, JSON.stringify(res.data.data));
|
})
|
}
|
} else if (item.fieldType === 'refer') {
|
this.$set(item, "referConfigData", {
|
title: item.title,
|
showField: item.showField || item.field,
|
field: item.field,
|
placeholder: item.inputTip || '',
|
options: Object.assign(item.referConfig, {width: "80%"}),
|
})
|
//console.log(item.referConfigData.options);
|
//console.log(item);
|
}
|
let conditions = [];
|
if (item.fieldType === 'text') {
|
conditions = this.searchConditions;
|
} else if (item.fieldType === 'combox' || item.fieldType === 'truefalse') {
|
conditions = this.switchSearchConditions;
|
} else if (item.fieldType === 'datetime' || item.fieldType === 'date') {
|
conditions = this.dateConditions;
|
} else {
|
conditions = this.referSearchConditions;
|
}
|
// console.log(conditions);
|
this.$set(item, "conditions", conditions)
|
|
let add = {
|
queryField: String(item.queryField),
|
condition: item.fieldType === 'text' ? String("_like") : String("_equal"),
|
fieldValue: item.fieldType === 'truefalse' ? Boolean(false) : String(''),
|
}
|
array.push(add)
|
});
|
this.searchFormArrays = array;
|
}
|
//console.log(this.initOptions);
|
//console.log(this.searchFormArrays);
|
},
|
/** 为参照类型时值选择之后的处理 */
|
setReferValue(data, index) {
|
if (data.field) {
|
this.searchFormArrays[index][data.fieldValue] = data.value || '';
|
this.initOptions[index][data.showField] = data.text || '';
|
}
|
},
|
|
// 属性切换时查询条件和查询值也需要对输入框进行切换
|
// changeField(index) {
|
// //console.log(option,this.searchFormArrays[index],index);
|
// // 找到数组中对应的要切换为的那个对象
|
// let changeItem = this.options.filter((item)=>{
|
// return item.queryField == this.searchFormArrays[index].queryField;
|
// })[0]
|
// // 如果是combox类型的还需要对枚举类型进行请求
|
// if(changeItem.fieldType==='combox' && changeItem.comboxKey != '') {
|
// changeItem.data = JSON.parse(localStorage.getItem(changeItem.comboxKey));
|
// }
|
// //console.log(changeItem.fieldType);
|
// // 将当前切换的配置项赋值到option的对应的那个对象进行覆盖
|
// this.initOptions[index] = changeItem;
|
// // 覆盖v-model的对象
|
// this.searchFormArrays[index] = {
|
// queryField: String(changeItem.queryField),
|
// condition: changeItem.fieldType==='text' ? String("_like"):String("_equal"),
|
// fieldValue: changeItem.fieldType==='truefalse' ? Boolean(false):String(""),
|
// };
|
// //console.log(this.initOptions);
|
// //console.log(this.searchFormArrays);
|
// },
|
|
// 移除搜索框
|
|
removeInput(index) {
|
//console.log(this.initOptions);
|
this.$delete(this.initOptions, index);
|
this.$delete(this.searchFormArrays, index);
|
},
|
// 重置当前界面的输入框
|
resetInput() {
|
this.initData();
|
},
|
// 恢复页面
|
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 + ']'] + '' != 'undefined') {
|
this.$message.warning("存在重复查询条件，请仔细核对!");
|
//console.log(condtionParam['conditionMap['+searchConditions[index].queryField+']']);
|
return false;
|
}
|
let fieldType = this.initOptions[index].fieldType;
|
// 当出现查询日期的格式时,需要对日期格式进行处理
|
if (fieldType === 'datetime' || fieldType === 'date') {
|
// 将时间转换为本地时间
|
let localTime = moment.utc(searchConditions[index].fieldValue).local();
|
// 格式化时间为您想要的格式
|
let formattedTime = localTime.format('YYYY-MM-DD HH:mm:ss');
|
condtionParam['conditionMap[' + searchConditions[index].queryField + searchConditions[index].condition + ']'] = formattedTime;
|
//console.log(formattedTime);
|
} else {
|
//拼接成map对象，将查询对象和condition拼接在一起，组成高级查询map的key
|
condtionParam['conditionMap[' + searchConditions[index].queryField + searchConditions[index].condition + ']'] = searchConditions[index].fieldValue;
|
}
|
}
|
}
|
// 查询条件没有出现重复属性，并且过滤掉了空值，就传递给父组件
|
//console.log(condtionParam);
|
this.$emit('echoContion', condtionParam)
|
this.isShowDialog = false;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.search-total {
|
border-radius: 4px;
|
margin-top: -10px;
|
}
|
|
.dialog-search-button {
|
margin-bottom: 15px;
|
}
|
|
// .search-total > .search-content > .el-row{
|
// margin-bottom: 5px;
|
// &:last-child {
|
// margin-bottom: 0;
|
// }
|
// }
|
.search-total > .search-content {
|
}
|
|
.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: 30px;
|
line-height: 40px;
|
cursor: pointer;
|
color: rgb(222, 130, 105);
|
}
|
|
.grid-content > .el-icon-close:hover {
|
font-size: 30px;
|
color: rgb(219, 52, 6);
|
}
|
|
.grid-content > .el-select {
|
width: 100%;
|
}
|
|
.grid-content > .el-switch {
|
line-height: 40px;
|
height: 40px;
|
}
|
|
.grid-content > .el-date-editor.el-input, .el-date-editor.el-input__inner {
|
width: 100%;
|
}
|
|
</style>
|
