# 组装"工单列表（派单员）"页面
"工单列表（派单员）"页面与"工单列表（客服人员）"页面相比，大致功能一致，仅多了一个操作列，操作列中包含了派单员需要使用的派单图标。
因为两个页面很相似，所以为了快速创建，可以将"工单列表（客服人员）"页面保持为一个模板，再引用这个模板创建新的页面。
#### 操作步骤
1. 在"我的应用"中，单击"设备维修管理系统"，进入应用。
2. 使用"工单列表（客服人员）"页面创建新页面。 
   1. 打开"***HW__*** workOrderList"，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071921.png)锁定页面。
   
   2. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911641.png)，另存为页面。
   
   3. 如[图1]所示，在弹出对话框中设置模板标签和名称为"dispatchWorkOrder"，单击"创建"。
      您可以看到新创建页面继承了原"工单列表（客服人员）"页面中的组件、模型和事件代码。
      图1保存页面模板   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152006.png "点击放大") 
   
   
   
   
3. 删除"创建工单"功能。 
   选中"创建工单"按钮所在的"数据表格-工具栏"，单击鼠标右键，单击"删除"，删除前请确认已选中"创建工单"按钮，以免误删其他组件。
   
   
4. 为查询结果增加操作列。 
   1. 在左侧"设计视图"中，选中"表格"，单击右侧"属性"页签"表格列"中的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675170.png)，添加操作列。
      图2增加操作列   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992762.png) 
   
   2. 单击上图中Operation1后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835114.png)。
   
   3. 在"属性配置"对话框中进行以下配置。
      1. 修改"列标题"为"操作"，单击"添加操作按钮"。
      
      2. 设置按钮"标签"为"派单"，"图标"选择"shuffle"，并在"禁用"中输入"$row.***HW__*** status__CST!="待派单""，即是当工单状态为"待派单"时，该按钮才可以使用。"***HW__*** "请修改为实际命名空间前缀。
         图3为操作列增加派单按钮   
         ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911637.png "点击放大") 
       
   
   4. 单击[图3]中"派单"按钮的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675166.png)，再单击"添加动作"的"+"，进入事件编排中，在事件编排页面，添加如下事件代码，然后单击"创建"。
      脚本中加**红色内容** 请替换为实际的页面名。
      ```
      let _component = context.$component.current;
      // 配置页面的bpm参数
      context.$page.params["bp.name"] = "HW__WorkOrderBpm";
      let currentRow = _component.$attrs.row;
      let workOrderId = currentRow.HW__workOrderId__CST;
      let instanceId = currentRow.HW__instanceId__CST;
      let taskId = "";
      let _model = $model.ref("workOrderInstance");
      context.$dialog.popup(
          {
              title: '处理工单',     //弹出框标题
              page: 'HW__workOrderDispatch', // 弹出页面名称
              footerHide: false,
              width: 20, //宽，小于100为百分比，大于100为px
              height: 250, // 高px
              okText: '确定',
              cancelText: '取消',
              params: {
                  "workOrderId": workOrderId
              }, //页面参数
              onCancel: () => {
                  $model.ref("transInfo").setData({});
              },  // 取消时，回调
              onOk: () => {
                  // 确定时，回调
                  //debugger;
                  let transInfo = { "transInfo": $model.ref("transInfo").getData() };
                  let taskData = {
                      "action": "complete",
                      "variables": transInfo
                  };
       
                  // 获取csrf token
                  context.$utils.getCSRFToken().then(function (token) {
                      let url = '/u-route/baas/bp/v2.0/query/tasks?flag=activeTask&rootID=' + instanceId;
                      fetch(url, {
                          method: 'GET',
                          headers: {
                              'Content-Type': 'application/json',
                              'CSRF-Token': token
                          }
                      }).then(function (resp) {
                          resp.json().then(function (data) {
                              taskId = data.result.Recs[0].id;
                              let url2 = '/u-route/baas/bp/v2.0/runtime/tasks/' + taskId;
                              fetch(url2, {
                                  method: 'PUT',
                                  headers: {
                                      'Content-Type': 'application/json'
                                  },
                                  body: JSON.stringify(taskData)
                              }).then(function (resp) {
                                  context.$message.success('派发成功');
                                  let pageInfo = $model.ref('table_0_condition').getData().pageInfo;
                                  let queryData = {
                                      "start": (pageInfo.curPage - 1) * pageInfo.pageSize,
                                      "limit": pageInfo.pageSize
                                  };
                                  $model.ref('queryWorkOrder').setData({ inputParam: queryData });
                                  $model.ref('queryWorkOrder').run().then(function (data) {
                                      $model.ref('workOrderInstance').setData(data.workOrderList);
                                      pageInfo.total = parseInt(data.total);
                                      $model.ref('table_0_condition').setData({ "pageInfo": pageInfo });
                                  }).catch(function (error) {
                                      console.log('error is', error);
                                  });
                              }).catch(function (error) {
                                  console.log('error is', error);
                              });
                          });
                      }).catch(function (error) {
                          console.log('error is', error);
                      });
                  });
              }
          }
      );
      ```
      
   
   5. 单击"确定"，关闭"属性配置"对话框。
   
   6. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991365.png)，保存设置。
   
   
   
   
5. **检查页面** 加载事件是否从模板复制过来。如果已经复制过来，则**忽略这步** 。
   
   1. 选中最外层的"页面"，在右侧"事件"页签中，单击"点击"后的"+"。
   
   2. 在添加动作弹窗中，输入如下脚本代码。
      ```
      let pageInfo = $model.ref('table_0_condition').getData().pageInfo;
      let queryData ={
      "start":(pageInfo.curPage -1)* pageInfo.pageSize,
      "limit": pageInfo.pageSize
      };
      $model.ref('queryWorkOrder').setData({ inputParam: queryData });
      $model.ref('queryWorkOrder').run().then(function(data){
          $model.ref('workOrderInstance').setData(data.workOrderList);
          pageInfo.total = parseInt(data.total);
          $model.ref('table_0_condition').setData({"pageInfo": pageInfo });
      }).catch(function(error){
          console.log('error is', error);
      });
      ```
      
   
   3. 单击"创建"，退出事件编排窗口。