lm-design-form

DesignForm 表单设计器使用文档

背景介绍

释义: 本表单引擎仅为demo,用于个人研究和技术预演论证可行性探讨。

DesignForm 背景介绍

快速使用

<DesignForm formkey="表单测试4" >
</DesignForm>

属性	注释	默认值	示例值	必填
formkey	表单key,表单key不能重复	''	表单1	是
formtype	表单类型:0=主表单,1=扩展表单,2=子表单,表单名称	1	0	否
formname	表单名称	''		否
layout	默认布局	'horizontal'		否
initvalue	默认初始值	null	[{key: '文本控件1',title:'',value:'1',type:'text'}]	否
defaulttoolbar	默认工具栏控件,默认加载全部控件	null	[[{'title': '基础控件', control: ['Text', 'Blank', 'Label']}]	否
defaultpackages	默认编辑器引用的包,请输入需要引用的类应用即可	null	{useContext,useRef,Input,Button}	否
其他属性	额外属性等同antd.Form表单属性			否

表单控件硬编码方式

硬编码方式使用表单控件示例:

//注意: 硬编码控件必须在DesignForm内部
<DesignForm formkey="表单测试4" >
   <DesignControl
     designkey="文本2"
     designdata={{ type: 'Text', title: '', value:info }}
     extprops={{
        onChange: (event) => {
            setInfo(event.target.value);
        },
     }}/>
</DesignForm>

属性	注释	默认值	示例值	必填
designkey	表单设计控件key,当前表单内唯一,用于渲染和识别	null		是
designdata	表单设计控件data属性,用于定义控件属性渲染	null	designdata={{ type: 'Text', title: '', value:info }}	是
extprops	表单设计控件extProps属性,用于定义控件事件渲染,如onChange/onClick等，请关注antd相应类型控件类型	null	extprops={{ onChange:(e)=>{} }}	否
其他属性	额外属性等同antd.Form.Item表单属性	null		否

DesignControl designdata 说明文档

表单方法

方法	注释	示例
getDesignModelJson	获取前端表单设计json,一般不会用到
isEditState	获取表单设计状态	true/false
setIsEditState	设置表单设计状态	xx.current.setIsEditState(true)
refreash	刷新表单	xx.current.refreash(）
controls	获取表单控件集合，可访问任意控件信息，谨慎操作控件信息	xx.current.controls
useformData	获取表单基本信息	xx.current.useformData
getJsonValue	获取表单内容数据	xx.current.getJsonValue()
setJsonValue	设置表单内容数据	xx.current.setJsonValue(datajson)

const form = useRef(null);
<DesignForm ref={form} formkey="表单测试4" >
</DesignForm>
<Button
    onClick={() => {
        form.current.setJsonValue([{ key: '1648890263927', value: '测试数据加载' }]);
        form.current.getJsonValue();
    }}
>

扩展表单模式

释义: 扩展表单模式，用于兼容旧表单，可以支持用户将已经开发的现有业务表单，快速改造成designForm，为表单赋予动态扩展能力。

扩展表单模式 说明文档

高级控件

高级控件依然可以采用DesignControl硬编码方式使用,默认在表单编辑状态下可编排；也可以在表单编排状态下,动态添加并编排。
未来支持: 表格控件（支持查询）,流程编排控件等等

高级控件 使用文档

容器控件

容器控件依然可以采用DesignControl硬编码方式使用,默认在表单编辑状态下可编排；容器可以将任意位置可编排的控件，放置在容器内部；同样容器内部的所有控件，放置到任意位置的外部布局中。
未来支持: 绝对定位容器等等

容器使用 使用文档

报表控件

报表控件属于高级控件,本质借助echart实现，默认支持echart所有option配置方式，通过低代码方式实时配置和复用报表。
报表控件 使用文档

数据源

释义:数据源可帮助开发人员可以动态添加,开发,管理多种数据源类型，便于表单或控件动态展示数据内容;也可以"引用"系统标准化的数据源解决方案模板，实现快速复用。
数据源 使用文档

智能助理

释义: 智能助理可帮助开发人员可以动态添加控件和表单的动作（按钮）事件,通过事件定义动态编排表单的流程；也可以“引用”系统标准化的事件解决方案模板，实现快速复用。
智能助理 使用文档

低代码

释义: 低代码本质上在于满足快速开发，快速交付的需求；同时在部分编码基础上，提供抽象化的可视化组件。 低代码包含“前端低代码”和“后端低代码”两块内容。
未来: 大部分低代码能力在“编辑器”控件里面呈现，包含模型设计（数据库设计）器,前端设计器，后端设计器等。 低代码文档