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

@@ -1,73 +1,88 @@
<!-- 高级查询对话框组件
    1、打开与关闭与el-dialog用法一致；
    2、用户编辑好的查询条件通过@echoContion事件绑定相应的函数，实现子组件值传递回父组件；
    3、用户输入的值会以conditionMap[field]的格式拼接好进行回传，然后就需要使用的地方自行进行查询的调用；
 -->
<template>
    <el-dialog 
        title="高级查询"
        append-to-body
        width="55vw"
        style="height: 115vh; overflow: hidden"
        style="height: 115vh; margin-top: -10vh; 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">
            <!-- 头部按钮区域 -->
            <div 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>
            </div>
            <!-- 页面主体内容区域 -->
            <div class="search-content">
                <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-option
                                    v-for="feildName in initOptions"
                                    :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="请选择">
                            <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">
                            </el-select>
                        </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>
                    </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' ? searchConditions:switchSearchConditions"
                                    :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-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-option
                                    v-for="option in item.data"
                                    :key="option.value"
                                    :label="option.key"
                                    :value="option.value">
                                </el-option>
                            </el-select>
                            <el-switch  v-show="item.fieldType==='truefalse'" v-model="searchFormArrays[index].fieldValue"></el-switch>
                        </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>
        </div>
    </el-dialog>
</template>
@@ -86,81 +101,166 @@
            type: "Object",
            default: {},
        },
        // 页面数据渲染配置
        searchForm: {
        conditionMapParams: {
            type: "Object",
            default: {},
        },
        value:{
            type: "String",
        }
    },
    data() {
        return {
            // 对话框显示控制
            isShowDialog: this.visible,
            initOptions: {},
            searchForm: {},
            initOptions: [],
            // 字段是输入框类型的条件数组
            searchConditions: [
                {
                    value: "=",
                    label: "等于",
                },{
                    value: "like",
                    label: "包含",
                },{
                    value: "!=",
                    label: "不等于",
                },{
                    value: ">",
                    label: "大于",
                },{
                    value: "<",
                    label: "小于",
                },
            ],
            // 字段是单选或下拉框类型的条件数组
            switchSearchConditions: [
                {
                    value: "=",
                    label: "等于",
                },{
                    value: "!=",
                    label: "不等于",
                },
            ],
            searchFormArrays: [],
        }
    },
    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) => {
                let add = {
                    queryField: String(item.queryField),
                    condition: item.fieldType=='text' ? String("like"):String("="),
                    fieldValue: item.fieldType=='truefalse' ? Boolean(false):String(''),
                }
                this.searchFormArrays.push(add)
            });
            //console.log(this.searchFormArrays);
        }
    },
    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);
            //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("="),
                    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(){
            console.log(11);
            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+']']+''.trim() != 'undefined' ) {
                        this.$message.warning("存在重复查询条件，请仔细核对!");
                        return false;
                    }
                    condtionParam['conditionMap['+searchConditions[index].queryField+']'] = searchConditions[index].fieldValue;
                }
            }
            //查询条件没有出现重复属性，并且过滤掉了空值，传递给父组件
            //console.log(condtionParam);
            // if(){

            // }
            this.$emit('echoContion',condtionParam)         
        },
    }
}
</script>

<style lang="scss">
<style lang="scss" scoped>

    .search-total {
        border-radius: 4px;
        min-height: 36px;
        min-height: 70vh;
        // margin-left: 35px;
        margin-top: -20px;
        margin-top: -8px;
        overflow-y: auto; 
        height: 70vh;
    }
    .search-total > .el-row{
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    .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: 90px;
        width: 50%;
        z-index: 1000;
    }
    .search-total > .el-col {
    // .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 > .el-col > .grid-content {
    .search-total > .search-content > .el-row > .el-col > .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .search-content > .el-col {
    .search-total > .search-content > .el-row > .el-col {
        margin-right: 6px;
        &:last-child {
            margin-right: 0;
@@ -175,6 +275,13 @@
        font-size: 38px;
        color: rgb(219, 52, 6);
    }
    .grid-content > .el-select {
        width: 100%;
    }
    .grid-content > .el-switch {
        line-height: 40px;
        height: 40px;
    }


</style>