2021-双十二版-培训手册
页面树结构
转至元数据结尾
转至元数据起始

 DWF前端的进阶扩展均以插件方式实现，DWF建模工具（modeler-web）会识别这些插件的接口，并在应用前端（app-web）调用。

1  什么是操作插件

操作插件主要针对功能模型扩展的基础插件，从逻辑上看主要有两种:

1）模块操作: 用于使自己编写的前端vue页面，在应用端的菜单项中被配置调用，显示为功能功能模块区域的一系列菜单项。如下所示：

模块操作的操作插件，可在功能模型的应用管理中，通过选择动作(implement)-通过插件调用的形式调用，用于在App端左侧的导航栏新增模块。如下图:

2） 功能按钮: 用于定义功能"按钮"的前端显示和交互逻辑，主要在表单中使用。例如：

在开发难易程度方面，第1种的开发比较简单，第2种可以实现更丰富的功能，但开发难度较高。

2 模块操作插件简介

模块操作插件只需要在dwf-part-all\part01\part-web\common\operations中增加vue文件即可实现。

举例：在dwf-part-all\part01\part-web\common\operations中找到名为commonOpr.vue的vue文件，并写入如下的代码：

<template>
	<Alert show-icon> hello world!!!</Alert>
</template>
 
<script>
export default {
	name: "helloWorldOpr"
};
</script>
 
<style scoped>
</style>

在代码装配的时候，DWF需要知道commonOpr.vue应该装配到哪里，所以每当新增一个vue文件需要对应在part-web/modeler, part-web/mobile, part-web/common和part-web/app增加assemble-to.yaml文件。

在SDK的示例工程里已经配置了commonOpr.vue对应的装配文件，因此无需修改，直接执行装配命令即可：

cd script/
python assemble.py devClear 
python assemble.py devAssemble

然后进入SDK的script文件夹运行代码装配脚本。

此时，DWF装配脚本会扫描dwf-part-all\part01\part-web\下所有operations文件夹下的.vue文件，并将其装配到app-web和modeler-web之中，然后自动修改config.js配置文件，以便在配置操作时看到插件的列表。

图-建模工具中选择扩展操作

将这个扩展操作配置到某个模块中去后，通过app-web可以看到菜单入口，点击即可看到新出现的页面：

图-功能模块上操作的扩展

3  功能按钮操作

接下来，通过在表单中配置操作，也可以将自行开发的业务逻辑加入到现有的表单中，可以在dwf-part-all\part01\part-web\common\operations文件夹中增加一个buttonOpr.vue文件，然后装配，代码举例如下所示：

<template>
	<div>	
	</div>
</template>

<script>
export default {
    methods: {
        //当模块上的操作被用户点击的会后会调用
        async onHandle(params) {
			alert("hello world!");
        }
    }
}
</script>

<style>
</style>

这里，onHandle()方法将在操作被点击时调用，this.Message是上层传递下来的一个用于弹窗的引用。

通过params传递参数进来，告诉插件操作被点击的上下文，插件判断采取的动作，定义如下：

let params = {
    obj: this.getObj(this.itemValue.data), //表单中当前对象引用
    className: this.itemValue.data.targetClass //表单中操作对象的名称
}

新增的按钮操作，需要通过配置装配文件才能自动合并，找到：dwf-part-all\part01\part-web\common\assemble-to.yaml，在operations节下增加：buttonOpr.vue: buttonOpr，配置，如下所示：

config:
  ignore:
  info:
    part-web:
      name: common
      cname: common
      forms:
        commonForm.vue: form/multi
      # 下面是关于操作的配置，在operations文件夹下增加一个新的操作vue文件的时候，需要在下面增加配置以便正确装配
      operations: 
        commonOpr.vue: commonOpr
		# buttonOpr.vue在建模端的配置名称为：buttonOpr
        buttonOpr.vue: buttonOpr
      dependencies: {}

将其拖入配置到某个表单的按钮插件的单击事件中，即可实现弹框，例如下面的界面中的绿色按钮插件。

图-按钮弹框操作执行效果

4.小结

插件机制是DWF的基本扩展，每个插件有对应vue文件描述具体的实现，并在config.js文件注册，以供DWF识别。

用插件实现扩展意味着：

第一，DWF插件扩展遵循标准集中管理的，这样有助于防止低质量的代码侵入系统导致问题无法控制。

第二，DWF能实现前端几乎所有能想象的效果。

第三，插件可以调用DWF接口，减轻开发负担，加快开发速度。

最后，在插件基础上，DWF各模块还提供面向更高层次语义的接口规范，可以实现更深层次的扩展。

  • 无标签