更新时间:2022-04-27 GMT+08:00
分享

添加页面事件

通过在“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 添加“数据改变”事件代码

  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. 检查“工单类型”、“优先级”下拉框中,是否有值,显示正确则说明下拉框属性设置正确。
分享:

    相关文档

    相关产品

close