feat(BasicTable): 新增表格搜索获取参数的方法 (#3715)

* feat(BasicTable): 新增表格搜索获取参数的方法 * feat(BasicTable): 新增表格搜索获取参数的方法 * feat(BasicTable): 新增表格搜索获取参数的方法 * feat(BasicTable): 新增表格搜索获取参数的方法
vbenjs · Apr 5, 2024 · de5f9e3 · de5f9e3
1 parent 38d58ab
commit de5f9e3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 2 deletions.
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
@@ -144,6 +144,7 @@
     getDataSourceRef,
     getDataSource,
     getRawDataSource,
+    getSearchInfo,
     setTableData,
     updateTableDataRecord,
     deleteTableDataRecord,
@@ -300,6 +301,7 @@
     setLoading,
     getDataSource,
     getRawDataSource,
+    getSearchInfo,
     setProps,
     getRowSelection,
     getPaginationRef: getPagination,

diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
@@ -50,6 +50,7 @@ export function useDataSource(
   });
   const dataSourceRef = ref<Recordable[]>([]);
   const rawDataSourceRef = ref<Recordable>({});
+  const searchInfoRef = ref<Recordable>({});
 
   watchEffect(() => {
     tableData.value = unref(dataSourceRef);
@@ -275,7 +276,7 @@ export function useDataSource(
       if (beforeFetch && isFunction(beforeFetch)) {
         params = (await beforeFetch(params)) || params;
       }
-
+      searchInfoRef.value = params;
       const res = await api(params);
       rawDataSourceRef.value = res;
 
@@ -339,6 +340,10 @@ export function useDataSource(
     return await fetch(opt);
   }
 
+  function getSearchInfo<T = Recordable>() {
+    return searchInfoRef.value as T;
+  }
+
   onMounted(() => {
     useTimeoutFn(() => {
       unref(propsRef).immediate && fetch();
@@ -349,6 +354,8 @@ export function useDataSource(
     getDataSourceRef,
     getDataSource,
     getRawDataSource,
+    searchInfoRef,
+    getSearchInfo,
     getRowKey,
     setTableData,
     getAutoCreateKey,

diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts
@@ -89,6 +89,9 @@ export function useTable(tableProps?: Props): [
     getRawDataSource: () => {
       return getTableInstance().getRawDataSource();
     },
+    getSearchInfo: () => {
+      return getTableInstance().getSearchInfo();
+    },
     getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
       const columns = getTableInstance().getColumns({ ignoreIndex }) || [];
       return toRaw(columns);

diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
@@ -114,6 +114,7 @@ export interface TableActionType {
   setColumns: (columns: BasicColumn[] | string[]) => void;
   getDataSource: <T = Recordable>() => T[];
   getRawDataSource: <T = Recordable>() => T;
+  getSearchInfo: <T = Recordable>() => T;
   setLoading: (loading: boolean) => void;
   setProps: (props: Partial<BasicTableProps>) => void;
   redoHeight: () => void;

diff --git a/src/views/demo/system/account/index.vue b/src/views/demo/system/account/index.vue
@@ -4,6 +4,7 @@
     <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate">新增账号</a-button>
+        <a-button type="primary" @click="handleExport">导出账号</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -56,7 +57,7 @@
   const go = useGo();
   const [registerModal, { openModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
-  const [registerTable, { reload, updateTableDataRecord }] = useTable({
+  const [registerTable, { reload, updateTableDataRecord, getSearchInfo }] = useTable({
     title: '账号列表',
     api: getAccountList,
     rowKey: 'id',
@@ -99,6 +100,10 @@
     console.log(record);
   }
 
+  function handleExport() {
+    console.log(getSearchInfo());
+  }
+
   function handleSuccess({ isUpdate, values }) {
     if (isUpdate) {
       // 演示不刷新表格直接更新内部数据。