查询弹窗组件修改查询条件方式为筛选

src/components/SearchTable/src/SearchTable.vue

@@ -1,20 +1,30 @@
 <template>
   <Dialog :title="dialogTitle" v-model="searchDialogVisible" :width="'80%'">
-      <!-- 搜索工作栏 -->
-    <Search :schema="searchSchema" @search="setSearchParamsRef" @reset="setSearchParamsRef" />
-    <Table
-      ref="searchTableRef"
-      :columns="tableColumns"
-      :data="tableObjectRef.tableList"
-      :loading="tableObjectRef.loading"
-      :pagination="{
-        total: tableObjectRef.total
-      }"
-      v-model:pageSize="tableObjectRef.pageSize"
-      v-model:currentPage="tableObjectRef.currentPage"
-      v-model:sort="tableObjectRef.sort"
-      :selection="true"
+    <!-- 搜索工作栏 -->
+    <!-- <Search :schema="searchSchema" @search="setSearchParamsRef" @reset="setSearchParamsRef" /> -->
+
+    <!-- 列表头部 -->
+    <TableHead
+      :HeadButttondata="HeadButttondata"
+      :routeName="routeName"
+      @searchFormClick="searchFormClick"
+      :allSchemas="allSchemasRef"
     />
+    <ContentWrap>
+      <Table
+        ref="searchTableRef"
+        :columns="tableColumns"
+        :data="tableObjectRef.tableList"
+        :loading="tableObjectRef.loading"
+        :pagination="{
+          total: tableObjectRef.total
+        }"
+        v-model:pageSize="tableObjectRef.pageSize"
+        v-model:currentPage="tableObjectRef.currentPage"
+        v-model:sort="tableObjectRef.sort"
+        :selection="true"
+      />
+    </ContentWrap>
     <template #footer>
       <div class="flex items-center">
         <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -24,14 +34,26 @@
   </Dialog>
 </template>
 <script setup lang="ts">
+import * as defaultButtons from '@/utils/disposition/defaultButtons'
+
 // const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const route = useRoute() // 路由信息
+const routeName = ref()
+routeName.value = route.name
+
 const searchDialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 
+// 列表头部按钮
+const HeadButttondata = [
+  defaultButtons.defaultFilterBtn(null), // 筛选
+]
+
 /** 打开弹窗 */
+const getListRef = ref()
 const setSearchParamsRef = ref()
 const tableObjectRef = ref()
 const getPage:any = ref()
@@ -41,12 +63,14 @@ const formFieldRef = ref()
 const searchFieldRef = ref()
 const typeRef = ref()
 const rowRef = ref()
+const allSchemasRef = ref()
 const open = (titleName: any, allSchemas: any,getApiPage: any, formField: any, searchField: any, type: any, row: any ) => {
   searchDialogVisible.value = true
   formFieldRef.value = formField
   searchFieldRef.value = searchField
+  allSchemasRef.value = allSchemas
   searchSchema.value = allSchemas.searchSchema
-  tableColumns.value = allSchemas.tableColumns
+  tableColumns.value = allSchemas.tableColumns.filter(item => (item.field !== 'action'))
   getPage.value = getApiPage
   typeRef.value = type
   rowRef.value = row
@@ -59,9 +83,19 @@ const open = (titleName: any, allSchemas: any,getApiPage: any, formField: any, s
   // 获得表格的各种操作
   const { getList, setSearchParams } = tableMethods
   setSearchParamsRef.value = setSearchParams
+  getListRef.value = getList
   getList()
 }
 
+// 筛选提交
+const searchFormClick = (searchData) => {
+  tableObjectRef.value.params = {
+    isSearch: true,
+    filters: searchData.filters
+  }
+  getListRef.value() // 刷新当前列表
+}
+
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 // Table 组件 ref