leromro-web/src/views/components/ListPage/Search.vue

<template>
    <div>
        <el-form :inline="true" ref="searchRef" :model="formInline" class="demo-form-inline">
            <template v-for="item in column" :key="item.prop">
                <!-- 输入框 -->
                <el-form-item :label="item.label" v-if="item.type === 'input'" :prop="item.prop">
                    <el-input v-model="formInline[item.prop]" :placeholder="'请输入' + item.label" clearable />
                </el-form-item>

                <!-- 时间选择 -->
                <el-form-item :label="item.label" v-if="item.type === 'date'" :prop="item.prop">
                    <el-date-picker v-model="formInline[item.prop]" value-format="YYYY-MM-DD" type="daterange"
                        range-separator="-" start-placeholder="开始日期" clearable end-placeholder="结束日期"></el-date-picker>
                </el-form-item>

                <!-- 下拉框选择 -->
                <el-form-item :label="item.label" v-if="item.type === 'select'" :prop="item.prop">
                    <el-select v-model="formInline[item.prop]" :placeholder="'请选择' + item.label" clearable>
                        <el-option v-for="dict in dictionaryOptions[item.dictionary]" :key="dict.value"
                            :label="dict.label" :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 联动选择框 -->
                <el-form-item :label="item.label" v-if="item.type === 'cascader' " :prop="item.prop">
                    <el-cascader v-model="formInline[item.prop]" :options="item.options || []" style="width: 100%;"
                        :props="item.props" />
                </el-form-item>

               
            </template>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" v-for="item in searchBtns" :key="item.key">
                <el-button :type="item.type || 'primary'" plain :icon="item.icon" @click="()=>item.func(formInline)"
                    v-hasPermi="item.hasPermi">{{ item.label }}</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
const { proxy } = getCurrentInstance();

const props = defineProps({
    column: {
        type: Object,
        default: [],
        required: true
    },
    searchBtns: {
        type: Array,
        default: [],
    }
})

const emit = defineEmits(['submit', 'reset'])

const formInline = reactive({
    user: '',
    region: '',
    date: '',
})

const searchRef = ref(null);

const dictionaryOptions = reactive({})

const handlerFormData = () => {
    const array = props.column;
    const parmas = {}
    for (let i = 0; i < array.length; i++) {
        const element = array[i];
        if (element.type === 'date' && formInline[element.prop].length>0) {
            parmas[element.keys[0]] = formInline[element.prop][0];
            parmas[element.keys[1]] = formInline[element.prop][1];
        } else if (formInline[element.prop]) {
            if(element.prop === 'businessManagementId'){
                console.log('formInline[element.prop]',formInline[element.prop]);
                parmas[element.prop] = formInline[element.prop][formInline[element.prop].length-1];
            }else{
            parmas[element.prop] = formInline[element.prop];
         }

        }
    }
    return parmas
}
const handleQuery = () => {
    const parmas = handlerFormData();
    console.log('parmas',parmas);    
    emit('submit', parmas)
}
const resetForm = () => {
    if (!searchRef.value) return
    searchRef.value.resetFields();
    const parmas = handlerFormData();
    emit('reset', parmas)
}

const handleInit = () => {
    try {
        const keys = props.column.map(item => {
            if (item.type === 'select' && item.dictionary) {
                return item.dictionary;
            }
        }).filter(Boolean);
        
        
        if(keys && keys.length > 0){
            const res = proxy.useDict(keys);
            Object.assign(dictionaryOptions, res)
        }

    } catch (error) {
        console.log('error', error);

    }
}




onMounted(() => {
    handleInit();
})


</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

</style>