# 组装"工单管理"页面
管理员的"工单管理"页面与"工单列表（派单员）"页面相比，大致功能一致，仅多了一个创建工单功能，和操作列中的删除按钮。因为两个页面很相似，所以为了快速创建，将通过"工单列表（派单员）"页面另存一个页面，然后再改造这个另存后的页面成为"管理员管理工单"页面。
"工单管理"页面是在"工单列表（派单员）"基础上创建的，因此该页面创建完成后，就已经具备了"查询工单"、"派发工单"的功能，而在本节的开发步骤中，主要为该页面添加"创建工单"、"删除工单"功能即可。其中，"创建工单"功能与"工单列表（客服人员）"页面中的创建方法基本一致。
#### 操作步骤
1. 在经典版开发环境"首页 \> 我的应用"中，单击"设备维修管理系统"，进入应用。
2. 使用"工单列表（派单员）"页面创建模板。 
   1. 打开"***HW__*** dispatchWorkOrder"，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152030.png)锁定页面。
   
   2. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835118.png)，保存模板。
   
   3. 如[图1]所示，在弹出对话框中设置页面标签和名称为"manageWorkOrder"，单击"创建"。
      图1保存页面模板   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231421.png "点击放大") 
   
   
   
   
3. 检查及创建页面模型。 
   1. 一般情况下，另存方式创建的页面，会保留原页面中的页面模型，单击"模型视图"，查看当前页面是否存在以下模型。
      图2页面原有模型   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911633.png) 
   
   2. 创建服务模型"deleteWorkOrder"。该模型用于绑定删除工单公共接口。
      1. 在"模型视图"，单击"新增模型"。
      
      2. 添加服务模型，模型名称"deleteWorkOrder"，单击"下一步"，
      
      3. "服务类型"选择"公共接口"，"选择项目"为"设备维修管理系统"，"搜索"中的接口选择"deleteWorkOrder"，单击"下一步"，再单击"确定"。
      
      4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991377.png)，保存模型。
       
   
   
   
   
4. 添加"创建工单"按钮。 
   1. 单击"设计视图"，从"模型视图"切换到"设计视图"。
   
   2. 在页面中，选中"表格"，单击右侧"属性 \> 表格区块"中"工具栏"后的"添加"按钮。
      图3增加查询条件区域   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992766.png "点击放大")
      
      
   
   3. 删除工具栏中多余的按钮，只保留"新增行"。
   
   4. 修改"新增行"的"显示名称"为"创建工单"。
   
   5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911649.png)，保存设置。
   
   
   
   
5. 为操作列增加"删除"功能。 
   1. 选中"表格"，在右侧"属性"页签的"表格列"中，单击上图中"操作"列后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001934842526.png)。
      图4编辑操作列   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071941.png) 
   
   2. 在"属性配置"对话框中，单击"添加操作按钮"，新增后按钮在"派单"按钮下方，然后对新增按钮进行以下设置。
      1. 向下拖拽拖动条，找到新增的按钮区域，设置按钮"标签"为"删除"，"图标"选择"delete"。
         图5为操作列增加派单按钮   
         ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231417.png "点击放大") 
      
      2. 单击[图5]中"删除"按钮的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675174.png)，再单击"动作列表"的"+"，进入事件编排中，在事件编排页面，添加如下事件代码，然后单击"创建"。
         脚本中**红色内容** 请替换为实际的页面名、组件名。
         ```
         let _component = context.$component.current
         let currentRow = _component.$attrs.row;
         let id = currentRow.id;
         let _model = $model.ref("workOrderInstance");
         context.$dialog.confirm(
             {
                 title: '确认',
                 content: '确认删除该工单吗？',
                 okText: '确定',
                 cancelText: '取消',
                 onOk: () => {
                     $model.ref('deleteWorkOrder').setData({ inputParam: { "id": id } });
                     $model.ref('deleteWorkOrder').run().then(function (data) {
                         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);
                         });
                     });
                 },
                 onCancel: () => { }
             }
         );
         ```
         
      
      3. 单击"确定"，关闭"属性配置"对话框。
      
      4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675178.png)，保存设置。
       
   
   
   
   
6. **检查** 页面加载事件是否跟随页面复制过来。
   
   1. 选中最外层的"页面"，在右侧"事件"页签中，单击"自定义JS代码"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991369.png)。
   
   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. 单击"创建"，关闭事件编排器，返回到页面。
   
   
   
   
7. 添加"创建工单"按钮跳转事件，跳转事件功能是将页面跳转到"生成工单"页面。 
   1. 选中"创建工单"按钮，在右侧"事件"页签中，单击"新增行"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992750.png)，进入事件编排页面。
   
   2. 在"自定义动作"中，输入以下事件代码，加粗斜体内容请替换为实际命名空间前缀。
      ```
      //打开创建工单页面，需要根据实际页面名称修改
      context.$page.load('/besBaas/page#/HW__createWorkOrder')
      ```
      
   
   3. 单击"创建"，关闭事件编排器，返回到页面。
   
   4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001936005212.png)，保存页面。