编辑表单
编辑表单由输入框、单选框、下拉选择、进度条、标签等数据编辑控件及数据预览控件构成,主要功能包括高效收集用户输入数据、实时验证数据合法性、结构化提交至后端,同时支持数据回显与动态交互,保障用户体验与数据准确性。
基础
信息表单
编辑模式
多数据部件
布局
分组关闭模式
分组折叠
逻辑
表单项更新
界面样式及图标
值显示
锚点
自动保存
取消变更
表单事件
表单项事件
表单能力
校验模式
输入参数
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelData | 表单模型数据 | Object as IDEEditForm | - |
| context | 应用上下文对象 | Object as IContext | - |
| params | 视图参数对象 | Object as IParams | {} |
| provider | 部件适配器 | Object as IControlProvider | - |
| isSimple | 是否是简单模式,即直接传入数据,不加载数据 | Boolean | - |
| data | 简单模式下传入的数据 | Object as IData | - |
| loadDefault | 是否默认加载数据 | Boolean | true |
| simpleDataIndex | 简单模式下传入的数据索引 | Number | - |
| mdCtrlFormIndex | 多数据部件表单模式下传入的表单索引 | Number | - |
状态
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isCreated | 控制器是否走完created生命周期 | boolean | false |
| isMounted | 控制器是否走完mounted生命周期 | boolean | false |
| isDestroyed | 控制器是否走完destroy生命周期 | boolean | false |
| context | 应用上下文对象 | IApiContext | {} |
| zIndex | popover层级 | number | - |
| activated | 当前部件是否为激活状态(缓存下的激活状态,一般与框架的生命周期相同) | boolean | false |
| isSimple | 是否是简单模式,简单模式下不加载数据,而是由父组件传值 | boolean | false |
| isLoading | 部件是否正在加载 | boolean | false |
| loadDefault | 是否默认加载数据 | boolean | true |
| disabled | 部件禁用状态 | boolean | false |
| maskOption | 部件遮罩参数 | IApiMaskOption | - |
| isCounterDisabled | 是否禁用计数器 | boolean | - |
| isLoaded | 是否加载完数据 | boolean | false |
| data | 表单数据 | IApiData | {} |
| processing | 是否正在处理中(动态控制,值规则,表单项更新等逻辑中) | boolean | false |
| modified | 是否被修改过 | boolean | false |
| activeTab | 当前激活分页 | string | - |
| formIsDestroyed | 表单是否销毁(UI) | boolean | false |
| simpleDataIndex | 简单模式数据索引 | number | 0 |
| 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时,启用缓存激活表单分页标识功能 | boolean | false |
| srfcachekeytempl | 当srfcachepos配置值为true时,在初始化表单分页数据,若 localStorage 中存在此缓存标记的缓存值,则可根据该值确定激活项 | string | - |
| emptyhiddenunit | 表单项无值时,其对应的值单位(如'天'、'%'等)是否隐藏 | boolean | false |
| emptyshowmode | 表单项无值时的显示模式,默认为DEFAULT,无值时显示自定义的无值显示文本,值为PLACEHOLDER时显示空白占位符 | 'DEFAULT' | 'PLACEHOLDER' | 'DEFAULT' |
| editmode | 编辑模式。当值为 'hover'时,表单项显示时只显示值,不显示编辑器的外观,如输入框,下拉框等不显示边框,鼠标悬浮时才正常显示;值为 'default' 或者无值时,界面正常显示编辑器外观 | 'default' | 'hover' | 'default' |
| triggermode | 该配置项用于指定编辑器触发 emit 事件的模式。若值为 'input',则在输入框值变更时触发 change 事件;若值为 'blur',则在输入框失去焦点时触发 change 事件 | 'blur' | 'input' | 'blur' |
| ignoreupdateitem | 该配置项用于指定是否忽略表单项更新响应数据关联处理(是否忽略dto返回数据) | boolean | true |
| validatemode | default:默认模式,错误信息显示在表单项下方;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 |