...
代码块 |
---|
|
<template>
<div>
<Button type="text" @click="openDialog">编码工具</Button>
<Modal v-model="showDlg" :title="`${asset.assetType}`" @on-ok="ok" @on-cancel="cancel">
<Input v-model="asset.id" :placeholder="asset.id" />
</Modal>
</div>
</template>
<script>
export default {
name: "buttonOpr",
data() {
return {
showDlg: false,
asset: { id: "unknown" },
};
},
methods: {
// 通知DWF表单引擎接管绘制过程
canShow() {
return true;
},
// 一旦接管,DWF表单引擎传入当前表单的上下文
setArgs(args) {
return this;
},
openDialog() {
// 初始化弹框内容
var a = this.dwf_ctx.obj();
if (typeof a !== "undefined") {
this.asset = a;
}
// 显示对话框
this.showDlg = true;
},
ok() {
// 获得备注控件设置内容
var addin = this.dwf_ctx.getAddinById("TextInput1");
addin.setValue(this.asset.id);
},
cancel() {},
},
};
</script>
<style>
</style> |
对应的assemble-to.yaml文件如下:
代码块 |
---|
|
config:
ignore:
info:
part-web:
name: common
cname: common
forms:
# 下面是关于操作的配置,在operations文件夹下增加一个新的操作vue文件的时候,需要在下面增加配置以便正确装配
operations:
#...commonOpr.vue: commonOpr
buttonOpr.vue: buttonOpr
dependencies: {}
|
4 小结
本章深入介绍了操作插件和按钮插件的开发,要点如下:
...
关于VUE如何实现双向数据绑定,以及iView控件库基础知识,本文不做介绍,有兴趣的读者可以参阅:按钮示例,文本框示例,弹窗示例。
View file |
---|
name | buttonOpr.vue |
---|
height | 250 |
---|
|
View file |
---|
name | workOrderListOpr.vue |
---|
height | 250