目录
1 表单控件简介
表单控件是针对表单模型扩展的基础插件，典型的表单控件有单对象控件，多对象控件，布局控件等，表单控件在建模工具中供用户拖放并且修改配置，这些配置在应用前端展示。
在本教程的第二部分大量表单控件的例子，有兴趣的读者通过 第三章 表单建模入门，详细了解表单控件的使用方法。本章主要介绍如何扩展现有的表单控件，通过本章的练习，读者可以开发一个最简单的控件，姑且称为入门控件，如下所示：
图-入门控件在建模工具中的表现形式
图-入门控件在应用端表单的表现形式
1.1 控件代码的位置和装配方式
和操作插件一样，表单控件对应的程序入口也是一个vue文件，DWF的表单引擎会在启动的时候动态加载这个.vue文件。
...
| 代码块 | ||
|---|---|---|
| ||
PS D:\DWF3.0> cd .\scripts\ PS D:\DWF3.0\scripts> python .\assemble.py devClear 当前处于本地开发环境，仅支持代码打包和本地前端装配、卸载 ，请确认assemble-to.yaml填写正确 devClear start devClear end PS D:\DWF3.0\scripts> python .\assemble.py devAssemble 当前处于本地开发环境，仅支持代码打包和本地前端装配、卸载 ，请确认assemble-to.yaml填写正确 devAssemble start assemble_config.js和package.json更新成功 devAssemble end |
1.2 表单的控件的JSON规范
了解了代码位置和装配方法以后，接下来介绍一下表单的JSON格式，打开表单建模工具任意新建一张空白表单，点击JSON图标，可以看到表单对应的原始格式，结构如下：
图-打开表单的JSON格式
下面是对应的表单JSON格式：
...
在建模工具中编辑上述结构，保存以后，在表单引擎中解释这些结构，从而形成表单，接下来看如何编写表单控件的模型定制和应用前端程序。
2 表单控件的开发
接下来，通过逐步拆解一个入门控件的组成部分，展示一个文本框编辑表单控件的开发。
2.1 控件的建模端实现
控件的<template>标签
首先，看一下表单控件在建模工具中的几种关键表现形态
图-表单控件在建模时显示的内容
...
在<i>标签的图标使用的是字符配置形式，对照表可以参阅：图标对照页面。
控件的<script>标签
前面的建模标签描述了一个控件的基本组成部分，其中使用了t_preview与t_edit变量的绑定，用于设置样式，标签和标签内的属性。这些变量统一在vue文件的<script>部分，这部分内容包含一些控件和表单建模工具的交互过程。
...
| 代码块 |
|---|
export default {
// Vue数据绑定的时候要求返回的结果
data() {
return {
// 插件的名字
name: "helloControl",
// 表示是否已经进入画布区
t_preview: false,
// 是否显示控件的属性编辑区
t_edit: false,
// 属性配置项,按需设置
args: {},
};
},
methods: {
/*
在建模的时候传入，提示控件是在画布区还是在控件列表中
0：表示在画布区，已经被拖入
1：表示在控件区，准备被拖入
2: 表示在拖动中，还未放下
*/
setDisplayType(type) {
if (type == 0) this.t_preview = true;
return this;
},
// 默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发
getEditBox() {
this.t_edit = true;
return this.$refs.edit;
},
// 当插件无法直接通过style设置高度时，使用setHeight方法设置高度
setHeight() {
if (!this.$refs.main) return;
},
// 现有表单加载在画布区加载控件的时候，会将之前的配置传入
setArgs(args) {
for (var i in args) {
this.args[i] = args[i];
}
return this;
},
// 表单保存的时候将控件的设置合并到表单自身的JSON中
getArgs() {
return this.args;
},
// 是否允许其他子控件拖入，如果不允许则返回null
getAllow() {
return null;
},
// 返回控件绑定的目标属性，如果没有绑定返回undefined或者null
getFormName() {
return null;
},
},
}; |
控件的<style>标签
如果需要一些特殊的样式可以如下设置，本章的入门控件由于无需设置所以直接置空即可：
| 代码块 |
|---|
<style> </style> |
最终合并结果
上述代码合并到helloControl.vue文件中的的结果如下：
...
| 代码块 | ||
|---|---|---|
| ||
config:
ignore:
info:
part-web:
name: modeler
cname: 建模端
forms: { helloControl.vue: from/single }
dependencies: {} |
2.2 控件的应用端
应用端<template>标签
控件应用端负责根据建模端保存的配置信息，展示成预定的样子，因此不需要在<template>标签里再维护有关图标，配置的标签，只需要将表单引擎传递的配置信息反映在标签里即可。
...
| 代码块 |
|---|
<template>
<!--
建模时的预览前端,即插件的实际显示样式
:addinName="name"和ref="main"一般情况不可去除
-->
<section :addinName="name" ref="main">
<!-- 在画布区的显示内容 -->
<span
style="
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;"
>Hello World!</span>
</section>
</template> |
应用端的<script>标签
应用端插件开发必须实现3个函数：setDisplayType，setArgs，getArgs，作用如下：
...
| 代码块 |
|---|
export default {
// Vue数据绑定的时候要求返回的结果
data() {
return {
// 插件的名字
name: "helloControl",
// 属性配置项,按需设置
args: {},
};
},
methods: {
/*
type取值范围为 create, visit, edit
需要根据三个状态修改具体前端和逻辑
一般情况下:
create创建态: 无数据,可编辑
visit浏览态: 有数据,不可编辑
edit编辑态: 有数据,可编辑
*/
setDisplayType(type) {
return this;
},
//表单引擎加载到控件的时候调用此函数设置参数取值
setArgs(args) {
for (var i in args) {
this.args[i] = args[i];
}
return this;
},
// //表单引擎提取参数取值的方法
getArgs() {
return this.args;
},
},
}; |
应用端的<style>标签
由于本章并不需要特殊的样式标签，所以给出为空即可。
最终合并效果
上述3部分代码合并起来如下所示：
| 代码块 |
|---|
<template>
<!--
建模时的预览前端,即插件的实际显示样式
:addinName="name"和ref="main"一般情况不可去除
-->
<section :addinName="name" ref="main">
<!-- 在画布区的显示内容 -->
<span
style="
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;"
>Hello World!</span>
</section>
</template>
<script>
export default {
// Vue数据绑定的时候要求返回的结果
data() {
return {
// 插件的名字
name: "helloControl",
// 属性配置项,按需设置
args: {},
};
},
methods: {
/*
type取值范围为 create, visit, edit
需要根据三个状态修改具体前端和逻辑
一般情况下:
create创建态: 无数据,可编辑
visit浏览态: 有数据,不可编辑
edit编辑态: 有数据,可编辑
*/
setDisplayType(type) {
return this;
},
//表单引擎加载到控件的时候调用此函数设置参数取值
setArgs(args) {
for (var i in args) {
this.args[i] = args[i];
}
return this;
},
// //表单引擎提取参数取值的方法
getArgs() {
return this.args;
},
},
};
</script>
<style>
</style> |
在集成开发工具在默认状态下会将应用端和建模工具对应的端口变化为不同的端口号，所以直接分享的时候会出现404错误，如果发现此类问题，注意根据调试工具给出的端口号进行修改。
装配到应用端之后，通过表单分享得到的效果如下：
图-应用端表单分享的效果
3 表单控件调试和打包
...
将part01.zip发往现场环境或者测试环境，在DWF的代码装配功能中即可获得入门插件。
3 小结
表单插件是DWF中最复杂的插件之一，包括模型定制和表单引擎两部分，本章主要介绍了表单插件的组成，生命周期，打包和调试方法，并给出了一个最简单的表单插件的开发方法。
...
- forms: { 【vue文件】:【分类】, ...【vue文件】:【分类】}
- dependencies: {【NPM包名】/【版本】，...}
4 附件
建模端入门插件：
| View file | ||||||||
|---|---|---|---|---|---|---|---|---|
|
应用端入门插件：
| View file | ||||||||
|---|---|---|---|---|---|---|---|---|
|