# 添加页面事件
通过在"***HW__***createWorkOrder"页面上，定义页面事件，实现将工单信息存入到工单对象中。
#### 实现"根据设备编码自动加载工单其他信息"
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添加"数据改变"事件代码   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432674986.png "点击放大")
   
   
2. 在右侧"事件"页签中，单击"数据改变"后的"+"。
3. 在"添加动作"弹窗的"自定义动作"中，输入如下事件代码。 
   事件代码中，"HW"为命名空间的名称，请根据实际需求进行替换。
   ```
   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. 在"添加动作"弹窗的"自定义动作"中，输入如下事件代码。
      事件代码中，"HW"为命名空间的名称，请根据实际需求进行替换。
      ```
      // 配置页面的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"页面中，单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432674978.png)，进入预览页面。
   
   系统会弹出"***HW__***createWorkOrder"预览页面。
   
   
2. 在"基本信息"区域的"设备名称"下拉框中，选中一个设备名称，检查"设备详情"区域是否显示了对应的设备详情。显示正确，则说明组件与模型的绑定，以及下拉框事件执行正确。如不显示，则需要检查相关事件代码。
3. 检查"工单类型"、"优先级"下拉框中，是否有值，显示正确则说明下拉框属性设置正确。