...

引言

上一章介绍了最简单的操作插件编写方法以后，往往开发者不会只是简单开发一个完全封闭的插件，一般来说，完成一项任务至少需要：

...

因此，需要在插件的代码里调用DWF内部的接口，所以这一章，将接下来深入了解DWF提供给插件开发者的一些基础调用。

...

获得接口的总入口：dwf_ctx

DWF的前端插件配套接口最大限度的集成了本教程 第三部分：脚本开发培训DWF的前端插件配套接口最大限度的集成了本教程第五章 DWF脚本开发中介绍的接口，也就是说，对于已经掌握脚本开发的程序员，可以不费力气的继续使用他们已经掌握的知识，进行高阶编码工作。

...

有关脚本函数和代码之间的一一对应关系，可以参阅 脚本调用和插件调用的对应关系详细了解，这里不做过多介绍。

...

操作插件开发的典型案例

下面，结合两个比较有代表性的示例介绍如何在脚本中使用函数调用。

...

（一）模块操作开发

针对设备管理系统，将工单列表从DWF数据库里取出来，显示到一个iView的时间线上，点击详情打开工单，如下图所示：

图-用时间线显示工单列表

...

（1）通过restful api获取数据

这个例子中涉及到如何调用DWF数据库中的数据问题，在表单操作中这一目标可以通过调用DWF配套的restful api实现。取得工单对象列表的restful api调用方法如下面的代码所示：

...

Restful API接口的说明文档可以通过在建模工具中点击登录用户，展开API说明查看，如下图所示：

图-打开接口文档

...

（2）将工单查询结果展示到前端

数据加载的方法了解以后，剩下如何展示到前端的工作就取决于开发者对vue的和iView的熟悉程度了，本章一开始的例子里使用了报警（Alert）标签展示数据，在这个例子里我们将采用时间线（Timeline）控件实现希望展示的效果：

...

1. 标签内定义了一个worklist数组用于进行动态显示，利用iView标签遍历将数组中的每一个对象展示出来。
2. 在脚本的中的create()方法里，通过调用dwf_aixos获得了工单对象，并且按照要求完成时间（woDeadline）排序。
3. getdate()函数是为了将DWF中默认返回的时间戳数据类型转换为年月日以方便阅读。
4. 当详情标签被点击的时候会自动调用openWorkOrder函数，并且将被点击的工单对象作为参数传入表单，并将其显示在界面上。
5. 在样式<sytle>里增加了边沿设置，整体推进20个像素，以便显示边沿。

...

（3）显示工单引用的设备和人员信息

在上面的例子中，仅仅显示了工单的内容，但是对于工单针对的设备、工单的负责人工程师的姓名，是没有显示的，接下来看看如何利用DWF提供的Restful API完成引用数据的加载。

...

注：上述工单的最后一条里面是故意创建的一个未知设备和未知用户的工单，用于检查异常处理是否生效。

...

（4）弹出表单显示工单详情

最后，如果希望在这个时间线里点击详情用特定的表单打开工单，可以使用openTab方法调用实现，结合上面的例子，只需要修改openWorkOrder方法增加打开页签的调用即可，具体的调用方法如下：

...

在下面章节里，我们还将介绍其他更加简便的方法操作DWF中的概念。

...

（二）表单按钮操作开发

在上面的例子里，通过使用模块操作插件实现与DWF互动的方法，包括：

...

在这个例子里，我们将接管表单绘制过程，绘制一个特殊样式的文字按钮“编码生成工具”，在按钮点击的时候使用iView的弹框示例，来展示对话框本文不对弹框示例进行过多解释，当用户点击确定以后，可以将输入编码返回到设备表单的备注中。

...

（1）接管绘制逻辑

首先，继续在上一章buttonOpr.vue中继续修改，在单设备编辑表单中，放入一个按钮插件，并且将按钮事件对应的操作设置为动作为implement类型的操作，插件的名字设置为buttonOpr.vue。

...

<script>
export default {
	...
	methods: {
		// 通知DWF表单引擎接管绘制过程
		canShow() {
			return true;
		},
		// 一旦接管，DWF表单引擎传入当前表单的上下文
		setArgs(args) {
			return this;
		},
		...
	},
};
</script>

...

（2）绘制标签设置

接下来，编写template标记，将按钮和弹框的基本样式设置出来，标签的样式如下：

...

export default {
	name: "buttonOpr",
	data() {
		return {
			showDlg: false,
			asset: { id: "unknown", assetType: "unknown" },
		};
	},
...

...

（3）通过函数实现交互

围绕openDialog，ok，cancel的实现如下所示：

...

<template>
	<div>
		<Button type="text" @click="openDialog">编码工具</Button>
		<Modal v-model="showDlg" :title="`${asset.assetType}`" @on-ok="ok" @on-cancel="cancel">
			<Input v-model="asset.id" :placeholder="asset.id" />
		</Modal>
	</div>
</template>
 
<script>
export default {
	name: "buttonOpr",
	data() {
		return {
			showDlg: false,
			asset: { id: "unknown" },
		};
	},
	methods: {
		// 通知DWF表单引擎接管绘制过程
		canShow() {
			return true;
		},
		// 一旦接管，DWF表单引擎传入当前表单的上下文
		setArgs(args) {
			return this;
		},
		openDialog() {
			// 初始化弹框内容
			var a = this.dwf_ctx.obj();
			if (typeof a !== "undefined") {
				this.asset = a;
			}
			// 显示对话框
			this.showDlg = true;
		},
		ok() {
			// 获得备注控件设置内容
			var addin = this.dwf_ctx.getAddinById("TextInput1");
			addin.setValue(this.asset.id);
		},
		cancel() {},
	},
};
</script>

<style>
</style>

...

小结

本章深入介绍了操作插件和按钮插件的开发，要点如下：

...

关于VUE如何实现双向数据绑定，以及iView控件库基础知识，本文不做介绍，有兴趣的读者可以参阅：按钮示例，文本框示例，弹窗示例。