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

组装“设备管理”页面

通过组装设备管理的标准页面,实现对设备对象的增、删、改、查处理。

页面分析

管理设备页面需要实现以下功能,如图1所示:

  • 工具栏保留“新增设备”按钮;单击“新增设备”按钮,跳转到设备详情页面。
  • 查询结果增加操作列,包含编辑和删除图标。
图1 电梯信息管理界面
图2 前端页面组件位置关系

如果想要实现将前端页面上输入的设备信息保存到数据库中,需要将页面组件、模型、与数据对象进行关联,其关联关系如图3所示。

图3 组件、模型、与对象的关系分析

开发页面的大致流程

  1. 拖拽“表格”组件到页面上。

    拖拽后,“表格”组件内默认包含“表格”和“分页”2个下层组件。

  2. 创建自定义模型“equipmentInstance”,以及自节点,后续将会通过脚本(修改、查询、删除)操作对象“HW__Equipment__CST”。
  3. 为“表格”绑定自定义模型“equipmentInstance”。
  4. 为“表格”增加工具栏。

    配置过程中,平台会自动创建自定义模型“table_0_condition”,在自定义模型“table_0_condition”下创建查询子节点“queryinfo”,后续将会与查询条件输入框、分页组件绑定。

执行流程

完成上述配置后,一个简易的增删改查电梯设备信息的页面即开发完成,页面的执行流程如表1所示。

表1 执行流程

场景

系统执行流程

查询

  1. 界面查询条件传入自定义模型“table_0_condition”。
  2. 将自定义模型“table_0_condition”的数据作为入参,运行服务模型“queryEquipments”(绑定“queryEquipmentes”接口),执行接口绑定的“HW__queryEquipments”脚本,从“HW__Equipment__CST”对象中获取设备信息列表。
  3. 将服务模型“queryEquipments”返回的参数值绑定在自定义模型“equipmentInstance”并渲染“表格”。

新增

  1. “表格”中填写新设备记录后,即将填写内容传入表格绑定的自定义模型“equipmentForm”。
  2. 将自定义模型“equipmentForm”的数据作为入参,运行服务模型“editEquipment”(绑定“editEquipment”接口),执行接口绑定的“HW__editEquipment”脚本,将新增记录插入到对象“HW__Equipment__CST”中。

修改

  1. “表格”中修改已有设备记录后,将修改内容传入表格绑定的自定义模型“equipmentForm”。
  2. 将自定义模型“equipmentForm”的数据作为入参,运行服务模型“editEquipment”(绑定“editEquipmentes”接口),执行接口绑定的“HW__editEquipment”脚本,将修改后的电梯记录更新到对象“HW__Equipment__CST”中。

删除

  1. 通过自定义JS代码获取“表格”中,单击“删除”按钮的设备Id。
  2. 将设备Id作为入参,运行服务模型“deleteEquipment”(绑定“deleteEquipment”接口),执行接口绑定的“HW__deleteEquipment”脚本,删除对象“HW__Equipment__CST”中的对应记录。

