网络
虚拟私有云 VPC
弹性公网IP EIP
弹性负载均衡 ELB
NAT网关 NAT
云专线 DC
虚拟专用网络 VPN
云连接 CC
VPC终端节点 VPCEP
企业路由器 ER
企业交换机 ESW
全球加速 GA
企业连接 EC
云原生应用网络 ANC
安全与合规
安全技术与应用
Web应用防火墙 WAF
企业主机安全 HSS
云防火墙 CFW
安全云脑 SecMaster
DDoS防护 AAD
数据加密服务 DEW
数据库安全服务 DBSS
云堡垒机 CBH
数据安全中心 DSC
云证书管理服务 CCM
威胁检测服务 MTD
态势感知 SA
认证测试中心 CTC
边缘安全 EdgeSec
应用中间件
微服务引擎 CSE
分布式消息服务Kafka版
分布式消息服务RabbitMQ版
分布式消息服务RocketMQ版
API网关 APIG
分布式缓存服务 DCS
多活高可用服务 MAS
事件网格 EG
管理与监管
统一身份认证服务 IAM
消息通知服务 SMN
云监控服务 CES
应用运维管理 AOM
应用性能管理 APM
云日志服务 LTS
云审计服务 CTS
标签管理服务 TMS
配置审计 Config
应用身份管理服务 OneAccess
资源访问管理 RAM
组织 Organizations
资源编排服务 RFS
优化顾问 OA
IAM 身份中心
云运维中心 COC
资源治理中心 RGC
解决方案
高性能计算 HPC
SAP
混合云灾备
开天工业工作台 MIW
Haydn解决方案工厂
数字化诊断治理专家服务
云生态
云商店
合作伙伴中心
华为云开发者学堂
华为云慧通差旅
开发与运维
软件开发生产线 CodeArts
需求管理 CodeArts Req
流水线 CodeArts Pipeline
代码检查 CodeArts Check
编译构建 CodeArts Build
部署 CodeArts Deploy
测试计划 CodeArts TestPlan
制品仓库 CodeArts Artifact
移动应用测试 MobileAPPTest
CodeArts IDE Online
开源镜像站 Mirrors
性能测试 CodeArts PerfTest
应用管理与运维平台 ServiceStage
云应用引擎 CAE
开源治理服务 CodeArts Governance
华为云Astro轻应用
CodeArts IDE
Astro工作流 AstroFlow
代码托管 CodeArts Repo
漏洞管理服务 CodeArts Inspector
联接 CodeArtsLink
软件建模 CodeArts Modeling
Astro企业应用 AstroPro
CodeArts盘古助手
华为云Astro大屏应用
计算
弹性云服务器 ECS
Flexus云服务
裸金属服务器 BMS
云手机服务器 CPH
专属主机 DeH
弹性伸缩 AS
镜像服务 IMS
函数工作流 FunctionGraph
云耀云服务器(旧版)
VR云渲游平台 CVR
Huawei Cloud EulerOS
云化数据中心 CloudDC
网络
虚拟私有云 VPC
弹性公网IP EIP
弹性负载均衡 ELB
NAT网关 NAT
云专线 DC
虚拟专用网络 VPN
云连接 CC
VPC终端节点 VPCEP
企业路由器 ER
企业交换机 ESW
全球加速 GA
企业连接 EC
云原生应用网络 ANC
CDN与智能边缘
内容分发网络 CDN
智能边缘云 IEC
智能边缘平台 IEF
CloudPond云服务
安全与合规
安全技术与应用
Web应用防火墙 WAF
企业主机安全 HSS
云防火墙 CFW
安全云脑 SecMaster
DDoS防护 AAD
数据加密服务 DEW
数据库安全服务 DBSS
云堡垒机 CBH
数据安全中心 DSC
云证书管理服务 CCM
威胁检测服务 MTD
态势感知 SA
认证测试中心 CTC
边缘安全 EdgeSec
大数据
MapReduce服务 MRS
数据湖探索 DLI
表格存储服务 CloudTable
可信智能计算服务 TICS
推荐系统 RES
云搜索服务 CSS
数据可视化 DLV
数据接入服务 DIS
数据仓库服务 GaussDB(DWS)
数据治理中心 DataArts Studio
湖仓构建 LakeFormation
智能数据洞察 DataArts Insight
应用中间件
微服务引擎 CSE
分布式消息服务Kafka版
分布式消息服务RabbitMQ版
分布式消息服务RocketMQ版
API网关 APIG
分布式缓存服务 DCS
多活高可用服务 MAS
事件网格 EG
开天aPaaS
应用平台 AppStage
开天企业工作台 MSSE
开天集成工作台 MSSI
API中心 API Hub
云消息服务 KooMessage
交换数据空间 EDS
云地图服务 KooMap
云手机服务 KooPhone
组织成员账号 OrgID
云空间服务 KooDrive
管理与监管
统一身份认证服务 IAM
消息通知服务 SMN
云监控服务 CES
应用运维管理 AOM
应用性能管理 APM
云日志服务 LTS
云审计服务 CTS
标签管理服务 TMS
配置审计 Config
应用身份管理服务 OneAccess
资源访问管理 RAM
组织 Organizations
资源编排服务 RFS
优化顾问 OA
IAM 身份中心
云运维中心 COC
资源治理中心 RGC
区块链
区块链服务 BCS
数字资产链 DAC
华为云区块链引擎服务 HBS
解决方案
高性能计算 HPC
SAP
混合云灾备
开天工业工作台 MIW
Haydn解决方案工厂
数字化诊断治理专家服务
价格
成本优化最佳实践
专属云商业逻辑
云生态
云商店
合作伙伴中心
华为云开发者学堂
华为云慧通差旅
其他
管理控制台
消息中心
产品价格详情
系统权限
客户关联华为云合作伙伴须知
公共问题
宽限期保留期
奖励推广计划
活动
云服务信任体系能力说明
开发与运维
软件开发生产线 CodeArts
需求管理 CodeArts Req
流水线 CodeArts Pipeline
代码检查 CodeArts Check
编译构建 CodeArts Build
部署 CodeArts Deploy
测试计划 CodeArts TestPlan
制品仓库 CodeArts Artifact
移动应用测试 MobileAPPTest
CodeArts IDE Online
开源镜像站 Mirrors
性能测试 CodeArts PerfTest
应用管理与运维平台 ServiceStage
云应用引擎 CAE
开源治理服务 CodeArts Governance
华为云Astro轻应用
CodeArts IDE
Astro工作流 AstroFlow
代码托管 CodeArts Repo
漏洞管理服务 CodeArts Inspector
联接 CodeArtsLink
软件建模 CodeArts Modeling
Astro企业应用 AstroPro
CodeArts盘古助手
华为云Astro大屏应用
存储
对象存储服务 OBS
云硬盘 EVS
云备份 CBR
高性能弹性文件服务 SFS Turbo
弹性文件服务 SFS
存储容灾服务 SDRS
云硬盘备份 VBS
云服务器备份 CSBS
数据快递服务 DES
云存储网关 CSG
专属分布式存储服务 DSS
数据工坊 DWR
地图数据 MapDS
键值存储服务 KVS
容器
云容器引擎 CCE
云容器实例 CCI
容器镜像服务 SWR
云原生服务中心 OSC
应用服务网格 ASM
华为云UCS
数据库
云数据库 RDS
数据复制服务 DRS
文档数据库服务 DDS
分布式数据库中间件 DDM
云数据库 GaussDB
云数据库 GeminiDB
数据管理服务 DAS
数据库和应用迁移 UGO
云数据库 TaurusDB
人工智能
AI开发平台ModelArts
华为HiLens
图引擎服务 GES
图像识别 Image
文字识别 OCR
自然语言处理 NLP
内容审核 Moderation
图像搜索 ImageSearch
医疗智能体 EIHealth
企业级AI应用开发专业套件 ModelArts Pro
人脸识别服务 FRS
对话机器人服务 CBS
语音交互服务 SIS
人证核身服务 IVS
视频智能分析服务 VIAS
城市智能体
自动驾驶云服务 Octopus
盘古大模型 PanguLargeModels
IoT物联网
设备接入 IoTDA
全球SIM联接 GSL
IoT数据分析 IoTA
路网数字化服务 DRIS
IoT边缘 IoTEdge
设备发放 IoTDP
企业应用
域名注册服务 Domains
云解析服务 DNS
企业门户 EWP
ICP备案
商标注册
华为云WeLink
华为云会议 Meeting
隐私保护通话 PrivateNumber
语音通话 VoiceCall
消息&短信 MSGSMS
云管理网络
SD-WAN 云服务
边缘数据中心管理 EDCM
云桌面 Workspace
应用与数据集成平台 ROMA Connect
ROMA资产中心 ROMA Exchange
API全生命周期管理 ROMA API
政企自服务管理 ESM
视频
实时音视频 SparkRTC
视频直播 Live
视频点播 VOD
媒体处理 MPC
视频接入服务 VIS
数字内容生产线 MetaStudio
迁移
主机迁移服务 SMS
对象存储迁移服务 OMS
云数据迁移 CDM
迁移中心 MGC
专属云
专属计算集群 DCC
开发者工具
SDK开发指南
API签名指南
DevStar
华为云命令行工具服务 KooCLI
Huawei Cloud Toolkit
CodeArts API
云化转型
云架构中心
云采用框架
用户服务
账号中心
费用中心
成本中心
资源中心
企业管理
工单管理
客户运营能力
国际站常见问题
支持计划
专业服务
合作伙伴支持计划
我的凭证
华为云公共事业服务云平台
工业软件
工业数字模型驱动引擎
硬件开发工具链平台云服务
工业数据转换引擎云服务

