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

@@ -4,24 +4,29 @@
    3、用户输入的值会以conditionMap[field]的格式拼接好进行回传，然后就需要使用的地方自行进行查询的调用；
 -->
<template>
    <el-dialog 
    <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
        class="avue-dialog avue-dialog--top"
        top="-3%"
        destroy-on-close
        @close="recoverPage">
        <div class="search-total">
            <!-- 头部按钮区域 -->
            <div slot="title" class="dialog-search-button"> 
                <el-button 
                    type="primary"  
            <div slot="title" class="dialog-search-button">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="searchSubmit">
                    查询
                </el-button>
                <el-button 
                <el-button
                    type="warning"
                    size="small"
                    icon="el-icon-refresh"
@@ -31,11 +36,11 @@
            </div>
            <!-- 页面主体内容区域 -->
            <div class="search-content">
                <el-row  
                <el-row
                    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
@@ -65,9 +70,9 @@
                            <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"
                                    :label="option.itemName"
                                    :value="option.itemValue">
                                    :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>
@@ -82,11 +87,11 @@
                                :value="searchFormArrays[index].fieldValue"
                                :text="item.showField"
                                :display="!item.hidden"
                                @setReferValue="setReferValue">
                                @setReferValue="val=>setReferValue(val,index)">
                            </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>
@@ -99,6 +104,7 @@

<script>
import { getDictionary } from "@/api/omd/enum";
import moment from 'moment';
import vciWebRefer from '../refer/vciWebRefer.vue';
export default {
  components: { vciWebRefer },
@@ -172,7 +178,7 @@
                    label: "不等于",
                },{
                    value: "_ge", //大于，默认为大于等于
                    label: "大于", 
                    label: "大于",
                },{
                    value: "_le", //小于，默认为小于等于
                    label: "小于",
@@ -189,66 +195,71 @@
        },
        // 对话框内容渲染配置
        options(){
            // 将options配置赋值到data中的option中，避免深浅拷贝的问题所以需要转json之后再赋值
            const data = JSON.stringify(this.options);
            this.initOptions = JSON.parse(data);
            //console.log(this.initOptions);
            if(this.initOptions.length > 0){
                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'){
                    this.$set(item,"referConfigData",{
                        title: item.title,
                        showField: item.showField || item.field,
                        field: item.field,
                        placeholder: item.inputTip || '',
                        options: Object.assign(item.referConfig,{width:'100%'}),
                    })
                    //console.log(item.referConfigData.options);
                    //console.log(item);   
                }
                // TODO: 这儿修改一下参照的查询条件
                let conditions = [];
                if(item.fieldType==='text'){
                    conditions = this.searchConditions;
                }else if (item.fieldType==='combox'){
                    conditions = this.dateConditions;
                }else if (item.fieldType==='datetime') {
                    conditions = this.switchSearchConditions;
                }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(''),
                }
                this.searchFormArrays.push(add)
            });
            }
            //console.log(this.initOptions);
            //console.log(this.searchFormArrays);
            this.initData();
        }
    },
    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){
            // if(data.field) {
               
            // }
            console.log(data);
        setReferValue(data,index){
            if(data.field) {
                this.searchFormArrays[index][data.fieldValue] = data.value || '';
                this.initOptions[index][data.showField] = data.text || '';
            }
        },

        // 属性切换时查询条件和查询值也需要对输入框进行切换
@@ -276,7 +287,7 @@
        // },

        // 移除搜索框
        

        removeInput(index){
            //console.log(this.initOptions);
            this.$delete(this.initOptions,index);
@@ -284,22 +295,7 @@
        },
        // 重置当前界面的输入框
        resetInput(){
            const data = JSON.stringify(this.options);
            this.initOptions = JSON.parse(data);
            if(this.initOptions.length > 0){
                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);
            this.initData();
        },
        // 恢复页面
        recoverPage(){
@@ -316,43 +312,41 @@
                    // 存在相同的查询条件
                    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;
@@ -361,40 +355,39 @@
    //     }
    // }
    .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>
</style>