跳转到内容

编辑表单

编辑表单由输入框、单选框、下拉选择、进度条、标签等数据编辑控件及数据预览控件构成,主要功能包括高效收集用户输入数据、实时验证数据合法性、结构化提交至后端,同时支持数据回显与动态交互,保障用户体验与数据准确性。

基础

信息表单

编辑模式

多数据部件

布局

分组关闭模式

分组折叠

逻辑

表单项更新

界面样式及图标

值显示

锚点

自动保存

取消变更

表单事件

表单项事件

表单能力

校验模式

输入参数

名称说明类型默认值
modelData表单模型数据Object as IDEEditForm-
context应用上下文对象Object as IContext-
params视图参数对象Object as IParams{}
provider部件适配器Object as IControlProvider-
isSimple是否是简单模式,即直接传入数据,不加载数据Boolean-
data简单模式下传入的数据Object as IData-
loadDefault是否默认加载数据Booleantrue
simpleDataIndex简单模式下传入的数据索引Number-
mdCtrlFormIndex多数据部件表单模式下传入的表单索引Number-

状态

名称说明类型默认值
isCreated控制器是否走完created生命周期booleanfalse
isMounted控制器是否走完mounted生命周期booleanfalse
isDestroyed控制器是否走完destroy生命周期booleanfalse
context应用上下文对象IApiContext{}
zIndexpopover层级number-
activated当前部件是否为激活状态(缓存下的激活状态,一般与框架的生命周期相同)booleanfalse
isSimple是否是简单模式,简单模式下不加载数据,而是由父组件传值booleanfalse
isLoading部件是否正在加载booleanfalse
loadDefault是否默认加载数据booleantrue
disabled部件禁用状态booleanfalse
maskOption部件遮罩参数IApiMaskOption-
isCounterDisabled是否禁用计数器boolean-
isLoaded是否加载完数据booleanfalse
data表单数据IApiData{}
processing是否正在处理中(动态控制,值规则,表单项更新等逻辑中)booleanfalse
modified是否被修改过booleanfalse
activeTab当前激活分页string-
formIsDestroyed表单是否销毁(UI)booleanfalse
simpleDataIndex简单模式数据索引number0
mdCtrlFormIndex多数据部件表单模式下当前表单索引number-

控制器

名称说明类型
id控制器实例的唯一标识,创建时自动生成 string
state状态对象,泛型 S
model模型对象,泛型 T
context应用上下文对象 IApiContext
params视图参数对象 IApiParams
view当前视图控制器 IApiViewController & IApiData
ctrlId部件标识 string
controlParams部件参数 IApiParams
layoutPanel部件布局面板控制器 IApiViewLayoutPanelController & IApiData
runMode运行模式(DESIGN:设计模式,RUNTIME:运行时) 'DESIGN' | 'RUNTIME'
details所有表单项成员的控制器 { [key: string]: IApiFormDetailController }
formItems表单项控制器集合 IApiFormDetailController[]
formMDCtrls表单多数据部件控制器集合 IApiFormMDCtrlController[]
formDruipart表单关系界面控制器集合 IApiFormDruipartController[]
force强制更新,触发render函数(_callback?: () => void) => void
startLoading开始加载() => Promise<void>
endLoading加载完毕() => Promise<void>
getControlType获取部件类型() => string
enable取消部件禁用() => void
disabled设置部件禁用(options?: IApiMaskOption) => void
disableCounter禁用部件计数器() => void
emitDEDataChange触发实体数据变更的通知(type: 'create' | 'update' | 'remove', data: IApiData) => void
getData获取表单数据() => IApiData[]
getReal获取原始实体数据() => IApiData[]
refresh刷新当前部件() => Promise<void>
changeCollapse切换折叠,其中tag表示操作指定分组标识,若不传则操作当前表单的所有分组展开状态,expand表示是否展开,若不传则以当前分组状态为基准切换(params?: { tag?: string; expand?: boolean }) => void
setActiveTab设置表单激活分页(name: string) => void
setDataValue设置表单数据(name: string, value: unknown, ignore?: boolean) => Promise<void>
setDetailError设置指定项错误提示(name: string, message: string) => void
validate表单校验() => Promise<boolean>
silentValidate表单静默校验() => Promise<boolean>
getFormDetail获取表单成员(type: K, id: string) => IApiFormDetailMapping[K]
getSimpleDataIndex获取简单模式下当前表单的数据索引() => number
getMdCtrlFormIndex获取多数据部件表单模式下当前表单索引() => number
loadDraft加载草稿数据(args?: IApiDataAbilityParams) => Promise<IApiData>
load加载数据(args?: IApiDataAbilityParams) => Promise<IApiData>
save保存表单数据(args?: IApiFormSaveParams) => Promise<IApiData>
remove删除表单数据(args?: IApiDataAbilityParams) => Promise<boolean>
wfSubmit工作流提交(调用前先确保调用保存)(args?: IApiDataAbilityParams) => Promise<void>
wfStart工作流启动(调用前先确保调用保存)(args?: IApiDataAbilityParams) => Promise<void>
filterDetail过滤成员,与表单成员标题包含匹配,满足条件则显示,不满足条件则隐藏(filter: string) => void
updateFormItem执行更新表单项(formItemUpdateId: string) => Promise<void>
cancelChanges取消变更,'UNDO' | 'REDO'暂未支持(targetState?: 'INIT' | 'UNDO' | 'REDO') => Promise<void>

