xiaoshi_system/src/views/components/import/conditionImport/FormSearch.vue

<template>
    <div class="formSearch">
        <el-form :model="form" label-width="140px" size="small" label-position="right">
            <template  v-for="item in constants.searchField" >
                <div :key="item.label" v-if="(dbType ==2 && item.value!='typeAndStatus')||dbType !=2 ">
                    <div>
                        <span>{{item.label}}</span>
                        <el-divider></el-divider>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="24">
                                <div v-for="(i,index) in item.children" :key="i.value">
                                    <div v-if="index%2==0">
                                        <el-col :span="12" v-if="(item.children[index].type == dbType || item.children[index].type == 3)">
                                            <el-form-item :label="item.children[index].label+'：'">
                                                <!-- <el-select v-model="form[item.children[index].value]" multiple filterable collapse-tags placeholder="请选择,可多选" style="width:100%">
                                                    <el-option
                                                    v-for="item in constants[item.children[index].value]"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                                    </el-option>
                                                </el-select> -->
                                                <div v-if="item.children[index].dataType==2" style="display:flex;width:100%">
                                                    <el-date-picker
                                                        v-model="form[item.children[index].value][0]"
                                                        style="width:50%"
                                                        type="date"
                                                        size='small'
                                                        value-format="yyyyMMdd"
                                                        placeholder="开始，例：20000101">
                                                    </el-date-picker>
                                                    <el-date-picker
                                                        style="width:50%"
                                                        v-model="form[item.children[index].value][1]"
                                                        type="date"
                                                        size='small'
                                                        value-format="yyyyMMdd"
                                                        placeholder="结束，例：20001231">
                                                    </el-date-picker>
                                                </div>
                                                <div v-else-if="item.children[index].dataType==3" style="width:100%">
                                                    <el-select v-model="form[item.children[index].value]" size="small" multiple filterable collapse-tags placeholder="请选择,可多选" style="width:100%">
                                                        <el-option
                                                            v-for="item in item.children[index].value=='GJ'?countryList:constants[item.children[index].value]"
                                                            :key="item.value"
                                                            :label="item.label"
                                                            :value="item.value">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div v-else style="width:100%"><el-input size='small' style="width:100%" v-model="form[item.children[index].value]" :placeholder="item.children[index].placeholder"></el-input> </div>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12" v-if="(item.children[index+1]) && (item.children[index+1].type == dbType || item.children[index+1].type == 3)" >
                                            <el-form-item :label="item.children[index+1].label+'：'">
                                                <!-- <el-select v-model="form[item.children[index+1]?.value]" multiple filterable collapse-tags placeholder="请选择,可多选" style="width:100%">
                                                    <el-option
                                                    v-for="item in constants[item.children[index+1]?.value]"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                                    </el-option>
                                                </el-select> -->
                                                <div v-if="item.children[index+1].dataType==2" style="display:flex;width:100%">
                                                    <el-date-picker
                                                        v-model="form[item.children[index+1].value][0]"
                                                        style="width:50%"
                                                        type="date"
                                                        size='small'
                                                        value-format="yyyyMMdd"
                                                        placeholder="开始，例：20000101">
                                                    </el-date-picker>
                                                    <el-date-picker
                                                        style="width:50%"
                                                        v-model="form[item.children[index+1].value][1]"
                                                        type="date"
                                                        size='small'
                                                        value-format="yyyyMMdd"
                                                        placeholder="结束，例：20001231">
                                                    </el-date-picker>
                                                </div>
                                                <div v-else-if="item.children[index+1].dataType==3" style="width:100%">
                                                    <el-select v-model="form[item.children[index+1].value]" size="small" multiple filterable collapse-tags placeholder="请选择,可多选" style="width:100%">
                                                        <el-option
                                                            v-for="item in item.children[index+1].value=='GJ'?countryList:constants[item.children[index+1].value]"
                                                            :key="item.value"
                                                            :label="item.label"
                                                            :value="item.value">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div v-else style="width:100%"><el-input size='small' style="width:100%" v-model="form[item.children[index+1].value]" :placeholder="item.children[index+1].placeholder"></el-input> </div>

                                            </el-form-item>
                                        </el-col>
                                    </div>
                                    
                                </div>
                                
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </template>
        </el-form>
        <div class="foot_btn">
            <el-button type="danger" plain size="small" style="width:100px" @click="cancel">清空</el-button>
            <el-button type="primary" size="small" style="width:100px" @click="search">检索</el-button>
        </div>
    </div>
