1.0.0 • Published 2 years ago
lm-design-form v1.0.0
DesignForm 表单设计器使用文档
背景介绍
释义: 本表单引擎仅为demo,用于个人研究和技术预演论证可行性探讨。
快速使用
<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 | 否 |
表单方法
| 方法 | 注释 | 示例 |
|---|---|---|
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配置方式，通过低代码方式实时配置和复用报表。
报表控件 使用文档
数据源
释义:数据源可帮助开发人员可以动态添加,开发,管理多种数据源类型，便于表单或控件动态展示数据内容;也可以"引用"系统标准化的数据源解决方案模板，实现快速复用。
数据源 使用文档
智能助理
释义: 智能助理可帮助开发人员可以动态添加控件和表单的动作（按钮）事件,通过事件定义动态编排表单的流程；也可以“引用”系统标准化的事件解决方案模板，实现快速复用。
智能助理 使用文档
低代码
释义: 低代码本质上在于满足快速开发，快速交付的需求；同时在部分编码基础上，提供抽象化的可视化组件。 低代码包含“前端低代码”和“后端低代码”两块内容。
未来: 大部分低代码能力在“编辑器”控件里面呈现，包含模型设计（数据库设计）器,前端设计器，后端设计器等。
低代码文档
1.0.0
2 years ago