【华为云Astro 轻应用】组装“待处理工单”页面示例

因当前页面组件较多，因此分3个大步骤开发页面，先拖拽页面的前端组件，再定义页面模型，进行模型与前端组件绑定，最后为页面添加相应的事件代码。

页面组件分析

分析图1的组成，可以将整个页面分割为3个区域：页面标题、查询条件和待处理工单列表区域，如图2所示。

待处理工单列表通过在列表视图中，使用2个“分栏”的嵌套，组装出待处理工单列表区。

操作步骤

以下操作步骤只是给出的大致的拖拽方法，您可以根据需要，修改各组件的颜色、对齐方式、边距显示样式，使页面更美观。

定义模型并绑定页面组件

页面模型负责与页面组件交互，获取显示工单需要的数据。结合页面展示需求，可知需要创建如下模型：

定义页面中的事件代码

通过定义页面的on-load事件，可以实现打开页面即自动展示当前工程师的待处理工单。

1. 定义页面事件代码。
   1. 在“设计视图”中，选中最外层的“页面”。
   2. 在右侧“事件”页签中，单击“加载”后的“+”。
   3. 在添加事件弹窗中，输入如下脚本代码。

      $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);
      });

   4. 单击“创建”，退出事件编排窗口。

实现“按标题查询工单”

通过定义“查询”按钮的“点击”事件，可以实现根据工单标题查询工单的能力。

1. 在“设计视图”中，选中“查询”按钮。
2. 在右侧“事件”页签中，单击“点击”后的“+”。
3. 在添加事件弹窗中，输入如下脚本代码。

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

4. 单击“创建”，退出事件编排窗口。

实现“处理工单”

通过定义“处理”按钮的“点击”事件，可以实现接单、处理工单的能力。

1. 在“设计视图”中，选中“处理”按钮。
2. 在右侧“事件”页签中，单击“点击”后的“+”。
3. 在添加事件弹窗中，输入如下脚本代码。
   说明：

   脚本中红色内容请替换为实际的页面名。

   //获取当前组件（即button）
   let _component = context.$component.current;
   // 配置页面的bpm参数
   context.$page.params["bp.name"] = "HW__WorkOrderBpm";
   //获取当前行id
   let 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 tokencontext.$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);});});}
   });

4. 单击“创建”，退出事件编排窗口。

验证

通过PC端预览页面的方式，访问“待处理工单”页面进行测试。

说明：

请在PC端预览或测试“待处理工单”标准页面，当前版本不建议在手机端预览页面。

1. 打开“待处理工单”标准页面。
2. 单击界面上方的，进入预览页面。
3. 查看页面的展示效果。

   图16 工单列表页面

   

   如果当前租户开发者名下没有工单，所以当前的预览效果只能看到页面框架，没有工单。

   图17 无工单信息