开发“维修工程师处理工单”功能-华为云

ASTRO轻应用 ASTROZERO-组装“处理工单”对话框:操作步骤

操作步骤在“我的应用”中，单击“设备维修管理系统”，进入应用。鼠标放在“Page”上，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。在“标签”和“名称”文本框中输入“workOrderProcess”，单击“添加”。当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。单击页面右上部的，切换到手机端设计模式。图2 切换手机端设计模式定义模型“statusInfo”。在“模型视图”中，单击“新增模型”。添加自定义模型，模型名称“statusInfo”，单击“下一步”。单击“新增节点”，为模型添加节点“id”和“HW__status__ CS T”字段，字段类型都采用默认的Text。单击“下一步”，再单击“确定”，加粗斜体内容请替换为实际命名空间前缀。单击页面上方的，保存模型。定义模型“statusOptions”。在“模型视图”中，单击“新增模型”。添加服务模型，模型名称“statusOptions”，单击“下一步”， “服务类型”选择“公共接口”，“选择项目”为“设备维修管理系统”，“搜索”中的接口选择“judgeNextStatus”，单击“下一步”，再单击“确定”。单击页面上方的，保存模型。拖拽页面组件。从“模型视图”切换到“设计视图”。从左侧基本组件列表区中，拖拽1个“表单”到“页面内容”中。因为当前还没有定义数据源，单击“取消”元数据表单配置向导弹窗，创建一个空的表单控件。拖拽1个“分栏”到“表单”。修改“分栏”为1栏（1行1列）。图3 设置分栏为1行1列拖拽1个“下拉框”到分栏的“栏”中，然后选中下拉框，在右侧属性面板中，对下拉框进行以下配置。添加值绑定。单击“数据绑定”下“值绑定”的，在弹窗中选择“ statusInfo”下的“HW__status__CST”字段。添加属性值绑定。单击“属性值绑定”的“+”，设置“属性”为“选项”，“模型字段”为“statusOptions”下“outputParam”节点的“statusList”。图4 属性值绑定修改“标签”为“选择下一步操作”，并设置“选项”为“user1，user1”、“user2，user2”。图5 设置选项值单击页面上方的，保存设置。定义页面事件代码。在“设计视图”中，选中最外层的“页面”。在右侧“事件”页签中，单击“加载”后的“+”。在添加动作弹窗中，输入如下事件代码。 let id = Page.params.id; $model.ref("statusInfo").setData({ "id": id }); $model.ref('statusOptions').setData({ inputParam: { "id": id } }); $model.ref('statusOptions').run(); 单击“创建”，退出事件编排窗口。单击页面上方的，保存页面。

ASTRO轻应用 ASTROZERO 开发“维修工程师处理工单”功能

ASTRO轻应用 ASTROZERO-组装“处理工单”对话框:页面模型分析

页面模型分析页面模型负责与页面组件交互，传递处理工单需要的工单ID、工单状态等信息。结合页面需求，“处理工单”对话框页面，需要创建如下模型：表1 模型分析模型名称作用详细定义 statusInfo 保存派单的参数。自定义模型，包含的计算节点如下，这些节点与派单接口的输入参数名称一一对应。 id：工单ID HW__status__CST：下一环节状态须知：加粗斜体内容请替换为实际命名空间前缀。 statusOptions 判断下一步状态。服务模型，绑定公共接口“judgeNextStatus”，调用“judgeNextStatus”脚本，判断下一步状态。

ASTRO轻应用 ASTROZERO 开发“维修工程师处理工单”功能

ASTRO轻应用 ASTROZERO-创建“判断下一步状态”脚本

创建“判断下一步状态”脚本在“我的应用”中，单击“设备维修管理系统”，进入应用。在“WorkOrder”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“judgeNextStatus”，单击“添加”。当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。在代码编辑器中插入如下脚本代码。脚本中红色内容请替换为实际的对象名、字段名。 //本脚本用于判断下一步状态变化 import * as db from 'db';//导入处理object相关的标准库 import * as context from 'context';//导入上下文相关的标准库 //定义入参结构，入参包含1个参数：workOrder对象，为必填字段 @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'String', required: true, label: 'String' }) id: string; } //定义出参结构，出参包含1个参数，workOrder的记录id @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'Any', label: 'Object', isCollection: true }) statusList: object[]; } //使用数据对象HW__WorkOrder__CST @useObject(['HW__WorkOrder__CST']) @action.object({ type: "method" }) export class JudgeNextStatus { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public judgeNextStatus(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let id = input.id; let s = db.object('HW__WorkOrder__CST'); //获取HW__WorkOrder__CST这个Object的操作实例 //查询条件 let condition = { "conjunction": "AND", "conditions": [{ "field": "id", "operator": "eq", "value": id }] }; let workOrder = s.queryByCondition(condition); if (workOrder) { if (workOrder[0].HW__status__CST == "待接单") { out.statusList = [ { 'value': "接单", 'display': "接单" }, { 'value': "拒单", 'display': "拒单" }]; } if (workOrder[0].HW__status__CST == "处理中") { out.statusList = [{ 'value': "关单", 'display': "关单" }]; } } } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; } } 单击编辑器上方的，保存脚本。测试脚本能否正常执行。单击编辑器上方的，执行脚本。在界面底部，输入如下输出参数报文，单击测试窗口右上角执行图标，“ceHg000000e0glLbDQ2K”则是派单员操作的当前工单记录的工单id，您可以在处理工单脚本的测试结果中获取一个id值。 { "id": "ceHg000000e0glLbDQ2K" } 执行成功，会在“输出”页签返回查询结果。图1 返回下一步状态测试成功，单击编辑器上方的，启用发布脚本。父主题：开发“维修工程师处理工单”功能

