更新时间：2024-06-27 GMT+08:00
组装“编辑设备”页面
组装页面包括拼装页面组件、定义组件的事件代码，并通过公共接口调用“编辑设备”脚本。
页面分析
如果要实现将前端页面上输入的设备信息保存到数据库中，需要创建与前端组件绑定的自定义模型，以及与后端逻辑关联的服务模型，如图2所示。
图1 编辑设备页面预览
页面上包含输入框（设备编码、设备名称、设备型号和地址）、选择框（设备品牌）和级联选择框（省市区）。其中，“省/市/区”级联框不仅要值绑定，还需要做属性绑定：
- 级联框的选项：以属性绑定的方式，与cascaderOptions关联。即cascaderOptions的内容，将成为级联框的可选择项。
- 级联框的选择结果：以值绑定的方式，与equipmentForm关联。即级联框的选择结果，将保持到equipmentForm.cascaderAddress中。
同时，还需要为页面定义页面事件，为“保存”按钮定义“点击”事件，在事件的脚本代码中调用上述服务模型的API。
在应用预览下，从打开页面、在页面输入内容，到单击“保存”按钮，触发的执行逻辑如图3所示。
定义模型
- 进入创建“设备维修管理系统”应用中创建的应用。
- 在“Equipment”中，将鼠标放在“Page”目录上，单击界面上出现的“+”，选择“标准页面”。
- 在“标签”和“名称”文本框中输入“editEquipment”，单击“添加”。
平台实际创建的页面名称为“HW__editEquipment”，包含前缀“HW__”，对应首次创建应用时定义的命名空间。新建创建的页面，默认是当前用户锁定状态，可以进行编辑保存等操作。
当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击
进行锁定。 - 定义与“省/市/区”级联框的可选项相关联的自定义模型。
- 在页面底部单击“模型视图”，进入模型视图页面，单击“新增模型”。
- 添加自定义模型，模型名称“cascaderOptions”，单击“下一步”，如图4所示。
- 设置保持不变，单击“下一步”。
- 方法保持不变，单击“确定”。
- 单击页面上方的
，保存设置。
- 定义与页面上各个输入框、选择框相关联的自定义模型。
- 在“模型视图”中，单击“新增模型”。
- 添加自定义模型，模型名称“equipmentForm”，单击“下一步”，如图5所示。
- 单击“新增节点”，逐一添加与页面元素对应的参数（name、HW__equipmentSN__CST、HW__equipmentBrand__CST、HW__equipmentModel__CST、cascaderAddress、HW__installationDetailAddress__CST），单击“下一步”，如图6所示。
为简化后续事件脚本，除cascaderAddress外，请确保其他5个参数的参数名与设备对象（HW__Equipment__CST）的字段名保持一致。注意这里的下划线是两个，要与表1里的字段保持一致，HW__需要修改为实际的命名空间前缀。
- 方法保持不变，单击“确定”。
- 单击页面上方的
，保存设置。
- 定义与API（editEquipment:1.0.0）关联的服务模型。
- 定义与API（queryEquipmentDetail）关联的服务模型。
- 在“模型视图”中，单击“新增模型”。
- 添加服务模型，模型名称“queryEquipmentDetail”，“来源”选择“服务”，单击“下一步”。
- 指定模型与API“queryEquipmentDetail”，单击“下一步”。
图10 为模型关联Script
- 方法保持不变，单击“确定”。
- 单击页面上方的
，保存设置。
图11 新增的页面模型
拖拽组件并关联模型
- 单击“设计视图”，切换到页面设计视图。
图12 切换到设计视图组件列表
- 将左侧组件区的“表单”拖拽到右侧“页面内容”中，在“元数据表单配置向导”弹窗底部，单击“取消”，创建一个空的表单控件。
当前不单独定义数据源，因此需要单击“取消”数据绑定。
图13 拖拽表单到页面并取消数据绑定
- 组装参数区域。
- 从左侧组件列表中，拖一个“容器”到上一步创建的“表单”。
- 从左侧组件列表中，拖一个“分栏”到上一步创建的“容器”中。
- 选中“分栏”，在右侧属性的“行布局”中，单击
，将分栏设置为3栏。
图14 设置分栏为3栏
- 在右侧“属性”页签中，单击“新增行”后面的图标，新增一行，如图15所示。设置后，分栏组件被设置为2行（分栏）3列（栏）。
- 从左侧组件区的拖一个“输入框”到分栏组件的第1行（分栏）第1栏，并在右侧“属性”页签中将“标签”修改为“设备编码”。
图16 设备编码
- 分别向第1行第2栏、第2行第1栏、第2行第3栏中拖一个“输入框”，并设置“标签”为“设备名称”、第2行第1栏“设备型号”、第2行第3栏“详细地址”。
- 从左侧组件列表中，拖一个“下拉框”到分栏组件的第1行第3栏，并在右侧“属性”页签中将“标签”修改为“设备品牌”。
- 从左侧组件列表中，拖一个“级联选择框”到分栏组件的第2行第2栏，并将“标签”修改为“省/市/区”。
- 组装页面标题。
在左侧组件区拖拽一个“标题”组件到上一步创建的“容器”前面，并在右侧“属性”页签中将“标题内容”修改为“设备详情”，并设置“样式”的“高级设置”为“:root{text-align:center;font-size:20px;}”。
- 组装按钮区域。
- 在左侧组件区拖拽一个“容器”到3中创建的“容器”后（注意要在表单里面，两个容器在同级），并在右侧“属性”页签中将“水平对齐方式”修改为“中”，即居中对齐。
图17 拖拽容器
图18 设置居中对齐
- 从左侧组件区拖拽一个“按钮”到刚创建的“容器”中，并在右侧“属性”页签中，将“显示名称”修改为“保存”，将“类型”修改为“主要按钮”。
- 拖拽一个按钮到“保存”按钮右边，并设置为“取消”按钮，类型设置为“默认按钮”。
- 单击界面上方的
，保存页面，可以在属性面板底部查看组件树。
图19 组装完成后页面的组件树
- 在左侧组件区拖拽一个“容器”到3中创建的“容器”后（注意要在表单里面，两个容器在同级），并在右侧“属性”页签中将“水平对齐方式”修改为“中”，即居中对齐。
- 为页面组件关联模型。
- 选中“设备名称”输入框。
- 在右侧“属性”页签中单击
，为“设备名称”输入框绑定“equipmentForm”自定义模型中的“name”参数，如图20所示。
- 重复上一步，为“设备编码”、“设备型号”、“详细地址”文本输入框绑定“equipmentForm”自定义模型中的对应参数。
- 选中“设备品牌”下拉选择框，在右侧“属性”页签中单击
，为选择框绑定“equipmentForm”自定义模型中的“HW__equipmentBrand__CST”参数。 - 选中“设备品牌”下拉选择框，在右侧“基本属性”中，单击“选项列表”的
，在弹窗中输入“equipmentBrand”，在联想记录中，选择设备对象字段“HW__equipmentBrand__CST”，为选择框添加下拉选项关联的字段，如图21所示。
图22 输入字段搜索
图23 关联字段
- 选中“省/市/区”级联框，在右侧“属性”页签中单击
，为级联框绑定“equipmentForm”自定义模型中的“cascaderAddress”参数。 - 单击属性值绑定后的“+”，将“属性”设置为“选择数据”，“模型字段”绑定到“cascaderOptions”，如图24所示。
- 单击页面上方的
，保存页面。
定义页面事件
- 定义页面加载事件。
- 在“设计视图”中，选中最外层的“页面”，也可以直接单击组件导航，快速定位。
- 在右侧“事件”页签中，单击“加载”后的“+”，为页面添加事件代码。
图25 添加页面代码
- 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码。
//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 }) }); } - 单击“创建”，关闭事件编排器，返回到页面。
- 定义“保存”按钮的“点击”（on-click）事件。
- 在“设计视图”中，选中“保存”按钮。
- 在右侧“事件”页签中，单击“点击”后的+。
- 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码。
脚本中红色内容请替换为实际的对象名、字段名、页面名。
//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) => { }); - 单击“创建”，关闭事件编排器，返回到页面。
- 定义“取消”按钮的“点击”（on-click）事件。
- 在“设计视图”中，选中“取消”按钮。
- 在右侧“事件”页签中，单击“点击”后的“+”。
- 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码。
//返回设备列表页面 context.$page.load('/besBaas/page#/HW__equipmentManage'); - 单击“创建”，关闭事件编排器，返回到页面。
- 单击页面上方的
，保存页面。
验证
在页面预览中，检查页面效果。
- 单击界面上方的
，进入预览应用页面。系统会弹出“HW__editEquipment”预览页面。
- 检查“设备品牌”下拉框，“省市区”级联框的选项是否正确。
选项正确，则说明自定义模型、页面组件与模型绑定关系是正确的。因为当前编辑完成后的保存跳转页面还没有创建，所以此时“保存”、“取消”按钮，还不能验证。
父主题： 开发“编辑设备”功能
