# 组装"编辑设备"页面 组装页面包括拼装页面组件、定义组件的事件代码，并通过公共接口调用"编辑设备"脚本。 #### 页面分析 如果要实现将前端页面上输入的设备信息保存到数据库中，需要创建与前端组件绑定的自定义模型，以及与后端逻辑关联的服务模型，如[图2]所示。 图1编辑设备页面预览 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835058.png "点击放大") 页面上包含输入框（设备编码、设备名称、设备型号和地址）、选择框（设备品牌）和级联选择框（省市区）。其中，"省/市/区"级联框不仅要值绑定，还需要做属性绑定： - 级联框的选项：以属性绑定的方式，与cascaderOptions关联。即cascaderOptions的内容，将成为级联框的可选择项。 - 级联框的选择结果：以值绑定的方式，与equipmentForm关联。即级联框的选择结果，将保持到equipmentForm.cascaderAddress中。 图2配置态的模型定义 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992706.png "点击放大") 同时，还需要为页面定义页面事件，为"保存"按钮定义"点击"事件，在事件的脚本代码中调用上述服务模型的API。 在应用预览下，从打开页面、在页面输入内容，到单击"保存"按钮，触发的执行逻辑如[图3]所示。 图3执行逻辑 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071841.png "点击放大") #### 定义模型 1. 进入[创建"设备维修管理系统"应用](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_07_1009.html)中创建的应用。 2. 在"Equipment"中，将鼠标放在"Page"目录上，单击界面上出现的"+"，选择"标准页面"。 3. 在"标签"和"名称"文本框中输入"editEquipment"，单击"添加"。 平台实际创建的页面名称为"***HW__*** editEquipment"，包含前缀"***HW__***"，对应首次创建应用时定义的命名空间。新建创建的页面，默认是当前用户锁定状态，可以进行编辑保存等操作。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231349.png)进行锁定。 4. 定义与"省/市/区"级联框的可选项相关联的自定义模型。 1. 在页面底部单击"模型视图"，进入模型视图页面，单击"新增模型"。 2. 添加自定义模型，模型名称"cascaderOptions"，单击"下一步"，如[图4]所示。 图4定义级联框用到的自定义模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911541.png "点击放大") 3. 设置保持不变，单击"下一步"。 4. 方法保持不变，单击"确定"。 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991317.png)，保存设置。 5. 定义与页面上各个输入框、选择框相关联的自定义模型。 1. 在"模型视图"中，单击"新增模型"。 2. 添加自定义模型，模型名称"equipmentForm"，单击"下一步"，如[图5]所示。 图5定义页面组件需要关联的自定义模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992654.png "点击放大") 3. 单击"新增节点"，逐一添加与页面元素对应的参数（name、***HW__*** equipmentSN__CST、***HW__*** equipmentBrand__CST、***HW__*** equipmentModel__CST、cascaderAddress、***HW__*** installationDetailAddress__CST），单击"下一步"，如[图6]所示。 为简化后续事件脚本，除cascaderAddress外，请确保其他5个参数的参数名与设备对象（***HW__*** Equipment__CST）的字段名保持一致。注意这里的下划线是两个，要与[表1](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_07_1018.html#astrozero_07_1018__table2063982018265)里的字段保持一致，***HW__*** 需要修改为实际的命名空间前缀。 图6添加模型包含的参数 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835026.png "点击放大") 4. 方法保持不变，单击"确定"。 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151942.png)，保存设置。 6. 定义与API（editEquipment:1.0.0）关联的服务模型。 1. 在"模型视图"中，单击"新增模型"。 2. 添加服务模型，模型名称"editEquipment"，来源选择"服务"，单击"下一步"，如[图7]所示。 图7定义服务模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911589.png "点击放大") 3. 指定模型与API"editEquipment"关联，单击"下一步"，如[图8]所示。 关联API后，系统会自动显示API中脚本的输入、输出参数。 图8为模型关联Script ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835050.png "点击放大") 4. 方法保持不变，单击"确定"。 系统自动添加了执行的方法，如[图9]所示。未来，将在事件脚本中执行这个方法，即执行模型关联的API中的脚本。 图9为模型定义方法 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835046.png "点击放大") 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231321.png)，保存设置。 7. 定义与API（queryEquipmentDetail）关联的服务模型。 1. 在"模型视图"中，单击"新增模型"。 2. 添加服务模型，模型名称"queryEquipmentDetail"，"来源"选择"服务"，单击"下一步"。 3. 指定模型与API"queryEquipmentDetail"，单击"下一步"。 图10为模型关联Script ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835030.png "点击放大") 4. 方法保持不变，单击"确定"。 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151930.png)，保存设置。 图11新增的页面模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071865.png "点击放大") #### 拖拽组件并关联模型 1. 单击"设计视图"，切换到页面设计视图。 图12切换到设计视图组件列表 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835034.png "点击放大") 2. 将左侧组件区的"表单"拖拽到右侧"页面内容"中，在"元数据表单配置向导"弹窗底部，单击"取消"，创建一个空的表单控件。 当前不单独定义数据源，因此需要单击"取消"数据绑定。 图13拖拽表单到页面并取消数据绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071829.png "点击放大") 3. 组装参数区域。 1. 从左侧组件列表中，拖一个"容器"到上一步创建的"表单"。 2. 从左侧组件列表中，拖一个"分栏"到上一步创建的"容器"中。 "分栏"默认有2个"栏"，即当前栅格中包含1行1列的区域。 3. 选中"分栏"，在右侧属性的"行布局"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992678.png "点击放大")，将分栏设置为3栏。 图14设置分栏为3栏 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071833.png "点击放大") 4. 在右侧"属性"页签中，单击"新增行"后面的图标，新增一行，如[图15]所示。设置后，分栏组件被设置为2行（分栏）3列（栏）。 图15设置表格内的行列数 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231369.png) 5. 从左侧组件区的拖一个"输入框"到分栏组件的第1行（分栏）第1栏，并在右侧"属性"页签中将"标签"修改为"设备编码"。 图16设备编码 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231357.png) 6. 分别向第1行第2栏、第2行第1栏、第2行第3栏中拖一个"输入框"，并设置"标签"为"设备名称"、第2行第1栏"设备型号"、第2行第3栏"详细地址"。 7. 从左侧组件列表中，拖一个"下拉框"到分栏组件的第1行第3栏，并在右侧"属性"页签中将"标签"修改为"设备品牌"。 8. 从左侧组件列表中，拖一个"级联选择框"到分栏组件的第2行第2栏，并将"标签"修改为"省/市/区"。 4. 组装页面标题。 在左侧组件区拖拽一个"标题"组件到[上一步]创建的"容器"前面，并在右侧"属性"页签中将"标题内容"修改为"设备详情"，并设置"样式"的"高级设置"为":root{text-align:center;font-size:20px;}"。 5. 组装按钮区域。 1. 在左侧组件区拖拽一个"容器"到[3]中创建的"容器"后（**注意要在表单里面** ，**两个容器在同级** ），并在右侧"属性"页签中将"水平对齐方式"修改为"中"，即居中对齐。 图17拖拽容器 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911577.png) 图18设置居中对齐 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002099803829.png) 2. 从左侧组件区拖拽一个"按钮"到刚创建的"容器"中，并在右侧"属性"页签中，将"显示名称"修改为"保存"，将"类型"修改为"主要按钮"。 3. 拖拽一个按钮到"保存"按钮右边，并设置为"取消"按钮，类型设置为"默认按钮"。 4. 单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675118.png)，保存页面，可以在属性面板底部查看组件树。 图19组装完成后页面的组件树 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991293.png) 6. 为页面组件关联模型。 1. 选中"设备名称"输入框。 2. 在右侧"属性"页签中单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991309.png)，为"设备名称"输入框绑定"equipmentForm"自定义模型中的"name"参数，如[图20]所示。 数据绑定后，当在前台界面输入内容时，系统就会把输入框中的内容，赋值给"name"。 图20输入框数据绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835066.png) 3. 重复上一步，为"设备编码"、"设备型号"、"详细地址"文本输入框绑定"equipmentForm"自定义模型中的对应参数。 4. 选中"设备品牌"下拉选择框，在右侧"属性"页签中单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151922.png)，为选择框绑定"equipmentForm"自定义模型中的"HW__equipmentBrand__CST"参数。 5. 选中"设备品牌"下拉选择框，在右侧"基本属性"中，单击"选项列表"的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992690.png)，在弹窗中输入"equipmentBrand"，在联想记录中，选择设备对象字段"*HW* __equipmentBrand__CST"，为选择框添加下拉选项关联的字段，如[图21]所示。 图21为下拉选择框定义可选项 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911585.png "点击放大") 图22输入字段搜索 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151918.png "点击放大") 图23关联字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231325.png "点击放大") 6. 选中"省/市/区"级联框，在右侧"属性"页签中单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071837.png)，为级联框绑定"equipmentForm"自定义模型中的"cascaderAddress"参数。 7. 单击属性值绑定后的"+"，将"属性"设置为"选择数据"，"模型字段"绑定到"cascaderOptions"，如[图24]所示。 数据绑定后，级联选择框的选项来自"cascaderOptions"；同时，当在前台界面选择省/市/区时，系统就会把选择结果赋值给"equipmentForm.cascaderAddress"。 图24级联框数据绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071873.png "点击放大") 8. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071857.png)，保存页面。 #### 定义页面事件 1. 定义页面加载事件。 1. 在"设计视图"中，选中最外层的"页面"，也可以直接单击组件导航，快速定位。 2. 在右侧"事件"页签中，单击"加载"后的"+"，为页面添加事件代码。 图25添加页面代码 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835042.png "点击放大") 3. 在"添加动作"弹窗的"自定义动作"中，输入如下事件代码。 ``` //debugger; //为级联组件下拉框赋值 $model.ref('cascaderOptions').setData([{"value":"110000000000","label":"北京市","children":[{"value":"110100000000","label":"市辖区","children":[{"value":"110101000000","label":"东城区"},{"value":"110102000000","label":"西城区"},{"value":"110105000000","label":"朝阳区"},{"value":"110108000000","label":"海淀区"}]}]},{"value":"310000000000","label":"上海市","children":[{"value":"310100000000","label":"市辖区","children":[{"value":"310101000000","label":"黄浦区"},{"value":"310104000000","label":"徐汇区"},{"value":"310106000000","label":"静安区"},{"value":"310115000000","label":"浦东新区"},{"value":"310110000000","label":"杨浦区"},{"value":"310112000000","label":"闵行区"}]}]},{"value":"440000000000","label":"广东省","children":[{"value":"440100000000","label":"广州市","children":[{"value":"440101000000","label":"市辖区"},{"value":"440105000000","label":"海珠区"},{"value":"440106000000","label":"天河区"},{"value":"440111000000","label":"白云区"},{"value":"440113000000","label":"番禺区"}]},{"value":"440300000000","label":"深圳市","children":[{"value":"440301000000","label":"市辖区"},{"value":"440303000000","label":"罗湖区"},{"value":"440304000000","label":"福田区"},{"value":"440305000000","label":"南山区"},{"value":"440306000000","label":"宝安区"},{"value":"440307000000","label":"龙岗区"},{"value":"440308000000","label":"盐田区"},{"value":"440309000000","label":"龙华区"},{"value":"440310000000","label":"坪山区"}]}]}]); //从页面url中获取id，然后将id作为queryEquipmentDatail的入参 let id =Page.params.id; if(id && id !=""){ let _model = $model.ref("queryEquipmentDetail"); _model.setValue("inputParam",{"equipmentId": id }); _model.run().then(()=>{ //获取queryEquipmentDetail的出参后赋值给页面表单模型equipmentForm var data = _model.getData(); if(data.outputParam && data.outputParam.equipment){ var equip = data.outputParam.equipment; $model.ref("equipmentForm").setData(equip); } }).catch((e)=>{ this.$dialog.error({ title:'错误', content: e.resMsg }) }); } ``` 4. 单击"创建"，关闭事件编排器，返回到页面。 2. 定义"保存"按钮的"点击"（on-click）事件。 1. 在"设计视图"中，选中"保存"按钮。 2. 在右侧"事件"页签中，单击"点击"后的+。 3. 在"添加动作"弹窗的"自定义动作"中，输入如下事件代码。 事件代码中，"***HW__*** "前缀由租户命名空间namespace决定，请根据实际情况进行替换。 ``` //debugger; // 当前组件 let _component = context.$component.current; //校验表单 _component.getForm().formValidate().then((val) => { //校验成功 //从自定义模型equipmentForm中获取界面表单数据 let data = $model.ref('equipmentForm').getData(); if (data) { console.log(data); //构造Script（editEquipment）的其他入参 let inputs = data; inputs.HW__installationSiteProvince__CST = "";//构造参数名称要与Object字段名保持一致 inputs.HW__installationSiteCity__CST = ""; inputs.HW__installationSiteArea__CST = ""; inputs.HW__fullAddress__CST = ""; inputs.HW__longitude__CST = ""; inputs.HW__latitude__CST = ""; //获取服务模型editEquipment，执行模型的action，即执行模型关联的Script let _model = $model.ref('editEquipment'); if (!inputs.cascaderAddress || inputs.cascaderAddress.length < 1) { _model.setValue('inputParam', { "equipment": inputs }); _model.run().then(() => { //提交成功后返回设备列表页面 context.$page.load('/besBaas/page#/HW__equipmentManage'); }).catch((e) => { this.$dialog.error({ title: '错误', content: e.resMsg }) }); } else { console.log('data'); //将级联框的内容转换为Script（editEquipment）的省、市、区3个参数，并拼接完整地址 let fullAddress = ""; let cascaderOptions = $model.ref('cascaderOptions').getData(); if (cascaderOptions.length < 1) { throw new Error("CascaderOptions data is wrong."); } cascaderOptions.forEach(function (province, idx) { if (province.value == inputs.cascaderAddress[0]) { //构造参数名称要与Object字段名保持一致 inputs.HW__installationSiteProvince__CST = inputs.cascaderAddress[0]; fullAddress += province.label; if (inputs.cascaderAddress.length > 1) { province.children.forEach(function (city, idxCity) { if (city.value == inputs.cascaderAddress[1]) { //构造参数名称要与Object字段名保持一致 inputs.HW__installationSiteCity__CST = inputs.cascaderAddress[1]; fullAddress += city.label; if (inputs.cascaderAddress.length > 2) { city.children.forEach(function (area, idxArea) { if (area.value == inputs.cascaderAddress[2]) { //构造参数名称要与Object字段名保持一致 inputs.HW__installationSiteArea__CST = inputs.cascaderAddress[2]; fullAddress += area.label; return false; } }); } return false; } }); } return false; } }); //界面上输入了详细地址时，拼接出fullAddress完整地址 if (inputs.HW__installationDetailAddress__CST) { fullAddress += inputs.HW__installationDetailAddress__CST; } if (fullAddress) { console.log('fullAddress'); inputs.HW__fullAddress__CST = fullAddress; _model.setValue('inputParam', { "equipment": inputs }); _model.run().then(() => { context.$page.load('/besBaas/page#/HW__equipmentManage'); }).catch((e) => { this.$dialog.error({ title: '错误', content: e.resMsg }) }); } else { _model.setValue('inputParam', { "equipment": inputs }); _model.run().then(() => { //提交成功后返回设备列表页面 context.$page.load('/besBaas/page#/HW__equipmentManage'); }).catch((e) => { this.$dialog.error({ title: '错误', content: e.resMsg }) }); } } } }).catch((error) => { }); ``` 4. 单击"创建"，关闭事件编排器，返回到页面。 3. 定义"取消"按钮的"点击"（on-click）事件。 1. 在"设计视图"中，选中"取消"按钮。 2. 在右侧"事件"页签中，单击"点击"后的"+"。 3. 在"添加动作"弹窗的"自定义动作"中，输入如下事件代码。 ``` //返回设备列表页面 context.$page.load('/besBaas/page#/HW__equipmentManage'); ``` 4. 单击"创建"，关闭事件编排器，返回到页面。 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151946.png)，保存页面。 #### 验证 在页面预览中，检查页面效果。 1. 单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231341.png)，进入预览应用页面。 系统会弹出"***HW__***editEquipment"预览页面。 2. 检查"设备品牌"下拉框，"省市区"级联框的选项是否正确。 选项正确，则说明自定义模型、页面组件与模型绑定关系是正确的。因为当前编辑完成后的保存跳转页面还没有创建，所以此时"保存"、"取消"按钮，还不能验证。