文档首页/ Astro轻应用 AstroZero/ 最佳实践/ 通过AstroZero开发设备维修管理应用/ 设备管理开发/ 开发“管理设备”功能/ 组装“设备管理”页面
更新时间：2024-10-21 GMT+08:00
查看PDF
分享

组装“设备管理”页面

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

页面分析

管理设备页面需要实现以下功能，如图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“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. 向下拖动滚动条，设置第二个按钮“类型”为“主要按钮”，“图标”为“其他”页签中的“trash-a”，并单击，选择“动作列表”后的“+”，进入事件编辑，添加以下自定义代码。

        脚本中红色内容请替换为实际的对象名、字段名、页面名、组件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. 选中“重置”按钮，在“事件”页签，单击，删除“重置表单”事件，然后单击“点击”后的“+”，进入事件编排，删除原有自定义代码，输入以下事件代码，单击“创建”。
      图24 修改重置按钮事件代码

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

      var table_0_condition = $model.ref("table_0_condition").getData();
table_0_condition.queryInfo = {};
$model.ref("table_0_condition").setData(table_0_condition);
    9. 单击页面上方的，保存设置。

  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);
});
    4. 单击“创建”，关闭事件编排器，返回到页面。
    5. 单击页面上方的，保存页面。

验证

单击界面上方的，进入预览页面，查看页面的展示效果，并验证以下功能：

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

相关文档