...
上一章里详细介绍了表单控件的各项配置和对应的代码,表单控件自身自带的属性设置非常丰富,有些属性的设置在很多控件中重复出现,例如:目标类设置,目标属性设置,如下图所示,当用户打开DWF的表单建模工具的时候,工具会显示下面的一些区域:
图-表单建模工具的组成
- 控件区:主要显示可以拖入的控件。
- 画布区:主要显示拖入表单以后的控件布局和控件的展示方式。
- 工具条:展示属于整个表单的公共属性。
- 属性区:表单控件可以展示的个性化属性。
- 属性编辑区:控件的每一个属性对应一个属性编辑区,这些属性编辑区对应的属性取值将和控件规范中的args中包含的变量对应。
...
代码块 | ||
---|---|---|
| ||
<template> <!-- 建模时的预览前端,即插件的实际显示样式 即插件的实际显示样式,:addinName="name"和ref="main"一般情况不可去除 --> <section v-if="t_preview" :addinName="name" ref="main" :style="{ width: args.width + args.widthType }" > <!-- 在画布区的显示内容 --> <span :style="{ height: args.height + args.heightType, width: 100 }" style=" font-size: 50px; display: flex; justify-content: center; align-items: center;" >{{ args.label }}</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> |
在上面的代码中注意看到:
- 已经使用了vue的数据绑定能力将整体宽度、整体高度和标签内容设置为args.height,heightType,width,widthType以及args.label五个参数。
- 其中<span v-show="t_edit" ref="edit">标签的内容仍然保持为空,因此如果此时调试控件是不会有和上述5个参数对应的属性编辑框出现的。
下面看如何得到属性编辑框。
2.2 给控件增加选项配置面板
为了给控件增加选项编辑功能,DWF提供了一个称之为EditBox的组件和配套的函数,只要控件的代码中包含args属性是DWF建模工具可以自动识别的,表单建模工具会自动为其在属性编辑区建立对应的输入控件。增加EditBox需要执行下面的步骤:
- 在控件vue文件中的<template>内增加<EditBox>标签并配置参数。
- 在脚本部分通过import引入_EditBox.vue文件和EditBox的component组件。
- 引入DWF表单引擎传入的prop参数,以便EditBox作为标签参数绑定。
引入EditBox标签
首先,引入EditBox标签的方法很简单,如下代码所示:
代码块 | ||
---|---|---|
| ||
<span v-show="t_edit" ref="edit"></section> </template> |
在上面的代码中注意看到:
- 已经使用了vue的数据绑定能力将整体宽度、整体高度和标签内容设置为args.height,heightType,width,widthType以及args.label五个参数。
- 其中<span v-show="t_edit" ref="edit">标签的内容仍然保持为空,因此如果此时调试控件是不会有和上述5个参数对应的属性编辑框出现的。
下面看如何得到属性编辑框。
2.2 给控件增加选项配置面板
为了给控件增加选项编辑功能,DWF提供了一个称之为EditBox的组件和配套的函数,只要控件的代码中包含args属性是DWF建模工具可以自动识别的,表单建模工具会自动为其在属性编辑区建立对应的输入控件。增加EditBox需要执行下面的步骤:
- 在控件vue文件中的<template>内增加<EditBox>标签并配置参数。
- 在脚本部分通过import引入_EditBox.vue文件和EditBox的component组件。
- 引入DWF表单引擎传入的prop参数,以便EditBox作为标签参数绑定。
引入EditBox标签
首先,引入EditBox标签的方法很简单,如下代码所示:
代码块 | ||
---|---|---|
| ||
<span v-show="t_edit" ref="edit"> <EditBox v-if="actEdit" :addinName="name" <EditBox v-if:widgetAnnotation="actEditwidgetAnnotation" :addinNameeditExtendInfo="nameeditExtendInfo" :widgetAnnotationref="widgetAnnotationeditbox" :editExtendInfo="editExtendInfo" ref="editbox" v-model="args" :attributes="filter_attributes" :router="router" :route="route" :store="store" :root="root" :itemValue="itemValue" :query_oprs="query_oprs" :dataTypes="dataTypes" :targetclass="itemValue.data.targetClass" > <div slot="attribute"></div> <div slot="layout"></div> <div slot="operation"></div> </EditBox> </span> |
...
- widgetAnnotation="widgetAnnotation":控件标注所用参数,DWF会通过props直接传递一个缺省值进来
- router="router":当前路由对象,DWF会通过props直接传递一个缺省值进来
- route="route":当前路由信息,DWF会通过props直接传递一个缺省值进来
- root="root":根组件对象,DWF会通过props直接传递一个缺省值进来
- itemValue="itemValue":表单对应JSON实例化以后的对象,DWF会通过props直接传递一个缺省值进来。
- dataTypes="dataTypes":目标属性类型,需要返回一个数组表明可以接受的DWF数据类型。
- attributes="filter_attributes":过滤之后的目标属性,需要控件里提供一个空的实现
- targetclass="itemValue.data.targetClass":表单目标类
增加args属性
引入了EditBox以后,还需要在vue文件脚本部分的data()函数中返回args对象,用于保存和初始化需要展示的控件属性。
对于表单控件而言args非常重要,其作用包括:
- 通知表单建模工具需要保留在数据库中的参数。
- 还原表单上次保存的样子,此时控件的setArgs和getArgs会被建模工具调用。
- 在应用端表单展现的时候,展示真实的表单,同样的,控件的setArgs和getArgs会被建模工具调用。
- EditBox会自动扫描args的内容并自动识别可以产生属性配置的界面,这些属性在编辑以后,DWF会自动将其保存在表单对应JSON文件中,详细的自动识别清单可以参阅: DWF可自动识别的args参数
每一个控件需要一个title在args里面用于在建模阶段显示控件的名称,除此之外,对于本章例子里用到的args参数是:height,heightType,width,widthType,代码如下所示。
代码块 |
---|
// Vue数据绑定的时候要求返回的结果
data() {
return {
//插件的名字
name: name,
//表示是否已经进入画布区
t_preview: true,
//是否需要编辑属性
t_edit: false,
// 属性配置项,按需设置
addIcon: true,
// 用于控制画布区的复制,删除和角标
actEdit: false,
actIndex: -1,
setModal: false,
// 支持的数据类型
dataTypes: [],
args: {
// 用于提示用户名称
title: "进阶控件",
height: 300,
heightType: "px",
width: 100,
widthType: "%",
label: "Empty!",
// 给出控件可以支持的事件类型
eventRange: ["单击", "双击"],
events: [],
},
}; |
2.3 为控件增加事件
除了配置项以外,控件内的事件也可以添加到里面来,如果需要添加控件自身的事件响应,具体操作是:
建模工具里的事件配置
在args属性里添加两个配置参数:eventRange,events,它们的作用是:
args.eventRange:是一个数组类型,要求元素为字符串,这些元素在空间被点击后,表单建模工具里,会在“事件”页签里出现对应名称的操作点选配置下拉框,比如:
代码块 language js args: { ... // 给出控件可以支持的事件类型 eventRange: ["单击", "双击"], events: [] }
在参数区的事件栏里,就会出现单击和双击事件对应的操作配置框。
args.events:用于保存事件对应的操作名称,在配置框里下拉选择以后对应的配置信息会在这个变量里出现,同理,表单再次被打开的时候events也会被表单引擎重新赋值。
下面给出了一个表单JSON的例子,包含了一个单击事件和一个双击事件对应的表单配置,在这个配置中每一个事件对应的操作对应了三个属性:代码块 events: [ { opr_path: "save", opr_type: "sys", name: "单击", }, { opr_path: "1144803D337D7349A3EA8E4132143C54", opr_type: "query", name: "双击", }, ],
opr_path:代表操作对象的系统内部标识。
opr_type:操作类型,sys表示系统操作,query表示用户新建的操作。
name:对应事件的名称和eventRange里事件名称形成对应关系。
综上所述,如果希望为进阶的控件添加单击和双击事件,那么可以在args添加如下的代码:
代码块 | ||
---|---|---|
| ||
// Vue数据绑定的时候要求返回的结果
data() {
return {
//插件的名字
name: name,
//表示是否已经进入画布区
t_preview: true,
//是否需要编辑属性
t_edit: false,
// 属性配置项,按需设置
addIcon: true,
// 用于控制画布区的复制,删除和角标
actEdit: false,
actIndex: -1,
setModal: false,
// 支持的数据类型
dataTypes: [],
args: {
// 用于提示用户名称
title: "进阶控件",
height: 300,
heightType: "px",
width: 100,
widthType: "%",
label: "Empty!",
// 给出控件可以支持的事件类型
eventRange: ["单击", "双击"],
events: [],
},
};
}, |
上述代码添加到进阶插件的args列表之中以后,在画布中添加进阶控件,可以看到如下的效果:
图-控件增加单击、双击事件
表单应用中的事件触发
通过this.invokeOperation触发操作
在表单具体实例显示到表单引擎里面以后,控件事件和操作的配置信息会由DWF表单引擎传递给控件具体的实现,此时控件开发者应在代码里根据事件的名称编写捕获事件的逻辑,并且根据事件的配置触发相应的操作,这一任务在app端实现需要调用DWF前端提供的invokeOperation方法,该方法要求控件传入4个参数,典型的调用方法如下:
代码块 | ||
---|---|---|
| ||
this.invokeOperation(
opr_type,
opr_path,
this.itemValue,
this.store
); |
- opr_type, opr_path是事件配置的基本信息,在初始化控件的时候,表单引擎通过setArgs传入args.events数组。
- itemValue和store是vue上层控件传入的信息,可以直接通过props: ["itemValue", "store"]传入。
为了方便可以实现一个用事件名称触发操作的函数,假设名字为trigerEvent():
代码块 |
---|
export default {
props: ["itemValue", "store"],
// Vue数据绑定的时候要求返回的结果
data() {
return {
... // 省略无关代码
args: {
... // 省略无关代码
events: [],
},
};
},
methods: {
... //省略无关代码
triggerEvent(eventName) {
let eventConfig = null;
// 提取事件对应的操作参数
if (this.args.events && this.args.events.length > 0) {
eventConfig = this.args.events.find((val) => {
return val.name === eventName;
});
}
// 触发实际操作
if (eventConfig) {
this.invokeOperation(
eventConfig.opr_type,
eventConfig.opr_path,
this.itemValue,
this.store
);
}
},
},
}; |
绑定标签的原始事件
了解如何绑定原始事件并且触发操作以后,剩余的部分就非常简单了,在标签部分将标签的原始事件与函数对应起来,然后调用前面描述的triggerEvent方法触发事件配置对应的参数,先看如何绑定标签上的事件,以本章的进阶控件为例,原本设计了两个事件:单击和双击,运用vue规定的语法在template部分的标签中增加@click和@dbclick分别绑定到onClick() 和 onDoubleClick()方法上,代码如下:
代码块 | ||
---|---|---|
| ||
<template>
<!--
建模时的预览前端,即插件的实际显示样式
:addinName="name"和ref="main"一般情况不可去除
-->
<section :style="{
width: args.width + args.widthType,
}" :addinName="name" ref="main">
<!-- 在画布区的显示内容 -->
<span
:style="{
height: args.height+ args.heightType,
width: args.width + args.widthType,
}"
style="
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;"
@click="onClick"
@dblclick="onDoubleClick"
>{{args.label}}</span>
</section>
</template> |
然后在script里面的onClick和onDoubleClick的实现里调用triggerEvent,代码如下:
代码块 | ||
---|---|---|
| ||
// 区域被单击以后的响应
onClick() {
this.triggerEvent("单击");
},
// 区域被双击以后的响应
onDoubleClick() {
this.triggerEvent("双击");
}, |
好了,上述代码补充到之前的实现里,打开表单即可让脚本开发者验证是否具有单击和双击实现,关于操作脚本的开发详见 第五章 多对象表单控件脚本:
图-控件增加单击和双击事件后的效果
2.4 完整代码
建模端完整代码
上面两节介绍了最关键的操作,下面公布空白控件在建模工具里的完整代码,此时控件的methods部分包含了表单建模工具将要调用的大部分函数:setDisplayType,getEditBox,setHeight,setArgs,getArgs,getAllow,getFormName
代码块 | ||||
---|---|---|---|---|
| ||||
<template>
<!--
建模时的预览前端,即插件的实际显示样式
:addinName="name"和ref="main"一般情况不可去除
-->
<section
v-if="t_preview"
:addinName="name"
ref="main"
:style="{
width: args.width + args.widthType,
}"
>
<!-- 在画布区的显示内容 -->
<span
:style="{
height: args.height + args.heightType,
width: 100,
}"
style="
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
"
>{{ args.label }}</span
>
<span v-show="t_edit" ref="edit">
<EditBox
v-if="actEdit"
:addinName="name"
:widgetAnnotation="widgetAnnotation"
:editExtendInfo="editExtendInfo"
ref="editbox"
v-model="args"
:attributes="filter_attributes"
:router="router"
:route="route"
:root="root"
:itemValue="itemValue"
:query_oprs="query_oprs"
:dataTypes="dataTypes"
:targetclass="itemValue.data.targetClass"
>
<div slot="attribute"></div>
<div slot="layout"></div>
<div slot="operation"></div>
</EditBox>
</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>
import EditBox from "@/ext_components/form/_EditBox.vue";
const name = "BlankControl";
export default {
name: name,
props: [
"addin",
"basicArgs",
"argsProps",
"activeUUID",
"store",
"itemValue",
"attributes",
"relation",
"editExtendInfo",
"widgetAnnotation",
"checkResult",
"query_oprs",
"route",
"router",
"root",
"Message",
"echarts",
],
components: {
EditBox,
},
data() {
return {
//插件的名字
name: name,
//表示是否已经进入画布区
t_preview: true,
//是否需要编辑属性
t_edit: false,
// 属性配置项,按需设置
addIcon: true,
// 用于控制画布区的复制,删除和角标
actEdit: false,
actIndex: -1,
setModal: false,
// 支持的数据类型
dataTypes: [],
args: {
// 用于提示用户名称
title: "进阶控件",
height: 300,
heightType: "px",
width: 100,
widthType: "%",
label: "Empty!",
// 给出控件可以支持的事件类型
eventRange: ["单击", "双击"],
events: [],
},
};
},
created() {},
// 生命周期函数,在dom元素生成之后调用
mounted() {},
computed: {
// 需要用到实体类属性列表时使用
filter_attributes() {
return [];
},
},
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() {
return this.args;
},
// 返回控件绑定的目标属性,如果没有绑定返回undefined或者null
getFormName() {
return this.name;
},
getDataType(args) {
return this.dataTypes;
},
},
};
</script>
<style>
</style> |
应用端完整代码
在上述讨论之后,对应插件的应用端代码和入门控件的应用端类似,除了入门控件提到的setDisplayType, setArgs, getArgs以外,应用端代码还实现了用于和表单引擎交互的一些其他函数包括:
validate:当涉及到数据的时候表单引擎会调用这两个函数要求控件对自身的数据进行校验。
setError:当脚本在整个表单范围内发现存在错误的时候会调用setError请求控件显示错误信息,一般是将控件的外延设置为红色并给出提示。
setValue,getValue:表单引擎会将存储在数据库里的值通过这两个函数送给控件,由控件将取值显示出来或者读出控件正在绑定的取值。
getFormName:当控件绑定属性时,表单引擎会询问控件需要哪个属性的取值,收到这个值以后,表单引擎会调用setValue写入数值。
...
collapse | true |
---|
...
- itemValue.data.targetClass":表单目标类
增加args属性
引入了EditBox以后,还需要在vue文件脚本部分的data()函数中返回args对象,用于保存和初始化需要展示的控件属性。
对于表单控件而言args非常重要,其作用包括:
- 通知表单建模工具需要保留在数据库中的参数。
- 还原表单上次保存的样子,此时控件的setArgs和getArgs会被建模工具调用。
- 在应用端表单展现的时候,展示真实的表单,同样的,控件的setArgs和getArgs会被建模工具调用。
- EditBox会自动扫描args的内容并自动识别可以产生属性配置的界面,这些属性在编辑以后,DWF会自动将其保存在表单对应JSON文件中,详细的自动识别清单可以参阅: DWF可自动识别的args参数
每一个控件需要一个title在args里面用于在建模阶段显示控件的名称,除此之外,对于本章例子里用到的args参数是:height,heightType,width,widthType,代码如下所示。
代码块 |
---|
// Vue数据绑定的时候要求返回的结果
data() {
return {
//插件的名字
name: name,
//表示是否已经进入画布区
t_preview: true,
//是否需要编辑属性
t_edit: false,
// 属性配置项,按需设置
addIcon: true,
// 用于控制画布区的复制,删除和角标
actEdit: false,
actIndex: -1,
setModal: false,
// 支持的数据类型
dataTypes: [],
args: {
// 用于提示用户名称
title: "进阶控件",
height: 300,
heightType: "px",
width: 100,
widthType: "%",
label: "Empty!",
// 给出控件可以支持的事件类型
eventRange: ["单击", "双击"],
events: [],
},
}; |
2.3 为控件增加事件
除了配置项以外,控件内的事件也可以添加到里面来,如果需要添加控件自身的事件响应,具体操作是:
建模工具里的事件配置
在args属性里添加两个配置参数:eventRange,events,它们的作用是:
args.eventRange:是一个数组类型,要求元素为字符串,这些元素在空间被点击后,表单建模工具里,会在“事件”页签里出现对应名称的操作点选配置下拉框,比如:
代码块 language js args: { ... // 给出控件可以支持的事件类型 eventRange: ["单击", "双击"], events: [] }
在参数区的事件栏里,就会出现单击和双击事件对应的操作配置框。
args.events:用于保存事件对应的操作名称,在配置框里下拉选择以后对应的配置信息会在这个变量里出现,同理,表单再次被打开的时候events也会被表单引擎重新赋值。
下面给出了一个表单JSON的例子,包含了一个单击事件和一个双击事件对应的表单配置,在这个配置中每一个事件对应的操作对应了三个属性:代码块 events: [ { opr_path: "save", opr_type: "sys", name: "单击", }, { opr_path: "1144803D337D7349A3EA8E4132143C54", opr_type: "query", name: "双击", }, ],
opr_path:代表操作对象的系统内部标识。
opr_type:操作类型,sys表示系统操作,query表示用户新建的操作。
name:对应事件的名称和eventRange里事件名称形成对应关系。
综上所述,如果希望为进阶的控件添加单击和双击事件,那么可以在args添加如下的代码:
代码块 | ||
---|---|---|
| ||
// Vue数据绑定的时候要求返回的结果
data() {
return {
//插件的名字
name: name,
//表示是否已经进入画布区
t_preview: true,
//是否需要编辑属性
t_edit: false,
// 属性配置项,按需设置
addIcon: true,
// 用于控制画布区的复制,删除和角标
actEdit: false,
actIndex: -1,
setModal: false,
// 支持的数据类型
dataTypes: [],
args: {
// 用于提示用户名称
title: "进阶控件",
height: 300,
heightType: "px",
width: 100,
widthType: "%",
label: "Empty!",
// 给出控件可以支持的事件类型
eventRange: ["单击", "双击"],
events: [],
},
};
}, |
上述代码添加到进阶插件的args列表之中以后,在画布中添加进阶控件,可以看到如下的效果:
图-控件增加单击、双击事件
表单应用中的事件触发
通过this.invokeOperation触发操作
在表单具体实例显示到表单引擎里面以后,控件事件和操作的配置信息会由DWF表单引擎传递给控件具体的实现,此时控件开发者应在代码里根据事件的名称编写捕获事件的逻辑,并且根据事件的配置触发相应的操作,这一任务在app端实现需要调用DWF前端提供的invokeOperation方法,该方法要求控件传入4个参数,典型的调用方法如下:
代码块 | ||
---|---|---|
| ||
this.invokeOperation(
opr_type,
opr_path,
this.itemValue,
this.store
); |
- opr_type, opr_path是事件配置的基本信息,在初始化控件的时候,表单引擎通过setArgs传入args.events数组。
- itemValue和store是vue上层控件传入的信息,可以直接通过props: ["itemValue", "store"]传入。
为了方便可以实现一个用事件名称触发操作的函数,假设名字为trigerEvent():
代码块 |
---|
export default {
props: ["itemValue", "store"],
// Vue数据绑定的时候要求返回的结果
data() {
return {
... // 省略无关代码
args: {
... // 省略无关代码
events: [],
},
};
},
methods: {
... //省略无关代码
triggerEvent(eventName) {
let eventConfig = null;
// 提取事件对应的操作参数
if (this.args.events && this.args.events.length > 0) {
eventConfig = this.args.events.find((val) => {
return val.name === eventName;
});
}
// 触发实际操作
if (eventConfig) {
this.invokeOperation(
eventConfig.opr_type,
eventConfig.opr_path,
this.itemValue,
this.store
);
}
},
},
}; |
绑定标签的原始事件
了解如何绑定原始事件并且触发操作以后,剩余的部分就非常简单了,在标签部分将标签的原始事件与函数对应起来,然后调用前面描述的triggerEvent方法触发事件配置对应的参数,先看如何绑定标签上的事件,以本章的进阶控件为例,原本设计了两个事件:单击和双击,运用vue规定的语法在template部分的标签中增加@click和@dbclick分别绑定到onClick() 和 onDoubleClick()方法上,代码如下:
代码块 | ||
---|---|---|
| ||
<template>
<!--
建模时的预览前端,即插件的实际显示样式
:addinName="name"和ref="main"一般情况不可去除
-->
<section :style="{
width: args.width + args.widthType,
}" :addinName="name" ref="main">
<!-- 在画布区的显示内容 -->
<span
:style="{
height: args.height+ args.heightType,
width: args.width + args.widthType,
}"
style="
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;"
@click="onClick"
@dblclick="onDoubleClick"
>{{args.label}}</span>
</section>
</template> |
然后在script里面的onClick和onDoubleClick的实现里调用triggerEvent,代码如下:
代码块 | ||
---|---|---|
| ||
// 区域被单击以后的响应
onClick() {
this.triggerEvent("单击");
},
// 区域被双击以后的响应
onDoubleClick() {
this.triggerEvent("双击");
}, |
好了,上述代码补充到之前的实现里,打开表单即可让脚本开发者验证是否具有单击和双击实现,关于操作脚本的开发详见 第五章 多对象表单控件脚本:
图-控件增加单击和双击事件后的效果
2.4 完整代码
建模端完整代码
上面两节介绍了最关键的操作,下面公布空白控件在建模工具里的完整代码,此时控件的methods部分包含了表单建模工具将要调用的大部分函数:setDisplayType,getEditBox,setHeight,setArgs,getArgs,getAllow,getFormName
代码块 | ||||
---|---|---|---|---|
| ||||
<template>
<!--
建模时的预览前端,即插件的实际显示样式
:addinName="name"和ref="main"一般情况不可去除
-->
<section
v-if="t_preview"
:addinName="name"
ref="main"
:style="{
width: args.width + args.widthType,
}"
>
<!-- 在画布区的显示内容 -->
<span
:style="{
height: args.height + args.heightType,
width: 100,
}"
style="
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
"
>{{ args.label }}</span
>
<span v-show="t_edit" ref="edit">
<EditBox
v-if="actEdit"
:addinName="name"
:widgetAnnotation="widgetAnnotation"
:editExtendInfo="editExtendInfo"
ref="editbox"
v-model="args"
:attributes="filter_attributes"
:router="router"
:route="route"
:root="root"
:itemValue="itemValue"
:query_oprs="query_oprs"
:dataTypes="dataTypes"
:targetclass="itemValue.data.targetClass"
>
<div slot="attribute"></div>
<div slot="layout"></div>
<div slot="operation"></div>
</EditBox>
</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>
import EditBox from "@/ext_components/form/_EditBox.vue";
const name = "BlankControl";
export default {
name: name,
props: [
"addin",
"basicArgs",
"argsProps",
"activeUUID",
"store",
"itemValue",
"attributes",
"relation",
"editExtendInfo",
"widgetAnnotation",
"checkResult",
"query_oprs",
"route",
"router",
"root",
"Message",
"echarts",
],
components: {
EditBox,
},
data() {
return {
//插件的名字
name: name,
//表示是否已经进入画布区
t_preview: true,
//是否需要编辑属性
t_edit: false,
// 属性配置项,按需设置
addIcon: true,
// 用于控制画布区的复制,删除和角标
actEdit: false,
actIndex: -1,
setModal: false,
// 支持的数据类型
dataTypes: [],
args: {
// 用于提示用户名称
title: "进阶控件",
height: 300,
heightType: "px",
width: 100,
widthType: "%",
label: "Empty!",
// 给出控件可以支持的事件类型
eventRange: ["单击", "双击"],
events: [],
},
};
},
created() {},
// 生命周期函数,在dom元素生成之后调用
mounted() {},
computed: {
// 需要用到实体类属性列表时使用
filter_attributes() {
return [];
},
},
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() {
return this.args;
},
// 返回控件绑定的目标属性,如果没有绑定返回undefined或者null
getFormName() {
return this.name;
},
getDataType(args) {
return this.dataTypes;
},
},
};
</script>
<style>
</style> |
装配指示文件
代码块 | ||
---|---|---|
| ||
config:
ignore:
info:
part-web:
name: modeler
cname: 建模端
forms: # 表单控件
BlankControl.vue:
icon: "ios-apps-outline"
cname: 进阶控件
type: form/layout
operations: # 操作插件
mobileForms: # mobile表单控件
mobileOperations: # mobile操作插件
dependencies: # 外部依赖 |
应用端完整代码
在上述讨论之后,对应插件的应用端代码和入门控件的应用端类似,除了入门控件提到的setDisplayType, setArgs, getArgs以外,应用端代码还实现了用于和表单引擎交互的一些其他函数包括:
validate:当涉及到数据的时候表单引擎会调用这两个函数要求控件对自身的数据进行校验。
setError:当脚本在整个表单范围内发现存在错误的时候会调用setError请求控件显示错误信息,一般是将控件的外延设置为红色并给出提示。
setValue,getValue:表单引擎会将存储在数据库里的值通过这两个函数送给控件,由控件将取值显示出来或者读出控件正在绑定的取值。
getFormName:当控件绑定属性时,表单引擎会询问控件需要哪个属性的取值,收到这个值以后,表单引擎会调用setValue写入数值。
代码块 | ||
---|---|---|
| ||
<template> <!-- 建模时的预览前端,即插件的实际显示样式 :addinName="name"和ref="main"一般情况不可去除 --> <section :style="{ width: args.width + args.widthType, }" :addinName="name" ref="main"> <!-- 在画布区的显示内容 --> <span :style="{ height: args.height+ args.heightType, width: args.width + args.widthType, }" style=" font-size: 50px; display: flex; justify-content: center; align-items: center;" @click="onClick" @dblclick="onDoubleClick" >{{args.label}}</span> </section> </template> <script> export default { props: ["itemValue", "store"], // Vue数据绑定的时候要求返回的结果 data() { return { //插件的名字 name: "BlankControl", // 属性配置项,按需设置 args: { // 用于提示用户名称 title: "进阶控件", height: 300, heightType: "px", width: 100, widthType: "%", label: "Empty!", // 给出控件可以支持的事件类型 eventRange: ["单击", "双击"], events: [], }, }; }, methods: { /* type取值范围为 create, visit, edit 需要根据三个状态修改具体前端和逻辑 一般情况下: create创建态: 无数据,可编辑 visit浏览态: 有数据,不可编辑 edit编辑态: 有数据,可编辑 */ setDisplayType(type) { return this; }, // 设置异常状态显示 setError(error) { return this; }, // 设置校验逻辑,返回true/false validate() { return true; }, // 返回对应的目标属性名称,引擎在渲染的时候将根据其返回值提取属性的取值调用setValue() getFormName() { return this.name; }, // 获取插件对应的值,一般为this.value,特殊情况下需要进行格式转化,如日期字符串 getValue() { return null; }, /* 设置插件对应的值, 如果目标属性为空,则传入的items为空,主要是针对多对象加载控件时使用 items目前为对应值,items将为目标对象列表 visit浏览态:特殊情况下需要进行格式转化再赋值 有数据,不可编辑 */ setValue(items) { return edit编辑态: 有数据,可编辑 */ setDisplayType(typethis; }, // 现有表单加载在画布区加载控件的时候,会将之前的配置传入 setArgs(args) { for (var i in args) { return this this.args[i] = args[i]; }, // 设置异常状态显示 setError(error) { return this; }, // 设置校验逻辑,返回true/false表单保存的时候将控件的设置合并到表单自身的JSON中 validategetArgs() { return truethis.args; }, // 返回对应的目标属性名称,引擎在渲染的时候将根据其返回值提取属性的取值调用setValue()区域被单击以后的响应 getFormNameonClick() { return this.nametriggerEvent("单击"); }, // 获取插件对应的值,一般为this.value,特殊情况下需要进行格式转化,如日期字符串, // 区域被双击以后的响应 getValueonDoubleClick() { return nullthis.triggerEvent("双击"); }, /*/ 设置插件对应的值, 如果目标属性为空,则传入的items为空,主要是针对多对象加载控件时使用 items目前为对应值,items将为目标对象列表 特殊情况下需要进行格式转化再赋值 */ setValue(items根据名字触发表单事件上配置的操作 triggerEvent(eventName) { return thislet eventConfig = null; }, // 现有表单加载在画布区加载控件的时候,会将之前的配置传入提取事件对应的操作参数 setArgsif (this.args.events && this.args.events.length > 0) { for eventConfig (var i in args) = this.args.events.find((val) => { this.args[i] return val.name = args[i]== eventName; }); return} this; }, // 表单保存的时候将控件的设置合并到表单自身的JSON中触发实际操作 getArgsif (eventConfig) { return this.args;invokeOperation( } eventConfig.opr_type, // 区域被单击以后的响应 onClick() { eventConfig.opr_path, this.triggerEvent("单击"); itemValue, }, // 区域被双击以后的响应this.store onDoubleClick( ); { this.triggerEvent("双击");} }, // 根据名字触发表单事件上配置的操作 triggerEvent(eventName) { let eventConfig = null; // 提取事件对应的操作参数 if (this.args.events && this.args.events.length > 0) { eventConfig = this.args.events.find((val) => { return val.name === eventName; }); } // 触发实际操作 if (eventConfig) { this.invokeOperation( eventConfig.opr_type, eventConfig.opr_path, this.itemValue, this.store ); } }, }, }; </script> <style> </style> |
对于多对象控件,表单还会调用这些方法:
getSelected:返回当前空间中被用户选中的所有对象。
getAll:返回当前控件中显示出来的所有对象数组。
...
},
};
</script>
<style>
</style> |
对于多对象控件,表单还会调用这些方法:
- getSelected:返回当前空间中被用户选中的所有对象。
- getAll:返回当前控件中显示出来的所有对象数组。
- freshData:根据给定的查询条件刷新表单,如果没有给定则使用默认的查询条件。
装配指示文件
代码块 | ||
---|---|---|
| ||
config:
ignore:
info:
part-web:
name: app
cname: 应用端
forms: # 表单控件
...
BlankControl.vue: form/layout
...
operations: # 操作插件
...
dependencies: {} |
3 小结
本章是在入门插件的基础上重点介绍了如何利用DWF提供的EditBox内部组件自动识别控件的属性,并自动产生属性编辑区对应输入界面的方法,使用EditBox的要点是:
...