From 661db0c767772bb7a30da9d3eeaf2b47858ccf0b Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: 星期日, 15 十一月 2020 13:22:34 +0800
Subject: [PATCH] perf(upload): improve upload component

---
 src/components/Table/src/BasicTable.vue |   68 ++++++++++++++++++++-------------
 1 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 9578d73..e767366 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -4,12 +4,15 @@
     class="basic-table"
     :class="{
       'table-form-container': getBindValues.useSearchForm,
+      inset: getBindValues.inset,
     }"
   >
     <BasicForm
       v-bind="getFormProps"
       v-if="getBindValues.useSearchForm"
+      :submitOnReset="true"
       :submitButtonOptions="{ loading }"
+      :tableAction="tableAction"
       @register="registerForm"
       @submit="handleSearchInfoChange"
       @advanced-change="redoHeight"
@@ -22,9 +25,7 @@
       ref="tableElRef"
       v-bind="getBindValues"
       :rowClassName="getRowClassName"
-      :class="{
-        hidden: !getEmptyDataIsShowTable,
-      }"
+      v-show="getEmptyDataIsShowTable"
       @change="handleTableChange"
     >
       <template #[item]="data" v-for="item in Object.keys($slots)">
@@ -34,22 +35,27 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref, watch, nextTick, toRaw } from 'vue';
-  import { Table } from 'ant-design-vue';
-  import { basicProps } from './props';
   import type {
     BasicTableProps,
     FetchParams,
     GetColumnsParams,
     TableActionType,
     SizeType,
+    SorterResult,
+    TableCustomRecord,
   } from './types/table';
+  import { PaginationProps } from './types/pagination';
 
-  import { isFunction, isString } from '/@/utils/is';
-
+  import { defineComponent, ref, computed, unref, watch, nextTick, toRaw } from 'vue';
+  import { Table } from 'ant-design-vue';
   import renderTitle from './components/renderTitle';
   import renderFooter from './components/renderFooter';
   import renderExpandIcon from './components/renderExpandIcon';
+  import { BasicForm, FormProps, useForm } from '/@/components/Form/index';
+
+  import { isFunction, isString } from '/@/utils/is';
+  import { deepMerge } from '/@/utils';
+  import { omit } from 'lodash-es';
 
   import { usePagination } from './hooks/usePagination';
   import { useColumns } from './hooks/useColumns';
@@ -58,14 +64,10 @@
   import { useRowSelection } from './hooks/useRowSelection';
   import { useTableScroll } from './hooks/useTableScroll';
   import { provideTable } from './hooks/useProvinceTable';
-  import { BasicForm, FormProps, useForm } from '/@/components/Form/index';
-  import { omit } from 'lodash-es';
-  import { ROW_KEY } from './const';
-  import { PaginationProps } from './types/pagination';
-  import { deepMerge } from '/@/utils';
-  import { TableCustomRecord } from 'ant-design-vue/types/table/table';
-  import { useEvent } from '/@/hooks/event/useEvent';
 
+  import { useEventListener } from '/@/hooks/event/useEventListener';
+  import { basicProps } from './props';
+  import { ROW_KEY } from './const';
   import './style/index.less';
   export default defineComponent({
     props: basicProps,
@@ -190,7 +192,15 @@
         return !!unref(getDataSourceRef).length;
       });
 
-      function getRowClassName(record: TableCustomRecord<any>, index: number) {
+      watch(
+        () => unref(getDataSourceRef),
+        () => {
+          handleSummary();
+        },
+        { immediate: true }
+      );
+
+      function getRowClassName(record: TableCustomRecord, index: number) {
         const { striped, rowClassName } = unref(getMergeProps);
         if (!striped) return;
         if (rowClassName && isFunction(rowClassName)) {
@@ -207,12 +217,23 @@
         fetch({ searchInfo: info, page: 1 });
       }
 
-      function handleTableChange(pagination: PaginationProps) {
-        const { clearSelectOnPageChange } = unref(getMergeProps);
+      function handleTableChange(
+        pagination: PaginationProps,
+        // @ts-ignore
+        filters: Partial<Record<string, string[]>>,
+        sorter: SorterResult
+      ) {
+        const { clearSelectOnPageChange, sortFn } = unref(getMergeProps);
         if (clearSelectOnPageChange) {
           clearSelectedRowKeys();
         }
         setPagination(pagination);
+
+        if (sorter && isFunction(sortFn)) {
+          const sortInfo = sortFn(sorter);
+          fetch({ sortInfo });
+          return;
+        }
         fetch();
       }
 
@@ -225,7 +246,7 @@
             }
             const bodyDomList = tableEl.$el.querySelectorAll('.ant-table-body') as HTMLDivElement[];
             const bodyDom = bodyDomList[0];
-            useEvent({
+            useEventListener({
               el: bodyDom,
               name: 'scroll',
               listener: () => {
@@ -241,14 +262,6 @@
           });
         }
       }
-
-      watch(
-        () => unref(getDataSourceRef),
-        () => {
-          handleSummary();
-        },
-        { immediate: true }
-      );
 
       function setProps(props: Partial<BasicTableProps>) {
         innerPropsRef.value = deepMerge(unref(innerPropsRef) || {}, props);
@@ -310,6 +323,7 @@
         handleTableChange,
         getRowClassName,
         wrapRef,
+        tableAction,
         ...tableAction,
       };
     },

--
Gitblit v1.8.0