| | |
| | | destroy-on-close> |
| | | <div class="search-total"> |
| | | <!-- 头部按钮区域 --> |
| | | <div class="dialog-search-button"> |
| | | <div slot="title" class="dialog-search-button"> |
| | | <el-button |
| | | type="primary" |
| | | size="small" |
| | |
| | | <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-select disabled placeholder="请选择" v-model="searchFormArrays[index].queryField"> |
| | | <el-option |
| | | v-for="feildName in initOptions" |
| | | v-for="feildName in options" |
| | | :key="feildName.queryField" |
| | | :label="feildName.title" |
| | | :value="feildName.queryField"> |
| | |
| | | <el-option |
| | | v-for="condition in item.fieldType=='text' ? searchConditions:switchSearchConditions" |
| | | :key="condition.value" |
| | | |
| | | :label="condition.label" |
| | | :value="condition.value"> |
| | | </el-option> |
| | |
| | | </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-input v-if="item.fieldType==='text' || item.fieldType===''" v-model="searchFormArrays[index].fieldValue" type="text" placeholder="请输入"></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.value" |
| | | :label="option.key" |
| | | :value="option.value"> |
| | | :key="option.itemValue" |
| | | :label="option.itemName" |
| | | :value="option.itemValue"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-switch v-show="item.fieldType==='truefalse'" v-model="searchFormArrays[index].fieldValue"></el-switch> |
| | | <el-switch v-else-if="item.fieldType==='truefalse'" v-model="searchFormArrays[index].fieldValue"></el-switch> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="2"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getDictionary } from "@/api/omd/enum"; |
| | | export default { |
| | | name: "advancedQuery", |
| | | props: { |
| | |
| | | type: "Object", |
| | | default: {}, |
| | | }, |
| | | conditionMapParams: { |
| | | type: "Object", |
| | | default: {}, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | // 字段是输入框类型的条件数组 |
| | | searchConditions: [ |
| | | { |
| | | value: "=", |
| | | value: "_equal", |
| | | label: "等于", |
| | | },{ |
| | | value: "like", |
| | | label: "包含", |
| | | },{ |
| | | value: "!=", |
| | | value: "_notequal", |
| | | label: "不等于", |
| | | },{ |
| | | value: ">", |
| | | label: "大于", |
| | | value: "_like", |
| | | label: "包含", |
| | | },{ |
| | | value: "<", |
| | | value: "_notlike", |
| | | label: "不包含", |
| | | },{ |
| | | value: "_ge", //大于,默认为大于等于 |
| | | label: "大于", |
| | | },{ |
| | | value: "_le", //小于,默认为小于等于 |
| | | label: "小于", |
| | | }, |
| | | ], |
| | | // 字段是单选或下拉框类型的条件数组 |
| | | switchSearchConditions: [ |
| | | { |
| | | value: "=", |
| | | value: "_equal", |
| | | label: "等于", |
| | | },{ |
| | | value: "!=", |
| | | value: "_notequal", |
| | | label: "不等于", |
| | | }, |
| | | } |
| | | ], |
| | | searchFormArrays: [], |
| | | fieldValue: '', |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | // 将options配置赋值到data中的option中,避免深浅拷贝的问题所以需要转json之后再赋值 |
| | | const data = JSON.stringify(this.options); |
| | | this.initOptions = JSON.parse(data); |
| | | // console.log(this.initOptions); |
| | | //console.log(this.initOptions); |
| | | this.initOptions.forEach((item,index) => { |
| | | if(item.fieldType==='combox') { |
| | | let enumCach = 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)); |
| | | }) |
| | | } |
| | | } |
| | | let add = { |
| | | queryField: String(item.queryField), |
| | | condition: item.fieldType=='text' ? String("like"):String("="), |
| | | fieldValue: item.fieldType=='truefalse' ? Boolean(false):String(''), |
| | | condition: item.fieldType==='text' ? String("_like"):String("_equal"), |
| | | fieldValue: item.fieldType==='truefalse' ? Boolean(false):String(""), |
| | | } |
| | | this.searchFormArrays.push(add) |
| | | }); |
| | | //console.log(this.searchFormArrays); |
| | | } |
| | | }, |
| | | created () { |
| | | |
| | | }, |
| | | methods: { |
| | | |
| | | // 属性切换时查询条件和查询值也需要对输入框进行切换 |
| | | // 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.initOptions.forEach((item,index) => { |
| | | let add = { |
| | | queryField: String(item.queryField), |
| | | condition:item.fieldType=='text' ? String("like"):String("="), |
| | | condition:item.fieldType=='text' ? String("_like"):String("_equal"), |
| | | fieldValue: item.fieldType=='truefalse' ? Boolean(false):String(''), |
| | | } |
| | | array.push(add) |
| | |
| | | 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(searchConditions[index].fieldValue.trim() != '' || searchConditions[index].fieldValue+''==='false') { |
| | | // 存在相同的查询条件 |
| | | if(condtionParam['conditionMap['+searchConditions[index].queryField+']']+''.trim() != 'undefined' ) { |
| | | if(condtionParam['conditionMap['+searchConditions[index].queryField+']']+'' != 'undefined' ) { |
| | | this.$message.warning("存在重复查询条件,请仔细核对!"); |
| | | console.log(condtionParam['conditionMap['+searchConditions[index].queryField+']']); |
| | | return false; |
| | | } |
| | | condtionParam['conditionMap['+searchConditions[index].queryField+']'] = searchConditions[index].fieldValue; |
| | | //拼接成map对象,将查询对象和condition拼接在一起,组成高级查询map的key |
| | | condtionParam['conditionMap['+searchConditions[index].queryField+searchConditions[index].condition+']'] = searchConditions[index].fieldValue; |
| | | } |
| | | } |
| | | //查询条件没有出现重复属性,并且过滤掉了空值,传递给父组件 |
| | | //console.log(condtionParam); |
| | | // if(){ |
| | | |
| | | // } |
| | | this.$emit('echoContion',condtionParam) |
| | | }, |
| | | // 查询条件没有出现重复属性,并且过滤掉了空值,传递给父组件 |
| | | // console.log(condtionParam); |
| | | this.$emit('echoContion',condtionParam) |
| | | this.isShowDialog = false; |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | |
| | | position: fixed; |
| | | display: block; |
| | | background-color: #fff; |
| | | top: 90px; |
| | | // top: 10%; |
| | | margin-top: -30px; |
| | | width: 50%; |
| | | z-index: 1000; |
| | | } |