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配置方式，通过低代码方式实时配置和复用报表。
报表控件 使用文档

数据源

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

智能助理

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

低代码

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