types: 为useVbenVxeGrid添加泛型声明,使grid实例上能正确获取到行数据的类型 (#5653)

Co-authored-by: Jin Mao <50581550+jinmao88@users.noreply.github.com>
This commit is contained in:
RanMaoting 2025-06-08 17:43:02 +08:00 committed by GitHub
parent b9aef618fe
commit 017ed1a9e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 55 additions and 20 deletions

View File

@ -26,14 +26,14 @@ function getDefaultState(): VxeGridProps {
}; };
} }
export class VxeGridApi { export class VxeGridApi<T extends Record<string, any> = any> {
public formApi = {} as ExtendedFormApi; public formApi = {} as ExtendedFormApi;
// private prevState: null | VxeGridProps = null; // private prevState: null | VxeGridProps = null;
public grid = {} as VxeGridInstance; public grid = {} as VxeGridInstance<T>;
public state: null | VxeGridProps = null; public state: null | VxeGridProps<T> = null;
public store: Store<VxeGridProps>; public store: Store<VxeGridProps<T>>;
private isMounted = false; private isMounted = false;
@ -99,8 +99,8 @@ export class VxeGridApi {
setState( setState(
stateOrFn: stateOrFn:
| ((prev: VxeGridProps) => Partial<VxeGridProps>) | ((prev: VxeGridProps<T>) => Partial<VxeGridProps<T>>)
| Partial<VxeGridProps>, | Partial<VxeGridProps<T>>,
) { ) {
if (isFunction(stateOrFn)) { if (isFunction(stateOrFn)) {
this.store.setState((prev) => { this.store.setState((prev) => {

View File

@ -9,7 +9,7 @@ import type { Ref } from 'vue';
import type { ClassType, DeepPartial } from '@vben/types'; 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'; import type { VxeGridApi } from './api';
@ -35,7 +35,11 @@ export interface SeparatorOptions {
show?: boolean; show?: boolean;
backgroundColor?: string; backgroundColor?: string;
} }
export interface VxeGridProps {
export interface VxeGridProps<
T extends Record<string, any> = any,
D extends BaseFormComponentType = BaseFormComponentType,
> {
/** /**
* *
*/ */
@ -55,15 +59,15 @@ export interface VxeGridProps {
/** /**
* vxe-grid * vxe-grid
*/ */
gridOptions?: DeepPartial<VxeTableGridOptions>; gridOptions?: DeepPartial<VxeTableGridOptions<T>>;
/** /**
* vxe-grid * vxe-grid
*/ */
gridEvents?: DeepPartial<VxeGridListeners>; gridEvents?: DeepPartial<VxeGridListeners<T>>;
/** /**
* *
*/ */
formOptions?: VbenFormProps; formOptions?: VbenFormProps<D>;
/** /**
* *
*/ */
@ -74,9 +78,12 @@ export interface VxeGridProps {
separator?: boolean | SeparatorOptions; separator?: boolean | SeparatorOptions;
} }
export type ExtendedVxeGridApi = VxeGridApi & { export type ExtendedVxeGridApi<
useStore: <T = NoInfer<VxeGridProps>>( D extends Record<string, any> = any,
selector?: (state: NoInfer<VxeGridProps>) => T, F extends BaseFormComponentType = BaseFormComponentType,
> = VxeGridApi<D> & {
useStore: <T = NoInfer<VxeGridProps<D, F>>>(
selector?: (state: NoInfer<VxeGridProps<any, any>>) => T,
) => Readonly<Ref<T>>; ) => Readonly<Ref<T>>;
}; };

View File

@ -1,3 +1,5 @@
import type { BaseFormComponentType } from '@vben-core/form-ui';
import type { ExtendedVxeGridApi, VxeGridProps } from './types'; import type { ExtendedVxeGridApi, VxeGridProps } from './types';
import { defineComponent, h, onBeforeUnmount } from 'vue'; import { defineComponent, h, onBeforeUnmount } from 'vue';
@ -7,16 +9,19 @@ import { useStore } from '@vben-core/shared/store';
import { VxeGridApi } from './api'; import { VxeGridApi } from './api';
import VxeGrid from './use-vxe-grid.vue'; import VxeGrid from './use-vxe-grid.vue';
export function useVbenVxeGrid(options: VxeGridProps) { export function useVbenVxeGrid<
T extends Record<string, any> = any,
D extends BaseFormComponentType = BaseFormComponentType,
>(options: VxeGridProps<T, D>) {
// const IS_REACTIVE = isReactive(options); // const IS_REACTIVE = isReactive(options);
const api = new VxeGridApi(options); const api = new VxeGridApi(options);
const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi; const extendedApi: ExtendedVxeGridApi<T, D> = api as ExtendedVxeGridApi<T, D>;
extendedApi.useStore = (selector) => { extendedApi.useStore = (selector) => {
return useStore(api.store, selector); return useStore(api.store, selector);
}; };
const Grid = defineComponent( const Grid = defineComponent(
(props: VxeGridProps, { attrs, slots }) => { (props: VxeGridProps<T>, { attrs, slots }) => {
onBeforeUnmount(() => { onBeforeUnmount(() => {
api.unmount(); api.unmount();
}); });

View File

@ -1,10 +1,15 @@
import type { Recordable } from '@vben/types'; import type { Recordable } from '@vben/types';
import type { ComponentType } from './component';
import { h } from 'vue'; import { h } from 'vue';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { $te } from '@vben/locales'; 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 { get, isFunction, isString } from '@vben/utils';
import { objectOmit } from '@vueuse/core'; import { objectOmit } from '@vueuse/core';
@ -277,7 +282,10 @@ setupVbenVxeTable({
useVbenForm, useVbenForm,
}); });
export { useVbenVxeGrid }; export const useVbenVxeGrid = <T extends Record<string, any>>(
...rest: Parameters<typeof useGrid<T, ComponentType>>
) => useGrid<T, ComponentType>(...rest);
export type OnActionClickParams<T = Recordable<any>> = { export type OnActionClickParams<T = Recordable<any>> = {
code: string; code: string;
row: T; row: T;

View File

@ -43,7 +43,22 @@ const gridEvents: VxeGridListeners<RowType> = {
}, },
}; };
const [Grid, gridApi] = useVbenVxeGrid({ gridEvents, gridOptions }); const [Grid, gridApi] = useVbenVxeGrid<RowType>({
//
// formOptions: {
// schema: [
// {
// component: 'Switch',
// fieldName: 'name',
// },
// ],
// },
gridEvents,
gridOptions,
});
//
// gridApi.grid
const showBorder = gridApi.useStore((state) => state.gridOptions?.border); const showBorder = gridApi.useStore((state) => state.gridOptions?.border);
const showStripe = gridApi.useStore((state) => state.gridOptions?.stripe); const showStripe = gridApi.useStore((state) => state.gridOptions?.stripe);