大家好，欢迎来到IT知识分享网。
介绍
FormMaking是一款基于Vue的表单设计器，拖拽式的表单设计器可以很方便的进行表单设计与表单制作，通常用在OA系统，考试系统，报表系统中，支持表单设计器二次开发，可以自行添加新的自定义组件，让表单开发简单而高效，赋能企业实现低代码开发模式！
FormMaking
FormMaking表单设计器分两个部分，一个是设计器，一个是生成器，设计器可以用来设计器表单页面，使用拖拽的方式，可以很方便的创建一个表单，同时设计器还针对每个不同的组件配置有不同的参数可以设置，设计器设计的页面可以用一个完整的JSON格式数据表示。生成器则可以通过完整的JSON格式数据还原表单页面，并渲染出表单数据。
设计器
相信不少前端开发者在初次了解到这个设计器的时候会认为这只是一个表单页面的设计器，经验丰富的开发者根本用不上这样的工具，要做一个页面只需要将之前设计过的页面复制过来，简单修改下就能完成，如果您也有这样的看法，欢迎认真看完。
FormMaking表单设计器的强大之处在于可以动态设计整个表单页面，已有组件直接通过拖拽的方式布局表单页面，右侧会根据不同组件类型提供特定的可配置项。比如下拉框可以配置下拉选项的数据，可以用静态数据也可以从自己服务器获取选项数据，也可以配置全局或是部分的样式设置，还可以配置数据的校验选项以及组件的change事件。
下图是一个比较常见的表单页面示例
下图是表单设计完成后得到的整个表单的JSON 数据。
在设计器组件中我们提供了丰富的API，可以让开发者很方便的对数据操作处理。
API
参数
|
参数 |
说明 |
类型 |
默认值 |
版本 |
|
preview |
预览操作 |
boolean |
false |
|
|
generate-json |
生成json操作 |
boolean |
false |
|
|
generate-code |
生成代码操作 |
boolean |
false |
|
|
clearable |
清空操作 |
boolean |
false |
|
|
upload |
导入json操作 |
boolean |
false |
|
|
basic-fields |
左侧基础字段配置 |
array |
– |
|
|
advance-fields |
左侧高级字段配置 |
array |
– |
|
|
layout-fields |
左侧布局字段配置 |
array |
– |
|
|
custom-fields |
自定字段配置 |
array |
– |
|
|
global-config |
表单初始化全局配置，配置项参考 Global Config Options |
方法
通过 this.$refs 可以获取到 MakingForm 实例并调用实例方法
|
方法名 |
说明 |
参数 |
版本 |
|
getJSON |
获取设计器配置的json数据 |
– |
|
|
getHtml |
获取设计器生成的可以直接使用的代码 |
– |
|
|
setJSON |
设置设计器配置的json数据 |
（value) 设计器获取的json数据 |
|
|
clear |
清空设计器操作 |
– |
|
|
handleUndo |
撤销 |
– |
|
|
handleRedo |
重做 |
– |
Events
|
事件名 |
说明 |
回调参数 |
版本 |
|
ready |
设计器初始化完成 |
– |
1.2.18 |
Global Config Options
|
参数 |
说明 |
类型 |
默认值 |
版本 |
|
ui |
表单使用的组件库, Element: element Ant Design: antd |
string |
element |
1.3.0 |
|
width |
表单宽度 |
string |
100% |
1.3.0 |
|
customClass |
自定义样式表类名 |
string |
– |
1.3.0 |
|
styleSheets |
初始化表单样式表 |
string |
– |
1.3.0 |
|
dataSource |
初始化表单数据源 |
array |
– |
1.3.0 |
生成器
生成器和设计器是两个独立的组件，生成器主要负责将设计器生成的JSON数据还原成整个表单页面，并且收集用户填写的表单数据。也可以利用页面的JSON 和表单数据的JSON 渲染出已填写的表单页面和数据。
API
props
|
参数 |
说明 |
类型 |
默认值 |
版本 |
|
data |
表单json配置数据 |
object |
{} |
|
|
value |
表单数据 |
object |
– |
|
|
remote |
表单配置的远端方法 |
object |
{} |
|
|
edit |
表单可编辑状态 |
boolean |
true |
|
|
remote-option |
表单动态选项配置 |
object |
{} |
Events
|
事件名 |
说明 |
回调参数 |
版本 |
|
on-change |
表单任一条数据变化时触发 |
(field, value, data) field: 数据改变的字段标识 value: 数据改变后的值 data: 表单数据 |
|
|
on-${ID}-change |
表单ID标识的数据变化时触发 |
(value) value: 该标识数据变化后的值 |
方法
通过 this.$refs 可以获取到 GenerateForm 实例并调用实例方法
|
方法名 |
说明 |
参数 |
版本 |
|
getData |
获取表单数据 |
(isValidate = true) isValidate: 是否启用表单验证 |
1.2.18 |
|
reset |
重置表单数据 |
– |
|
|
setData |
设置表单数据 |
(value) 表单数据，例：{ID: value} |
|
|
hide |
隐藏表单字段 |
(fields) fields: 字段标识数组，例：[‘ID’] |
|
|
display |
显示表单隐藏的字段 |
(fields) fields: 字段标识数组，例：[‘ID’] |
|
|
disabled |
动态设置表单字段是否禁用 |
(fields, disabled) fields: 字段标识数组，例：[‘ID’] disabled: 是否禁用，boolean类型(true/false) |
|
|
refresh |
刷新表单，当表单json改变时，需要调用该方法重新渲染 |
– |
1.2.18 |
|
getComponent |
通过组件定义的 ref 获取表单中的组件 |
(refName) refName: 组件定义的 ref |
1.2.18 |
|
addClassName |
表单项添加样式类 |
(fields, className) fields: 字段标识数组，例：[‘ID’] className: 样式类名 |
1.2.21 |
|
removeClassName |
移除表单项样式类 |
(fields, className) fields: 字段标识数组，例：[‘ID’] className: 样式类名 |
1.2.21 |
更新功能
数据源
这次更新主要为表单设计器加上了数据源，让表单和后端数据间实现了方便的交互，通过配置数据源可以方便的拿到后端的数据，数据源配置也是采用通用的接口配置模式。
可以通过下方动图来感受下数据源如何配置
下面将介绍数据源功能的具体使用方法
配置数据源
打开数据源设置面板
在 表单属性 中打开 数据源设置 可以进行数据源的配置。
添加数据源
点击 添加数据源 ，面板右侧会出现数据源设置项。
名称：数据源名称，必须唯一，用于展示和选择数据源。
是否表单初始化发送请求：默认为 true，表单 create() 生命周期进行请求。
请求地址：远端接口地址。
数据处理：数据源默认返回接口响应的数据，如果需要对数据源进行整理细化，可使用编辑器自定义操作。
请求测试
完成数据源配置后，可以点击 请求测试 ，进行数据源接口验证，查看是否填写成功，返回数据是否正确。
保存
完成数据源配置后，需要进行保存操作；保存后即可在设计器配置时进行该数据源的选择。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/51716.html
