更新时间:2022-04-27 GMT+08:00
分享

组装“工单管理”页面

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

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

操作步骤

  1. 在开发环境“首页 > 我的应用”中,单击“设备维修管理系统”,进入应用。
  2. 使用“工单列表(派单员)”页面创建模板。

    1. 打开“HW__dispatchWorkOrder”,单击锁定页面。
    2. 单击页面上部的保存模板按钮。
    3. 图1所示,在弹出对话框中设置页面标签和名称为“manageWorkOrder”,单击“创建”。
      图1 保存页面模板

  3. 检查及创建页面模型。

    1. 一般情况下,另存方式创建的页面,会保留原页面中的页面模型,单击“模型视图”,查看当前页面是否存在以下模型。
      图2 页面原有模型
    2. 创建服务模型“deleteWorkOrder”。该模型用于绑定删除工单公共接口。
      1. 在“模型视图”,单击“新增模型”。
      2. 添加服务模型,模型名称“deleteWorkOrder”,单击“下一步”,
      3. “服务类型”选择“API”,“选择项目”为“设备维修管理系统”,“搜索”中的API,选择“deleteWorkOrder”,单击“下一步”,再单击“确定”。
      4. 单击页面上部的保存图标。

  4. 添加“创建工单”按钮。

    1. 单击“设计视图”,从“模型视图”切换到“设计视图”。
    2. 在页面中,选中“表格”,单击右侧“属性 > 表格区块”中“工具栏”后的“添加”按钮。
      图3 增加查询条件区域

    3. 删除工具栏中多余的按钮,只保留“新增行”。
    4. 修改“新增行”的“显示名称”为“创建工单”。
    5. 单击页面上部的保存图标。

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

    1. 选中“表格”,在右侧“属性”页签的“表格列”中,单击上图中“操作”列后的
      图4 编辑操作列
    2. 在“属性配置”对话框中,单击“添加操作按钮”,新增后按钮在“派单”按钮下方,然后对新增按钮进行以下设置。
      1. 向下拖拽拖动条,找到新增的按钮区域,设置按钮“标签”为“删除”,“图标”选择“delete”。
        图5 为操作列增加派单按钮
      2. 单击图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: () => { }
            }
        );
      3. 单击“确定”,关闭“属性配置”对话框。
      4. 单击页面上部的保存图标。

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

    1. 选中最外层的“页面”,在右侧“事件”页签中,单击“自定义JS代码”后的
    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. 选中“创建工单”按钮,在右侧“事件”页签中,单击“新增行”后的,进入事件编排页面。
    2. 在“自定义动作”中,输入以下事件代码,单击“创建”,加粗斜体内容请替换为实际命名空间前缀。
      //打开创建工单页面,需要根据实际页面名称修改
      context.$page.load('/besBaas/page#/HW__createWorkOrder')
    3. 单击页面上方保存按钮,并退出事件编排。

分享:

    相关文档

    相关产品

关闭导读