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

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

src/components/SearchBar/SearchBarEx.vue

@@ -0,0 +1,204 @@
+<template>
+  <el-form
+      class="-mb-15px"
+      :model="localQueryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+  >
+    <!-- 第一行：搜索内容 -->
+    <el-row :gutter="20">
+      <!-- 左边部分：最多4个搜索条件 -->
+      <el-col :span="22">
+        <!-- 上面的部分：默认展示4个搜索条件 -->
+        <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">
+              <component
+                  :is="field.component || 'el-input'"
+                  v-model="localQueryParams[field.prop]"
+                  :placeholder="`请输入${field.label}`"
+                  clearable
+                  @keyup.enter="handleQuery"
+                  class="!w-240px"
+                  v-bind="field.props"
+              >
+                <template v-if="field.component === 'el-select'">
+                  <el-option
+                      v-for="option in field.options"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value"
+                  />
+                </template>
+                <template v-if="field.component === 'el-tree-select'">
+                  <el-tree-select
+                      v-model="localQueryParams[field.prop]"
+                      :data="field.treeData"
+                      :props="field.treeProps"
+                      :clearable="true"
+                      placeholder="请选择"
+                      :node-key="field.nodeKey"
+                  />
+                </template>
+              </component>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 下面的部分：隐藏的搜索条件 -->
+        <el-collapse-transition>
+          <el-row :gutter="20" v-show="showMore">
+            <el-col :span="6" v-for="(field, index) in hiddenFields" :key="index">
+              <el-form-item :label="field.label" :prop="field.prop">
+                <component
+                    :is="field.component || 'el-input'"
+                    v-model="localQueryParams[field.prop]"
+                    :placeholder="`请输入${field.label}`"
+                    clearable
+                    @keyup.enter="handleQuery"
+                    class="!w-240px"
+                    v-bind="field.props"
+                >
+                  <template v-if="field.component === 'el-select'">
+                    <el-option
+                        v-for="option in field.options"
+                        :key="option.value"
+                        :label="option.label"
+                        :value="option.value"
+                    />
+                  </template>
+                  <template v-if="field.component === 'el-tree-select'">
+                    <el-tree-select
+                        v-model="localQueryParams[field.prop]"
+                        :data="field.treeData"
+                        :props="field.treeProps"
+                        :clearable="true"
+                        placeholder="请选择"
+                        :node-key="field.nodeKey"
+                    />
+                  </template>
+                </component>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-collapse-transition>
+      </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-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="handleCreate"
+              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>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+
+// 定义组件的 props
+const props = defineProps<{
+  fields: any[],       // 搜索字段配置数组
+  queryParams: any     // 初始查询参数
+}>()
+
+// 定义组件的 emits
+const emit = defineEmits(['query', 'reset', 'create', 'export'])
+
+// 本地查询参数，初始值为 props 中的 queryParams
+const localQueryParams = ref({ ...props.queryParams })
+// 表单引用，用于表单操作
+const queryFormRef = ref()
+// 导出按钮加载状态
+const exportLoading = ref(false)
+// 是否显示更多搜索项
+const showMore = ref(false)
+
+// 计算可见字段（前4个）
+const visibleFields = computed(() => props.fields.slice(0, 4))
+// 计算隐藏字段（第5个及以后的）
+const hiddenFields = computed(() => props.fields.slice(4))
+// 是否有更多字段需要显示
+const hasMoreFields = computed(() => props.fields.length > 4)
+
+/**
+ * 切换更多搜索项的显示状态
+ */
+const toggleShowMore = () => {
+  showMore.value = !showMore.value
+}
+
+/**
+ * 查询按钮操作
+ * 触发 query 事件，传递当前查询参数
+ */
+const handleQuery = () => {
+  emit('query', { ...localQueryParams.value, pageNo: 1 })
+}
+
+/**
+ * 重置按钮操作
+ * 重置表单并触发 reset 事件
+ */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  emit('reset')
+}
+
+/**
+ * 新增按钮操作
+ * 触发 create 事件
+ */
+const handleCreate = () => {
+  emit('create')
+}
+
+/**
+ * 导出按钮操作
+ * 触发 export 事件
+ */
+const handleExport = () => {
+  emit('export')
+}
+
+/**
+ * 监听 queryParams 的变化
+ * 当 queryParams 发生变化时，更新 localQueryParams
+ */
+watch(
+    () => props.queryParams,
+    (newVal) => {
+      localQueryParams.value = { ...newVal }
+    },
+    { deep: true }
+)
+</script>

