teacher-assessment/src/baseComponents/FormSearchGroup.vue

<!-- 需要配合 page_search   search_content    content_left  一起使用 -->
 
<template>
    <div class="simple_filter">
        <template v-for="item in props.searchList" :key="item.key">
            <el-select 
                v-if="item.type == 'select'" 
                v-model="searchData[item.key]" 
                @change="(val)=>HandleSearchItemChange(item.key)" 
                :placeholder="item.placeholder"  
                :disabled="formDisabled || item.disabled"
            >
                <el-option 
                    v-for="optItm in item.options" 
                    :key="optItm.value" :value="optItm.value" 
                    :label="optItm.label" 
                    :disabled="optItm.disabled ? true : false">
                </el-option>
            </el-select>



            <!-- :size="size" -->
            <el-date-picker
                @change="(val)=>HandleSearchItemChange(item.key)" 
                v-else-if="item.type == 'datePicker'"  
                v-model="searchData[item.key]"
                :disabeld="formDisabled || item.disabled"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            />



            <!-- 这个输入框的搜索要动态查询 ————  -->
            <el-input 
                v-else-if="item.type == 'input'"  
                v-model="searchData[item.key]" 

                @input="(val,e)=>HandleInputChange(val,e,item.key)"

                @keyup.enter="(event)=>HandleSearchItemChange(item.key)" 
                :placeholder="item.placeholder"  
                :disabled="formDisabled || item.disabled"
            >
                <template #append>
                    <el-button @click="HandleSearchItemChange(item.key)" :icon="Search" />
                </template> 
            </el-input>


            <el-radio-group
                v-else-if="item.type == 'radio'" 
                v-model="searchData[item.key]" 
                @change="()=>HandleSearchItemChange(item.key)"
                :disabled="formDisabled || item.disabled"
            >
                <el-radio v-for="radioItem in item.options" :key="radioItem.value" :value="radioItem.value">{{ radioItem.label }}</el-radio>
            </el-radio-group>

        </template>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'

import { ref, watch } from 'vue'

interface SearchItem {
    key:String,
    type:'input'|'select'|'datePicker'|'radio',
    placeholder?:String,
    defaultValue?:any,
    disabled?:Boolean
    options?:{
        label:String,
        value:String,
        disabled?:Boolean
    }[] 
}

const props = defineProps({
    searchList:{
        type:Array<SearchItem>,
        required:true
    },
    formDisabled:{
        type:Boolean,
        required:false
    }
})

const emit = defineEmits(['searchChange'])

const searchData = ref({})


// 筛选条件变更触发新的查询 
const HandleSearchItemChange = async (key)=>{
    //   触发父级页面的查询
    emit('searchChange',searchData.value,key)
}

const inputFlag = ref() 

const HandleInputChange = (val,e,key)=>{
    if(inputFlag.value){
        // 还在定时器内，延迟触发
        clearTimeout(inputFlag.value)
        inputFlag.value = ''
    }
    // 要防抖
    inputFlag.value = setTimeout(()=>{
        console.log('input__输入的值',val)
        //   触发父级页面的查询
        emit('searchChange',searchData.value,key)
    },400)
}


// 
watch(()=>props.searchList, (newVal)=>{
    searchData.value = {}
    // console.log('查询项变更了===表单',newVal)
    newVal.forEach(item=>{
        if(item.defaultValue){
            searchData.value[item.key] = item.defaultValue
        }
    })
    // emit('searchChange',searchData.value)
},{immediate:true,deep:true})

</script>


<style lang="scss" scoped>
.simple_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  :deep(.el-date-editor){
    max-width: 240px;
  }
  
  :deep(.el-input){
    width: 260px;
  }

  :deep(.el-radio-group){
    .el-radio{
        margin-right: 20px;
    }
  }

}


.page_search .search_content .content_right{
    .el-button {
        margin-left: -20px !important;
        min-width: auto !important;
    }
}
    
</style>