</template>
<script>
export default {
    props:['countryList','DBType'],
    data() {
        return {
            form:{
                // AD:[],
                // PD:[],
                // GD:[]
            },
            dbType:this.DBType=='WD'?'2':'1',
            constants:this.$constants,
            option1:[//法律状态
                {
                    label:'有效',
                    value:1
                },
                {
                    label:'无效',
                    value:2
                },
                {
                    label:'审中',
                    value:3
                },
            ],
            option2:[//专利类型
                {
                    label:'发明',
                    value:1
                },
                {
                    label:'新型',
                    value:2
                },
                {
                    label:'外观',
                    value:3
                },
            ],
        }
    },
    watch:{
        DBType(val){
            this.dbType = val == 'WD'?'2':'1'
        }
    },
    mounted() {
        
    },
    methods: {
        selectAll () {
            if (this.form.GJ.length < this.countryList.length) { // 非全选时，点击选择全部
                this.form.GJ = this.countryList.map((item) => {
                    return item.value
                })
                // this.form.GJ.unshift('-1')
            } else { // 全选时，点击置空
                this.form.GJ = []
            }
        },
        cancel(){
            this.form = {
                AD:[],
                PD:[],
                GD:[]
            }
        },
        search(){
            var str = ''
            var keys = Object.keys(this.form)
            for(let i = 0;i<keys.length;i++){
                var str1 = ''
                if(typeof this.form[keys[i]] == 'object'){
                    if(this.form[keys[i]].length>0){
                        if(keys[i]=='PD' || keys[i]=='GD' || keys[i]=='AD'){
                            if(this.form[keys[i]].length>0){
                                // if(this.form[keys[i]][0]){
                                //     str1 = str1 + keys[i] + '>=' + this.form[keys[i]][0]  
                                // }
                                // console.log(this.form[keys[i]])
                                if(!this.form[keys[i]][0] && !this.form[keys[i]][1]){

                                }else{
                                    if( this.form[keys[i]][0] && this.form[keys[i]][1] ){
                                        // str1 = str1 + ' AND ' + keys[i] + '<=' + this.form[keys[i]][1] 
                                        str1 = str1 + keys[i] + '=' + this.form[keys[i]][0] +'~'+this.form[keys[i]][1]
                                    }else if(!this.form[keys[i]][0] || !this.form[keys[i]][1]){
                                        // str1 = str1 + keys[i] + '<=' + this.form[keys[i]][1] 
                                        str1 = str1 + keys[i] + '=' + (this.form[keys[i]][0] || this.form[keys[i]][1])
                                    }
                                }
                                
                            }
                        }else{
                            // this.form[keys[i]].forEach((item,index)=>{
                            //     if(index<this.form[keys[i]].length-1){
                            //         str1 = str1 + keys[i] + '=' + item + ' AND '
                            //     }else{
                            //         str1 = str1 + keys[i] + '=' + item
                            //     }
                            // })
                            // if(keys[i] == 'GJ'){
                            //     var index = this.form.GJ.findIndex(item=>{return item == '-1'})
                            //     if(index!=-1){
                            //         this.form.GJ.splice(index,1)
                            //     }
                            // }
                            if(this.form[keys[i]].length>1){
                                str1 = str1 + keys[i] + '=(' + this.form[keys[i]].join(" OR ") +')'
                            }else{
                                str1 = str1 + keys[i] + '=(' + this.form[keys[i]][0] +')'
                            }
                            
                        }
                    }
                }else{
                    if(this.form[keys[i]]){
                        var a = this.form[keys[i]].replace(/("[^"]*"|'[^']*')/g,'')
                        var arr = a.match(/\s{1}and|AND|OR|or|NOT|not\s{1}/g)
                        if(arr&&arr.length>0){
                            str1 = str1 + keys[i] + '=(' + this.form[keys[i]]+')'  
                        }else{
                            str1 = str1 + keys[i] + '=' + this.form[keys[i]] 
                        }
                        
                    }
                    
                }
                if(str1!=''){
                    if(i<keys.length-1){
                        str = str + str1 + ' AND ' 
                    }else{
                        str = str +  str1 
                    }
                }
                
            }
            if(str.charAt(str.length-1)==' '){
                str=str.slice(0,str.length-5);
            }
            this.$emit('search',str)
        },
    },
}
</script>
<style lang="scss">
.formSearch .el-divider{
    margin-top:5px;
    margin-bottom:24px;
}

</style>
<style lang="scss" scoped>
    .formSearch{
        padding:10px 10px 50px 10px;
    }
    .foot_btn{
        display:flex;
        justify-content: center;
        flex-direction: column;
        position: fixed;
        bottom: 10px;
        right: 45px;
        &>*{
            margin: 0;
            margin-bottom: 10px;
        }
    }
</style>