epic-designer-dev
Version:
基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器
69 lines (68 loc) • 1.96 kB
TypeScript
import { ActionsModel } from '../../utils/src/index';
import { FormItemRule } from './rules';
export interface RenderCallbackParams {
values: Record<string, any>;
}
export interface ComponentSchema {
[fieldName: string]: any;
children?: ComponentSchema[];
componentProps?: any;
/**
* @deprecated 此属性用于兼容旧版,后期可能会移除,请使用description属性代替。
*/
describe?: string;
editData?: object;
field?: string;
id?: string;
input?: boolean;
label?: string;
noFormItem?: boolean;
on?: {
[eventName: string]: ActionsModel[];
};
rules?: FormItemRule[];
show?: ((renderCallbackParams: RenderCallbackParams) => boolean) | boolean;
slotName?: string;
slots?: {
[slotName: string]: ComponentSchema[];
};
type: string;
}
export interface FormConfig {
customStyle?: string;
hideRequiredMark?: boolean;
labelCol: any;
labelLayout: any;
labelWidth?: string;
layout?: string;
wrapperCol: any;
}
export type FormDataModel = Record<string, any>;
export interface DesignerState {
disabledHover: boolean;
hoverNode: ComponentSchema | null;
matched: ComponentSchema[];
selectedNode: ComponentSchema | null;
}
export interface PageSchema {
canvas?: {
height?: string;
mode?: 'desktop' | 'mobile' | 'pad' | 'pc' | 'tablet';
width?: string;
};
schemas: ComponentSchema[];
script?: string;
}
export interface Designer {
handleDelete: () => void;
handleDuplicate: () => void;
handleImported: (data: PageSchema) => void;
handleToggleDeviceMode: (mode: string) => void;
preview: () => void;
reset: () => void;
save: () => void;
setDisabledHover: (disabledHover?: boolean) => void;
setHoverNode: (schema: ComponentSchema | null) => void;
setSelectedNode: (schema?: ComponentSchema) => void;
state: DesignerState;
}