华为云首页用户手册

APPCUBE-组装“编辑设备”页面:拖拽组件并关联模型

时间：2023-11-01 16:15:21

APPCUBE 开发“编辑设备”功能

拖拽组件并关联模型

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

图12 切换到设计视图组件列表
将左侧组件区的“表单”拖拽到右侧“页面内容”中，在“元数据表单配置向导”弹窗底部，单击“取消”，创建一个空的表单控件。
当前不单独定义数据源，因此需要单击“取消”数据绑定。

图13 拖拽表单到页面并取消数据绑定
组装参数区域。
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栏，并将“标签”修改为“省/市/区”。
组装页面标题。
在左侧组件区拖拽一个“标题”组件到上一步创建的“容器”前面，并在右侧“属性”页签中将“标题内容”修改为“设备详情”，并设置“样式”的“高级设置”为“:root{text-align:center;font-size:20px;}”。
组装按钮区域。
1. 在左侧组件区拖拽一个“容器”到3中创建的“容器”后（注意要在表单里面，两个容器在同级），并在右侧“属性”页签中将“水平对齐方式”修改为“中”，即居中对齐。
  图17 拖拽容器
  
  图18 设置居中对齐
2. 从左侧组件区拖拽一个“按钮”到刚创建的“容器”中，并在右侧“属性”页签中，将“显示名称”修改为“保存”，将“类型”修改为“主要按钮”。
3. 拖拽一个按钮到“保存”按钮右边，并设置为“取消”按钮。
  “取消”按钮的“类型”保持“默认按钮”不变。
4. 单击界面上方的，保存页面，可以在属性面板底部查看组件树。
  图19 组装完成后页面的组件树
为页面组件关联模型。
1. 选中“设备名称”输入框。
2. 在右侧“属性”页签中单击，为“设备名称”输入框绑定“equipmentForm”自定义模型中的“name”参数，如图20所示。
  数据绑定后，当在前台界面输入内容时，系统就会把输入框中的内容，赋值给“name”。
  图20 输入框数据绑定
3. 重复上一步，为“设备编码”、“设备型号”、“详细地址”文本输入框绑定“equipmentForm”自定义模型中的对应参数。
4. 选中“设备品牌”下拉选择框，在右侧“属性”页签中单击，为选择框绑定“equipmentForm”自定义模型中的“HW__equipmentBrand__ CS T”参数。
5. 选中“设备品牌”下拉选择框，在右侧“基本属性”中，单击“选项列表”的，在弹窗中输入“equipmentBrand”，在联想记录中，选择设备对象字段“HW__equipmentBrand__CST”，为选择框添加下拉选项关联的字段，如图21所示。
  图21 为下拉选择框定义可选项
  
  图22 输入字段搜索
  
  图23 关联字段
6. 选中“省/市/区”级联框，在右侧“属性”页签中单击，为级联框绑定“equipmentForm”自定义模型中的“cascaderAddress”参数。
7. 单击属性值绑定后的“+”，将“属性”设置为“选择数据”，“模型字段”绑定到“cascaderOptions”，如图24所示。
  数据绑定后，级联选择框的选项来自“cascaderOptions”；同时，当在前台界面选择省/市/区时，系统就会把选择结果赋值给“equipmentForm.cascaderAddress”。
  图24 级联框数据绑定
8. 单击页面上方的，保存页面。