[feat] 重构客户信息和供应商信息页面的搜索栏- 移除原有的冗余代码和复杂逻辑

- 新增 SearchBarEx 组件用于通用搜索栏
- 优化搜索栏的显示和交互逻辑
- 统一处理搜索、重置、新增和导出操作

src/views/pm/customer/index.vue

@@ -1,87 +1,13 @@
 <template>
   <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <!-- 第一行：搜索内容 -->
-      <el-row :gutter="20">
-        <!-- 左边部分：最多4个搜索条件 -->
-        <el-col :span="22">
-          <el-row :gutter="20">
-            <el-col :span="6" v-for="(field, index) in visibleFields" :key="index">
-              <el-form-item :label="field.label" :prop="field.prop">
-                <el-input
-                  v-model="queryParams[field.prop]"
-                  :placeholder="`请输入${field.label}`"
-                  clearable
-                  @keyup.enter="handleQuery"
-                  class="!w-240px"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-col>
-        <!-- 右边部分：展开按钮 -->
-        <el-col :span="2" style="text-align: right;" v-if="hasMoreFields">
-          <el-form-item>
-            <el-button type="text" @click="toggleShowMore">
-              {{ showMore ? '收起' : '展开更多' }}
-            </el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <!-- 更多搜索条件 -->
-      <el-collapse-transition>
-        <div v-show="showMore">
-          <el-row :gutter="22">
-            <el-col :span="6" v-for="(field, index) in hiddenFields" :key="index">
-              <el-form-item :label="field.label" :prop="field.prop">
-                <el-input
-                  v-model="queryParams[field.prop]"
-                  :placeholder="`请输入${field.label}`"
-                  clearable
-                  @keyup.enter="handleQuery"
-                  class="!w-240px"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </div>
-      </el-collapse-transition>
-
-      <!-- 第二行：搜索按钮 -->
-      <el-row :gutter="20">
-        <el-col :span="24" style="text-align: right;">
-          <el-form-item>
-            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-            <el-button
-              type="primary"
-              plain
-              @click="openForm('create')"
-              v-hasPermi="['pm:customer:create']"
-            >
-              <Icon icon="ep:plus" class="mr-5px" /> 新增
-            </el-button>
-            <el-button
-              type="success"
-              plain
-              @click="handleExport"
-              :loading="exportLoading"
-              v-hasPermi="['pm:customer:export']"
-            >
-              <Icon icon="ep:download" class="mr-5px" /> 导出
-            </el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
+    <SearchBarEx
+      :fields="allFields"
+      :queryParams="queryParams"
+      @query="handleQuery"
+      @reset="resetQuery"
+      @create="openForm('create')"
+      @export="handleExport"
+    />
   </ContentWrap>
 
   <!-- 列表 -->
@@ -132,7 +58,8 @@
 import download from '@/utils/download'
 import { CustomerApi, CustomerVO } from '@/api/pm/customer'
 import CustomerForm from './CustomerForm.vue'
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
+import SearchBarEx from "@/components/SearchBar/SearchBarEx.vue";
 
 /** 客户信息 列表 */
 defineOptions({ name: 'Customer' })
@@ -151,11 +78,20 @@ const queryParams = reactive({
   contacts: undefined,
   phone: undefined,
   address: undefined,
+  address2: undefined,
+  date: undefined,
+  dateRange: undefined,
+  treeSelect: undefined,
   // 可以继续添加其他字段
 })
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
-const showMore = ref(false) // 控制更多搜索项的显示
+const formRef = ref()
+
+// 属下拉调用示例
+// const treeData = [
+//   { id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1' }] },
+//   { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }] },
+//   { id: 3, label: '一级 3', children: [{ id: 6, label: '二级 3-1' }] }
+// ]
 
 // 定义所有搜索字段
 const allFields = [
@@ -164,18 +100,14 @@ const allFields = [
   { label: '联系人', prop: 'contacts' },
   { label: '电话', prop: 'phone' },
   { label: '地址', prop: 'address' },
-  // 可以继续添加其他字段
+  // 调用示例
+  // { label: '下拉菜单', prop: 'address2', component: 'el-select', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] },
+  // { label: '日期选择', prop: 'date', component: 'el-date-picker', props: { type: 'date', format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD' } },
+  // { label: '日期范围选择', prop: 'dateRange', component: 'el-date-picker', props: { type: 'daterange', rangeSeparator: '-', startPlaceholder: '开始日期', endPlaceholder: '结束日期', format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD' } },
+  // { label: '树形选择', prop: 'treeSelect', component: 'el-tree-select', treeData: treeData, treeProps: { label: 'label', children: 'children' }, nodeKey: 'id' }
 ]
 
-// 计算可见字段和隐藏字段
-const visibleFields = computed(() => allFields.slice(0, 4))
-const hiddenFields = computed(() => allFields.slice(4))
-const hasMoreFields = computed(() => allFields.length > 4)
 
-/** 切换更多搜索项的显示 */
-const toggleShowMore = () => {
-  showMore.value = !showMore.value
-}
 
 /** 查询列表 */
 const getList = async () => {
@@ -190,19 +122,23 @@ const getList = async () => {
 }
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
+const handleQuery = (params: any) => {
+  Object.assign(queryParams, params)
   getList()
 }
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
+  for (const key in queryParams) {
+    if (key !== 'pageNo' && key !== 'pageSize') {
+      queryParams[key] = undefined
+    }
+  }
+  queryParams.pageNo = 1
+  getList()
 }
 
 /** 添加/修改操作 */
-const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
@@ -226,13 +162,9 @@ const handleExport = async () => {
     // 导出的二次确认
     await message.exportConfirm()
     // 发起导出
-    exportLoading.value = true
     const data = await CustomerApi.exportCustomer(queryParams)
     download.excel(data, '客户信息.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
+  } catch {}
 }
 
 /** 初始化 **/