目录

1 表单控件简介

表单控件是针对表单模型扩展的基础插件，典型的表单控件有单对象控件，多对象控件，布局控件等，表单控件在建模工具中供用户拖放并且修改配置，这些配置在应用前端展示。

在本教程的第二部分大量表单控件的例子，有兴趣的读者通过第三章表单建模入门，详细了解表单控件的使用方法。本章主要介绍如何扩展现有的表单控件，通过本章的练习，读者可以开发一个最简单的控件，姑且称为入门控件，如下所示：

Image RemovedImage Added

图-入门控件在建模工具中的表现形式

Image RemovedImage Added

图-入门控件在应用端表单的表现形式

1.1 控件代码的位置和装配方式

和操作插件一样，表单控件对应的程序入口也是一个vue文件，DWF的表单引擎会在启动的时候动态加载这个.vue文件。

...

代码块

language	yml

config:
  ignore:
  info:
    part-web:
      name: modeler
      cname: 建模端
      forms: {
		helloControl.vue: from/single }
      dependencies: {}

form:标签的格式是：“vue文件名：控件归属类别”，其中归属类别有：

信息
布局：form/layout 单对象控件：form/single 多对象控件：form/multi 时间序列：form/timeseries 模型点选控件：form/model 可视化控件：form/visual 布局：form/layout

注：如果需要引用第三方依赖，可以写在assemble-to.yaml中指定，填写要求为【依赖名：^依赖版本】，这个写法和npm-package中的依赖声明方法是一致的，如：

代码块

language	yml

dependencies: 
{	vue-calendar-component: ^2.8.2}

调试阶段，在命令行内输入devAssemble即可实现开发阶段的自动装配，如果需要清除则输入devClear即可：

代码块

language	powershell

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图标，可以看到表单对应的原始格式，结构如下：

Image RemovedImage Added

图-打开表单的JSON格式

下面是对应的表单JSON格式：

...

在建模工具中编辑上述结构，保存以后，在表单引擎中解释这些结构，从而形成表单，接下来看如何编写表单控件的模型定制和应用前端程序。

2 表单控件的开发

接下来，通过逐步拆解一个入门控件的组成部分，展示一个文本框编辑表单控件的开发。

2.1 控件的建模端实现

控件的<template>标签

首先，看一下表单控件在建模工具中的几种关键表现形态

Image RemovedImage Added

图-表单控件在建模时显示的内容

...

代码块

language	xml

<template>
	<!--
      建模时的预览前端,即插件的实际显示样式，:addinName="name"和ref="main"一般情况不可去除不可去除
	-->
	<section v-if="t_preview" :addinName="name" ref="main">
		<!-- 在画布区的显示内容 -->
		<span
			style="
				font-size: 50px;
				display: flex;
				justify-content: center;
				align-items: center;"
		>Hello World!</span>
		<span v-show="t_edit" ref="edit"></span>
	</section>
	<section v-else :addinName="name">
		<span style="text-align: center;">
			<div class="form-addin-icon">
				<!-- 控件拖放区图标的样式 -->
				<i class="iconfont">&#xe6a4;</i>
			</div>
			<!-- 在控件拖放区图标的名字 -->
			<div class="form-addin-name">入门控件</div>
		</span>
	</section>
</template>

首先，在第一个section标签中：首先，在第一个section标签中，t

t_preview：是一个开关变量，表单编辑工具将用其控制是否显示成图标样式，建模端的插件分为预览态和图标态，通过t_preview来区分，:addinName="name"和ref="main"一般情况不可去除。

在本章的例子中只需要显示一个居中的hello world!，所以放入了一个span标签并且手动设置了一个样式。

其次，在第一个section标签中，出现的另一个<span>依赖于t_edit变量控制，这是为了在控件被点击以后在右侧的配置区里展示的样子，在入门插件里没有任何配置项，所以只是给出一个空标签即可，在后续表单控件的进阶开发中将介绍如何利用DWF自动提供标准配置的编辑框。

...

在<i>标签的图标使用的是字符配置形式，对照表可以参阅：图标对照页面。

控件的<script>标签

前面的建模标签描述了一个控件的基本组成部分，其中使用了t_preview与t_edit变量的绑定，用于设置样式，标签和标签内的属性。这些变量统一在vue文件的<script>部分，这部分内容包含一些控件和表单建模工具的交互过程。

...

此外，控件的id通过name属性返回，需要返回一个的函数是必须实现的，在methods内部需要实现：

...

getFormName：如果控件需要绑定DWF数据模型中的数据属性则通过此函数返回名称。
setArgs，getArgs：用于设置控件展示的参数，表单建模工具在读入表单配置对应的JSON或者在保存的时候会调用这两个函数。getAllow：是否允许控件内部拖入其他控件，这个函数的返回值决定了控件是否是一个容器。
getEditBox：当需要显示配置区的设置项的时候会调用此函数，此时是将配置区显示出来的时候。

最后，表单控件的函数和vue整个生命周期函数调用的顺序是： created -> setDisplayType -> setArgs -> mounted，如果需要提前加载某些数据可以在create()里增加，在本章的例子中无需实现create和mounted。

...

代码块

