步骤1 单击“设计视图”切换到页面设计视图。
图3-84 切换到设计视图组件列表
步骤2 将左侧组件区的“表单”拖拽到右侧“页面内容”中，在“元数据表单配置向导”弹 窗底部，单击“取消”，创建一个空的表单控件。
因为当前不单独定义数据源，因此需要单击“取消”数据绑定。
图3-85 拖拽表单到页面并取消数据绑定
步骤3 组装参数区域。
1. 从左侧组件列表中，拖一个“容器”到上一步创建的“表单”。
2. 从左侧组件列表中，拖一个“分栏”到上一步创建的“容器”中。
“分栏”默认有2个“栏”，即当前栅格中包含1行1列的区域。
3. 选中“分栏”，在右侧属性的“行布局”中，单击 ，将分栏设置为3栏。
图3-86 设置分栏为 3 栏
4. 在右侧“属性”页签中，单击“新增行”后面的图标，新增一行，如图3-87所 示。设置后，分栏组件被设置为2行（分栏）3列（栏）。
图3-87 设置表格内的行列数
5. 从左侧组件区的拖一个“输入框”到分栏组件的第1行（分栏）第1栏，并在右侧
“属性”页签中将“标签”修改为“设备编码”。
图3-88 设备编码
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创建的“容器”后面（注意要在表单里 面，两个容器在同级），并在右侧“属性”页签中将“水平对齐方式”修改为
“中”，即居中对齐。
图3-89 拖拽容器
图3-90 设置居中对齐
2. 从左侧组件区拖拽一个“按钮”到刚刚创建的“容器”中，并在右侧“属性”页 签中，将“显示名称”修改为“保存”，将“类型”修改为“主要按钮”。
3. 拖拽一个按钮到“保存”按钮右边，并设置为“取消”按钮。
“取消”按钮的“类型”保持“默认按钮”不变。
4. 单击界面上方 保存图标，保存页面，可以在属性面板底部查看组件树。
图3-91 组装完成后页面的组件树
步骤6 为页面组件关联模型。
1. 选中“设备名称”输入框。
2. 在右侧“属性”页签中单击 ，为“设备名称”输入框绑定"equipmentForm"自 定义模型中的“name”参数，如图3-92所示。
数据绑定后，当在前台界面输入内容时，系统就会把输入框中的内容，赋值给
“name”。
图3-92 输入框数据绑定
3. 重复上一步，为“设备编码”、“设备型号”、“详细地址”文本输入框绑定
"equipmentForm"自定义模型中的对应参数。
4. 选中“设备品牌”下拉选择框，在右侧“属性”页签中单击 ，为选择框绑定
"equipmentForm"自定义模型中的“HW__equipmentBrand__CST”参数。
5. 选中“设备品牌”下拉选择框，在右侧“基本属性”中，单击“选项列表”的
，在弹窗中输入“equipmentBrand”，在联想记录中，选择设备对象字段
“HW__equipmentBrand__CST”，为选择框添加下拉选项关联的字段，如图
3-93所示。
图3-93 为下拉选择框定义可选项
图3-94 输入字段搜索
图3-95 关联字段
6. 选中“省/市/区”级联框，在右侧“属性”页签中单击 ，为级联框绑定
"equipmentForm"自定义模型中的“cascaderAddress”参数。
7. 单击属性值绑定后的“+”，将“属性”设置为“选择数据”，“模型字段”绑定 到“cascaderOptions”，如图3-96所示。
数据绑定后，级联选择框的选项来自“cascaderOptions”；同时，当在前台界面 选择省/市/区时，系统就会把选择结果赋值给
“equipmentForm.cascaderAddress”。
图3-96 级联框数据绑定
8. 单击页面上部的 保存图标。 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 })