feat: add the parameter sortFn to the table

vben
1 parent d09406e3
Showing 6 changed files with 43 additions and 6 deletions
CHANGELOG.zh_CN.md
src/components/Table/src/BasicTable.vue
src/components/Table/src/const.ts
src/components/Table/src/hooks/useDataSource.ts
src/components/Table/src/props.ts
src/components/Table/src/types/table.ts
@@ -4,6 +4,7 @@
  
 - 面包屑支持显示图标
 - 新增 tinymce 富文本组件
+- 表单新增 submitOnReset 控制是否在重置时重新发起请求
  
 ### 🎫 Chores
  
@@ -21,6 +22,7 @@
 - 修复菜单没有子节点时显示折叠的问题
 - 修复面包屑显示样式问题
 - 修复 modal 在 destroyOnClose=true 时多次打开拖拽失效
+- 修复表格出现多个 action 列
  
 # 2.0.0-rc.4 (2020-10-21)
  
@@ -64,7 +64,7 @@
   import { ROW_KEY } from './const';
   import { PaginationProps } from './types/pagination';
   import { deepMerge } from '/@/utils';
-  import { TableCustomRecord } from 'ant-design-vue/types/table/table';
+  import { SorterResult, TableCustomRecord } from 'ant-design-vue/types/table/table';
   import { useEvent } from '/@/hooks/event/useEvent';
  
   import './style/index.less';
@@ -216,12 +216,22 @@
         fetch({ searchInfo: info, page: 1 });
       }
  
-      function handleTableChange(pagination: PaginationProps) {
-        const { clearSelectOnPageChange } = unref(getMergeProps);
+      function handleTableChange(
+        pagination: PaginationProps,
+        filters: Partial<Record<string, string[]>>,
+        sorter: SorterResult<any>
+      ) {
+        const { clearSelectOnPageChange, sortFn } = unref(getMergeProps);
         if (clearSelectOnPageChange) {
           clearSelectedRowKeys();
         }
         setPagination(pagination);
+
+        if (sorter && isFunction(sortFn)) {
+          const sortInfo = sortFn(sorter);
+          fetch({ sortInfo });
+          return;
+        }
         fetch();
       }
  
+import { SorterResult } from 'ant-design-vue/types/table/table';
+
 export const ROW_KEY = 'key';
  
 export const PAGE_SIZE_OPTIONS = ['10', '50', '80', '100'];
@@ -10,3 +12,11 @@ export const FETCH_SETTING = {
   listField: 'items',
   totalField: 'total',
 };
+
+export function DEFAULT_SORT_FN(sortInfo: SorterResult<any>) {
+  const { field, order } = sortInfo;
+  return {
+    field,
+    order,
+  };
+}
@@ -98,6 +98,8 @@ export function useDataSource(
         ...(useSearchForm ? getFieldsValue() : {}),
         ...searchInfo,
         ...(opt ? opt.searchInfo : {}),
+        ...(opt ? opt.sortInfo : {}),
+        ...(opt ? opt.filterInfo : {}),
       };
       if (beforeFetch && isFunction(beforeFetch)) {
         params = beforeFetch(params) || params;
 import type { PropType } from 'vue';
 import type { PaginationProps } from './types/pagination';
 import type { BasicColumn, FetchSetting, TableSetting } from './types/table';
-import type { TableCustomRecord, TableRowSelection } from 'ant-design-vue/types/table/table';
+import type {
+  SorterResult,
+  TableCustomRecord,
+  TableRowSelection,
+} from 'ant-design-vue/types/table/table';
 import type { FormProps } from '/@/components/Form/index';
-import { FETCH_SETTING } from './const';
+import { DEFAULT_SORT_FN, FETCH_SETTING } from './const';
  
 // 注释看 types/table
 export const basicProps = {
   tableSetting: {
     type: Object as PropType<TableSetting>,
   },
+
+  sortFn: {
+    type: Function as PropType<(sortInfo: SorterResult<any>) => any>,
+    default: DEFAULT_SORT_FN,
+  },
+
   showTableSetting: {
     type: Boolean as PropType<boolean>,
     default: false,
@@ -28,6 +28,8 @@ export interface RenderEditableCellParams {
 export interface FetchParams {
   searchInfo?: any;
   page?: number;
+  sortInfo?: any;
+  filterInfo?: any;
 }
  
 export interface GetColumnsParams {
@@ -75,6 +77,8 @@ export interface TableSetting {
 }
  
 export interface BasicTableProps<T = any> {
+  // 自定义排序方法
+  sortFn?: (sortInfo: SorterResult<any>) => any;
   // 显示表格设置
   showTableSetting?: boolean;
   tableSetting?: TableSetting;
@@ -106,7 +110,6 @@ export interface BasicTableProps&lt;T = any&gt; {
   emptyDataIsShowTable?: boolean;
   // 额外的请求参数
   searchInfo?: any;
-
   // 使用搜索表单
   useSearchForm?: boolean;
   // 表单配置