操作步骤

  1. 进入“设备维修管理系统”应用。
  2. 在“Equipment”目录中,将鼠标放在“Page”上,单击界面上出现的,在弹出菜单中选择“标准页面”。
  3. 在“标签”和“名称”文本框中输入“equipmentManage”,单击“添加”。

    当编辑已有标准页面时,为防止编辑时多人篡改,编辑前请单击进行锁定。

  4. 定义自定义模型“equipmentInstance”。

    1. 在“模型视图”单击“新增模型”。
      图4 新增模型
    2. 添加自定义模型,模型名称“equipmentInstance”,单击“下一步”。
    3. 单击“新增节点”,创建如表2所示的节点。字段名称要与设备对象为“HW__Equipment__CST”一致,然后单击“下一步”,再单击“确定”。

      加粗斜体请替换为实际的对象名、字段名。

      表2 新增节点

      节点名称

      数据类型

      name

      保持默认(Text)

      HW__equipmentSN__CST

      保持默认(Text)

      HW__equipmentBrand__CST

      保持默认(Text)

      HW__equipmentModel__CST

      保持默认(Text)

      HW__fullAddress__CST

      保持默认(Text)

      HW__longitude__CST

      保持默认(Text)

      HW__latitude__CST

      保持默认(Text)

    4. 单击页面上部的保存图标。

  5. 定义服务模型“queryEquipments”,与API(queryEquipments:1.0.0)关联。

    1. 在“模型视图”中单击“新增模型”。
    2. 添加服务模型,模型名称“queryEquipments”,单击“下一步”。
    3. 选择服务类型为“API”,并“选择项目”为“设备维修管理系统”,指定模型与API“queryEquipments”关联,单击“下一步”。

      关联API后,系统会自动显示API中脚本的输入、输出参数。

    4. 方法保持不变,单击“确定”。
    5. 单击页面上部的保存图标。
      图5 定义服务模型

  6. 定义服务模型“deleteEquipment”,与API(deleteEquipment:1.0.0)关联。

    1. 在“模型视图”中单击“新增模型”。
    2. 添加服务模型,模型名称“deleteEquipment”,单击“下一步”。
    3. 选择服务类型为“API”,并“选择项目”为“设备维修管理系统”,指定模型与API“deleteEquipment”关联,单击“下一步”。

      关联API后,系统会自动显示API中脚本的输入、输出参数。

    4. 方法保持不变,单击“确定”。
    5. 单击页面上部的保存图标。

  7. 切换到“设计视图”,从左侧基础组件区,拖拽一个“表格”到右侧“设计视图”中。

    图6 拖拽一个表格到页面

  8. 为表格绑定模型,并设置表格查询结果区域。

    1. 在“设计视图”中,选中“表格”,单击右侧“属性”页签,如图7所示。
      图7 为表格绑定对象模型
    2. 在“选择模型”对话框中,选中“equipmentInstance”对象模型,单击“确定”。

      绑定对象模型后,系统自动将模型的所有字段添加为表格列,如图8所示。

      图8 绑定数据模型后的表格列
    3. 选中上图中“已添加列”中的任意一项,上下拖动调整列的显示顺序。
    4. 单击上图中每个字段后的,修改列标题等字段属性。

      以“设备编码”为例,其属性配置如图9所示。

      图9 设置“设备编码”列的属性
      表3 修改各字段的显示属性

      调整后的顺序

      字段名

      列标题

      可编辑

      1

      HW__equipmentSN__CST

      设备编码

      2

      name

      设备名称

      3

      HW__equipmentBrand__CST

      品牌

      4

      HW__equipmentModel__CST

      型号

      5

      HW__fullAddress__CST

      地址

      6

      HW__longitude__CST

      经度

      7

      HW__latitude__CST

      纬度

    5. 单击页面上部的保存图标。

  9. 添加表格操作列,为表格添加编辑和删除两个操作按钮。

    其中“编辑”是通过在按钮上添加自定义代码,将页面跳转到“编辑设备”页面;“删除”则是通过自定义代码调用“删除设备”脚本实现删除功能。
    1. 在表格的“表格列”下,单击,添加表格操作列“Operation1”。
      图10 添加操作列
    2. 单击新增的“Operation1”的,进入操作列属性配置。
      图11 设置操作列属性
    3. 配置操作列属性:
      1. 将“列标题”设置为“操作”。
      2. 单击“添加操作按钮”2次,增加2个按钮。
      3. 设置第一个按钮“类型”为“主要按钮”,“图标”为“edit”,并单击,选择“动作列表”后的“+”,进入事件编辑,添加以下自定义代码。

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

        //获取当前组件(即table)
        let _component = context.$component.current;
        //获取当前行row,取对象的id属性
        let rowId = _component.$attrs.row.id;
        //带着id跳转到设备详情页面
        context.$page.load('/besBaas/page#/HW__editEquipment?id='+rowId);
        图12 设置操作列属性。
      4. 向下拖动滚动条,设置第二个按钮“类型”为“主要按钮”,“图标”为“delete”,并单击,选择“动作列表”后的“+”,进入事件编辑,添加以下自定义代码。

        脚本中红色内容请替换为实际的对象名、字段名、页面名、组件ID。其中“table_0_condition”为当前表格组件的ID号,中间数字默认为“0”,如果有多次修改或创建该ID号会变化,选中表格后,在组件树上可以查看实际组件ID。

      //获取当前组件(即table)
      let _component = context.$component.current;
      //获取当前行
      let row = _component.$attrs.row;
      // 表格组件
      let _table =this.$component.table;
      // 删除当前行数据
      this.$dialog.confirm({
          title:'确认框',
          content:'确认是否删除?',
          okText:"确定",
          cancelText:"取消",
          onOk:()=>{
              $model.ref('deleteEquipment').setData({inputParam:{"id": row.id}});
              $model.ref('deleteEquipment').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('queryEquipments').setData({inputParam: queryData});
                  $model.ref('queryEquipments').run().then(function(data){
                      $model.ref('equipmentInstance').setData(data.equipments);
                      pageInfo.total = parseInt(data.total);
                      $model.ref('table_0_condition').setData({"pageInfo": pageInfo});
      }).catch(function(error){
                      console.log('error is', error);
      });
      });
      }
      });

  10. 设置工具栏区域。

    1. 在左侧“设计视图”中选中“表格”,单击右侧“属性 > 表格区块”中“工具栏”后的“添加”按钮。
      图13 增加工具栏
    2. 只保留“新增行”按钮,删除其他工具栏中多余的按钮(单击选中待删除按钮,鼠标右键单击,请确认已选中按钮,然后选择“删除”,如果误删其他组件,在页面上单击返回按钮即可)。
      图14 工具栏中需要删除的按钮
      图15 选中待删除按钮
    3. 选中“新增行”按钮,在右侧属性面板中,修改“显示名称”为“新增设备”。在“事件”页签,再单击“新增行”的编辑按钮,在事件编排的“自定义动作”中,删除原来事件代码,输入以下事件代码,然后单击“保存”。
      图16 编辑事件代码
      //跳转到编辑设备信息页面
      context.$page.load('/besBaas/page#/HW__editEquipment');
    4. 单击页面上部的保存图标。

  11. 创建查询条件区域。

    1. 单击“模型视图”,切换到模型视图,在表格模型“table_0_condition”后,单击编辑图标

      表格组件拖入后,页面将自动生成一个表格模型。“table_0_condition”即是在前面拖入的表格对应的表格模型,模型名可能跟拖入顺序及个数有关,一般情况下模型名称为“table_0_condition”,如果名称不一致,请根据实际情况修改。

      图17 编辑表格模型
    2. 在表格模型“table_0_condition”中,单击“新增节点”,添加一个“queryInfo”节点,“字段类型”为“Any”,然后在“queryInfo”下,再单击“新增节点”添加2个子节点“name”、“HW__fullAddress__CST”。
      图18 创建完成后的模型节点
    3. 单击页面上部的保存图标。
    4. 单击“设计视图”,切换到设计视图,从左侧组件列表中,拖一个“表单”组件到“表格容器”的最上部(表格容器内部最上部),在“元数据表单配置向导”弹窗中,单击“取消”。
      图19 向表格容器拖入表单
    5. 选中表单,在属性中“数据绑定”下,单击,为表单绑定“table_0_condition”中的“queryInfo”节点,并在提示弹窗中,单击“绑定并生成表单”,单击“确定”。
      图20 为表单绑定数据对象字段

    6. 在表单中,选择“name”输入框,修改“标签”为“设备名称”、选择“HW__fullAddress__CST”输入框,修改“标签”为“地址”。
    7. 选中“保存”按钮,修改“显示名称”为“查询”。在“事件”页签,单击,删除“提交表单”事件,然后单击“点击”后的“+”,进入事件编排,删除原有自定义代码,输入以下事件代码,单击“创建”。
      图21 修改按钮事件代码

      脚本中红色内容请替换为实际的对象名、字段名、页面名、组件ID。其中“table_0_condition”为当前表格组件的ID号,中间数字默认为“0”,如果有多次修改或创建该ID号会变化,选中表格后,在组件树上可以查看实际组件ID。

      let pageInfo = $model.ref('table_0_condition').getData().pageInfo;
      let queryInfo = $model.ref('table_0_condition').getData().queryInfo;
      if (!queryInfo) {
          queryInfo = {};
      }
      let queryData = {
          "fullAddress": queryInfo.HW__fullAddress__CST,
          "name": queryInfo.name,
          "start": 0, 
          "limit": pageInfo.pageSize
      };
      $model.ref('queryEquipments').setData({inputParam: queryData});
      $model.ref('queryEquipments').run().then(function (data) {
          $model.ref('equipmentInstance').setData(data.equipments);
          pageInfo.total = parseInt(data.total);
          $model.ref('table_0_condition').setData({"pageInfo": pageInfo});
      }).catch(function (error) {
          console.log('error is', error);
      }); 

      查询条件区域创建后,如图22所示。

      图22 页面预览
    8. 单击页面上部的保存图标。

  12. 添加页面事件代码。

    1. 在“设计视图”中选中最外层的“页面”。可以直接点击组件导航,快速定位。
    2. 在右侧“事件”页签中,单击“加载”后的“+”,为页面添加事件代码。
    3. 在“添加动作”弹窗的“自定义动作”中,输入如下事件代码,然后单击底部“创建”。

      脚本中红色内容请替换为实际的对象名、字段名、页面名、组件ID。其中“table_0_condition”为当前表格组件的ID号,中间数字默认为“0”,如果有多次修改或创建该ID号会变化,选中表格后,在组件树上可以查看实际组件ID。

    let pageInfo = $model.ref('table_0_condition').getData().pageInfo;
    let queryData ={
    "start":(pageInfo.curPage -1)* pageInfo.pageSize,
    "limit": pageInfo.pageSize
    };
    $model.ref('queryEquipments').setData({ inputParam: queryData });
    $model.ref('queryEquipments').run().then(function(data){
        $model.ref('equipmentInstance').setData(data.equipments);
        pageInfo.total = parseInt(data.total);
        $model.ref('table_0_condition').setData({"pageInfo": pageInfo });
    }).catch(function(error){
        console.log('error is', error);
    });

