ADD: 高级搜索控制

src/components/Search.vue

 <template>
-<el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
+<el-form :model="model" label-width="80px" class="mb-3" size="small">
                 <el-row :gutter="20">
                     <slot/>
 
@@ -11,7 +11,7 @@
                         <div class="flex items-center justify-end">
                             <el-button type="primary" @click="$emit('search')">搜索</el-button>
                             <el-button @click="$emit('reset')">重置</el-button>
-                            <el-button type="primary" text @click=" showSearch = !showSearch">
+                            <el-button type="primary" text @click=" showSearch = !showSearch" v-if="hasShowSearch">
                                 {{ showSearch ? '收起' : '展开' }}
                                 <el-icon>
                                     <ArrowUp v-if="showSearch" />
@@ -25,11 +25,17 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, useSlots } from 'vue'
+
+
+defineProps({
+    model:Object
+})
 
 const showSearch = ref(false)
 
 defineEmits("search", "reset")
 
-
+const slots = useSlots()
+const hasShowSearch = ref(!!slots.show)
 </script>
\ No newline at end of file

src/pages/goods/list.vue

@@ -7,7 +7,7 @@
         </el-tabs>
         <el-card shadow="never" class="border-0">
             <!-- 搜索 -->
-            <Search @search="getData" @reset="resetSearchForm">
+            <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
                 <SearchItem label="关键词">
                     <el-input v-model="searchForm.title" placeholder="商品名称" clearable></el-input>
                 </SearchItem>
@@ -25,7 +25,6 @@
             <!-- 新增 | 刷新 -->
             <ListHeader @create="handleCreate" @refresh="getData" />
 
-
             <el-table v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
                 :data="tableData" stripe style="width: 300%">
                 <el-table-column label="商品" width="300">

src/pages/manager/list.vue

 <template>
     <el-card shadow="never" class="border-0">
-
-        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
-            <el-row :gutter="20">
-                <el-col :span="8" :offset="0">
-                    <el-form-item label="关键词">
-                        <el-input v-model="searchForm.keyword" placeholder="管理员昵称" clearable></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8" :offset="8">
-                    <div class="flex items-center justify-end">
-                        <el-button type="primary" @click="getData">搜索</el-button>
-                        <el-button @click="resetSearchForm">重置</el-button>
-                    </div>
-                </el-col>
-            </el-row>
-        </el-form>
-
-
+        <!-- 搜索 -->
+        <!-- 搜索 -->
+        <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
+            <SearchItem label="关键词">
+                <el-input v-model="searchForm.keyword" placeholder="管理员昵称" clearable></el-input>
+            </SearchItem>
+        </Search>
         <!-- 新增 | 刷新 -->
-        <ListHeader @create="handleCreate"  @refresh="getData" />
-        
-
-        <el-table v-loading="loading" 
-        element-loading-text="加载中..." 
-        element-loading-spinner="el-icon-loading"
-        :data="tableData" stripe 
-        style="width: 100%">
+        <ListHeader @create="handleCreate" @refresh="getData" />
+        <el-table v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
+            :data="tableData" stripe style="width: 100%">
             <el-table-column label="管理员" width="200">
                 <template #default="{ row }">
                     <div class="flex items-center">
@@ -118,6 +102,8 @@ import {
 import FormDrawer from "@/components/FormDrawer.vue"
 import ListHeader from "@/components/ListHeader.vue"
 import ChooseImage from "@/components/ChooseImage.vue"
+import Search from "@/components/Search.vue"
+import SearchItem from "@/components/SearchItem.vue"
 import { useInitTable, useInitForm } from "@/composables/useCommon.js"
 
 
@@ -148,7 +134,7 @@ const {
         total.value = res.totalCount
         roles.value = res.roles
     },
-    delete:deleteManager,
+    delete: deleteManager,
     updateStatus: updateManagerStatus
 
 })
@@ -166,19 +152,19 @@ const {
     handleEdit,
 
 } = useInitForm(
-   {
-    form:{
-        username: "",
-        password: "",
-        role_id: null,
-        status: 1,
-        avatar: ""
-    },
-    getData,
-    update:updateManager,
-    create:createManager,
-   
-   })
+    {
+        form: {
+            username: "",
+            password: "",
+            role_id: null,
+            status: 1,
+            avatar: ""
+        },
+        getData,
+        update: updateManager,
+        create: createManager,
+
+    })
 
 
 </script>
\ No newline at end of file