ADD: 搜索组件拆分

src/components/Search.vue

+<template>
+<el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
+                <el-row :gutter="20">
+                    <slot/>
+
+                    <template v-if="showSearch">
+                       <slot name="show" />
+                    </template>
+                    
+                    <el-col :span="8" :offset="showSearch ? 0 : 8">
+                        <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">
+                                {{ showSearch ? '收起' : '展开' }}
+                                <el-icon>
+                                    <ArrowUp v-if="showSearch" />
+                                    <ArrowDown v-else/>
+                                </el-icon>
+                            </el-button>
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const showSearch = ref(false)
+
+defineEmits("search", "reset")
+
+
+</script>
\ No newline at end of file

src/pages/goods/list.vue

@@ -6,14 +6,15 @@
             </el-tab-pane>
         </el-tabs>
         <el-card shadow="never" class="border-0">
-            <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
-                <el-row :gutter="20">
+            <!-- 搜索 -->
+            <Search @search="getData" @reset="resetSearchForm">
+                <el-col :span="8" :offset="0">
+                    <el-form-item label="关键词">
+                        <el-input v-model="searchForm.title" placeholder="商品名称" clearable></el-input>
+                    </el-form-item>
+                </el-col>
+                <template #show>
                     <el-col :span="8" :offset="0">
-                        <el-form-item label="商品名称">
-                            <el-input v-model="searchForm.title" placeholder="商品名称" clearable></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8" :offset="0" v-if="showSearch">
                         <el-form-item label="商品分类" prop="category_id">
                             <el-select v-model="searchForm.category_id"  placeholder="请选择商品分类" clearable>
                                 <el-option v-for="item in category_list"
@@ -24,23 +25,9 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :span="8" :offset="showSearch ? 0 : 8">
-                        <div class="flex items-center justify-end">
-                            <el-button type="primary" @click="getData">搜索</el-button>
-                            <el-button @click="resetSearchForm">重置</el-button>
-                            <el-button type="primary" text @click=" showSearch = !showSearch">
-                                {{ showSearch ? '收起' : '展开' }}
-                                <el-icon>
-                                    <ArrowUp v-if="showSearch" />
-                                    <ArrowDown v-else/>
-                                </el-icon>
-                            </el-button>
-                        </div>
-                    </el-col>
-                </el-row>
-            </el-form>
-
-
+                </template>
+            </Search>
+            
             <!-- 新增 | 刷新 -->
             <ListHeader @create="handleCreate" @refresh="getData" />
 
@@ -84,7 +71,7 @@
                     </template>
                 </el-table-column>
                 <el-table-column label="总库存" width="90" prop="stock" align="center" />
-                <el-table-column label="操作"  align="center">
+                <el-table-column label="操作" align="center">
                     <template #default="scope">
                         <div v-if="searchForm.tab != 'delete'">
                             <el-button class="px-1" type="primary" size="small" text>修改</el-button>
@@ -158,6 +145,7 @@ 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 { useInitTable, useInitForm } from "@/composables/useCommon.js"
 
 
@@ -244,8 +232,8 @@ const tabbars = [{
 
 // 商品分类
 const category_list = ref([])
-getCategoryList().then(res=>category_list.value=res)
+getCategoryList().then(res => category_list.value = res)
+
 
-const showSearch = ref(false)
 
 </script>
\ No newline at end of file