# 组装"处理工单"对话框
"维修工程师处理工单"功能包含两个页面，一个是工程师查看待处理工单列表页面，一个是处理工单对话框。
"处理工单"对话框是一个手机端的Html5页面，负责指定下一环节的工单状态，是"待处理工单列表"页面中引用的对话框。
按照工程师在对话框中选定下一步流程状态，如[图1]所示。
图1现场工程师处理工单对话框   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071681.png "点击放大")
#### 页面模型分析
页面模型负责与页面组件交互，传递处理工单需要的工单ID、工单状态等信息。结合页面需求，"处理工单"对话框页面，需要创建如下模型：
表1模型分析 
| 模型名称          | 作用       | 详细定义                                                                                                                                                                                                                                                                                                                                                                     |
|:---|:---|:---|
| statusInfo    | 保存派单的参数。 | 自定义模型，包含的计算节点如下，这些节点与派单接口的输入参数名称一一对应。 **加粗斜体内容**请替换为实际命名空间前缀。 - id：工单ID  - ***HW__***status__CST：下一环节状态   |
| statusOptions | 判断下一步状态。 | 服务模型，绑定公共接口"judgeNextStatus"，调用"judgeNextStatus"脚本，判断下一步状态。                                                                                                                                                                                                                                                                                                              |
   
#### 操作步骤
1. 在"我的应用"中，单击"设备维修管理系统"，进入应用。
2. 鼠标放在"Page"上，单击界面上出现的"+"，在弹出菜单中选择"标准页面"。
3. 在"标签"和"名称"文本框中输入"workOrderProcess"，单击"添加"。 
   当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911389.png)进行锁定。
   
   
4. 单击页面右上部的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071673.png)，切换到手机端设计模式。
5. 定义模型"statusInfo"。 
   1. 在"模型视图"中，单击"新增模型"。
   
   2. 添加自定义模型，模型名称"statusInfo"，单击"下一步"。
   
   3. 单击"新增节点"，为模型添加节点"id"和"***HW__***status__CST"字段，字段类型都采用默认的Text。单击"下一步"，再单击"确定"，加粗斜体内容请替换为实际命名空间前缀。
   
   4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231173.png)，保存模型。
   
   
   
   
6. 定义模型"statusOptions"。 
   1. 在"模型视图"中，单击"新增模型"。
   
   2. 添加服务模型，模型名称"statusOptions"，单击"下一步"，
   
   3. "服务类型"选择"公共接口"，"选择项目"为"设备维修管理系统"，"搜索"中的接口选择"judgeNextStatus"，单击"下一步"，再单击"确定"。
   
   4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432834874.png)，保存模型。
   
   
   
   
7. 拖拽页面组件。 
   1. 从"模型视图"切换到"设计视图"。
   
   2. 从左侧基本组件列表区中，拖拽1个"表单"到"页面内容"中。 因为当前还没有定义数据源，单击"取消"元数据表单配置向导弹窗，创建一个空的表单控件。
      
   
   3. 拖拽1个"分栏"到"表单"。
   
   4. 修改"分栏"为1栏（1行1列）。
      图2设置分栏为1行1列   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432674922.png "点击放大") 
   
   5. 拖拽1个"下拉框"到分栏的"栏"中，然后选中下拉框，在右侧属性面板中，对下拉框进行以下配置。
      1. 添加值绑定。 单击"数据绑定"下"值绑定"的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991121.png)，在弹窗中选择" statusInfo"下的"***HW__***status__CST"字段。
         
      
      2. 添加属性值绑定。
         单击"属性值绑定"的"+"，设置"属性"为"选项"，"模型字段"为"statusOptions"下"outputParam"节点的"statusList"。
         图3属性值绑定   
         ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231165.png) 
      
      3. 修改"标签"为"选择下一步操作"，并设置"选项"为"user1，user1"、"user2，user2"。
         图4设置选项值   
         ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151766.png) 
      
      4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432834878.png)，保存设置。
       
   
   
   
   
8. 定义页面事件代码。 
   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. 单击"创建"，退出事件编排窗口。
   
   5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001963323857.png)，保存页面。
   
   
   
   
 
#### 验证
单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151770.png)，进入预览页面，查看页面的展示效果。
因为这个页面需要从上一个页面获取工单信息，所以当前的预览效果只能看到"选择下一步"下拉框。