...
代码块 | ||
---|---|---|
| ||
<template>
<Timeline>
<TimelineItem color="green" v-for="t in worklist" :key="t.oid">
<p>{{`${getdate(t.woDeadline || '未知')}`}}</p>
<p>{{`${t.woTitle}`}}<a @click="openWorkOrder(t)">详情</a> </p>
</TimelineItem>
</Timeline>
</template>
<script>
export default {
name: "workOrderListOpr",
data() {
return {
worklist: [],
};
},
created() {
console.log(this.dwf_ctx);
let queryConditon = {};
let that = this; // 临时保存上下文以便异步调用
this.dwf_ctx.dwf_axios
.post("/omf/entities/WorkOrder/objects", queryConditon)
.then((res) => {
if (res.data.success) {
console.log(res.data.data);
that.worklist = res.data.data;
}
});
},
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> |
...
代码块 |
---|
<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 @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.assetOid;
that.userlist = resArr.refResult.engineerOid;
// 重新归置工单信息补充新的属性
that.worklist = resArr.queryResult.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> |
...
先引入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); }, ... }, } |
...
在下面章节里,我们还将介绍其他更加简便的方法操作DWF中的概念。
代码块 | ||||||
---|---|---|---|---|---|---|
| ||||||
<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 @click="openWorkOrder(t)">详情</a>
</p>
</TimelineItem>
</Timeline>
</template>
<script>
export default {
name: "workOrderListOpr",
props: ["itemValue", "root", "store", "Message"],
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.assetOid;
that.userlist = resArr.refResult.engineerOid;
// 重新归置工单信息补充新的属性
that.worklist = resArr.queryResult.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) {
// 打开工单对象
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);
},
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>
|
...
代码块 | ||
---|---|---|
| ||
config: ignore: info: part-web: name: common cname: common forms: operations: # 下面是关于操作的配置,在operations文件夹下增加一个新的操作vue文件的时候,需要在下面增加配置以便正确装配 operationscommonOpr.vue: #...commonOpr.vue: commonOpr name: commonOpr cname: "入门插件" buttonOpr.vue: name: buttonOpr cname: "进阶插件" dependencies: {} |
4 小结
本章深入介绍了操作插件和按钮插件的开发,要点如下:
...