拖拽组件并关联模型

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__ CS T”参数。
   5. 选中“设备品牌”下拉选择框，在右侧“基本属性”中，单击“选项列表”的，在弹窗中输入“equipmentBrand”，在联想记录中，选择设备对象字段“HW__equipmentBrand__CST”，为选择框添加下拉选项关联的字段，如图21所示。
      图21 为下拉选择框定义可选项
      
      图22 输入字段搜索
      
      图23 关联字段
      
   6. 选中“省/市/区”级联框，在右侧“属性”页签中单击，为级联框绑定“equipmentForm”自定义模型中的“cascaderAddress”参数。
   7. 单击属性值绑定后的“+”，将“属性”设置为“选择数据”，“模型字段”绑定到“cascaderOptions”，如图24所示。
      数据绑定后，级联选择框的选项来自“cascaderOptions”；同时，当在前台界面选择省/市/区时，系统就会把选择结果赋值给“equipmentForm.cascaderAddress”。

      图24 级联框数据绑定
      
   8. 单击页面上方的，保存页面。