export default {
	// Vue数据绑定的时候要求返回的结果
	data() {
		return {
			// 插件的名字
			name: "helloControl",
			// 表示是否已经进入画布区
			t_preview: falsetrue,
			// 是否显示控件的属性编辑区
			t_edit: false,
			// 属性配置项,按需设置
			args: {},
		};
	},
	methods: {
		//* 		在建模的时候传入，提示控件是在画布区还是在控件列表中默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发
		0：表示在画布区，已经被拖入
		1：表示在控件区，准备被拖入getEditBox() {
		2: 表示在拖动中，还未放下
		*/
		setDisplayType(type) {
			if (type == 0) this.t_preview	this.t_edit = true;
			return this.$refs.edit;
		},
		// 默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发现有表单加载在画布区加载控件的时候，会将之前的配置传入
		getEditBoxsetArgs(args) {
			this.t_edit = true;
for (var i in args) {
				return this.$refs.editthis.args[i] = args[i];
			}
			return this;
		},
		// 当插件无法直接通过style设置高度时，使用setHeight方法设置高度表单保存的时候将控件的设置合并到表单自身的JSON中
		setHeightgetArgs() {
			ifreturn (!this.$refs.main) returnargs;
		},
		// 现有表单加载在画布区加载控件的时候，会将之前的配置传入返回控件绑定的目标属性，如果没有绑定返回undefined或者null
		setArgsgetFormName(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;
		return this.args.name;
		},
	},
};

控件的<style>标签

如果需要一些特殊的样式可以如下设置，本章的入门控件由于无需设置所以直接置空即可：

代码块
<style> </style>

最终合并结果

上述代码合并到helloControl.vue文件中的的结果如下：

代码块

<template>
	<!--
      建模时的预览前端,即插件的实际显示样式
      :addinName="name"和ref="main"一般情况不可去除
	-->
	<section v-if="t_preview" :addinName="name" ref="main">
		<!-- 在画布区的显示内容 -->
		<span
			style="
				font-size: 50px;
				display: flex;
				justify-content: center;
				align-items: center;"
		>Hello World!</span>
		<span v-show="t_edit" ref="edit"></span>
	</section>
	<section v-else :addinName="name">
		<span style="text-align: center;">
			<div class="form-addin-icon">
				<!-- 控件拖放区图标的样式 -->
				<i class="iconfont"></i>
			</div>
			<!-- 在控件拖放区图标的名字 -->
			<div class="form-addin-name">入门控件</div>
		</span>
	</section>
</template>

<script>
export default {
	// Vue数据绑定的时候要求返回的结果
	data() {
		return {
			// 插件的名字
			name: "helloControl",
			// 表示是否已经进入画布区Vue数据绑定的时候要求返回的结果
	data() {
		t_preview: false,return {
			// 是否显示控件的属性编辑区插件的名字
			t_editname: false"helloControl",
			// 属性配置项,按需设置表示是否已经进入画布区
			argst_preview: {},
		};
	},
	methods: {
		/*
		在建模的时候传入，提示控件是在画布区还是在控件列表中
		0：表示在画布区，已经被拖入
		1：表示在控件区，准备被拖入
		2: 表示在拖动中，还未放下
		*/
		setDisplayType(type) {
			if (type == 0) this.t_preview = true;
			return this;
		},true,
			// 是否显示控件的属性编辑区
			t_edit: false,
			// 属性配置项,按需设置
			args: {},
		};
	},
	methods: {
		// 默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发
		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() {[i];
			}
			return this.args;
		},
		// 是否允许其他子控件拖入，如果不允许则返回null表单保存的时候将控件的设置合并到表单自身的JSON中
		getAllowgetArgs() {
			return nullthis.args;
		},
		// 返回控件绑定的目标属性，如果没有绑定返回undefined或者null
		getFormName() {
			return nullthis.args.name;
		},
	},
};
</script>

<style>
</style>

...

代码块

language	yml

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错误，如果发现此类问题，注意根据调试工具给出的端口号进行修改。

装配到应用端之后，通过表单分享得到的效果如下：

Image RemovedImage Added

图-应用端表单分享的效果

3 表单控件调试和打包

...

将part01.zip发往现场环境或者测试环境，在DWF的代码装配功能中即可获得入门插件。

3 小结

表单插件是DWF中最复杂的插件之一，包括模型定制和表单引擎两部分，本章主要介绍了表单插件的组成，生命周期，打包和调试方法，并给出了一个最简单的表单插件的开发方法。

...

template标签中，需要提供画布预览、编辑区和图标状态的标签。
script标签中
- data()返回需要给出一些基本属性：name，args，此外为了和标签配合，需要设置一些控制变量，例如t_preview，t_edit。
- 需要提供如下的一些函数实现：setDisplayType，getFormName，setArgs，getArgs，getAllow，getEditBox。

在应用端，需要注意的实现要点如下：

...

forms: { 【vue文件】:【分类】, ...【vue文件】:【分类】}
dependencies: {【NPM包名】/【版本】，...}

4 附件

建模端入门插件：

View file

name	helloControl.vue
page	第六章，表单控件开发-入门
space	DWF
height	250

应用端入门插件：

View file

name	helloControl.vue
page	第六章，表单控件开发-入门
space	DWF
height	250

页面树结构

版本比较

旧版本 1

新版本当前版本

标识

1 表单控件简介

1.1 控件代码的位置和装配方式

1.2 表单的控件的JSON规范

2 表单控件的开发

2.1 控件的建模端实现

控件的<template>标签

控件的<script>标签

控件的<style>标签

最终合并结果

2.2 控件的应用端

应用端<template>标签

应用端的<script>标签

应用端的<style>标签

最终合并效果

3 小结

4 附件

页面树结构

页面历史

版本比较

旧版本 1

新版本 当前版本

标识

1 表单控件简介

1.1 控件代码的位置和装配方式

1.2 表单的控件的JSON规范

2 表单控件的开发

2.1 控件的建模端实现

控件的<template>标签

控件的<script>标签

控件的<style>标签

最终合并结果

2.2 控件的应用端

应用端<template>标签

应用端的<script>标签

应用端的<style>标签

最终合并效果

3 小结

4 附件

新版本当前版本