Vue3 如何让代码变得清新优雅，代码洁癖患者进！（2） -526互联

将搜索功能单独封装成组件，

如果你想问这又是何必呢？

未经他人苦莫劝他人善！

就是要封装，不想看见一坨一坨的代码。

温馨提示：

在搜索组件中，搜索条件初始值获取 ruote.query 获取，这样刷新浏览器依然可以保留上一次的数据，

注意，搜索条件里没有 pageNum 和 pageSize，把她放在列表页面更好。

如何维护呢？

只要改变搜索条件，其他都不需要变啦！

只是举个栗子，大家别当真 search.vue：

<template>
    <div class="filter-container">
        <!-- 搜索 -->
        <el-form :model="form" ref="queryFormRef" :inline="true" v-show="showSearch">
            <el-form-item>
                <el-input v-model="form.name" clearable placeholder="需求名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="form.category" clearable placeholder="请选择需求类型">
                    <el-option
                        v-for="item in dicts.demand_category"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="form.checkStatus" placeholder="审核状态" clearable>
                    <el-option v-for="dict in dicts.sys_checkStatus" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="search">搜索</el-button>
                <el-button icon="Refresh" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup name="DemandSearch">
const props = defineProps(['showSearch','dicts'])
const emits = defineEmits(['search'])
// 使用路由
const router = useRouter();
const route = useRoute();
// 表单 ref
const queryFormRef = ref(null)
const form = ref({
    name: route.query.name, // 需求名称
    category:route.query.category, // 需求类型
    checkStatus:route.query.checkStatus,// 审核状态
    dateRange:route.query.dateRange || []
})  
// 设置query
const setQueryData = (data) => {
    let keysArray = Object.keys(data);
    for (const key in form.value) {
        if (keysArray.includes(key)) {
            form.value[key] = data[key];
        }else{
            form.value[key] = undefined
        }
    }
};
// 重置表单
const reset =()=>{
    setQueryData({ dateRange : [] })
    emits('search')
}
// 搜索
const search =()=>{
    emits('search')
}

defineExpose({
    setQueryData,
    form
})
</script>

<style lang="scss" scoped>

</style>