# 组装"派单"对话框
"派单"对话框负责指定下一环节的工单状态和处理责任人，用标准页面功能实现。
派单界面的大致构想如[图1]所示，其中"工单ID"是为了传递维修工单信息。
图1派单员派单对话框   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231373.png)
页面模型负责与页面组件交互，传递派单需要的工单ID、工单状态、下一环节处理人等信息。结合页面需求，可知需要创建如下模型：
表1模型分析 
| 模型名称          | 作用                      | 详细定义                                                                                                                                                                                                                                                                                                                                                           |
|:---|:---|:---|
| transInfo     | 保存派单的参数。                | 自定义模型，包含的计算节点如下，这些节点与派单接口的输入参数名称一一对应。 - ***HW__***workOrderId__CST：工单ID  - ***HW__***assignedFme__CST：下一环节处理人   加粗斜体内容请替换为实际命名空间前缀。 |
| workerOptions | 查询系统中的工程师信息，下一环节处理的可选项。 | 服务模型，与公共接口queryWorker关联。                                                                                                                                                                                                                                                                                                                                       |
   
#### 操作步骤
1. 在"我的应用"中，单击"设备维修管理系统"，进入应用。
2. 在"WorkOrder"中，鼠标放在"Page"上，单击界面上出现的"+"，在弹出菜单中选择"标准页面"。
3. 在"标签"和"名称"文本框中输入"workOrderDispatch"，单击"添加"。 
   当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992710.png)进行锁定。
   
   
4. 定义模型"transInfo"。 
   1. 在"模型视图"中，单击"新增模型"。
   
   2. 添加自定义模型，模型名称"transInfo"，单击"下一步"。
   
   3. 为模型添加节点"***HW__*** workOrderId__CST"（字段类型Text）、"***HW__***assignedFme__CST"（字段类型Any），单击"下一步"，再单击"确定"，加粗斜体内容请替换为实际命名空间前缀。
   
   4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071889.png)，保存模型。
   
   
   
   
5. 定义模型"workerOptions"。 
   1. 在"模型视图"中，单击"新增模型"。
   
   2. 添加服务模型，模型名称"workerOptions"，单击"下一步"。
   
   3. "项目"选择"设备维修管理系统"，并为模型关联API"queryWorker"，单击"下一步"，再单击"确定"。
   
   4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071881.png)，保存模型。
   
   
   
   
6. 拖拽页面组件。 
   1. 单击"设计视图"，返回页面设计。
   
   2. 将左侧基本组件区的"表单"拖拽到右侧页面中。 因为当前还没有定义数据源，单击"取消"，创建一个空的表单控件。
      
   
   3. 拖拽一个"分栏"到表单中。
   
   4. 选中"分栏"，在右侧单击PC下的单行图标，修改分栏为1栏，再单击"新增行"的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231381.png)，修改为2个分栏，每个分栏中有1栏。
      图2设置分栏为1栏   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151974.png) 
   
   5. 在第1个分栏中拖入一个"输入框"，在第2个分栏中拖入一个"下拉框"。
      图3拖入输入框、下拉框到分栏   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991333.png "点击放大") 
   
   6. 选中"输入框"，在右侧属性面板中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991325.png)，在选择模型弹窗中，选择"transInfo"下的"***HW__***workOrderId__CST"字段，并修改其"标签"为"工单ID"。
   
   7. 选择下拉框进行以下设置。
      1. 在右侧属性面板中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071893.png)，在选择模型弹窗中，选择"transInfo"下的"***HW__***assignedFme__CST"字段，修改"标题"为"选择工程师"。
      
      2. 单击"属性值绑定"后的"+"，设置"属性"为"选项"，"模型字段"为"workerOptions.outputParam.userList"，即绑定属性值为服务对象的返回值。
         图4绑定服务对象的返回值   
         ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151966.png) 
      
      3. 开启"弹层独立"。
         图5启用弹层独立   
         ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231377.png) 
       
   
   8. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675126.png)，保存设置。
   
   
   
   
7. 定义页面事件代码。 
   1. 在"设计视图"中选中最外层的"页面"，在右侧"事件"页签中，单击"加载"后的"+"，进入编辑动作页面。
   
   2. 在"自定义动作"中，输入如下脚本代码。
      **红色内容** 请替换为实际命名空间前缀。
      ```
      let workOrderId = Page.params.workOrderId;
      $model.ref("transInfo").setData({ "HW__workOrderId__CST": workOrderId });
      //查询维修人员列表，作为维修人员下拉框的可选值
      $model.ref('workerOptions').setData({ inputParam: {} });
      $model.ref('workerOptions').run();
      ```
      
   
   3. 单击"创建"，关闭事件编排器，返回到页面。
   
   4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001963203657.png)，保存页面。
   
   
   
   
 
#### 验证
单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675122.png)，进入预览页面，查看页面的展示效果。
因为这个页面需要从上一个页面获取工单信息，所以当前的预览效果只能看到空白"工单ID"以及"选择工程师"下拉框。