| | |
| | | <el-dialog |
| | | title="高级查询" |
| | | append-to-body |
| | | width="55vw" |
| | | style="height: 115vh; margin-top: -10vh; overflow: hidden" |
| | | width="46vw" |
| | | style="height: 100vh;overflow: hidden" |
| | | v-dialogDrag |
| | | :visible.sync="isShowDialog" |
| | | lock-scroll |
| | | :close-on-click-modal="false" |
| | | class="avue-dialog avue-dialog--top" |
| | | top="-3%" |
| | | destroy-on-close |
| | | @close="recoverPage"> |
| | | <div class="search-total"> |
| | | <!-- 头部按钮区域 --> |
| | |
| | | v-for="(item,index) in initOptions" |
| | | :key="item.queryField" |
| | | :span="24"> |
| | | <el-col :span="5"> |
| | | <el-col :span="6"> |
| | | <div class="grid-content"> |
| | | <el-select disabled placeholder="请选择" v-model="searchFormArrays[index].queryField"> |
| | | <el-option |
| | |
| | | </vci-web-refer> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="2"> |
| | | <el-col :span="1"> |
| | | <div class="grid-content"> |
| | | <i class="el-icon-close" @click="removeInput(index)"></i> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import { getDictionary } from "@/api/omd/enum"; |
| | | import moment from 'moment'; |
| | | import vciWebRefer from '../refer/vciWebRefer.vue'; |
| | | export default { |
| | | components: { vciWebRefer }, |
| | |
| | | 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) { |
| | | 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); |
| | | } |
| | | // TODO: 这儿修改一下参照的查询条件 |
| | | 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') { |
| | | conditions = this.dateConditions; |
| | | 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 { |
| | | conditions = this.referSearchConditions; |
| | | getDictionary({code: item.comboxKey}).then(res=>{ |
| | | item.data = res.data.data; |
| | | localStorage.setItem(item.comboxKey,JSON.stringify(res.data.data)); |
| | | }) |
| | | } |
| | | // console.log(conditions); |
| | | this.$set(item,"conditions",conditions) |
| | | }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; |
| | | 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) { |
| | |
| | | // 存在相同的查询条件 |
| | | if(condtionParam['conditionMap['+searchConditions[index].queryField+']']+'' != 'undefined' ) { |
| | | this.$message.warning("存在重复查询条件,请仔细核对!"); |
| | | console.log(condtionParam['conditionMap['+searchConditions[index].queryField+']']); |
| | | //console.log(condtionParam['conditionMap['+searchConditions[index].queryField+']']); |
| | | return false; |
| | | } |
| | | //拼接成map对象,将查询对象和condition拼接在一起,组成高级查询map的key |
| | | condtionParam['conditionMap['+searchConditions[index].queryField+searchConditions[index].condition+']'] = searchConditions[index].fieldValue; |
| | | 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); |
| | | //console.log(condtionParam); |
| | | this.$emit('echoContion',condtionParam) |
| | | this.isShowDialog = false; |
| | | }, |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | |
| | | .search-total { |
| | | border-radius: 4px; |
| | | min-height: 70vh; |
| | | // margin-left: 35px; |
| | | margin-top: -8px; |
| | | overflow-y: auto; |
| | | height: 70vh; |
| | | border-radius: 4px; |
| | | margin-top: -10px; |
| | | } |
| | | .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: 10%; |
| | | margin-top: -30px; |
| | | width: 50%; |
| | | z-index: 1000; |
| | | margin-bottom: 15px; |
| | | } |
| | | // .search-total > .search-content > .el-row{ |
| | | // margin-bottom: 5px; |
| | |
| | | // } |
| | | // } |
| | | .search-total > .search-content { |
| | | margin-top: 40px; |
| | | } |
| | | .search-total > .search-content > .el-row > .el-col { |
| | | border-radius: 4px; |
| | | border-radius: 4px; |
| | | } |
| | | .search-total > .search-content > .el-row > .el-col > .grid-content { |
| | | border-radius: 4px; |
| | | min-height: 36px; |
| | | border-radius: 4px; |
| | | min-height: 36px; |
| | | } |
| | | .search-total > .search-content > .el-row > .el-col { |
| | | margin-right: 6px; |
| | | &:last-child { |
| | | margin-right: 0; |
| | | } |
| | | margin-right: 6px; |
| | | &:last-child { |
| | | margin-right: 0; |
| | | } |
| | | } |
| | | .grid-content > .el-icon-close { |
| | | font-size: 35px; |
| | | cursor: pointer; |
| | | color: rgb(222, 130, 105); |
| | | font-size: 30px; |
| | | line-height: 40px; |
| | | cursor: pointer; |
| | | color: rgb(222, 130, 105); |
| | | } |
| | | .grid-content > .el-icon-close:hover{ |
| | | font-size: 38px; |
| | | color: rgb(219, 52, 6); |
| | | .grid-content > .el-icon-close:hover { |
| | | font-size: 30px; |
| | | color: rgb(219, 52, 6); |
| | | } |
| | | .grid-content > .el-select { |
| | | width: 100%; |
| | | width: 100%; |
| | | } |
| | | .grid-content > .el-switch { |
| | | line-height: 40px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | height: 40px; |
| | | } |
| | | .grid-content > .el-date-editor.el-input, .el-date-editor.el-input__inner{ |
| | | width: 100%; |
| | | .grid-content > .el-date-editor.el-input, .el-date-editor.el-input__inner { |
| | | width: 100%; |
| | | } |
| | | |
| | | </style> |