事件

名称描述类型
onCreated自身的准备工作完成(如模型加载,各种初始化,init结束){eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onMounted没有下级组件created之后的生命周期,有下级时需要等所有下级组件onMounted完成后触发{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onBeforeDestroy组件销毁前{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onDestroyed自身组件被销毁时触发{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onActivated自身组件重新激活{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onDeactivated自身组件暂时停用{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onUIAction界面行为执行{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onRefreshSuccess刷新成功{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onFormDataChange表单数据变更事件{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onBeforeLoadDraft加载草稿前{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onLoadDraftSuccess加载草稿成功后{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onLoadDraftError加载草稿失败后{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onFormDetailEvent表单里的成员事件监听{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onBeforeLoad数据加载前{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onLoadSuccess数据加载成功{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onLoadError数据加载失败{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onBeforeSave数据保存前{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onSaveSuccess数据保存成功{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onSaveError数据保存失败{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onBeforeRemove数据删除前{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onRemoveSuccess数据删除成功{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onRemoveError数据删除失败{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onMDCtrlRemove表单多数据部件删除成功{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onMDCtrlNew表单多数据部件新建成功{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onMDCtrlChange表单多数据部件值改变{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}

控件动态参数

名称说明类型默认值
srfcachepos当设置为true时,启用缓存激活表单分页标识功能booleanfalse
srfcachekeytemplsrfcachepos配置值为true时,在初始化表单分页数据,若 localStorage 中存在此缓存标记的缓存值,则可根据该值确定激活项string-
emptyhiddenunit表单项无值时,其对应的值单位(如'天'、'%'等)是否隐藏booleanfalse
emptyshowmode表单项无值时的显示模式,默认为DEFAULT,无值时显示自定义的无值显示文本,值为PLACEHOLDER时显示空白占位符'DEFAULT' | 'PLACEHOLDER''DEFAULT'
editmode编辑模式。当值为 'hover'时,表单项显示时只显示值,不显示编辑器的外观,如输入框,下拉框等不显示边框,鼠标悬浮时才正常显示;值为 'default' 或者无值时,界面正常显示编辑器外观'default' | 'hover''default'
triggermode该配置项用于指定编辑器触发 emit 事件的模式。若值为 'input',则在输入框值变更时触发 change 事件;若值为 'blur',则在输入框失去焦点时触发 change 事件'blur' | 'input''blur'
ignoreupdateitem该配置项用于指定是否忽略表单项更新响应数据关联处理(是否忽略dto返回数据)booleantrue
validatemodedefault:默认模式,错误信息显示在表单项下方;notification:通知模式,错误信息显示在页面右上角弹框中'default' | 'notification''default'

部件成员

类型名称接口
BUTTON表单按钮IApiFormButtonController
BUTTONLIST表单按钮组IApiFormButtonListController
DRUIPART表单关系界面IApiFormDruipartController
GROUPPANEL表单分组IApiFormGroupPanelController
FORMITEM表单项IApiFormItemController
MDCTRL_LIST表单多数据部件(列表)IApiFormMDCtrlMDController
MDCTRL_GRID表单多数据部件(表格)IApiFormMDCtrlMDController
MDCTRL_DATAVIEW表单多数据部件(卡片)IApiFormMDCtrlMDController
MDCTRL_FORM表单多数据部件(表单)IApiFormMDCtrlFormController
MDCTRL_REPEATER表单多数据部件(重复器)IApiFormMDCtrlRepeaterController
FORMPAGE表单分页IApiFormPageController
RAWITEM表单直接内容IApiFormRawItemController
TABPAGE表单分页部件分页IApiFormTabPageController
TABPANEL表单分页部件IApiFormTabPanelController
未来已来,立即拥抱应用融合的力量
Released under the MIT License.