From 9c9ec463f12b60eda40f4cb69076d097c8b34363 Mon Sep 17 00:00:00 2001 From: bqy_fe <1743369777@qq.com> Date: Wed, 13 Apr 2022 21:01:10 +0800 Subject: [PATCH] fix(dynamic-table): add onChangeParams param for dataRequest --- package.json | 12 +- .../core/dynamic-table/src/dynamic-table.ts | 4 +- .../src/hooks/useTableMethods.tsx | 8 +- .../core/dynamic-table/src/types/table.ts | 8 +- .../demos/tables/search-table/columns.tsx | 1 + src/views/demos/tables/search-table/index.vue | 9 +- yarn.lock | 309 +++++++++++------- 7 files changed, 217 insertions(+), 134 deletions(-) diff --git a/package.json b/package.json index 7b3d64c6b..8edd3aa01 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "qs": "^6.10.3", "socket.io-client": "4.4.1", "sortablejs": "^1.15.0", - "vue": "^3.2.31", + "vue": "^3.2.32", "vue-i18n": "9.2.0-beta.30", "vue-router": "^4.0.14", "vue-types": "^4.1.1", @@ -56,8 +56,8 @@ "@types/lodash-es": "^4.17.6", "@types/node": "^17.0.23", "@types/webpack-env": "^1.16.3", - "@typescript-eslint/eslint-plugin": "^5.18.0", - "@typescript-eslint/parser": "^5.18.0", + "@typescript-eslint/eslint-plugin": "^5.19.0", + "@typescript-eslint/parser": "^5.19.0", "@vue/cli-plugin-babel": "^5.0.4", "@vue/cli-plugin-eslint": "^5.0.4", "@vue/cli-plugin-router": "^5.0.4", @@ -67,7 +67,7 @@ "babel-plugin-import": "^1.13.3", "commitizen": "^4.2.4", "conventional-changelog-cli": "^2.2.2", - "eslint": "^8.12.0", + "eslint": "^8.13.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "2.26.0", "eslint-plugin-prettier": "^4.0.0", @@ -77,7 +77,7 @@ "less-loader": "10.2.0", "lint-staged": "^12.3.7", "path-browserify": "^1.0.1", - "postcss-html": "^1.3.0", + "postcss-html": "^1.3.1", "postcss-less": "^6.0.0", "prettier": "^2.6.2", "regenerator-runtime": "^0.13.9", @@ -92,7 +92,7 @@ "svg-sprite-loader": "^6.0.11", "typescript": "^4.6.3", "unplugin-vue-define-options": "^0.6.0", - "vue-cli-plugin-windicss": "^1.1.3", + "vue-cli-plugin-windicss": "^1.1.4", "vue-eslint-parser": "^8.3.0" }, "__npminstall_done": false, diff --git a/src/components/core/dynamic-table/src/dynamic-table.ts b/src/components/core/dynamic-table/src/dynamic-table.ts index 497aee933..f84722693 100644 --- a/src/components/core/dynamic-table/src/dynamic-table.ts +++ b/src/components/core/dynamic-table/src/dynamic-table.ts @@ -85,14 +85,14 @@ export const dynamicTableProps = { export type DynamicTableProps = ExtractPropTypes; export const dynamicTableEmits = { - change: (...rest: Parameters>) => rest.length === 4, + change: (...rest: OnChangeCallbackParams) => rest.length === 4, 'toggle-advanced': (isAdvanced: boolean) => isBoolean(isAdvanced), }; export type DynamicTableEmits = typeof dynamicTableEmits; export type DynamicTableEmitFn = EmitFn; -// @ts-ignore:next-line +// @ts-ignore export type DynamicTableInstance = InstanceType; // 默认支持的插槽 diff --git a/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx b/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx index 4f220ebab..6414cce95 100644 --- a/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx +++ b/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx @@ -37,7 +37,7 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext) * @param {boolean} flush 是否将页数重置到第一页 * @description 获取表格数据 */ - const fetchData = async (params = {}) => { + const fetchData = async (params = {}, rest?: OnChangeCallbackParams) => { // 如果用户没有提供dataSource并且dataRequest是一个函数，那就进行接口请求 if ( Object.is(props.dataSource, undefined) && @@ -58,7 +58,7 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext) } loadingRef.value = true; const data = await props - ?.dataRequest?.(queryParams) + ?.dataRequest?.(queryParams, rest) .finally(() => (loadingRef.value = false)); if (data?.pagination) { @@ -103,13 +103,13 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext) /** * @description 分页改变 */ - const handleTableChange: OnChangeCallbackParams = (...rest) => { + const handleTableChange = (...rest: OnChangeCallbackParams) => { // const [pagination, filters, sorter] = rest; const [pagination] = rest; if (Object.keys(pagination).length) { Object.assign(unref(paginationRef), pagination); } - fetchData(); + fetchData(pagination, rest); emit('change', ...rest); }; diff --git a/src/components/core/dynamic-table/src/types/table.ts b/src/components/core/dynamic-table/src/types/table.ts index de97daeac..e4800b6f8 100644 --- a/src/components/core/dynamic-table/src/types/table.ts +++ b/src/components/core/dynamic-table/src/types/table.ts @@ -1,10 +1,11 @@ import type { TableProps } from 'ant-design-vue'; +import type { TablePaginationConfig } from 'ant-design-vue/es/table'; import type { DynamicTableProps } from '../dynamic-table'; /** * 加载表格数据的参数 */ -export type LoadDataParams = { +export type LoadDataParams = TablePaginationConfig & { /** 根据自己业务需求定义页码 */ page?: number; /** 根据自己业务需求定义页数据条数 */ @@ -12,7 +13,10 @@ export type LoadDataParams = { }; /** 表格onChange事件回调参数 */ -export type OnChangeCallbackParams = TableProps['onChange']; +export type OnChangeCallbackParams = Parameters>; + +/** 表格onChange事件回调函数 */ +export type OnChangeCallback = TableProps['onChange']; export type TableActionType = { /** 刷新并清空,页码也会重置，不包括搜索表单 */ diff --git a/src/views/demos/tables/search-table/columns.tsx b/src/views/demos/tables/search-table/columns.tsx index 7995766fe..ab3e52d9b 100644 --- a/src/views/demos/tables/search-table/columns.tsx +++ b/src/views/demos/tables/search-table/columns.tsx @@ -50,6 +50,7 @@ export const columns: TableColumn[] = [ title: '姓名', align: 'center', dataIndex: 'name', + sorter: true, formItemProps: { required: true, }, diff --git a/src/views/demos/tables/search-table/index.vue b/src/views/demos/tables/search-table/index.vue index cc066b6f3..faa791ad8 100644 --- a/src/views/demos/tables/search-table/index.vue +++ b/src/views/demos/tables/search-table/index.vue @@ -18,11 +18,16 @@