页面历史

...

DWF的restful api会将工单对象作为数组全部返回，同时将所有返回结果中的工单对象引用的设备对象和用户对象作为另外的两个数组返回，如下所示：

Image RemovedImage Added

图-带引用关系返回的结果

这个返回结果携带的信息更加丰富，其携带了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方法增加打开页签的调用即可，具体的调用方法如下：

先引入DWF传入的变量：props: ["itemValue", "root", "store", "Message"]，然后利用，this.root.openTab(opr)实现打开DWF表单的目的。

具体代码如下：

代码块

language	js

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);
		},
		...
	},
}

...

页面树结构

版本比较

旧版本 3

新版本 4

标识