src/views/pm/customer/index.vue

@@ -1,87 +1,13 @@
 <template>
   <ContentWrap>
-    <!-- 搜索工作栏 -->
+    <SearchBarEx
-    <el-form
+      :fields="allFields"
-      class="-mb-15px"
+      :queryParams="queryParams"
-      :model="queryParams"
+      @query="handleQuery"
-      ref="queryFormRef"
+      @reset="resetQuery"
-      :inline="true"
+      @create="openForm('create')"
-      label-width="68px"
+      @export="handleExport"
-    >
+    />
-      <!-- 第一行：搜索内容 -->
-      <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>
   </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 formRef = ref()
-const exportLoading = ref(false) // 导出的加载中
+
-const showMore = ref(false) // 控制更多搜索项的显示
+// 属下拉调用示例
+// 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 = () => {
+const handleQuery = (params: any) => {
-  queryParams.pageNo = 1
+  Object.assign(queryParams, params)
   getList()
 }
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  for (const key in queryParams) {
-  handleQuery()
+    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 {
+  } catch {}
-  } finally {
-    exportLoading.value = false
-  }
 }
 
 /** 初始化 **/

src/views/pm/subcontractor/index.vue

@@ -1,87 +1,14 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form
+    <SearchBarEx
-      class="-mb-15px"
+      :fields="allFields"
-      :model="queryParams"
+      :queryParams="queryParams"
-      ref="queryFormRef"
+      @query="handleQuery"
-      :inline="true"
+      @reset="resetQuery"
-      label-width="68px"
+      @create="openForm('create')"
-    >
+      @export="handleExport"
-      <!-- 第一行：搜索内容 -->
+    />
-      <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:subcontractor:create']"
-            >
-              <Icon icon="ep:plus" class="mr-5px" /> 新增
-            </el-button>
-            <el-button
-              type="success"
-              plain
-              @click="handleExport"
-              :loading="exportLoading"
-              v-hasPermi="['pm:subcontractor:export']"
-            >
-              <Icon icon="ep:download" class="mr-5px" /> 导出
-            </el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
@@ -130,7 +57,8 @@
 import download from '@/utils/download'
 import { SubcontractorApi, SubcontractorVO } from '@/api/pm/subcontractor'
 import SubcontractorForm from './SubcontractorForm.vue'
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
+import SearchBarEx from "@/components/SearchBar/SearchBarEx.vue";
 
 /** 供应商信息 列表 */
 defineOptions({ name: 'Subcontractor' })
@@ -149,10 +77,9 @@ const queryParams = reactive({
   contacts: undefined,
   phone: undefined,
   address: undefined,
+  // 可以继续添加其他字段
 })
-const queryFormRef = ref() // 搜索的表单
+const formRef = ref()
-const exportLoading = ref(false) // 导出的加载中
-const showMore = ref(false) // 控制更多搜索项的显示
 
 // 定义所有搜索字段
 const allFields = [
@@ -161,18 +88,9 @@ const allFields = [
   { label: '联系人', prop: 'contacts' },
   { label: '电话', prop: 'phone' },
   { label: '地址', prop: 'address' },
+  // 可以继续添加其他字段
 ]
 
-// 计算可见字段和隐藏字段
-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 () => {
   loading.value = true
@@ -186,19 +104,23 @@ const getList = async () => {
 }
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
+const handleQuery = (params: any) => {
-  queryParams.pageNo = 1
+  Object.assign(queryParams, params)
   getList()
 }
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  for (const key in queryParams) {
-  handleQuery()
+    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)
 }
@@ -222,13 +144,9 @@ const handleExport = async () => {
     // 导出的二次确认
     await message.exportConfirm()
     // 发起导出
-    exportLoading.value = true
     const data = await SubcontractorApi.exportSubcontractor(queryParams)
     download.excel(data, '供应商信息.xls')
-  } catch {
+  } catch {}
-  } finally {
-    exportLoading.value = false
-  }
 }
 
 /** 初始化 **/
@@ -236,7 +154,3 @@ onMounted(() => {
   getList()
 })
 </script>
-
-<style scoped>
-/* 自定义样式可以根据需要添加 */
-</style>