<template>
|
<el-dialog
|
title="高级查询"
|
append-to-body
|
width="55vw"
|
style="height: 115vh; overflow: hidden"
|
:visible.sync="isShowDialog"
|
@close="recoverPage"
|
destroy-on-close>
|
<div class="search-total">
|
<el-row>
|
<div class="grid-content">
|
<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>
|
</el-row>
|
<el-row
|
v-for="(item,index) in initOptions.column"
|
:key="item.value"
|
class="search-content"
|
:span="24">
|
<el-col :span="4">
|
<div class="grid-content">
|
<el-select placeholder="请选择">
|
<el-option
|
v-for="feildName in item.searchfeildName"
|
:key="feildName.value"
|
:label="feildName.label"
|
:value="feildName.value">
|
</el-option>
|
</el-select>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="grid-content">
|
<el-select placeholder="请选择">
|
<el-option
|
v-for="condition in item.searchCondition"
|
:key="condition.value"
|
:label="condition.label"
|
:value="condition.value">
|
</el-option>
|
</el-select>
|
</div>
|
</el-col>
|
<el-col :span="13">
|
<div class="grid-content">
|
<div class="el-input">
|
<input type="text" placeholder="请输入" autocomplete="off" class="el-input__inner" :value="value">
|
</div>
|
</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>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "advancedQuery",
|
props: {
|
// 对话框显示隐藏控制
|
visible: {
|
type: "Boolean",
|
default: false,
|
},
|
// 页面显示配置
|
options: {
|
type: "Object",
|
default: {},
|
},
|
// 页面数据渲染配置
|
searchForm: {
|
type: "Object",
|
default: {},
|
},
|
value:{
|
type: "String",
|
}
|
},
|
data() {
|
return {
|
// 对话框显示控制
|
isShowDialog: this.visible,
|
initOptions: {},
|
searchForm: {},
|
}
|
},
|
watch: {
|
// 监听父组件传的窗口显示隐藏的值
|
visible (){
|
this.isShowDialog = this.visible;
|
}
|
},
|
created () {
|
// 将options配置赋值到data中的option中，避免深浅拷贝的问题所以需要转json之后再赋值
|
const data = JSON.stringify(this.options);
|
this.initOptions = JSON.parse(data);
|
console.log(this.searchForm);
|
},
|
methods: {
|
// 移除搜索框
|
removeInput(index){
|
//console.log(this.options.column);
|
this.$delete(this.initOptions.column,index);
|
},
|
// 重置当前界面的输入框
|
resetInput(){
|
const data = JSON.stringify(this.options);
|
this.initOptions = JSON.parse(data);
|
},
|
// 恢复页面
|
recoverPage(){
|
this.resetInput();
|
this.$emit('update:visible', false);
|
},
|
// 提交当前页面的输入
|
searchSubmit(){
|
console.log(11);
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
|
.search-total {
|
border-radius: 4px;
|
min-height: 36px;
|
// margin-left: 35px;
|
margin-top: -20px;
|
}
|
.search-total > .el-row{
|
margin-bottom: 10px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
.search-total > .el-col {
|
border-radius: 4px;
|
}
|
.search-total > .el-col > .grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
.search-content > .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);
|
}
|
|
|
</style>
|
