mirror of
https://github.com/imdap/ruoyi-plus-vben5.git
synced 2026-04-23 00:38:34 +08:00
fix: 补全 ComponentPropsMap 与 Vxe 表格表单链路的类型
This commit is contained in:
@@ -68,6 +68,16 @@ import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { message, Modal, notification } from 'ant-design-vue';
|
||||
|
||||
type AdapterUploadProps = UploadProps & {
|
||||
aspectRatio?: string;
|
||||
crop?: boolean;
|
||||
draggable?: boolean;
|
||||
handleChange?: (event: UploadChangeParam) => void;
|
||||
maxSize?: number;
|
||||
onDragSort?: (oldIndex: number, newIndex: number) => void;
|
||||
onHandleChange?: (event: UploadChangeParam) => void;
|
||||
};
|
||||
|
||||
const AutoComplete = defineAsyncComponent(
|
||||
() => import('ant-design-vue/es/auto-complete'),
|
||||
);
|
||||
@@ -646,7 +656,7 @@ export interface ComponentPropsMap {
|
||||
Textarea: TextAreaProps;
|
||||
TimePicker: TimePickerProps;
|
||||
TreeSelect: TreeSelectProps;
|
||||
Upload: UploadProps;
|
||||
Upload: AdapterUploadProps;
|
||||
}
|
||||
|
||||
async function initComponentAdapter() {
|
||||
|
||||
@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { useVbenForm as useForm } from '@vben/common-ui';
|
||||
import {
|
||||
setupVbenVxeTable,
|
||||
useVbenVxeGrid as useGrid,
|
||||
@@ -68,7 +67,7 @@ setupVbenVxeTable({
|
||||
// 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
|
||||
// vxeUI.formats.add
|
||||
},
|
||||
useVbenForm: useVbenForm as typeof useForm,
|
||||
useVbenForm,
|
||||
});
|
||||
|
||||
export const useVbenVxeGrid = <T extends Record<string, any>>(
|
||||
|
||||
@@ -63,6 +63,14 @@ import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { message, Modal, notification } from 'antdv-next';
|
||||
|
||||
type AdapterUploadProps = UploadProps & {
|
||||
aspectRatio?: string;
|
||||
crop?: boolean;
|
||||
handleChange?: (event: UploadChangeParam) => void;
|
||||
maxSize?: number;
|
||||
onHandleChange?: (event: UploadChangeParam) => void;
|
||||
};
|
||||
|
||||
const AutoComplete = defineAsyncComponent(
|
||||
() => import('antdv-next/dist/auto-complete/index'),
|
||||
);
|
||||
@@ -579,7 +587,7 @@ export interface ComponentPropsMap {
|
||||
Textarea: TextAreaProps;
|
||||
TimePicker: TimePickerProps;
|
||||
TreeSelect: TreeSelectProps;
|
||||
Upload: UploadProps;
|
||||
Upload: AdapterUploadProps;
|
||||
}
|
||||
|
||||
async function initComponentAdapter() {
|
||||
|
||||
@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { useVbenForm as useForm } from '@vben/common-ui';
|
||||
import {
|
||||
setupVbenVxeTable,
|
||||
useVbenVxeGrid as useGrid,
|
||||
@@ -68,7 +67,7 @@ setupVbenVxeTable({
|
||||
// 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
|
||||
// vxeUI.formats.add
|
||||
},
|
||||
useVbenForm: useVbenForm as typeof useForm,
|
||||
useVbenForm,
|
||||
});
|
||||
|
||||
export const useVbenVxeGrid = <T extends Record<string, any>>(
|
||||
|
||||
@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { useVbenForm as useForm } from '@vben/common-ui';
|
||||
import {
|
||||
setupVbenVxeTable,
|
||||
useVbenVxeGrid as useGrid,
|
||||
@@ -69,7 +68,7 @@ setupVbenVxeTable({
|
||||
// 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
|
||||
// vxeUI.formats.add
|
||||
},
|
||||
useVbenForm: useVbenForm as typeof useForm,
|
||||
useVbenForm,
|
||||
});
|
||||
|
||||
export const useVbenVxeGrid = <T extends Record<string, any>>(
|
||||
|
||||
@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { useVbenForm as useForm } from '@vben/common-ui';
|
||||
import {
|
||||
setupVbenVxeTable,
|
||||
useVbenVxeGrid as useGrid,
|
||||
@@ -68,7 +67,7 @@ setupVbenVxeTable({
|
||||
// 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
|
||||
// vxeUI.formats.add
|
||||
},
|
||||
useVbenForm: useVbenForm as typeof useForm,
|
||||
useVbenForm,
|
||||
});
|
||||
|
||||
export const useVbenVxeGrid = <T extends Record<string, any>>(
|
||||
|
||||
@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { useVbenForm as useForm } from '@vben/common-ui';
|
||||
import {
|
||||
setupVbenVxeTable,
|
||||
useVbenVxeGrid as useGrid,
|
||||
@@ -68,7 +67,7 @@ setupVbenVxeTable({
|
||||
// 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
|
||||
// vxeUI.formats.add
|
||||
},
|
||||
useVbenForm: useVbenForm as typeof useForm,
|
||||
useVbenForm,
|
||||
});
|
||||
|
||||
export const useVbenVxeGrid = <T extends Record<string, any>>(
|
||||
|
||||
@@ -228,7 +228,7 @@ type MappedComponentProps<P> =
|
||||
) => P & Record<string, any>)
|
||||
| (P & Record<string, any>);
|
||||
|
||||
interface FormSchemaBody extends FormCommonConfig {
|
||||
interface FormSchemaBody extends Omit<FormCommonConfig, 'componentProps'> {
|
||||
/** 默认值 */
|
||||
defaultValue?: any;
|
||||
/** 依赖 */
|
||||
|
||||
@@ -7,7 +7,7 @@ export type ApiComponentOptionsItem = {
|
||||
children?: ApiComponentOptionsItem[];
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
value?: string;
|
||||
value?: number | string;
|
||||
};
|
||||
|
||||
export interface ApiComponentProps {
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import type { VxeGridInstance } from 'vxe-table';
|
||||
|
||||
import type { ExtendedFormApi } from '@vben-core/form-ui';
|
||||
import type {
|
||||
BaseFormComponentType,
|
||||
ExtendedFormApi,
|
||||
} from '@vben-core/form-ui';
|
||||
|
||||
import type { VxeGridProps } from './types';
|
||||
|
||||
@@ -26,25 +29,29 @@ function getDefaultState(): VxeGridProps {
|
||||
};
|
||||
}
|
||||
|
||||
export class VxeGridApi<T extends Record<string, any> = any> {
|
||||
export class VxeGridApi<
|
||||
T extends Record<string, any> = any,
|
||||
D extends BaseFormComponentType = BaseFormComponentType,
|
||||
P extends Record<string, any> = Record<never, never>,
|
||||
> {
|
||||
public formApi = {} as ExtendedFormApi;
|
||||
|
||||
// private prevState: null | VxeGridProps = null;
|
||||
public grid = {} as VxeGridInstance<T>;
|
||||
public state: null | VxeGridProps<T> = null;
|
||||
public state: null | VxeGridProps<T, D, P> = null;
|
||||
|
||||
public store: Store<VxeGridProps<T>>;
|
||||
public store: Store<VxeGridProps<T, D, P>>;
|
||||
|
||||
private isMounted = false;
|
||||
|
||||
private stateHandler: StateHandler;
|
||||
|
||||
constructor(options: VxeGridProps = {}) {
|
||||
constructor(options: VxeGridProps<T, D, P> = {} as VxeGridProps<T, D, P>) {
|
||||
const storeState = { ...options };
|
||||
|
||||
const defaultState = getDefaultState();
|
||||
this.store = new Store<VxeGridProps>(
|
||||
mergeWithArrayOverride(storeState, defaultState),
|
||||
this.store = new Store<VxeGridProps<T, D, P>>(
|
||||
mergeWithArrayOverride(storeState, defaultState) as VxeGridProps<T, D, P>,
|
||||
);
|
||||
|
||||
this.store.subscribe((state) => {
|
||||
@@ -82,7 +89,7 @@ export class VxeGridApi<T extends Record<string, any> = any> {
|
||||
}
|
||||
}
|
||||
|
||||
setGridOptions(options: Partial<VxeGridProps['gridOptions']>) {
|
||||
setGridOptions(options: Partial<VxeGridProps<T, D, P>['gridOptions']>) {
|
||||
this.setState({
|
||||
gridOptions: options,
|
||||
});
|
||||
@@ -98,8 +105,8 @@ export class VxeGridApi<T extends Record<string, any> = any> {
|
||||
|
||||
setState(
|
||||
stateOrFn:
|
||||
| ((prev: VxeGridProps<T>) => Partial<VxeGridProps<T>>)
|
||||
| Partial<VxeGridProps<T>>,
|
||||
| ((prev: VxeGridProps<T, D, P>) => Partial<VxeGridProps<T, D, P>>)
|
||||
| Partial<VxeGridProps<T, D, P>>,
|
||||
) {
|
||||
if (isFunction(stateOrFn)) {
|
||||
this.store.setState((prev) => {
|
||||
|
||||
@@ -89,9 +89,9 @@ export type ExtendedVxeGridApi<
|
||||
D extends Record<string, any> = any,
|
||||
F extends BaseFormComponentType = BaseFormComponentType,
|
||||
P extends Record<string, any> = Record<never, never>,
|
||||
> = VxeGridApi<D> & {
|
||||
> = VxeGridApi<D, F, P> & {
|
||||
useStore: <S = NoInfer<VxeGridProps<D, F, P>>>(
|
||||
selector?: (state: NoInfer<VxeGridProps<any, any, any>>) => S,
|
||||
selector?: (state: NoInfer<VxeGridProps<D, F, P>>) => S,
|
||||
) => Readonly<Ref<S>>;
|
||||
};
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ export function useVbenVxeGrid<
|
||||
P extends Record<string, any> = Record<never, never>,
|
||||
>(options: VxeGridProps<T, D, P>) {
|
||||
// const IS_REACTIVE = isReactive(options);
|
||||
const api = new VxeGridApi(options as VxeGridProps);
|
||||
const api = new VxeGridApi<T, D, P>(options);
|
||||
const extendedApi: ExtendedVxeGridApi<T, D, P> = api as ExtendedVxeGridApi<
|
||||
T,
|
||||
D,
|
||||
@@ -36,12 +36,21 @@ export function useVbenVxeGrid<
|
||||
};
|
||||
|
||||
const Grid = defineComponent(
|
||||
(props: VxeGridProps<T>, { attrs, slots }) => {
|
||||
(props: VxeGridProps<T, D, P>, { attrs, slots }) => {
|
||||
onBeforeUnmount(() => {
|
||||
api.unmount();
|
||||
});
|
||||
api.setState({ ...props, ...attrs });
|
||||
return () => h(VxeGrid, { ...props, ...attrs, api: extendedApi }, slots);
|
||||
api.setState({ ...props, ...attrs } as Partial<VxeGridProps<T, D, P>>);
|
||||
return () =>
|
||||
h(
|
||||
VxeGrid,
|
||||
{
|
||||
...props,
|
||||
...attrs,
|
||||
api: extendedApi as ExtendedVxeGridApi,
|
||||
},
|
||||
slots,
|
||||
);
|
||||
},
|
||||
{
|
||||
name: 'VbenVxeGrid',
|
||||
|
||||
@@ -39,6 +39,7 @@ import type {
|
||||
IconPickerProps,
|
||||
} from '@vben/common-ui';
|
||||
import type { Sortable } from '@vben/hooks';
|
||||
import type { TipTapProps } from '@vben/plugins/tiptap';
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import {
|
||||
@@ -69,6 +70,16 @@ import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { message, Modal, notification } from 'ant-design-vue';
|
||||
|
||||
type AdapterUploadProps = UploadProps & {
|
||||
aspectRatio?: string;
|
||||
crop?: boolean;
|
||||
draggable?: boolean;
|
||||
handleChange?: (event: UploadChangeParam) => void;
|
||||
maxSize?: number;
|
||||
onDragSort?: (oldIndex: number, newIndex: number) => void;
|
||||
onHandleChange?: (event: UploadChangeParam) => void;
|
||||
};
|
||||
|
||||
const AutoComplete = defineAsyncComponent(
|
||||
() => import('ant-design-vue/es/auto-complete'),
|
||||
);
|
||||
@@ -642,13 +653,14 @@ export interface ComponentPropsMap {
|
||||
RadioGroup: RadioGroupProps;
|
||||
RangePicker: RangePickerProps;
|
||||
Rate: RateProps;
|
||||
RichEditor: TipTapProps;
|
||||
Select: SelectProps;
|
||||
Space: SpaceProps;
|
||||
Switch: SwitchProps;
|
||||
Textarea: TextAreaProps;
|
||||
TimePicker: TimePickerProps;
|
||||
TreeSelect: TreeSelectProps;
|
||||
Upload: UploadProps;
|
||||
Upload: AdapterUploadProps;
|
||||
}
|
||||
|
||||
async function initComponentAdapter() {
|
||||
|
||||
Reference in New Issue
Block a user