merchant_feedov_web/src/components/Search/index.vue

<template>
    <div ref="search">
        <!-- 动态渲染表单项 -->
        <a-form :model="formState" layout="inline">
            <a-form-item v-for="(item, index) in SearchForm" :key="index" :label="item.label" :field="item.field">
                <component :is="'a-' + item.type" v-model="formState[item.field].value" :placeholder="item.placeholder"
                    allow-clear :style="{ width: item.width ? item.width + 'px' : '' }">
                    <template v-if="item.type == 'select'">
                        <a-option v-for="option in item.options" :key="option.value" :value="option.value">
                            {{ option.label }}
                        </a-option>
                    </template>
                </component>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="handleQuery">查询</a-button>
                <a-button @click="handleReset" style="margin-left: 10px;">重置</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup>
import { ref, defineProps, toRefs, onMounted, watch, watchEffect } from 'vue';
import { Getdictionary } from "@/mixins/index.js";

// 接收 props
const props = defineProps({
    SearchForm: {
        type: Array,
        default: () => [
            {
                type: 'input',
                label: '字典名称',
                field: 'source',
                placeholder: '请输入字典名称',
                value: '', // 双向绑定的值
            },
            {
                type: 'input',
                label: '资费ID',
                field: 'trafficId',
                placeholder: '请输入资费ID',
                value: '', // 双向绑定的值
            },
            {
                type: 'select',
                label: '卡类型',
                field: 'simType',
                placeholder: '选择卡类型',
                options: [], // 默认空，后面会通过字典加载
                dict:'CardType',
                value: '', // 双向绑定的值
                width: '200'
            },
        ],
    },
});

const { SearchForm } = toRefs(props);

const formState = ref({});
SearchForm.value.forEach(item => {
    formState.value[item.field] = {
        value: item.value, 
    };
});

// 字典加载
const loadedDicts = ref({}); 
const loadDictOptions = async (index, dict) => {
    if (loadedDicts.value[dict]) {
        SearchForm.value[index].options = loadedDicts.value[dict];
        return;
    }
    const dictionary = await Getdictionary(dict);
    loadedDicts.value[dict] = dictionary || []; 
    SearchForm.value[index].options = loadedDicts.value[dict]; 
};

watch(
  () => SearchForm.value, 
  async () => {
    for (let index = 0; index < SearchForm.value.length; index++) {
        const item = SearchForm.value[index];
        if (item.dict && !loadedDicts.value[item.dict]) {
            await loadDictOptions(index, item.dict); 
        }
    }
}, { immediate: true });

// 查询操作
const handleQuery = () => {
    // 将表单数据通过事件传递给父组件
    emit('query', formState.value);
};

</script>