DWF前端的进阶扩展均以插件方式实现,DWF建模工具(modeler-web)会识别这些插件的接口,并在应用前端(app-web)调用。
(一)什么是操作插件
操作插件主要针对功能模型扩展的基础插件,从逻辑上看主要有两种:
1)模块操作: 用于使自己编写的前端vue页面,在应用端的菜单项中被配置调用,显示为功能模块区域的一系列菜单项。如下所示:
模块操作的操作插件,可在4.3 功能模型中,通过选择动作(implement)-通过插件调用的形式调用,用于在App端左侧的导航栏新增模块。如下图:
2) 功能按钮: 用于定义功能"按钮"的前端显示和交互逻辑,主要在表单中使用。例如:
在开发难易程度方面,第1种的开发比较简单,第2种可以实现更丰富的功能,但开发难度较高。
(二)模块操作插件简介
模块操作插件只需要在dwf-part-all\part01\part-web\common\operations中增加vue文件即可实现。
举例:在dwf-part-all\part01\part-web\common\operations中增加一个名为helloWorldOpr.vue的vue文件,并写入如下的代码:
<template> <Alert show-icon> hello world!!!</Alert> </template> <script> export default { name: "helloWorldOpr" }; </script> <style scoped> </style>
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可以看到菜单入口,点击即可看到新出现的页面:
图-功能模块上操作的扩展
(三)功能按钮操作
接下来,通过在表单中配置操作,也可以将自行开发的业务逻辑加入到现有的表单中,可以在dwf-part-all\part01\part-web\common\operations文件夹中增加一个buttonOpr.vue文件,然后装配,代码举例如下所示:
<template> <div> </div> </template> <script> export default { name: "buttonOpr", 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的基本扩展,每个插件有对应vue文件描述具体的实现,并在config.js文件注册,以供DWF识别。
用插件实现扩展意味着:
第一,DWF插件扩展遵循标准集中管理的,这样有助于防止低质量的代码侵入系统导致问题无法控制。
第二,DWF能实现前端几乎所有能想象的效果。
第三,插件可以调用DWF接口,减轻开发负担,加快开发速度。
最后,在插件基础上,DWF各模块还提供面向更高层次语义的接口规范,可以实现更深层次的扩展。