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-if="item.children[index+1].value=='GJ'"
                                                            @click.native.stop="selectAll"
                                                            :label="checked?'取消全选':'全选'"
                                                            :value="-1">
                                                        </el-option>
                                                        <el-option
                                                            v-for="item1 in item.children[index+1].value=='GJ'?countryList1:constants[item.children[index+1].value]"
                                                            :key="item1.value"
                                                            :disabled="item.children[index+1].value=='GJ' && checked"
                                                            :label="item1.label"
                                                            :value="item1.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 {
    name:'FormSearch',
    props:['countryList','DBType','selected','editData'],
    data() {
        return {
            form:{
                // AD:[],
                // PD:[],
                // GD:[]
            },
            dbType:this.DBType=='WD'?'2':'1',
            constants:this.$constants,
            filedList:[],
            option1:[//法律状态
                {
                    label:'有效',
                    value:1
                },
                {
                    label:'无效',
                    value:2
                },
                {
                    label:'审中',
                    value:3
                },
            ],
            option2:[//专利类型
                {
                    label:'发明',
                    value:1
                },
                {
                    label:'新型',
                    value:2
                },
                {
                    label:'外观',
                    value:3
                },
            ],
            checked:false,
            countryList1:[]
        }
    },
    watch:{
        DBType(val){
            this.dbType = val == 'WD'?'2':'1'
            this.setGJValue()
        },
        'countryList'(){
            this.countryList1 = this.countryList.filter(item=>item.value!='CN')
        },
        'selected'(val){
            if(this.selected){
                this.setGJValue()
            }
        },
    },
    mounted() {
        this.countryList1 = this.countryList.filter(item=>item.value!='CN')
        this.setGJValue()
        var field=JSON.parse(JSON.stringify(this.$constants.searchField))
        this.filedList =[].concat(...field.map(item=>{return item.children}))
        if(this.editData && this.editData.component == 'FormSearch'){
            if(this.editData.data && this.editData.data.length>0){
                this.form = this.customToForm(this.editData.data)
            }
            
        }
    },
    methods: {
        setGJValue(){
            if(this.DBType == 'WD'){
                this.$set(this.form,'GJ',JSON.parse(JSON.stringify(this.selected))) 
                if(this.countryList1.length>0){
                    if(this.form.GJ.length == this.countryList1.length){
                        this.checked = true
                    }
                }
            }else{
                this.$set(this.form,'GJ',[]) 
            }
        },
        selectAll () {
            if (this.form.GJ.length < this.countryList1.length) { // 非全选时，点击选择全部
                this.form.GJ = this.countryList1.map((item) => {
                    return item.value
                })
                this.checked = true
                // this.form.GJ.unshift('-1')
            } else { // 全选时，点击置空
                this.form.GJ = []
                this.checked = false
            }
        },
        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 if(keys[i]=='GJ'){
                            if(this.form[keys[i]].length==1){
                                str1 = str1 + keys[i] + '=(' + this.form[keys[i]][0] +')'
                            }else if(!this.checked){
                                str1 = str1 + keys[i] + '=(' + this.form[keys[i]].join(" OR ") +')'
                            }
                        }
                        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]] 
                        // }
                        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);
            }
            var params = {
                data:this.formToCustom(this.form),
                DBType:this.DBType,
                component:'FormSearch'
            }
            this.$emit('search',str,params)
        },
        //表格数据格式转高级检索数据格式
        formToCustom(data){
            var list = []
            for(let key in data){
                var item = data[key]
                var a = this.filedList.find(item=>{
                    return item.value == key
                })
                
                var obj = {
                    dataType : a.dataType,
                    placeholder : a.placeholder,
                    field:key,
                    value:item,
                    logical:'AND',
                    operator:'=',
                }
                list.push(obj)
            }
            return list
        },
        //高级检索数据格式转表格数据格式
        customToForm(data){
            var obj = {}
            for(var i = 0;i<data.length;i++){
                var item = data[i]
                obj[item.field] = item.value
            }
            return obj
        },
    },
    
}
</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>