组装“设备管理”页面

页面分析

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

• 工具栏保留“新增设备”按钮，单击“新增设备”按钮，跳转到设备详情页面。
• 查询结果增加操作列，包含编辑和删除图标。

图1 电梯信息管理界面

图2 前端页面组件位置关系

操作步骤

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“queryEquipments”关联，单击“下一步”。

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

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

6. 定义服务模型“deleteEquipment”，与API（deleteEquipment:1.0.0）关联。
   1. 在“模型视图”中，单击“新增模型”。
   2. 添加服务模型，模型名称“deleteEquipment”，单击“下一步”。
   3. 选择服务类型为“公共接口”，并“选择项目”为“设备维修管理系统”，指定模型与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 为表单绑定数据对象字段
       
       图21 选择绑定并生成表单
       
    6. 在表单中，选择“name”输入框，修改“标签”为“设备名称”、选择“HW__fullAddress__CST”输入框，修改“标签”为“地址”。
    7. 选中“保存”按钮，修改“显示名称”为“查询”。在“事件”页签，单击，删除“提交表单”事件，然后单击“点击”后的“+”，进入事件编排，删除原有自定义代码，输入以下事件代码，单击“创建”。
       图22 修改按钮事件代码
       
       

       脚本中红色内容，请替换为实际的对象名、字段名、页面名、组件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);
       }); 

       查询条件区域创建后，如图23所示。

       图23 页面预览
       
    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. 在查询区域分别输入“设备名称”、“地址”，单击“搜索”或“重置”验证查询电梯设备信息功能，如果不能查询或重置，请检查操作列按钮的事件代码。