ASTRO轻应用 ASTROZERO 开发“维修工程师处理工单”功能

APPCUBE-组装“待处理工单”页面:实现“按标题查询工单”

实现“按标题查询工单” 通过定义“查询”按钮的“点击”事件，可以实现根据工单标题查询工单的能力。在“设计视图”中，选中“查询”按钮。在右侧“事件”页签中，单击“点击”后的“+”。在添加事件弹窗中，输入如下脚本代码。 let queryTitle = $model.ref('queryCondition').getData().title;$model.ref('queryWorkOrder').setData({ inputParam: { "title": queryTitle, "isFME": true } });$model.ref('queryWorkOrder').run().then(function (data) { if (data && data.workOrderList) { //将查询到的数据赋值给页面模型来展示 $model.ref('workOrderList').setData(data.workOrderList); }}).catch(function (error) { console.log('error is', error);}); 单击页面上方的，并退出事件编排。

APPCUBE 开发“维修工程师处理工单”功能

APPCUBE-组装“待处理工单”页面:定义页面中的事件代码

定义页面中的事件代码通过定义页面的on-load事件，可以实现打开页面即自动展示当前工程师的待处理工单。定义页面事件代码。在“设计视图”中，选中最外层的“页面”。在右侧“事件”页签中，单击“加载”后的“+”。在添加事件弹窗中，输入如下脚本代码。 $model.ref('queryWorkOrder').setData({inputParam: {"isFME": true}});$model.ref('queryWorkOrder').run().then(function (data) { if (data && data.workOrderList) { //将查询到的数据赋值给页面模型来展示 $model.ref('workOrderList').setData(data.workOrderList); }}).catch(function (error) { console.log('error is', error);}); 单击页面上方的，并退出事件编排。

APPCUBE 开发“维修工程师处理工单”功能

APPCUBE-组装“待处理工单”页面:实现“处理工单”

实现“处理工单” 通过定义“处理”按钮的“点击”事件，可以实现接单、处理工单的能力。在“设计视图”中，选中“处理”按钮。在右侧“事件”页签中，单击“点击”后的“+”。在添加事件弹窗中，输入如下脚本代码。脚本中红色内容请替换为实际的页面名。 //获取当前组件（即button）let _component = context.$component.current;// 配置页面的bpm参数context.$page.params["bp.name"] = "HW__WorkOrderBpm";//获取当前行idlet id = _component.$attrs.row.id;let taskId = "";let instanceId = "";//遍历获取当前行内容let row = {};let workorders = $model.ref('workOrderList').getData();workorders.forEach(function (wo, idx) { if (wo.id == id) { row = wo; instanceId = wo.HW__instanceId__CST; }}); //打开处理弹框context.$dialog.popup({ title: '处理工单', page: 'HW__workOrderProcess', footerHide: false, width: 20, height: 180, okText: '提交', cancelText: '取消', params: { id: id, row: row }, onCancel: function () { }, onOk: function () { let statusInfo = { "statusInfo": $model.ref("statusInfo").getData() }; let taskData = { "action": "complete", "variables": statusInfo }; // 获取csrf token context.$utils.getCSRFToken().then(function (token) { let url = '/u-route/baas/bp/v2.0/query/tasks?flag=activeTask&rootID=' + instanceId; fetch(url, { method: 'GET', headers: { 'Content-Type': 'application/json', 'CSRF-Token': token } }).then(function (resp) { resp.json().then(function (data) { taskId = data.result.Recs[0].id; let url2 = '/u-route/baas/bp/v2.0/runtime/tasks/' + taskId; fetch(url2, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(taskData) }).then(function (resp) { context.$message.success('处理成功'); $model.ref('queryWorkOrder').setData({ inputParam: {"isFME": true} }); $model.ref('queryWorkOrder').run().then(function (data) { if (data && data.workOrderList) { //将查询到的数据赋值给页面模型来展示 $model.ref('workOrderList').setData(data.workOrderList); } }).catch(function (error) { console.log('error is', error); }); }).catch(function (error) { console.log('error is', error); }); }); }).catch(function (error) { console.log('error is', error); }); }); }}); 单击页面上方的，并退出事件编排。

APPCUBE 开发“维修工程师处理工单”功能

APPCUBE-组装“待处理工单”页面:定义模型并绑定页面组件

定义模型并绑定页面组件页面模型负责与页面组件交互，获取显示工单需要的数据。结合页面展示需求，可知需要创建如下模型：表2 模型分析模型名称作用详细定义 workOrderList 保存工单的基本信息。自定义模型，包含的字段节点如下，这些节点与工单对象的字段名称相同，加粗斜体内容请替换为实际命名空间前缀： HW__title__CST：工单标题，字段类型Text。 HW__workOrderId__CST：工单ID，字段类型Text。 HW__priority__CST：工单优先级，字段类型Text。 id：记录ID，字段类型Text。 HW__recoveryTime__CST：要求解决时间，字段类型Text。 HW__faultPhenomenon__CST：现场故障说明，字段类型Text。 HW__status__CST：工单状态，字段类型Text。 HW__instanceId__CST：工单绑定的BPM实例的id，字段类型Text。 HW__arriveTime__CST：要求到达时间，字段类型Text。 isDeal：判断工单状态字段，字段类型Bool。 queryCondition 查询条件。自定义模型，包含字段节点：title，字段类型Text，与页面上的查询条件对应。 queryWorkOrder 查询工单。服务模型，绑定公共接口“ queryWorkOrder”，调用查询工单逻辑。 total 保存满足查询条件的记录数，作为Scroll组件滚动显示时的累计记录数。自定义模型，包含的字段节点如下： currentTotal：当前页显示的数量，字段类型Text。 actualTotal：实际总数量，字段类型Text。定义模型“workOrderList”。单击“模型视图”，切换到模型视图。在模型视图中，单击“新增模型”。添加自定义模型，模型名称“workOrderList”，单击“下一步”。单击“新增节点”，依次增加表2中列出的字段名称，单击“下一步”，再单击“确定”。单击页面上方的，保存模型。定义模型“queryCondition”。在“模型视图”中，单击“新增模型”。添加自定义模型，模型名称“queryCondition”，单击“下一步”。单击“新增节点”，依次增加表2中列出的字段名称，单击“下一步”，再单击“确定”。单击页面上方的，保存模型。定义模型“total”。在“模型视图”中，单击“新增模型”。添加自定义模型，模型名称“total”，单击“下一步”。单击“新增节点”，依次增加表2中列出的字段名称，单击“下一步”，再单击“确定”。单击页面上方的，保存模型。定义模型“queryWorkOrder”。在“模型视图”中，单击“新增模型”。添加服务模型，模型名称“queryWorkOrder”，单击“下一步”， “服务类型”选择“API”，“选择项目”为“设备维修管理系统”，“搜索”中的API，选择“queryWorkOrder”，单击“下一步”，再单击“确定”。单击页面上方的，保存模型。绑定模型“workOrderList”。单击“设计视图”，从“模型视图”切换到“设计视图”。选中“列表视图容器”标签中的“列表视图”标签（不要选择列表视图容器），为其绑定“workOrderList”。图11 绑定数据模型如图12所示，选中“标题：”后的标签组件label，在右侧“属性”页签，单击“+”，增加属性值绑定：设置“属性”为“文本内容”，“模型字段”为“workOrderList”下的“HW__title__CST”。图12 为标签绑定模型依次为其他标签添加属性值绑定，具体绑定的字段如表3所示。表3 标签的属性值绑定所在分栏第一栏第二栏第二栏标签绑定的字段 1 标题： label workOrderList.HW__title__CST 2 单号： label workOrderList.HW__workOrderId__CST 3 状态： label workOrderList.HW__status__CST 4 要求到达时间： label workOrderList.HW__arriveTime__CST 5 要求解决时间： label workOrderList.HW__recoveryTime__CST 6 现场故障说明： label workOrderList.HW__faultPhenomenon__CST 7 优先级： label workOrderList.HW__priority__CST 为“处理”按钮添加属性值绑定，“属性”设置为“禁用”，绑定“workOrderList”的“isDeal”字段，绑定后为“workOrderList.isDeal”。图13 添加属性值绑定单击页面上方的，保存设置。绑定模型“queryCondition”。选中“请输入工单完整标题”输入框，为其进行值绑定，绑定字段为“queryCondition.title”。图14 绑定工单标题单击页面上方的，保存设置。

APPCUBE 开发“维修工程师处理工单”功能

云服务器内容精选

开发“维修工程师处理工单”功能

7*24

备案

专业服务

退订

建议反馈

售前咨询热线