# 组装"设备管理"页面 通过组装设备管理的标准页面，实现对设备对象的增、删、改、查处理。 #### 页面分析 管理设备页面需要实现以下功能，如[图1]所示： - 工具栏保留"新增设备"按钮，单击"新增设备"按钮，跳转到设备详情页面。 - 查询结果增加操作列，包含编辑和删除图标。 图1电梯信息管理界面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231197.png "点击放大") 图2前端页面组件位置关系 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432674938.png) 如果想要实现将前端页面上输入的设备信息保存到数据库中，需要将页面组件、模型、与数据对象进行关联，其关联关系如[图3]所示。 图3组件、模型、与对象的关系分析 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151790.png "点击放大") **开发页面的大致流程** 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"（绑定"editEquipments"接口），执行接口绑定的"***HW__*** editEquipment"脚本，将修改后的电梯记录更新到对象"***HW__***Equipment__CST"中。 | | 删除 | 1. 通过自定义JS代码获取"表格"中，单击"删除"按钮的设备Id。 2. 将设备Id作为入参，运行服务模型"deleteEquipment"（绑定"deleteEquipment"接口），执行接口绑定的"***HW__*** deleteEquipment"脚本，删除对象"***HW__***Equipment__CST"中的对应记录。 | #### 操作步骤 1. 进入[创建"设备维修管理系统"应用](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_07_1009.html)中创建的应用。 2. 在"Equipment"目录中，将鼠标放在"Page"上，单击界面上出现的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432834902.png)，在弹出菜单中选择"标准页面"。 3. 在"标签"和"名称"文本框中输入"equipmentManage"，单击"添加"。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992538.png)进行锁定。 4. 定义自定义模型"equipmentInstance"。 1. 在"模型视图"中，单击"新增模型"。 图4新增模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991153.png "点击放大") 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. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992550.png)，保存设置。 5. 定义服务模型"queryEquipments"，与API（queryEquipments:1.0.0）关联。 1. 在"模型视图"中，单击"新增模型"，进入新增服务模型页面。 2. 模型名称设置为"queryEquipments"，来源选择"服务"，单击"下一步"。 3. 选择服务类型为"公共接口"，并"选择项目"为"设备维修管理系统"，指定模型与API"queryEquipments"关联，单击"确定"。 关联API后，系统会自动显示API中脚本的输入、输出参数。 4. 在新增模型页面，单击"下一步"，方法保持不变，单击"确定"。 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911409.png)，保存设置。 图5定义服务模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991149.png "点击放大") 6. 定义服务模型"deleteEquipment"，与API（deleteEquipment:1.0.0）关联。 1. 在"模型视图"中，单击"新增模型"，进入新增服务模型页面。 2. 模型名称设置为"deleteEquipment"，来源选择"服务"，单击"下一步"。 3. 选择服务类型为"公共接口"，并"选择项目"为"设备维修管理系统"，指定模型与API"deleteEquipment"关联，单击"确定"。 关联API后，系统会自动显示API中脚本的输入、输出参数。 4. 在新增模型页面，单击"下一步"，方法保持不变，单击"确定"。 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911417.png)，保存设置。 7. 切换到"设计视图"，从左侧基础组件区，拖拽一个"表格"到右侧"设计视图"中。 图6拖拽一个表格到页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432674958.png "点击放大") 8. 为表格绑定模型，并设置表格查询结果区域。 1. 在"设计视图"中，选中"表格"，单击右侧"属性"页签![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992530.png)，如[图7]所示。 图7为表格绑定对象模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432674954.png "点击放大") 2. 在"选择模型"对话框中，选中"equipmentInstance"对象模型，单击"确定"。 绑定对象模型后，系统自动将模型的所有字段添加为表格列，如[图8]所示。 图8绑定数据模型后的表格列 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071701.png "点击放大") 3. 选中上图中"已添加列"中的任意一项，上下拖动调整列的显示顺序。 4. 单击上图中每个字段后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911429.png)，修改列标题等字段属性。 以"设备编码"为例，其属性配置如[图9]所示。 图9设置"设备编码"列的属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071725.png "点击放大") 表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. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991141.png)，保存设置。 9. 添加表格操作列，为表格添加编辑和删除两个操作按钮。 其中"编辑"是通过在按钮上添加自定义代码，将页面跳转到"编辑设备"页面。"删除"则是通过自定义代码调用"删除设备"脚本实现删除功能。 1. 在表格的"表格列"下，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991161.png)，添加表格操作列"Operation1"。 图10添加操作列 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071721.png) 2. 单击新增的"Operation1"的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432834906.png)，进入操作列属性配置。 图11设置操作列属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432834922.png "点击放大") 3. 配置操作列属性。 1. 将"列标题"设置为"操作"。 2. 在操作按钮中，单击"添加操作按钮"2次，增加2个按钮。 3. 设置第一个按钮"类型"为"主要按钮"，"图标"为"其他"页签中的"edit"，并单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992526.png)，选择"动作列表"后的"+"，进入事件编辑，添加以下自定义代码。 ``` //获取当前组件（即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设置操作列属性。 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911413.png "点击放大") 4. 向下拖动滚动条，设置第二个按钮"类型"为"主要按钮"，"图标"为"其他"页签中的"trash-a"，并单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992542.png)，选择"动作列表"后的"+"，进入事件编辑，添加以下自定义代码。 事件代码中，"***HW__*** "前缀由租户命名空间namespace决定，请根据实际情况进行替换。其中"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增加工具栏 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071705.png) 2. 只保留"新增行"按钮，删除其他工具栏中多余的按钮（单击选中待删除按钮，鼠标右键单击，**请确认已选中按钮** ，然后选择"删除"，如果误删其他组件，在页面上单击返回按钮即可）。 图14工具栏中需要删除的按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151794.png "点击放大") 图15选中待删除按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991157.png) 3. 选中"新增行"按钮，在右侧属性面板中，修改"显示名称"为"新增设备"。在"事件"页签，再单击"新增行"的编辑按钮![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432674942.png)，在事件编排的"自定义动作"中，删除原来事件代码，输入以下事件代码，然后单击"创建"。 图16编辑事件代码 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991165.png) ``` //跳转到编辑设备信息页面 context.$page.load('/besBaas/page#/HW__editEquipment'); ``` 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432674946.png)，保存设置。 11. 创建查询条件区域。 1. 单击"模型视图"，切换到模型视图，在表格模型"table_***0*** _condition"后，单击编辑图标![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911425.png)。 表格组件拖入后，页面将自动生成一个表格模型。"table_***0*** _condition"即是在前面拖入的表格对应的表格模型，模型名可能跟拖入顺序及个数有关，一般情况下模型名称为"table_***0*** _condition"，如果名称不一致，请根据实际情况修改。 图17编辑表格模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231193.png "点击放大") 2. 在表格模型"table_***0*** _condition"中，单击"新增节点"，添加一个"queryInfo"节点，"字段类型"为"Any"，然后在"queryInfo"下，再单击"新增节点"添加2个子节点"name"、"***HW__*** fullAddress__CST"。 图18创建完成后的模型节点 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231217.png) 3. 单击"下一步"，单击"确定"，完成模型修改。 4. 单击"设计视图"，切换到设计视图，从左侧组件列表中，拖一个"表单"组件到"表格容器"的最上部（表格容器内部最上部），在"元数据表单配置向导"弹窗中，单击"取消"。 图19向表格容器拖入表单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432834918.png "点击放大") 5. 选中表单，在属性中"数据绑定"下，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151810.png)，为表单绑定"table_***0*** _condition"中的"queryInfo"节点，并在提示弹窗中，单击"绑定并生成表单"，单击"确定"。 图20为表单绑定数据对象字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911433.png "点击放大") 图21选择绑定并生成表单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432834898.png) 6. 在表单中，选择"name"输入框，修改"标签"为"设备名称"、选择"***HW__***fullAddress__CST"输入框，修改"标签"为"地址"。 7. 选中"保存"按钮，修改"显示名称"为"查询"。在"事件"页签，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991169.png)，删除"提交表单"事件，然后单击"点击"后的"+"，进入事件编排，删除原有自定义代码，输入以下事件代码，单击"创建"。 图22修改按钮事件代码 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151786.png) 脚本中***"HW"*** 为命名空间的名称，请根据实际需求进行替换。其中"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页面预览 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991145.png "点击放大") 8. 选中"重置"按钮，在"事件"页签，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001934173710.png)，删除"重置表单"事件，然后单击"点击"后的"+"，进入事件编排，删除原有自定义代码，输入以下事件代码，单击"创建"。 图24修改重置按钮事件代码 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001934014230.png) 其中"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. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231201.png)，保存设置。 12. 添加页面事件代码。 1. 在"设计视图"中，选中最外层的"页面"，可以直接单击组件导航，快速定位。 2. 在右侧"事件"页签中，单击"加载"后的"+"，为页面添加事件代码。 3. 在"添加动作"弹窗的"自定义动作"中，输入如下事件代码。 其中"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. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001936002004.png)，保存页面。 #### 验证 单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992534.png)，进入预览页面，查看页面的展示效果，并验证以下功能： 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. 在查询区域分别输入"设备名称"、"地址"，单击"搜索"或"重置"验证查询电梯设备信息功能，如果不能查询或重置，请检查操作列按钮的事件代码。