<template>
|
<el-dialog
|
:title="'高级搜索'"
|
:close-on-click-modal="false"
|
:visible.sync="visible"
|
width="100%" class="advanced-search" append-to-body>
|
<el-row v-for="(item, index) in conditions" type="flex" justify="space-between" class="search-div">
|
<el-col :span="6">
|
<el-select v-model="item.col" placeholder="列" style="width: 100%;height: 20px;" @change="changeColumn(index)">
|
<el-option
|
v-for="column in columnItems"
|
:key="column.prop"
|
:label="column.label"
|
:value="column.prop">
|
</el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="5">
|
<template v-if="item.expressRange=='select'">
|
<el-select v-model="item.formula" placeholder="运算符" style="width: 100%">
|
<el-option
|
v-for="express in selectExpresOptions"
|
:key="express.value"
|
:label="express.name"
|
:value="express.value">
|
</el-option>
|
</el-select>
|
</template>
|
<template v-else>
|
<el-select v-model="item.formula" placeholder="运算符" style="width: 100%">
|
<el-option
|
v-for="express in expresOptions"
|
:key="express.value"
|
:label="express.name"
|
:value="express.value">
|
</el-option>
|
</el-select>
|
</template>
|
</el-col>
|
<el-col :span="10">
|
<template v-if="item.expressRange=='select'">
|
<el-select v-model="item.val" placeholder="值" style="width: 100%">
|
<el-option
|
v-for="valOp in item.valueOptions"
|
:key="valOp.value"
|
:label="valOp.label"
|
:value="valOp.value">
|
</el-option>
|
</el-select>
|
</template>
|
<template v-else>
|
<el-input v-model="item.val" placeholder="值" clearable></el-input>
|
</template>
|
</el-col>
|
<el-col :span="3" style="display:flex;justify-content:center;align-items:center;padding-right:0px">
|
<div class="condition-tool">
|
<i class="el-icon-minus" title="删除" @click="deleteCondition(index)"></i>
|
<i class="el-icon-plus" title="添加" @click="addCondition"></i>
|
</div>
|
</el-col>
|
</el-row>
|
<el-divider class="divider-class"></el-divider>
|
<span slot="footer" class="dialog-footer">
|
<div style="display: inline;">
|
<div style="float:left;line-height: 35px;margin-right: 4px;">
|
<span></span>
|
</div>
|
<div style="float: left;line-height: 35px;">
|
<el-select v-model="conditionRelationShip" placeholder="请选择">
|
<el-option
|
v-for="crs in conditionRelationShips"
|
:key="crs.value"
|
:label="crs.label"
|
:value="crs.value">
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<el-button style="padding: 7px 13px;background-color: #e6e6e6" @click="makeupSearchConditions()">搜索</el-button>
|
<el-button style="padding: 7px 13px;background-color: #e6e6e6" @click="resetSearchConditions()">重置</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
<script>
|
export default {
|
data () {
|
return {
|
visible: false,
|
//页面自定义条件数组
|
conditions:[],
|
//所有可进行条件的字段列，调用者传
|
columnItems:[],
|
selectExpresOptions:[{name:'等于',value:'EQ'},{name:'不等于',value:'NE'}],
|
expresOptions:[{name:'包含',value:'CN'},{name:'开始于',value:'BW'},{name:'结束于',value:'EW'},{name:'等于',value:'EQ'},{name:'不等于',value:'NE'}
|
,{name:'大于',value:'GT'},{name:'不小于',value:'GE'},{name:'小于',value:'LT'},{name:'不大于',value:'LE'},{name:'在列表中',value:'IN'},{name:'不为空',value:'NOTNULL'}
|
,{name:'为空',value:'ISNULL'}],
|
conditionRelationShips:[{label:'所有规则',value:'AND'},{label:'任一规则',value:'OR'}],
|
conditionRelationShip:'AND'
|
}
|
},
|
methods: {
|
//初始化页面
|
init (columnList) {
|
this.visible = true;
|
//暂不支持时间,过滤出日期时间格式字段列
|
/*this.columnItems=columnList;*/
|
this.columnItems=columnList.filter(function (item) {
|
return !(item.searchInfoType =='date' || item.searchInfoType =='datetimerange' || item.searchInfoType =='datetime' )
|
});
|
if(this.conditions.length<=0){
|
this.addCondition();
|
}
|
},
|
//选中某列后，将该列的信息赋予当前条件行
|
changeColumn(index){
|
var currCondition=this.conditions[index];
|
var currColumn=this.columnItems.find(function (item) {
|
return item.prop==currCondition.col;
|
});
|
currCondition.expressRange=currColumn.searchInfoType;
|
if(currCondition.expressRange=='select'){
|
currCondition.valueOptions=currColumn.optList();
|
}else{
|
currCondition.valueOptions=[];
|
}
|
currCondition.formula=null;
|
currCondition.val=null;
|
},
|
//新增条件
|
addCondition(){
|
var condition={};
|
condition.col=null;
|
condition.expressRange='text';
|
condition.formula=null;
|
condition.val=null;
|
condition.valueOptions=[];
|
this.conditions.push(condition);
|
},
|
//删除条件
|
deleteCondition(index){
|
//至少留一条搜索列
|
if(this.conditions.length!=1){
|
this.conditions.splice(index, 1);
|
}
|
},
|
//组装搜索条件，并绑定事件
|
makeupSearchConditions() {
|
var checkFlag=true;
|
var filters={};
|
var ruleArray=new Array();
|
var rule;
|
if(this.conditions.length>0){
|
var condition;
|
for(var i=0;i<this.conditions.length;i++){
|
rule={};
|
condition=this.conditions[i];
|
rule.name=condition.col;
|
rule.value=condition.val;
|
rule.op=condition.formula;
|
ruleArray.push(rule);
|
if(condition.expressRange=='select'){
|
if(condition.col==null || condition.formula==null || condition.val==null){
|
checkFlag=false;
|
break;
|
}
|
}else{
|
if(condition.col==null || condition.formula==null){
|
checkFlag=false;
|
break;
|
}
|
}
|
}
|
}
|
if(checkFlag){
|
filters.rules=ruleArray;
|
filters.groupOp=this.conditionRelationShip;
|
this.$emit('search-change', filters);
|
this.visible = false;
|
}else{
|
this.$message.error('请填写列或运算符或值');
|
}
|
},
|
//重置搜索条件
|
resetSearchConditions(){
|
this.conditions=[];
|
this.addCondition();
|
this.conditionRelationShip='AND';
|
var filters={};
|
var ruleArray=new Array();
|
filters.rules=ruleArray;
|
filters.groupOp=this.conditionRelationShip;
|
this.$emit('search-change', filters);
|
}
|
}
|
}
|
</script>
|
<style>
|
|
.condition-tool i {
|
font-weight: bold;
|
font-size: 12px;
|
margin-right: 3px;
|
cursor: pointer;
|
border: 1px solid #333;
|
padding: 2px;
|
border-radius: 3px;
|
background-color: #e6e6e6;
|
}
|
|
.condition-tool .el-icon-plus {
|
color: #909399;
|
}
|
|
.condition-tool .el-icon-minus {
|
color: #909399;
|
}
|
.advanced-search .el-dialog{
|
margin: 0px;
|
margin-top: 0px !important;
|
border-radius: 4px;
|
}
|
|
.advanced-search .el-dialog__body{
|
padding:6px 1px 0px 5px;
|
}
|
.advanced-search .el-input--small .el-input__inner{
|
height: 20px;
|
line-height: 20px;
|
}
|
.advanced-search .el-input--small .el-input__icon{
|
line-height: 20px;
|
}
|
.search-div .el-col{
|
padding-right: 3px;
|
}
|
.advanced-search .el-dialog__footer{
|
padding:0px 3px 0px 5px;
|
height: 35px;
|
}
|
.divider-class{
|
margin: 0px 1px 3px;
|
height: 2px;
|
background-color:#aaa;
|
}
|
|
.advanced-search .el-dialog__header{
|
/*background-color: #33ACF2;*/
|
height: 32px;
|
padding: 0px;
|
border-radius: 2px;
|
background-color:#409EFF;
|
}
|
|
.advanced-search .el-dialog__title{
|
line-height: 32px;
|
color: #ffffff;
|
margin-left:10px;
|
font-size: 16px;
|
}
|
.advanced-search .el-dialog__headerbtn{
|
line-height: 32px;
|
top:0px;
|
right: 10px;
|
}
|
.advanced-search .el-dialog__headerbtn .el-dialog__close{
|
color: #ffffff;
|
}
|
|
.advanced-search .el-dialog__footer .dialog-footer{
|
line-height: 32px;
|
}
|
|
</style>
|
