Source/UBCS-WEB/src/components/advanced-query/advancedQuery.vue

@@ -4,366 +4,410 @@
    3、用户输入的值会以conditionMap[field]的格式拼接好进行回传，然后就需要使用的地方自行进行查询的调用；
 -->
<template>
    <el-dialog 
        title="高级查询"
        append-to-body
        width="55vw"
        style="height: 115vh; margin-top: -10vh; overflow: hidden"
        :visible.sync="isShowDialog"
        @close="recoverPage"
        destroy-on-close>
        <div class="search-total">
            <!-- 头部按钮区域 -->
            <div slot="title" class="dialog-search-button"> 
                <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>
  <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>
            <!-- 页面主体内容区域 -->
            <div class="search-content">
                <el-row  
                    v-for="(item,index) in initOptions"
                    :key="item.queryField"
                    :span="24">
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select disabled placeholder="请选择" v-model="searchFormArrays[index].queryField">
                                <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 placeholder="请选择" v-model="searchFormArrays[index].condition">
                                <el-option
                                    v-for="condition in item.fieldType==='text' || item.fieldType==='combox' ? 
                                    item.fieldType==='text' ? searchConditions:switchSearchConditions:dateConditions"
                                    :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" type="text" placeholder="请输入" :display="item.display"></el-input>
                            <el-select v-else-if="item.fieldType==='combox'" v-model="searchFormArrays[index].fieldValue" placeholder="请选择" :display="item.display">
                                <el-option
                                    v-for="option in item.data"
                                    :key="option.itemValue"
                                    :label="option.itemName"
                                    :value="option.itemValue">
                                </el-option>
                            </el-select>
                            <el-switch v-else-if="item.fieldType==='truefalse'" v-model="searchFormArrays[index].fieldValue" :display="item.display"></el-switch>
                            <el-date-picker v-else-if="item.fieldType==='datetime'" :display="item.display"
                                v-model="searchFormArrays[index].fieldValue"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                            <vci-web-refer
                                v-else-if="item.fieldType==='refer'"
                                :referConfig="item.referConfigData || {}"
                                :value="searchFormArrays[index].fieldValue"
                                :disabled="item.referConfig.showField"
                                :display="item.display"
                                @setReferValue="setReferValue">
                            </vci-web-refer>
                        </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>
          </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>
        </div>
    </el-dialog>
          </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 {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: {},
        },
  components: {vciWebRefer},
  name: "advancedQuery",
  props: {
    // 对话框显示隐藏控制
    visible: {
      type: "Boolean",
      default: false,
    },
    data() {
        return {
            // 对话框显示控制
            isShowDialog: this.visible,
            initOptions: [],
            // 字段类型是输入框类型的条件数组
            searchConditions: [
                {
                    value: "_equal",
                    label: "等于",
                },{
                    value: "_notequal",
                    label: "不等于",
                },{
                    value: "_like",
                    label: "包含",
                },{
                    value: "_notlike",
                    label: "不包含",
                }
            ],
            // 字段类型是单选或下拉框类型的条件数组
            switchSearchConditions: [
                {
                    value: "_equal",
                    label: "等于",
                },{
                    value: "_notequal",
                    label: "不等于",
                }
            ],
            // 字段类型是日期
            dateConditions: [
                {
                    value: "_equal",
                    label: "等于",
                },{
                    value: "_notequal",
                    label: "不等于",
                },{
                    value: "_ge", //大于，默认为大于等于
                    label: "大于", 
                },{
                    value: "_le", //小于，默认为小于等于
                    label: "小于",
                },
            ],
            searchFormArrays: [],
            fieldValue: '',
    // 页面显示配置
    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: "范围(,间隔)",
        }
    },
    watch: {
        // 监听父组件传的窗口显示隐藏的值
        visible (){
            this.isShowDialog = this.visible;
        },
        // 对话框内容渲染配置
        options(){
            // 将options配置赋值到data中的option中，避免深浅拷贝的问题所以需要转json之后再赋值
            const data = JSON.stringify(this.options);
            this.initOptions = JSON.parse(data);
            //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));
                        })
                    }
                }else if(item.fieldType==='refer'){
                    item = Object.assign(item,{referConfigData:{
                        title: item.referConfig.textField,
                        showField: item.showField || item.field,
                        field: item.field,
                        placeholder: item.inputTip || '',
                        options: item.referConfig,
                    }})
                    //console.log(item.referConfigData.options.type);
                    //console.log(item);   
                }
                let add = {
                    queryField: String(item.queryField),
                    condition: item.fieldType==='text' ? String("_like"):String("_equal"),
                    fieldValue: item.fieldType==='truefalse' ? Boolean(false):String(""),
                }
                this.searchFormArrays.push(add)
            });
            console.log(this.initOptions);
            //console.log(this.searchFormArrays);
      ],
      // 字段类型是单选或下拉框类型的条件数组
      switchSearchConditions: [
        {
          value: "_equal",
          label: "等于",
        }, {
          value: "_notequal",
          label: "不等于",
        }
    },
    methods: {

        /** 为参照类型时值选择之后的处理 */
        setReferValue(data){
            // if(data.field) {
               
            // }
            //console.log(data);
      ],
      // 参照类型的条件数组
      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: "小于",
        },

        // 属性切换时查询条件和查询值也需要对输入框进行切换
        // 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(){
            const data = JSON.stringify(this.options);
            this.initOptions = JSON.parse(data);
            let array = [];
            this.initOptions.forEach((item,index) => {
                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);
        },
        // 恢复页面
        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;
                    }
                    //拼接成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;
        },    
      ],
      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;
}

    .search-total {
        border-radius: 4px;
        min-height: 70vh;
        // margin-left: 35px;
        margin-top: -8px;
        overflow-y: auto; 
        height: 70vh;
    }
    .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;
    }
    // .search-total > .search-content > .el-row{
    //     margin-bottom: 5px;
    //     &:last-child {
    //         margin-bottom: 0;
    //     }
    // }
    .search-total > .search-content {
        margin-top: 40px;
    }
    .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: 35px;
        cursor: pointer;
        color: rgb(222, 130, 105);
    }
    .grid-content > .el-icon-close:hover{
        font-size: 38px;
        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%;
    }
.dialog-search-button {
  margin-bottom: 15px;
}

// .search-total > .search-content > .el-row{
//     margin-bottom: 5px;
//     &:last-child {
//         margin-bottom: 0;
//     }
// }
.search-total > .search-content {
}

</style>
.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>