From 9942f73494ee24e9e8f96ec04871094a5d2b9ff9 Mon Sep 17 00:00:00 2001 From: Dream <1012377328@qq.com> Date: Wed, 5 Mar 2025 18:15:20 +0800 Subject: [PATCH] =?UTF-8?q?types:=20=E4=B8=BAuseVbenVxeGrid=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=B3=9B=E5=9E=8B=E5=A3=B0=E6=98=8E,=E4=BD=BFgrid?= =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E4=B8=8A=E8=83=BD=E6=AD=A3=E7=A1=AE=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E5=88=B0=E8=A1=8C=E6=95=B0=E6=8D=AE=E7=9A=84=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/effects/plugins/src/vxe-table/api.ts | 12 +++++----- .../effects/plugins/src/vxe-table/types.ts | 22 ++++++++++++------- .../plugins/src/vxe-table/use-vxe-grid.ts | 11 +++++++--- playground/src/adapter/vxe-table.ts | 12 ++++++++-- .../src/views/examples/vxe-table/basic.vue | 17 +++++++++++++- 5 files changed, 54 insertions(+), 20 deletions(-) diff --git a/packages/effects/plugins/src/vxe-table/api.ts b/packages/effects/plugins/src/vxe-table/api.ts index 50879b67483..2b60d602e7b 100644 --- a/packages/effects/plugins/src/vxe-table/api.ts +++ b/packages/effects/plugins/src/vxe-table/api.ts @@ -26,14 +26,14 @@ function getDefaultState(): VxeGridProps { }; } -export class VxeGridApi { +export class VxeGridApi = any> { public formApi = {} as ExtendedFormApi; // private prevState: null | VxeGridProps = null; - public grid = {} as VxeGridInstance; - public state: null | VxeGridProps = null; + public grid = {} as VxeGridInstance; + public state: null | VxeGridProps = null; - public store: Store; + public store: Store>; private isMounted = false; @@ -99,8 +99,8 @@ export class VxeGridApi { setState( stateOrFn: - | ((prev: VxeGridProps) => Partial) - | Partial, + | ((prev: VxeGridProps) => Partial>) + | Partial>, ) { if (isFunction(stateOrFn)) { this.store.setState((prev) => { diff --git a/packages/effects/plugins/src/vxe-table/types.ts b/packages/effects/plugins/src/vxe-table/types.ts index 4eb69b5f5a6..f9c3d117442 100644 --- a/packages/effects/plugins/src/vxe-table/types.ts +++ b/packages/effects/plugins/src/vxe-table/types.ts @@ -9,7 +9,7 @@ import type { Ref } from 'vue'; import type { ClassType, DeepPartial } from '@vben/types'; -import type { VbenFormProps } from '@vben-core/form-ui'; +import type { BaseFormComponentType, VbenFormProps } from '@vben-core/form-ui'; import type { VxeGridApi } from './api'; @@ -31,7 +31,10 @@ export interface VxeTableGridOptions extends VxeTableGridProps { toolbarConfig?: ToolbarConfigOptions; } -export interface VxeGridProps { +export interface VxeGridProps< + T extends Record = any, + D extends BaseFormComponentType = BaseFormComponentType, +> { /** * 标题 */ @@ -51,24 +54,27 @@ export interface VxeGridProps { /** * vxe-grid 配置 */ - gridOptions?: DeepPartial; + gridOptions?: DeepPartial>; /** * vxe-grid 事件 */ - gridEvents?: DeepPartial; + gridEvents?: DeepPartial>; /** * 表单配置 */ - formOptions?: VbenFormProps; + formOptions?: VbenFormProps; /** * 显示搜索表单 */ showSearchForm?: boolean; } -export type ExtendedVxeGridApi = VxeGridApi & { - useStore: >( - selector?: (state: NoInfer) => T, +export type ExtendedVxeGridApi< + D extends Record = any, + F extends BaseFormComponentType = BaseFormComponentType, +> = VxeGridApi & { + useStore: >>( + selector?: (state: NoInfer>) => T, ) => Readonly>; }; diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts b/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts index a309f5ac4d7..7919ad8dc93 100644 --- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts +++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts @@ -1,3 +1,5 @@ +import type { BaseFormComponentType } from '@vben-core/form-ui'; + import type { ExtendedVxeGridApi, VxeGridProps } from './types'; import { defineComponent, h, onBeforeUnmount } from 'vue'; @@ -7,16 +9,19 @@ import { useStore } from '@vben-core/shared/store'; import { VxeGridApi } from './api'; import VxeGrid from './use-vxe-grid.vue'; -export function useVbenVxeGrid(options: VxeGridProps) { +export function useVbenVxeGrid< + T extends Record = any, + D extends BaseFormComponentType = BaseFormComponentType, +>(options: VxeGridProps) { // const IS_REACTIVE = isReactive(options); const api = new VxeGridApi(options); - const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi; + const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi; extendedApi.useStore = (selector) => { return useStore(api.store, selector); }; const Grid = defineComponent( - (props: VxeGridProps, { attrs, slots }) => { + (props: VxeGridProps, { attrs, slots }) => { onBeforeUnmount(() => { api.unmount(); }); diff --git a/playground/src/adapter/vxe-table.ts b/playground/src/adapter/vxe-table.ts index b4a1b3c8612..9489693fcdb 100644 --- a/playground/src/adapter/vxe-table.ts +++ b/playground/src/adapter/vxe-table.ts @@ -1,10 +1,15 @@ import type { Recordable } from '@vben/types'; +import type { ComponentType } from './component'; + import { h } from 'vue'; import { IconifyIcon } from '@vben/icons'; import { $te } from '@vben/locales'; -import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table'; +import { + setupVbenVxeTable, + useVbenVxeGrid as useGrid, +} from '@vben/plugins/vxe-table'; import { get, isFunction, isString } from '@vben/utils'; import { objectOmit } from '@vueuse/core'; @@ -229,7 +234,10 @@ setupVbenVxeTable({ useVbenForm, }); -export { useVbenVxeGrid }; +export const useVbenVxeGrid = >( + ...rest: Parameters> +) => useGrid(...rest); + export type OnActionClickParams> = { code: string; row: T; diff --git a/playground/src/views/examples/vxe-table/basic.vue b/playground/src/views/examples/vxe-table/basic.vue index 1216468d4d8..d20472461ae 100644 --- a/playground/src/views/examples/vxe-table/basic.vue +++ b/playground/src/views/examples/vxe-table/basic.vue @@ -43,7 +43,22 @@ const gridEvents: VxeGridListeners = { }, }; -const [Grid, gridApi] = useVbenVxeGrid({ gridEvents, gridOptions }); +const [Grid, gridApi] = useVbenVxeGrid({ + // 放开注释查看表单组件的类型 + // formOptions: { + // schema: [ + // { + // component: 'Switch', + // fieldName: 'name', + // }, + // ], + // }, + gridEvents, + gridOptions, +}); + +// 放开注释查看当前表格实例的类型 +// gridApi.grid const showBorder = gridApi.useStore((state) => state.gridOptions?.border); const showStripe = gridApi.useStore((state) => state.gridOptions?.stripe);