2025-03-26

src/components/SearchForm/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <div v-if="formData.length" class="table-search" style="display: flex">
+        <div style="flex: 2">
+            <el-form ref="formRef" :model="searchParam" :inline="true">
+                <template v-for="item in formData" :key="item.prop">
+                    <!-- :label="item.label + ':'"  -->
+                    <el-form-item
+                        :prop="item.prop"
+                        :label-width="item.labelWidth ? item.labelWidth : '120px'"
+                        class="form-item"
+                        :label="item.label"
+                    >
+                        <SearchFormItem :item="item" :search-param="searchParam" :search="search" />
+                    </el-form-item>
+                </template>
+            </el-form>
+        </div>
+        <div style="display: flex">
+            <el-button type="primary" @click="search" style="margin-bottom: 0"> 搜索 </el-button>
+            <el-button @click="reset" style="margin-bottom: 0">重置</el-button>
+        </div>
+    </div>
+</template>
+<script setup lang="ts" name="SearchForm">
+import SearchFormItem from "./components/SearchFormItem.vue";
+interface ProTableProps {
+    formData?: any[]; // 搜索配置列
+    searchParam?: any; // 搜索参数
+    search: (params: any) => void; // 搜索方法
+    reset: (params: any) => void; // 重置方法
+}
+// 默认值
+withDefaults(defineProps<ProTableProps>(), {
+    formData: () => [],
+    searchParam: {},
+    search: () => {},
+    reset: () => {}
+});
+</script>
+<style lang="scss" scope>
+@import "./index.scss";
+</style>