组装“工单管理”页面

管理员的“工单管理”页面与“工单列表（派单员）”页面相比，大致功能一致，仅多了一个创建工单功能，和操作列中的删除按钮。因为两个页面很相似，所以为了快速创建，将通过“工单列表（派单员）”页面另存一个页面，然后再改造这个另存后的页面成为“管理员管理工单”页面。

“工单管理”页面是在“工单列表（派单员）”基础上创建的，因此该页面创建完成后，就已经具备了“查询工单”、“派发工单”的功能，而在本节的开发步骤中，主要为该页面添加“创建工单”、“删除工单”功能即可。其中，“创建工单”功能与“工单列表（客服人员）”页面中的创建方法基本一致。

操作步骤

在经典版开发环境“首页 > 我的应用”中，单击“设备维修管理系统”，进入应用。
使用“工单列表（派单员）”页面创建模板。
1. 打开“HW__dispatchWorkOrder”，单击锁定页面。
2. 单击页面上方的，保存模板。
3. 如图1所示，在弹出对话框中设置页面标签和名称为“manageWorkOrder”，单击“创建”。
  图1 保存页面模板
检查及创建页面模型。
1. 一般情况下，另存方式创建的页面，会保留原页面中的页面模型，单击“模型视图”，查看当前页面是否存在以下模型。
  图2 页面原有模型
2. 创建服务模型“deleteWorkOrder”。该模型用于绑定删除工单公共接口。
  1. 在“模型视图”，单击“新增模型”。
  2. 添加服务模型，模型名称“deleteWorkOrder”，单击“下一步”，
  3. “服务类型”选择“公共接口”，“选择项目”为“设备维修管理系统”，“搜索”中的接口选择“deleteWorkOrder”，单击“下一步”，再单击“确定”。
  4. 单击页面上方的，保存模型。
添加“创建工单”按钮。
1. 单击“设计视图”，从“模型视图”切换到“设计视图”。
2. 在页面中，选中“表格”，单击右侧“属性 > 表格区块”中“工具栏”后的“添加”按钮。
  图3 增加查询条件区域
3. 删除工具栏中多余的按钮，只保留“新增行”。
4. 修改“新增行”的“显示名称”为“创建工单”。
5. 单击页面上方的，保存设置。

为操作列增加“删除”功能。

选中“表格”，在右侧“属性”页签的“表格列”中，单击上图中“操作”列后的。
图4 编辑操作列

在“属性配置”对话框中，单击“添加操作按钮”，新增后按钮在“派单”按钮下方，然后对新增按钮进行以下设置。

向下拖拽拖动条，找到新增的按钮区域，设置按钮“标签”为“删除”，“图标”选择“delete”。
图5 为操作列增加派单按钮

单击图5中“删除”按钮的

，再单击“动作列表”的“+”，进入事件编排中，在事件编排页面，添加如下事件代码，然后单击“创建”。

脚本中红色内容请替换为实际的页面名、组件名。

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: () => { }
    }
);

单击“确定”，关闭“属性配置”对话框。
单击页面上方的，保存设置。

检查页面加载事件是否跟随页面复制过来。

选中最外层的“页面”，在右侧“事件”页签中，单击“自定义JS代码”后的。

查看自定义动作中是否已有如下脚本代码，如果没有，请输入。

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);
});

单击“创建”，关闭事件编排器，返回到页面。

添加“创建工单”按钮跳转事件，跳转事件功能是将页面跳转到“生成工单”页面。
1. 选中“创建工单”按钮，在右侧“事件”页签中，单击“新增行”后的，进入事件编排页面。
2. 在“自定义动作”中，输入以下事件代码，加粗斜体内容请替换为实际命名空间前缀。
```
//打开创建工单页面，需要根据实际页面名称修改
context.$page.load('/besBaas/page#/HW__createWorkOrder')
```
3. 单击“创建”，关闭事件编排器，返回到页面。
4. 单击页面上方的，保存页面。