...
DWF的restful api会将工单对象作为数组全部返回，同时将所有返回结果中的工单对象引用的设备对象和用户对象作为另外的两个数组返回，如下所示：
图-带引用关系返回的结果
这个返回结果携带的信息更加丰富，其携带了3个数组，其中WorkOrder代表查出的工单，User代表工单中牵扯到的负责人，Asset代表工单涉及的所有设备。得到必要的信息以后，只需要在前端对数据进行初始化即可完成显示：
| 代码块 |
|---|
<template>
<Timeline>
<TimelineItem color="green" v-for="t in worklist" :key="t.oid">
<p>{{ `${getdate(t.woDeadline || '"未知'")}` }}</p>
<p>
{{
`设备代号为 ${t.assetId} 的 ${t.woTitle} 工作由 ${t.engineerName} 负责完成`}}
<a}}
<a @click="openWorkOrder(t)"
>详情</a>
</p>
</TimelineItem>
</Timeline>
</template>
<script>
export default {
name: "workOrderListOpr",
data() {
return {
worklist: [],
userlist: [], //新增了用户列表备用
assetlist: [], //新增了设备列表备用
};
},
created() {
console.log(this.dwf_ctx);
let queryConditon = {
condition: "order by obj.woDeadline",
refs: [
{
sourceAttr: "assetOid",
targetAttr: "oid",
targetClass: "Asset",
sourceAttrSplit: ",",
},
{
sourceAttr: "engineerOid",
targetAttr: "oid",
targetClass: "User",
sourceAttrSplit: ",",
},
],
};
let that = this; // 临时保存上下文以便异步调用
this.dwf_ctx.dwf_axios
.post("/omf/entities/WorkOrder/objects", queryConditon)
.then((res) => {
console.log(res);
if (res.data.success) {
let resArr = res.data.data;
that.assetlist = resArr.refResult.AssetassetOid;
that.userlist = resArr.UserrefResult.engineerOid;
// 重新归置工单信息补充新的属性
that.worklist = resArr.WorkOrderqueryResult.map((wo) => {
let asset = that.assetlist.find((a) => {
return a.oid === wo.assetOid;
}); //找到工单提到的设备对象
let engineer = that.userlist.find((u) => {
return u.oid === wo.engineerOid;
}); //找到工单提到的用户对象
// 如果设备对象不为空则补充设备的代号到工单中
wo.assetId = typeof asset !== "undefined" ? asset.id : "未知";
// 如果用户对象不为空则补充用户的名称到工单中
wo.engineerName =
typeof engineer !== "undefined" ? engineer.displayName : "未知";
return wo;
});
}
});
},
methods: {
openWorkOrder(wo) {
// 打开工单对象
alert(`${wo.woTitle}`);
},
getdate(ts) {
if (ts == "") return "--";
var now = new Date(ts),
y = now.getFullYear(),
m = now.getMonth() + 1,
d = now.getDate();
return (
y +
"-" +
(m < 10 ? "0" + m : m) +
"-" +
(d < 10 ? "0" + d : d) +
" " +
now.toTimeString().substr(0, 8)
);
},
},
};
</script>
<style>
.ivu-timeline {
margin-left: 20px;
margin-top: 20px;
}
</style> |
...
最后，如果希望在这个时间线里点击详情用特定的表单打开工单，可以使用openTab方法调用实现，结合上面的例子，只需要修改openWorkOrder方法增加打开页签的调用即可，具体的调用方法如下：
...
| language | js |
|---|
...
先引入DWF传入的变量：props: ["itemValue", "root", "store", "Message"]，然后利用，this.root.openTab(opr)实现打开DWF表单的目的。
具体代码如下：
| 代码块 | ||
|---|---|---|
| ||
export default {
...
props: ["itemValue", "root", "store", "Message"], // 从DWF传入的一些常量
...
methods: {
openWorkOrder(wo) {
// 打开工单对象
let opr = {
targetClass: 'WorkOrder', // 设定目标类的名字
authority: 'editWO', // 设定需要执行的操作英文名
conditionExpre: `and obj.oid = '${wo.oid}'`, // 打开当前被传入的工单
displayName: '工单详情', // 设置弹出页签的标题
viewName: 'SingleWO', // 打开对象的表单名
action: 'edit', // 打开页签对应的动作：edit, visit, create
params: "" // 前后处理设置
};
// 打开工单对象
this.root.openTab(opr);
},
...
},
} |
...
| 代码块 | ||
|---|---|---|
| ||
<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> |
4 小结
本章深入介绍了操作插件和按钮插件的开发，要点如下：
第一、this.dwf_ctx，表示DWF中前端api的总入口，具备第三部分脚本的绝大部分功能。
第二、介绍了如何通过后端restful api：/omf/entities/WorkOrder/objects，获取实体类对象以及如何指定实体类对象引用其他实体类对象的方法。
第三、在表单中引入root，itemValue，store，Message的方法，通过root打开新的页签的方法：openTab。
第四、通过canShow和setArgs接管表单引擎绘制过程，并通过弹框将数据带回DWF的表单。
关于VUE如何实现双向数据绑定，以及iView控件库基础知识，本文不做介绍，有兴趣的读者可以参阅：按钮示例，文本框示例，弹窗示例。
| View file | ||||
|---|---|---|---|---|
|
| 代码块 | ||
|---|---|---|
| ||
config:
ignore:
info:
part-web:
name: common
cname: common
forms:
# 下面是关于操作的配置，在operations文件夹下增加一个新的操作vue文件的时候，需要在下面增加配置以便正确装配
operations:
#...commonOpr.vue: commonOpr
buttonOpr.vue: buttonOpr
dependencies: {}
|
4 小结
本章深入介绍了操作插件和按钮插件的开发，要点如下：
第一、this.dwf_ctx，表示DWF中前端api的总入口，具备第三部分脚本的绝大部分功能。
第二、介绍了如何通过后端restful api：/omf/entities/WorkOrder/objects，获取实体类对象以及如何指定实体类对象引用其他实体类对象的方法。
第三、在表单中引入root，itemValue，store，Message的方法，通过root打开新的页签的方法：openTab。
第四、通过canShow和setArgs接管表单引擎绘制过程，并通过弹框将数据带回DWF的表单。
关于VUE如何实现双向数据绑定，以及iView控件库基础知识，本文不做介绍，有兴趣的读者可以参阅：按钮示例，文本框示例，弹窗示例。