“处理工单”对话框是一个手机端的Html5页面,负责指定下一环节的工单状态,用标准页面功能实现。
按照用2小时定义电梯维护流程假定的流程,工程师在对话框中选定下一步流程状态,如图1所示。
页面模型负责与页面组件交互,传递处理工单需要的工单ID、工单状态等信息。结合页面需求,可知需要创建如下模型:
表 1 模型分析
包含的计算节点如下,这些节点与派单接口的输入参数名称一一对应:
|
||
选中“Blank”空白模板,在“标签”和“名称”文本框中输入“workOrderPopup”,单击“添加”。
平台实际创建的页面名称为“HW__workOrderPopup”,包含前缀“HW__”,对应首次创建应用时定义的命名空间。
单击页面上部的Mobile图标,切换到手机端设计模式。
定义模型“transInfo”。
定义模型“transList”。
拖拽页面组件。
将右侧组件区的“表单”拖拽到左侧“设计视图”中。
因为当前我们还没有定义数据源,单击“取消”,创建一个空的表单控件。
在“表单”内,拖入1个“栅格容器”。
绑定模型与组件。
定义页面on-load事件。
在弹出的事件编排器中,从左侧行为区,拖一个“自定义JS代码”到事件轴上,然后在右侧代码编辑区输入如下脚本代码。
//获取传入弹框的工单数据
let row = Page.params.row;
let workOrderId = row.workorderId;
$model.ref("transInfo").setData({ "workorderId": workOrderId });
//工单资产提供的接口:查询工单
let url = '/service/Workorder/0.1.0/Workorder/query';
let workorderquery = {
"start": 0,
"limit": 1,
"condition": {
"workorderId": {
"value": workOrderId
}
}
}
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(workorderquery),
credentials: 'same-origin'
}).then(function (resp) {
return resp.json()
}).then(function (data) {
let flowstatusId = data.result[0].workorders[0].workorderFlowStatus.id;
let translistquery = {
"start": 0,
"limit": 10,
"condition": {
"id": {
"value": flowstatusId
}
}
}
//工单资产提供的接口:查询流程状态
let url = '/service/Workorder/0.1.0/WorkorderFlowStatus/query';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(translistquery),
credentials: 'same-origin'
}).then(function (resp) {
return resp.json()
}).then(function (data) {
let transModel = [];
data.result[0].flowStatus[0].nextTransitions.forEach(function (status, idx) {
transModel.push({ "display": status.flowTransitionName, "value": status.id })
});
$model.ref('transList').setData(transModel);
}).catch(function (error) {
console.log('error is', error);
});
}).catch(function (error) {
console.log('error is', error);
});
单击事件编排器上方的图标,并退出事件编排。
单击界面上方预览图标,查看页面的展示效果。
因为这个页面需要从上一个页面获取工单信息,所以当前的预览效果只能看到“选择下一步”下拉框。