...
form:标签的格式是：“vue文件名：控件归属类别”，其中归属类别有：
| 信息 |
|---|
布局：form/layout |
注：如果需要引用第三方依赖，可以写在assemble-to.yaml中指定，填写要求为【依赖名：^依赖版本】，这个写法和npm-package中的依赖声明方法是一致的，如：
...
此外，控件的id通过name属性返回，需要返回一个的函数是必须实现的，在methods内部需要实现：
setDisplayType：在表单控件拖入画布的时候会通知控件目前希望其展示的状态。- getFormName：如果控件需要绑定DWF数据模型中的数据属性则通过此函数返回名称。
- setArgs，getArgs：用于设置控件展示的参数，表单建模工具在读入表单配置对应的JSON或者在保存的时候会调用这两个函数。
- getAllow：是否允许控件内部拖入其他控件，这个函数的返回值决定了控件是否是一个容器。
- getEditBox：当需要显示配置区的设置项的时候会调用此函数，此时是将配置区显示出来的时候。
最后，表单控件的函数和vue整个生命周期函数调用的顺序是： created -> setDisplayType -> setArgs -> mounted，如果需要提前加载某些数据可以在create()里增加，在本章的例子中无需实现create和mounted。
...
| 代码块 |
|---|
export default {
// Vue数据绑定的时候要求返回的结果
data() {
return {
// 插件的名字
name: "helloControl",
// 表示是否已经进入画布区
t_preview: false,
// 是否显示控件的属性编辑区
t_edit: false,
// 属性配置项,按需设置
args: {},
};
},
methods: {
//* 在建模的时候传入，提示控件是在画布区还是在控件列表中默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发
0：表示在画布区，已经被拖入
1：表示在控件区，准备被拖入
2: 表示在拖动中，还未放下
*/
setDisplayType(typegetEditBox() {
if (type == 0) this.t_previewedit = true;
return this.$refs.edit;
},
// 默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发现有表单加载在画布区加载控件的时候，会将之前的配置传入
getEditBoxsetArgs(args) {
this.t_editfor (var i in args) {
this.args[i] = true;args[i];
}
return this.$refs.edit;
},
// 当插件无法直接通过style设置高度时，使用setHeight方法设置高度表单保存的时候将控件的设置合并到表单自身的JSON中
setHeightgetArgs() {
ifreturn (!this.$refs.main) returnargs;
},
// 现有表单加载在画布区加载控件的时候，会将之前的配置传入返回控件绑定的目标属性，如果没有绑定返回undefined或者null
setArgsgetFormName(args) {
for (var i in args) {
this.args[i] = args[i];
return this.args.name;
},
return this;
},
// 表单保存的时候将控件的设置合并到表单自身的JSON中
getArgs() {
return this.args;
},
// 是否允许其他子控件拖入，如果不允许则返回null
getAllow() {
return null;
},
// 返回控件绑定的目标属性，如果没有绑定返回undefined或者null
getFormName() {
return null;
},
},
}; |
控件的<style>标签
如果需要一些特殊的样式可以如下设置，本章的入门控件由于无需设置所以直接置空即可：
| 代码块 |
|---|
<style>
</style> |
最终合并结果
上述代码合并到helloControl.vue文件中的的结果如下：
| 代码块 |
|---|
<template> <!-- 建模时的预览前端,即插件的实际显示样式 :addinName="name"和ref="main"一般情况不可去除 --> <section v-if="t_preview" :addinName="name" ref="main"> <!-- 在画布区的显示内容 --> <span style=" font-size: 50px; display: flex; justify-content: center; align-items: center;" >Hello World!</span> <span v-show="t_edit" ref="edit"></span> </section> <section v-else}, }; |
控件的<style>标签
如果需要一些特殊的样式可以如下设置，本章的入门控件由于无需设置所以直接置空即可：
| 代码块 |
|---|
<style>
</style> |
最终合并结果
上述代码合并到helloControl.vue文件中的的结果如下：
| 代码块 |
|---|
<template> <!-- 建模时的预览前端,即插件的实际显示样式 :addinName="name"和ref="main"一般情况不可去除 --> <section v-if="t_preview" :addinName="name"> <span style="text-align: center;"> <div class="form-addin-icon ref="main"> <!-- 控件拖放区图标的样式在画布区的显示内容 --> <span <i class="iconfont"></i> </div> <!-- 在控件拖放区图标的名字 --> <div class="form-addin-name">入门控件</div> <style=" font-size: 50px; display: flex; justify-content: center; align-items: center;" >Hello World!</span> <span v-show="t_edit" ref="edit"></span> </section> </template> <script> export default { // Vue数据绑定的时候要求返回的结果 data() {<section v-else :addinName="name"> return { // 插件的名字<span style="text-align: center;"> name:<div "helloControl", class="form-addin-icon"> // 表示是否已经进入画布区 <!-- 控件拖放区图标的样式 --> t_preview: false,<i class="iconfont"></i> <// 是否显示控件的属性编辑区div> t_edit: false,<!-- 在控件拖放区图标的名字 --> // 属性配置项,按需设置<div class="form-addin-name">入门控件</div> args: {}, }; }, methods:</span> </section> </template> <script> export default { //* 在建模的时候传入，提示控件是在画布区还是在控件列表中Vue数据绑定的时候要求返回的结果 0：表示在画布区，已经被拖入 1：表示在控件区，准备被拖入data() { 2:return 表示在拖动中，还未放下{ *// setDisplayType(type) {插件的名字 if (type == 0) this.t_preview = true;name: "helloControl", return// this;表示是否已经进入画布区 }t_preview: false, // 默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发是否显示控件的属性编辑区 getEditBox() {t_edit: false, this.t_edit = true;// 属性配置项,按需设置 return this.$refs.editargs: {}, }; },}, methods: { // 当插件无法直接通过style设置高度时，使用setHeight方法设置高度默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发 setHeightgetEditBox() { this.t_edit = true; ifreturn (!this.$refs.main) returnedit; }, // 现有表单加载在画布区加载控件的时候，会将之前的配置传入 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 nullthis.args.name; }, }, }; </script> <style> </style> |
...