组装“编辑设备”页面

更新时间:2024-11-04 GMT+08:00
分享

组装页面包括拼装页面组件、定义组件的事件代码,并通过公共接口调用“编辑设备”脚本。

页面分析

如果要实现将前端页面上输入的设备信息保存到数据库中,需要创建与前端组件绑定的自定义模型,以及与后端逻辑关联的服务模型,如图2所示。

图1 编辑设备页面预览
页面上包含输入框(设备编码、设备名称、设备型号和地址)、选择框(设备品牌)和级联选择框(省市区)。其中,“省/市/区”级联框不仅要值绑定,还需要做属性绑定:
  • 级联框的选项:以属性绑定的方式,与cascaderOptions关联。即cascaderOptions的内容,将成为级联框的可选择项。
  • 级联框的选择结果:以值绑定的方式,与equipmentForm关联。即级联框的选择结果,将保持到equipmentForm.cascaderAddress中。
    图2 配置态的模型定义

    同时,还需要为页面定义页面事件,为“保存”按钮定义“点击”事件,在事件的脚本代码中调用上述服务模型的API。

    在应用预览下,从打开页面、在页面输入内容,到单击“保存”按钮,触发的执行逻辑如图3所示。

    图3 执行逻辑

定义模型

  1. 进入创建“设备维修管理系统”应用中创建的应用。
  2. 在“Equipment”中,将鼠标放在“Page”目录上,单击界面上出现的“+”,选择“标准页面”。
  3. 在“标签”和“名称”文本框中输入“editEquipment”,单击“添加”。

    平台实际创建的页面名称为“HW__editEquipment”,包含前缀“HW__”,对应首次创建应用时定义的命名空间。新建创建的页面,默认是当前用户锁定状态,可以进行编辑保存等操作。

    当编辑已有标准页面时,为防止编辑时多人篡改,编辑前请单击进行锁定。

  4. 定义与“省/市/区”级联框的可选项相关联的自定义模型。

    1. 在页面底部单击“模型视图”,进入模型视图页面,单击“新增模型”。
    2. 添加自定义模型,模型名称“cascaderOptions”,单击“下一步”,如图4所示。
      图4 定义级联框用到的自定义模型
    3. 设置保持不变,单击“下一步”。
    4. 方法保持不变,单击“确定”。
    5. 单击页面上方的,保存设置。

  5. 定义与页面上各个输入框、选择框相关联的自定义模型。

    1. 在“模型视图”中,单击“新增模型”。
    2. 添加自定义模型,模型名称“equipmentForm”,单击“下一步”,如图5所示。
      图5 定义页面组件需要关联的自定义模型
    3. 单击“新增节点”,逐一添加与页面元素对应的参数(name、HW__equipmentSN__CST、HW__equipmentBrand__CST、HW__equipmentModel__CST、cascaderAddress、HW__installationDetailAddress__CST),单击“下一步”,如图6所示。
      须知:

      为简化后续事件脚本,除cascaderAddress外,请确保其他5个参数的参数名与设备对象(HW__Equipment__CST)的字段名保持一致。注意这里的下划线是两个,要与表1里的字段保持一致,HW__需要修改为实际的命名空间前缀。

      图6 添加模型包含的参数
    4. 方法保持不变,单击“确定”。
    5. 单击页面上方的,保存设置。

  6. 定义与API(editEquipment:1.0.0)关联的服务模型。

    1. 在“模型视图”中,单击“新增模型”。
    2. 添加服务模型,模型名称“editEquipment”,来源选择“服务”,单击“下一步”,如图7所示。
      图7 定义服务模型
    3. 指定模型与API“editEquipment”关联,单击“下一步”,如图8所示。
      关联API后,系统会自动显示API中脚本的输入、输出参数。
      图8 为模型关联Script
    4. 方法保持不变,单击“确定”。

      系统自动添加了执行的方法,如图9所示。未来,将在事件脚本中执行这个方法,即执行模型关联的API中的脚本。

      图9 为模型定义方法
    5. 单击页面上方的,保存设置。

  7. 定义与API(queryEquipmentDetail)关联的服务模型。

    1. 在“模型视图”中,单击“新增模型”。
    2. 添加服务模型,模型名称“queryEquipmentDetail”,“来源”选择“服务”,单击“下一步”。
    3. 指定模型与API“queryEquipmentDetail”,单击“下一步”。
      图10 为模型关联Script
    4. 方法保持不变,单击“确定”。
    5. 单击页面上方的,保存设置。
    图11 新增的页面模型

