目录
...
表单控件简介
表单控件是针对表单模型扩展的基础插件,典型的表单控件有单对象控件,多对象控件,布局控件等,表单控件在建模工具中供用户拖放并且修改配置,这些配置在应用前端展示。在本教程的第二部分大量表单控件的例子,有兴趣的读者通过 第三章 表单建模入门,详细了解表单控件的使用方法。
4.2.4 表单建模详细介绍了表单控件的使用方法。本章主要介绍如何扩展现有的表单控件,通过本章的练习,读者可以开发一个最简单的控件,姑且称为入门控件,如下所示:
...
图-入门控件在建模工具中的表现形式
图-入门控件在应用端表单的表现形式
...
(一)控件代码的位置和装配方式
和操作插件一样,表单控件对应的程序入口也是一个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 |
...
(二)表单的控件的JSON规范
了解了代码位置和装配方法以后,接下来介绍一下表单的JSON格式,打开表单建模工具任意新建一张空白表单,点击JSON图标,可以看到表单对应的原始格式,结构如下:
...
在建模工具中编辑上述结构,保存以后,在表单引擎中解释这些结构,从而形成表单,接下来看如何编写表单控件的模型定制和应用前端程序。
...
表单控件的开发
接下来,通过逐步拆解一个入门控件的组成部分,展示一个文本框编辑表单控件的开发。
2.1 控件的建模端实现
...
(一)控件的建模端实现
(1)控件的<template>标签
首先,看一下表单控件在建模工具中的几种关键表现形态
...
在<i>标签的图标使用的是字符配置形式,对照表可以参阅:图标对照页面。
...
(2)控件的<script>标签
前面的建模标签描述了一个控件的基本组成部分,其中使用了t_preview与t_edit变量的绑定,用于设置样式,标签和标签内的属性。这些变量统一在vue文件的<script>部分,这部分内容包含一些控件和表单建模工具的交互过程。
...
代码块 |
---|
export default { // Vue数据绑定的时候要求返回的结果 data() { return { // 插件的名字 name: "helloControl", // 表示是否已经进入画布区 t_preview: falsetrue, // 是否显示控件的属性编辑区 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; }, }, }; |
...
(3)控件的<style>标签
如果需要一些特殊的样式可以如下设置,本章的入门控件由于无需设置所以直接置空即可:
代码块 |
---|
<style> </style> |
...
(4)最终合并结果
上述代码合并到helloControl.vue文件中的的结果如下:
...
代码块 | ||
---|---|---|
| ||
config: ignore: info: part-web: name: modeler cname: 建模端 forms: { helloControl.vue: from/single } dependencies: {} |
2.2 控件的应用端
...
(二)控件的应用端
(1)应用端<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> |
...
(2)应用端的<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; }, }, }; |
...
(3)应用端的<style>标签
由于本章并不需要特殊的样式标签,所以给出为空即可。
...
(4)最终合并效果
上述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> |
...
装配到应用端之后,通过表单分享得到的效果如下:
图-应用端表单分享的效果3
(三)表单控件调试和打包
如果需要发布此插件,可以利用装配脚本的generate指示符,生成代码包对应的zip文件,具体的调用方法如下:
...
将part01.zip发往现场环境或者测试环境,在DWF的代码装配功能中即可获得入门插件。
...
小结
表单插件是DWF中最复杂的插件之一,包括模型定制和表单引擎两部分,本章主要介绍了表单插件的组成,生命周期,打包和调试方法,并给出了一个最简单的表单插件的开发方法。
...
- forms: { 【vue文件】:【分类】, ...【vue文件】:【分类】}
- dependencies: {【NPM包名】/【版本】,...}
4 附件
建模端入门插件:
View file | ||||
---|---|---|---|---|
|
应用端入门插件:
...