From 491ba9a3cc19ceb97dd9a6448831b64c86e1e475 Mon Sep 17 00:00:00 2001 From: vben Date: Sun, 25 Oct 2020 10:51:24 +0800 Subject: [PATCH] feat: add the parameter sortFn to the table --- CHANGELOG.zh_CN.md | 2 ++ src/components/Table/src/BasicTable.vue | 16 +++++++++++++--- src/components/Table/src/const.ts | 10 ++++++++++ src/components/Table/src/hooks/useDataSource.ts | 2 ++ src/components/Table/src/props.ts | 14 ++++++++++++-- src/components/Table/src/types/table.ts | 5 ++++- 6 files changed, 43 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 45955921..4d0b6309 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -4,6 +4,7 @@ - 面包屑支持显示图标 - 新增 tinymce 富文本组件 +- 表单新增 submitOnReset 控制是否在重置时重新发起请求 ### 🎫 Chores @@ -21,6 +22,7 @@ - 修复菜单没有子节点时显示折叠的问题 - 修复面包屑显示样式问题 - 修复 modal 在 destroyOnClose=true 时多次打开拖拽失效 +- 修复表格出现多个 action 列 # 2.0.0-rc.4 (2020-10-21) diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index a48b4abd..a7f1eb54 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -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>, + sorter: SorterResult + ) { + const { clearSelectOnPageChange, sortFn } = unref(getMergeProps); if (clearSelectOnPageChange) { clearSelectedRowKeys(); } setPagination(pagination); + + if (sorter && isFunction(sortFn)) { + const sortInfo = sortFn(sorter); + fetch({ sortInfo }); + return; + } fetch(); } diff --git a/src/components/Table/src/const.ts b/src/components/Table/src/const.ts index beb2d8a3..e57930fd 100644 --- a/src/components/Table/src/const.ts +++ b/src/components/Table/src/const.ts @@ -1,3 +1,5 @@ +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) { + const { field, order } = sortInfo; + return { + field, + order, + }; +} diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts index 2d86acf2..be5f3e1b 100644 --- a/src/components/Table/src/hooks/useDataSource.ts +++ b/src/components/Table/src/hooks/useDataSource.ts @@ -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; diff --git a/src/components/Table/src/props.ts b/src/components/Table/src/props.ts index 1e1efd6d..c78e5017 100644 --- a/src/components/Table/src/props.ts +++ b/src/components/Table/src/props.ts @@ -1,15 +1,25 @@ 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, }, + + sortFn: { + type: Function as PropType<(sortInfo: SorterResult) => any>, + default: DEFAULT_SORT_FN, + }, + showTableSetting: { type: Boolean as PropType, default: false, diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts index 8db6bf8c..0760f712 100644 --- a/src/components/Table/src/types/table.ts +++ b/src/components/Table/src/types/table.ts @@ -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 { + // 自定义排序方法 + sortFn?: (sortInfo: SorterResult) => any; // 显示表格设置 showTableSetting?: boolean; tableSetting?: TableSetting; @@ -106,7 +110,6 @@ export interface BasicTableProps { emptyDataIsShowTable?: boolean; // 额外的请求参数 searchInfo?: any; - // 使用搜索表单 useSearchForm?: boolean; // 表单配置 -- GitLab