拖拽组件并关联模型

  1. 单击“设计视图”,切换到页面设计视图。

    图12 切换到设计视图组件列表

  2. 将左侧组件区的“表单”拖拽到右侧“页面内容”中,在“元数据表单配置向导”弹窗底部,单击“取消”,创建一个空的表单控件。

    当前不单独定义数据源,因此需要单击“取消”数据绑定。

    图13 拖拽表单到页面并取消数据绑定

  3. 组装参数区域。

    1. 从左侧组件列表中,拖一个“容器”到上一步创建的“表单”。
    2. 从左侧组件列表中,拖一个“分栏”到上一步创建的“容器”中。

      “分栏”默认有2个“栏”,即当前栅格中包含1行1列的区域。

    3. 选中“分栏”,在右侧属性的“行布局”中,单击,将分栏设置为3栏。
      图14 设置分栏为3栏
    4. 在右侧“属性”页签中,单击“新增行”后面的图标,新增一行,如图15所示。设置后,分栏组件被设置为2行(分栏)3列(栏)。
      图15 设置表格内的行列数
    5. 从左侧组件区的拖一个“输入框”到分栏组件的第1行(分栏)第1栏,并在右侧“属性”页签中将“标签”修改为“设备编码”。
      图16 设备编码
    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 拖拽容器
      图18 设置居中对齐
    2. 从左侧组件区拖拽一个“按钮”到刚创建的“容器”中,并在右侧“属性”页签中,将“显示名称”修改为“保存”,将“类型”修改为“主要按钮”。
    3. 拖拽一个按钮到“保存”按钮右边,并设置为“取消”按钮,类型设置为“默认按钮”。
    4. 单击界面上方的,保存页面,可以在属性面板底部查看组件树。
      图19 组装完成后页面的组件树

  6. 为页面组件关联模型。

    1. 选中“设备名称”输入框。
    2. 在右侧“属性”页签中单击,为“设备名称”输入框绑定“equipmentForm”自定义模型中的“name”参数,如图20所示。
      数据绑定后,当在前台界面输入内容时,系统就会把输入框中的内容,赋值给“name”。
      图20 输入框数据绑定
    3. 重复上一步,为“设备编码”、“设备型号”、“详细地址”文本输入框绑定“equipmentForm”自定义模型中的对应参数。
    4. 选中“设备品牌”下拉选择框,在右侧“属性”页签中单击,为选择框绑定“equipmentForm”自定义模型中的“HW__equipmentBrand__CST”参数。
    5. 选中“设备品牌”下拉选择框,在右侧“基本属性”中,单击“选项列表”的,在弹窗中输入“equipmentBrand”,在联想记录中,选择设备对象字段“HW__equipmentBrand__CST”,为选择框添加下拉选项关联的字段,如图21所示。
      图21 为下拉选择框定义可选项
      图22 输入字段搜索
      图23 关联字段
    6. 选中“省/市/区”级联框,在右侧“属性”页签中单击,为级联框绑定“equipmentForm”自定义模型中的“cascaderAddress”参数。
    7. 单击属性值绑定后的“+”,将“属性”设置为“选择数据”,“模型字段”绑定到“cascaderOptions”,如图24所示。
      数据绑定后,级联选择框的选项来自“cascaderOptions”;同时,当在前台界面选择省/市/区时,系统就会把选择结果赋值给“equipmentForm.cascaderAddress”。
      图24 级联框数据绑定
    8. 单击页面上方的,保存页面。

定义页面事件

  1. 定义页面加载事件。

    1. 在“设计视图”中,选中最外层的“页面”,也可以直接单击组件导航,快速定位。
    2. 在右侧“事件”页签中,单击“加载”后的“+”,为页面添加事件代码。
      图25 添加页面代码
    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. 在“添加动作”弹窗的“自定义动作”中,输入如下事件代码。
      须知:

      脚本中红色内容请替换为实际的对象名、字段名、页面名。

      //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. 单击页面上方的,保存页面。

验证

在页面预览中,检查页面效果。

  1. 单击界面上方的,进入预览应用页面。

    系统会弹出“HW__editEquipment”预览页面。

  2. 检查“设备品牌”下拉框,“省市区”级联框的选项是否正确。

    选项正确,则说明自定义模型、页面组件与模型绑定关系是正确的。因为当前编辑完成后的保存跳转页面还没有创建,所以此时“保存”、“取消”按钮,还不能验证。

提示

您即将访问非华为云网站,请注意账号财产安全

文档反馈

文档反馈

意见反馈

0/500

标记内容

同时提交标记内容