OneNET应用开发环境 由浅入深应用开发环境
应用开发环境介绍 初识应用开发环境 开发入门 开发进阶
开发指南
开发应用 定义数据对象 创建聚合对象 开发脚本 管理事件 开发流 配置审批流程 开发标准页面 开发高级页面 开发商业流 配置连接器 开发Email发送功能 配置工作流 开发报表 自定义BO 管理平台

拖拽组装“处理工单”对话框

“处理工单”对话框是一个手机端的Html5页面,负责指定下一环节的工单状态,用标准页面功能实现。

按照用2小时定义电梯维护流程假定的流程,工程师在对话框中选定下一步流程状态,如图1所示。

图 1 现场工程师处理工单对话框

页面模型负责与页面组件交互,传递处理工单需要的工单ID、工单状态等信息。结合页面需求,可知需要创建如下模型:

表 1 模型分析

模型名称

作用

详细定义

transInfo

保存派单的参数

自定义模型

包含的计算节点如下,这些节点与派单接口的输入参数名称一一对应:

  • workorderId:工单ID
  • nextTransition:下一环节状态

transList

下一步下拉框的可选项

自定义模型,在页面on-load事件中为其赋值。

开发步骤

  1. 进入之前创建的应用。
  2. 鼠标放在“Page”上,单击界面上出现的“+”,在弹出菜单中选择“标准页面”。
  3. 选中“Blank”空白模板,在“标签”和“名称”文本框中输入“workOrderPopup”,单击“添加”。

    平台实际创建的页面名称为“HW__workOrderPopup”,包含前缀“HW__”,对应首次创建应用时定义的命名空间。

  4. 单击页面上部的Mobile图标,切换到手机端设计模式。

  5. 定义模型“transInfo”。

    1. 在“模型视图”单击“新建模型”。
    2. 添加自定义模型,模型名称“transInfo”,单击“下一步”。
    3. 为模型添加节点“workorderId”和“nextTransition”字段,单击“下一步”,再单击“确定”。
    4. 单击页面上部的保存图标。
  6. 定义模型“transList”。

    1. 在“模型视图”单击“新建模型”。
    2. 添加自定义模型,模型名称“transList”,单击“下一步”,再单击“确定”。
    3. 单击页面上部的保存图标。
  7. 拖拽页面组件。

    1. 从“模型视图”切换到“设计视图”。
    2. 将右侧组件区的“表单”拖拽到左侧“设计视图”中。

      因为当前我们还没有定义数据源,单击“取消”,创建一个空的表单控件。

    3. 在“表单”内,拖入1个“栅格容器”。

    4. 修改“栅格容器”为3行。
    5. 在“栅格容器”的第1行,拖入1个“输入框”,修改其“标签”为“工单ID”,并打开“隐藏”开关。
    6. 在“栅格容器”的第2行,拖入1个“下拉框”,修改其“标题”为“选择下一步”。
    7. 单击页面上部的保存图标。
  8. 绑定模型与组件。

    1. “工单ID”输入框绑定“transInfo.workorderId”。
    2. “选择下一步”输入框绑定“transInfo.nextTransition”,并为其增加属性值绑定:“属性”为“选项”,“模型字段”为“transList”。
    3. 单击页面上部的保存图标。
  9. 定义页面on-load事件。

    1. 在“设计视图”中选中最外层的“页面”。
    2. 在右侧“事件”页签中单击“on-load”后的
    3. 在弹出的事件编排器中,从左侧行为区,拖一个“自定义JS代码”到事件轴上,然后在右侧代码编辑区输入如下脚本代码。

      //获取传入弹框的工单数据
      let row = Page.params.row;
      let workOrderId = row.workorderId;
      
      $model.ref("transInfo").setData({ "workorderId": workOrderId });
      
      //工单资产提供的接口:查询工单
      let url = '/service/Workorder/0.1.0/Workorder/query';
      let workorderquery = {
          "start": 0,
          "limit": 1,
          "condition": {
              "workorderId": {
                  "value": workOrderId
              }
          }
      }
      
      fetch(url, {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify(workorderquery),
          credentials: 'same-origin'
      }).then(function (resp) {
          return resp.json()
      }).then(function (data) {
          let flowstatusId = data.result[0].workorders[0].workorderFlowStatus.id;
          let translistquery = {
              "start": 0,
              "limit": 10,
              "condition": {
                  "id": {
                      "value": flowstatusId
                  }
              }
          }
          //工单资产提供的接口:查询流程状态
          let url = '/service/Workorder/0.1.0/WorkorderFlowStatus/query';
          fetch(url, {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json'
              },
              body: JSON.stringify(translistquery),
              credentials: 'same-origin'
          }).then(function (resp) {
              return resp.json()
          }).then(function (data) {
              let transModel = [];
              data.result[0].flowStatus[0].nextTransitions.forEach(function (status, idx) {
                  transModel.push({ "display": status.flowTransitionName, "value": status.id })
              });
      
              $model.ref('transList').setData(transModel);
          }).catch(function (error) {
              console.log('error is', error);
          });
      
      }).catch(function (error) {
          console.log('error is', error);
      });
      
    4. 单击事件编排器上方的图标,并退出事件编排。

    5. 单击页面上部的保存图标。

验证

单击界面上方预览图标,查看页面的展示效果。

因为这个页面需要从上一个页面获取工单信息,所以当前的预览效果只能看到“选择下一步”下拉框。

results matching ""

    No results matching ""