组装“处理工单”对话框

“维修工程师处理工单”功能包含两个页面，一个是工程师查看待处理工单列表页面，一个是处理工单对话框。

“处理工单”对话框是一个手机端的Html5页面，负责指定下一环节的工单状态，是“待处理工单列表”页面中引用的对话框。

按照工程师在对话框中选定下一步流程状态，如图1所示。

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

页面模型分析

页面模型负责与页面组件交互，传递处理工单需要的工单ID、工单状态等信息。结合页面需求，“处理工单”对话框页面，需要创建如下模型：

表1 模型分析
模型名称	作用	详细定义
statusInfo	保存派单的参数。	自定义模型，包含的计算节点如下，这些节点与派单接口的输入参数名称一一对应。 id：工单ID HW__status__CST：下一环节状态须知：加粗斜体内容请替换为实际命名空间前缀。
statusOptions	判断下一步状态。	服务模型，绑定公共接口“judgeNextStatus”，调用“judgeNextStatus”脚本，判断下一步状态。

操作步骤

在“我的应用”中，单击“设备维修管理系统”，进入应用。
鼠标放在“Page”上，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。
在“标签”和“名称”文本框中输入“workOrderProcess”，单击“添加”。
当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。
单击页面右上部的，切换到手机端设计模式。

图2 切换手机端设计模式
定义模型“statusInfo”。
1. 在“模型视图”中，单击“新增模型”。
2. 添加自定义模型，模型名称“statusInfo”，单击“下一步”。
3. 单击“新增节点”，为模型添加节点“id”和“HW__status__CST”字段，字段类型都采用默认的Text。单击“下一步”，再单击“确定”，加粗斜体内容请替换为实际命名空间前缀。
4. 单击页面上方的，保存模型。
定义模型“statusOptions”。
1. 在“模型视图”中，单击“新增模型”。
2. 添加服务模型，模型名称“statusOptions”，单击“下一步”，
3. “服务类型”选择“API”，“选择项目”为“设备维修管理系统”，“搜索”中的API，选择“judgeNextStatus”，单击“下一步”，再单击“确定”。
4. 单击页面上方的，保存模型。
拖拽页面组件。
1. 从“模型视图”切换到“设计视图”。
2. 从左侧基本组件列表区中，拖拽1个“表单”到“页面内容”中。
  因为当前还没有定义数据源，单击“取消”元数据表单配置向导弹窗，创建一个空的表单控件。
3. 拖拽1个“分栏”到“表单”。
4. 修改“分栏”为1栏（1行1列）。
  图3 设置分栏为1行1列
5. 拖拽1个“下拉框”到分栏的“栏”中，然后选中下拉框，在右侧属性面板中，对下拉框进行以下配置。
  1. 添加值绑定。
    单击“数据绑定”下“值绑定”的，在弹窗中选择“ statusInfo”下的“HW__status__CST”字段。
  2. 添加属性值绑定。
    单击“属性值绑定”的“+”，设置“属性”为“选项”，“模型字段”为“statusOptions”下“outputParam”节点的“statusList”。
    图4 属性值绑定
  3. 修改“标签”为“选择下一步操作”，并设置“选项”为“user1，user1”、“user2，user2”。
    图5 设置选项值
  4. 单击页面上方的，保存设置。
定义页面事件代码。
1. 在“设计视图”中，选中最外层的“页面”。
2. 在右侧“事件”页签中，单击“加载”后的“+”。
3. 在添加动作弹窗中，输入如下事件代码，然后单击“创建”。
```
let id = Page.params.id;
$model.ref("statusInfo").setData({ "id": id });
$model.ref('statusOptions').setData({ inputParam: { "id": id } });
$model.ref('statusOptions').run();
```
4. 单击页面上方的，并退出事件编排。