添加页面事件

实现“根据设备编码自动加载工单其他信息”

1. 在“我的应用”中，单击“设备维修管理系统”，进入应用。
2. 单击打开“HW__createWorkOrder”页面。
3. 添加页面事件代码。
   1. 在“设计视图”中，选中最外层的“页面”，也可以直接单击组件导航，快速定位。
   2. 在右侧“事件”页签中，单击“加载”后的“+”，为页面添加事件代码。
   3. 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码，然后单击底部“创建”。

      $model.ref('equipmentOptions').setData({inputParam:{}});
      $model.ref('equipmentOptions').run().then(function(response){
      if(response.equipList){
              $model.ref("equipmentList").setData(response.equipList);
      }
      });

   4. 单击页面上方的，并退出事件编排。

实现“显示设备详细信息”

通过定义“基本信息”区域“设备名称”下拉框的“数据改变”事件，可以实现根据所选设备，在“设备详情”区域显示设备信息。

1. 在“HW__createWorkOrder”页面中，选中“设备名称”下拉框。
   图1 添加“数据改变”事件代码
   

2. 在右侧“事件”页签中，单击“数据改变”后的“+”。
3. 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码，然后单击底部“创建”。
   

   脚本中加粗斜体内容请替换为实际的命名空间前缀。

   let equipment = $model.ref("basicInfo").getData();
   let equipmentId = equipment.HW__equipmentId__CST; 
   let queryEquipParam = {"id" : equipmentId}; 
   $model.ref('equipmentOptions').setData({inputParam: queryEquipParam});
   $model.ref('equipmentOptions').run().then(function (response) { 
       if (response.equipment) {
           $model.ref("equipmentInfo").setData(response.equipment);
       }
   });

4. 单击页面上方的，并退出事件编排。

实现“生成工单”

通过定义“提交”按钮的“点击”事件，实现生成工单的能力。定义“取消”按钮的“点击”事件，返回工单列表页面（客服人员）。

1. 定义“提交”按钮“点击”事件。
   1. 在“HW__createWorkOrder”页面的“设计视图”下，选中“提交”按钮。
   2. 在右侧“事件”页签中，单击“点击”后的“+”。
   3. 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码，然后单击底部“创建”。
      

      脚本中加粗斜体内容请替换为实际的命名空间前缀。

      // 配置页面的bpm参数bp.name，通过submitTask方法启动BPM并提交工单数据workOrderData到BPM
      context.$page.params["bp.name"] = "HW__WorkOrderBpm";
      let basicInfo = $model.get('basicInfo').getData();
      basicInfo.HW__workOrderId__CST = basicInfo.HW__type__CST + "_" + new Date().getTime();
      let workOrderData = {
          "workOrderData": basicInfo
      };
      context.$bp.submitTask(workOrderData).then(function (resp) {
          context.$page.loadStdPage('HW__workOrderList');
      });

   4. 单击页面上方的，并退出事件编排。

2. 定义“取消”按钮的“点击”事件。
   1. 在“设计视图”中，选中“取消”按钮。
   2. 参考“提交”按钮，给“取消”按钮定义以下代码事件

      //返回工单列表页面
      context.$page.loadStdPage('HW__workOrderList');

   3. 单击页面上方的，并退出事件编排。

验证

页面组装及事件添加完成后，需要在预览页面，初步检查页面预览效果，验证页面的数据绑定及事件代码正确性。当前工单流转相关的BPM及工单列表尚未创建，因此暂不验证“保存”、“取消”按钮。

1. 在“HW__createWorkOrder”页面中，单击界面上方的，进入预览页面。

   系统会弹出“HW__createWorkOrder”预览页面。

2. 在“基本信息”区域的“设备名称”下拉框中，选中一个设备名称，检查“设备详情”区域是否显示了对应的设备详情。显示正确，则说明组件与模型的绑定，以及下拉框事件执行正确。如不显示，则需要检查相关事件代码。
3. 检查“工单类型”、“优先级”下拉框中，是否有值，显示正确则说明下拉框属性设置正确。