验证

单击界面上方预览图标,查看页面的展示效果,并验证以下功能:

  1. 在界面上单击“新增设备”,查看是否跳转到“编辑设备”页面,如未跳转,请检查事件代码中页面名称前缀是否是实际空间名。
  2. 检查“编辑设备”页面的“设备品牌”下拉框,“省市区”级联框的选项是否正确。

    选项正确,则说明自定义模型、页面组件与模型绑定关系、以及页面on-load事件是正确的。

  3. 检查“编辑设备”页面(HW__editEquipment)的设备录入功能是否正确。

    1. 填写“设备名称”、“设备编码”等信息, 单击“保存”。
    2. 检查“设备管理”页面(HW__equipmentManage)是否包含新插入的数据。

      如果查询结果页面显示新增数据,则说明新增功能以及页面的事件代码正确。

      如果操作不成功,可以在页面事件脚本中增加debugger,使用Chrome开发者工具来调试定位问题。

  4. 检查“编辑设备”页面(HW__editEquipment)的设备修改功能是否正确。

    1. 单击一条记录后面的编辑按钮,查看是否跳转到“编辑设备”页面。
    2. 修改“设备名称”、“设备编码”等信息, 单击“保存”。
    3. 检查“设备管理”页面(HW__equipmentManage)当前设备记录是否更新。

      如果查询结果页面显示更新数据,则说明修改功能以及页面的事件代码正确。

  5. 检查“设备管理”页面(HW__equipmentManage)的设备删除、查询、重置功能是否正确。

    1. 选中空白行或其他行,单击“删除”,验证删除功能是否正常,如果不能删除,请检查操作列“删除”按钮事件代码。
    2. 在查询区域分别输入“设备名称”、“地址”,单击“搜索”或“重置”验证查询电梯设备信息功能,如果不能查询或重置,请检查操作列按钮的事件代码。

分享:

    相关文档

    相关产品

close