操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“WorkOrder”目录中，鼠标放在“Page”上，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。 在“标签”和“名称”文本框中输入“createWorkOrder”，单击“添加”。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在标准页面的“设计视图”下，单击页面底部的“模型视图”页签，切换到“模型视图”。 图3 切换模型视图 定义模型“basicInfo”。 在模型视图页面，单击“新增模型”。 添加自定义模型，模型名称“basicInfo”，单击“下一步”。 单击“新增节点”，新增设备ID字段“HW__equipmentId__ CS T”，并设置字段类型“SingleSelect”，加粗斜体内容请替换为实际命名空间前缀。 依次增加表2中列出的字段名称，单击“下一步”，再单击“确定”。 图4 新增节点字段 表2 新增basicInfo模型的节点字段 字段名称 字段类型 字段描述 HW__equipmentId__CST（上一步已添加） SingleSelect 设备ID HW__title__CST Text 工单标题 createdDate DateTime 创建时间 HW__type__CST SingleSelect 工单类型 HW__priority__CST SingleSelect 工单优先级 HW__description__CST TextArea 工单备注说明 HW__faultPhenomenon__CST Text 故障现象说明 HW__customer__CST Text 客户接口人 HW__recoveryTime__CST DateTime 客户要求故障恢复时间 HW__source__CST Text 工单来源 HW__arriveTime__CST DateTime 客户要求工程师到达现场时间 单击页面上方的，保存设置。 定义模型“equipmentList”。 在模型视图页面，单击“新增模型”。 添加自定义模型，模型名称“equipmentList”，单击“下一步”。 单击“下一步”，再单击“确定”。 单击页面上方的，保存设置。 定义模型“equipmentInfo”。 在模型视图页面，单击“新增模型”。 添加自定义模型，模型名称“equipmentInfo”，单击“下一步”。 单击“新增节点”，依次新增表3中列出的字段名称，单击“下一步”，再单击“确定”。 表3 新增equipmentInfo模型的节点字段 字段名称 字段类型 字段描述 name Text 设备名称 HW__equipmentSN__CST Text 设备编码 HW__equipmentBrand__CST Text 设备品牌 HW__equipmentModel__CST Text 设备型号 HW__fullAddress__CST Text 设备完整地址 单击页面上方的，保存设置。 定义模型“equipmentOptions”。 在模型视图页面，单击“新增模型”。 添加服务模型，模型名称“equipmentOptions”，单击“下一步”。 设置服务类型为“公共接口”，“项目”选择“设备维修管理系统”，公共接口为“equipmentSelectListQuery”，即创建“查询设备列表”脚本中定义的脚本“equipmentSelectListQuery”对应的公共接口，单击“下一步”，再单击“确定”。 图5 选择服务 单击页面上方的，保存设置。 定义模型“setInstanceId”。 在模型视图页面，单击“新增模型”。 添加服务模型，模型名称“setInstanceId”，单击“下一步”。 设置服务类型为“公共接口”，“项目”选择“设备维修管理系统”，公共接口为“createWorkOrder”，即“生成工单”脚本“createWorkOrder”对应的公共接口，单击“下一步”，再单击“确定”。 单击页面上方的，保存设置。 拖拽页面框架组件（“基本信息”、“设备信息”、“其他信息”以及“按钮”区域）。 单击页面底部的“设计视图”页签，切换到“设计视图”。 从基本组件列表区拖拽“容器”到右侧“页面内容”中，然后再拖拽一个“表单”到“容器”中，并在“元数据表单配置向导”弹窗中，单击“取消”。 拖拽一个“容器”到“表单”下方（表单之外），作为按钮区域的容器。 图6 拖拽按钮区域容器 选择“表单”，拖一个“折叠面板”组件到“表单”中，并在页面右下角的组件树中，删除2个“折叠页”（在组件树中，选中后单击鼠标右键，再单击“删除”即可），删除后折叠面板包含1个折叠页。 图7 组件层级关系及删除多余折叠页 在“折叠面板”中，选中“折叠页签标题”，然后在右侧“属性”页签中进行以下设置： 在“样式”下的“背景”，将背景颜色修改为浅蓝色（#9BCCEF）。 图8 设置背景为浅蓝色 选中图标，设置图标颜色为深蓝色（#004080）。 图9 设置图标颜色为深蓝色 选中图标后的“标签”，设置“文本内容”为“基本信息”。 图10 设置标签内容为基本信息 您还可以根据需要，修改边距等其他样式，使其更美观。 展开组件树，将鼠标放在折叠面板上，单击右键选择“复制”，再单击右键选择2次“粘贴”，在折叠面板之后，添加2个同样的折叠面板。 图11 粘贴后的折叠面板 分别设置第二、第三个折叠面板的“折叠页签标题”为“设备信息”、“其他信息”。 图12 修改折叠页标题 单击界面上方的，保存页面。 组装“基本信息”区域。 在“基本信息”所在的折叠面板下，从左侧组件列表中，拖一个“表单”到“折叠页签内容”中，然后在“元数据表单配置向导”弹窗中，单击“取消”。 图13 拖入表单 选中“表单”，在右侧属性中，单击，在模型选择弹窗中选中“basicInfo”，单击“确定”，并在提示弹窗中，单击“绑定并生成表单”。 图14 表单数据绑定 在生成的表单中，删除如表4中的多余字段所在组件以及按钮。 表4 需要删除的组件名及组件 字段名 组件 HW__faultPhenomenon__CST 输入框 HW__customer__CST 输入框 HW__recoveryTime__CST 日期选择框 HW__arriveTime__CST 日期选择框 保存、重置 按钮 分别选择表单中的2个“分栏”，在“行布局”中单击，修改分栏为4列，并按图16所示调整字段组件的位置（选中组件，用鼠标即可拖拽组件到目的栏），调整完成后，删除多余空白分栏。 图15 调整分栏为4列 图16 调整后表单 选择表单中的各个组件，依次在右侧属性面板中修改各个组件标签，详细标签名如表5所示。 表5 修改表单组件名及组件对应字段 标签名 字段名 组件类型 设备名称 HW__equipmentId__CST 下拉框 工单标题 HW__title__CST 输入框 创建时间 createdDate 日期选择框 工单类型 HW__type__CST 下拉框 优先级 HW__priority__CST 下拉框 工单来源 HW__source__CST 输入框 备注 HW__description__CST 多行输入框 选中“设备名称”下拉框，在右侧属性页签，单击“属性值绑定”的“+”，“属性”设置为“选项”，然后再单击“模型字段”的设置图标，在弹窗中勾选“equipmentList”模型，对“设备名称”下拉框进行属性绑定。 图17 添加属性值绑定 选中“工单类型”下拉框，在右侧属性页签中，设置“维修”和“保养”2个选项。 图18 添加工单类型 选中“优先级”下拉框，在右侧属性页签中，设置“高”、“中”和“低”3个选项。 图19 添加优先级 单击界面上方的，保存页面。 组装“设备信息”区。 在“设备信息”所在的“折叠面板”中，拖入一个“表单”组件到“折叠页签内容”中，并在“元数据表单配置向导”弹窗中，单击“取消”。 选择“表单”，在右侧属性中，单击，在弹窗中选中“equipmentInfo”，单击“确定”，并在提示中单击“绑定并生成表单”。 图20 表单数据绑定 删除“name”输入框、“保存”、“取消”按钮以及按钮所在“容器”。 选择“分栏”，在“行布局”中单击，修改分栏组件为4列，并删除空白分栏，调整后如图21所示。 图21 调整后表单 修改各个输入框组件的标签名，并“公共”属性下，设置“只读”。 表6 组件名及对应字段 标签名 字段名 其他属性 设备编码 HW__equipmentSN__CST 只读 设备品牌 HW__equipmentBrand__CST 只读 设备型号 HW__equipmentModel__CST 只读 地址 HW__fullAddress__CST 只读 单击页面上方的，保存页面。 组装“其他信息”区域，组装完成后如图23所示。 图22 其他信息区域组件结构 图23 其他信息区域 在“其他信息”所在的“折叠面板”中，拖1个“表单”组件到“折叠页签内容”中，然后单击“取消”元数据表单配置向导弹窗。 设置表单样式：选中“表单”组件，在“样式”下“高级设置”中，设置表单样式“:root{margin-left:50px;}”。 在“表单”中，拖入1个“折叠面板”，并删除1个折叠页，保留2个折叠页。 修改第1个折叠页“折叠页签标题”的“标签”下的“文本内容”修改为“故障记录”。 在“故障记录”的“折叠页签内容”下，拖入1个分栏组件，设置为3列，并向第1列拖入“输入框”，并修改输入框的标签为“故障现象说明”。 修改第2个折叠页“折叠页签标题”的“标签”下的“文本内容”修改为“时间记录”。 在“时间记录”的“折叠页签内容”下，拖入1个分栏组件，并设置为3列，并分别向第1列和第2列拖入1个“日期选择框”，修改“标签”为“客户要求工程师到达现场时间”、“客户要求故障恢复时间”，然后修改“类型”为“日期时间”并设置“日期格式”为“yyyy-MM-dd HH:mm:ss”，向第3列拖入一个输入框，设置“标签”为“客户接口人”。 图24 设置日期格式 选择“故障现象说明”输入框，在右侧属性页签中，单击，为输入框绑定“basicInfo”下的“HW__faultPhenomenon__CST”字段。 参考上一步，为其他组件绑定数据字段，组件名及对应字段，如表7所示。 表7 组件名及对应字段 标签名 绑定的字段名 组件类型 客户要求工程师到达现场时间 HW__arriveTime__CST 日期选择框 客户要求故障恢复时间 HW__recoveryTime__CST 日期选择框 客户接口人 HW__customer__CST 输入框 组装“按钮”区域。 选择页面最下方“容器”，设置“水平对齐方式”为“中”，并拖入2个“按钮”组件。 图25 设置容器对齐方式 修改第1个“按钮”的“显示名称”为“提交”。 修改第2个“按钮”的“显示名称”为“取消”，“类型”为“默认按钮”。 单击页面上方的，保存页面。

页面组件分析 “生成工单”页面的组装过程如下： 在页面中，拖入一个容器组件。 在容器组件中，拖入一个表单组件和容器组件。 将表单组件分割为3个区域：“基本信息”、“设备信息”、“其他信息”。 将2级容器作为“按钮”区域。 组装完成后，整个页面有4个区域，如图1所示。 图1 生成工单页面 其中，“基本信息”、“设备信息”是通过数据绑定页面模型直接创建的表单，“其他信息”及“按钮”区域是手动拖入的组件，然后再进行数据绑定，页面中详细组件分布如图2所示。 图2 页面组件分析

页面模型分析 页面模型负责与页面组件交互，获取生成工单需要的数据，页面模型需要先定义，然后再与页面组件进行绑定。 对于设备维修工单，需要录入的信息包括：工单基本信息、设备信息以及工单扩展信息。 打开创单页面，有如下处理逻辑： 在“基本信息”区域指定“设备名称”时，在“设备详情”区域自动显示设备信息。该能力需要开发（equipmentSelectListQuery）脚本实现。 填写完工单，单击“提交”按钮后，会创建一个工单实例。该能力通过调用BPM实现。 结合填单页面需求，以及前端组件对应关系，需要创建如下模型： 表1 模型分析 模型名称 作用 来源 详细定义 basicInfo 保存工单的基本信息，将与“基础信息”、“其他信息”区域中各个组件绑定 自定义模型 新增的字段名称请与下面字段名称保持一致，后续将绑定页面组件。包含的节点如下，这些节点与前台页面上的工单基本信息一一对应，加粗斜体部分要替换为自己账号对应的命名空间： HW__equipmentId__CST：设备ID，字段类型SingleSelect。 HW__title__CST：工单标题，字段类型Text。 createdDate：创建时间，字段类型DateTime。 HW__type__CST：工单类型，字段类型SingleSelect。 HW__priority__CST：工单优先级，字段类型SingleSelect。 HW__description__CST：工单备注说明，字段类型TextArea。 HW__faultPhenomenon__CST：故障现象说明，字段类型Text。 HW__customer__CST：客户接口人，字段类型Text。 HW__recoveryTime__CST：客户要求故障恢复时间，字段类型DateTime。 HW__source__CST：工单来源，字段类型Text。 HW__arriveTime__CST：客户要求工程师到达现场时间，字段类型DateTime。 equipmentInfo 获取设备详细信息，将与“设备信息”区域组件绑定 自定义模型 将绑定页面组件。包含的计算节点如下，这些节点与前台页面上的设备信息一一对应，加粗斜体部分要替换为自己账号对应的命名空间： name：设备名称，字段类型Text。 HW__equipmentSN__CST：设备编码，字段类型Text。 HW__equipmentBrand__CST：设备品牌，字段类型Text。 HW__equipmentModel__CST：设备型号，字段类型Text。 HW__fullAddress__CST：设备完整地址，字段类型Text。 说明： 这些节点名称需要与设备对象的字段名保持一致。 equipmentList 查询系统中的设备，设备名称下拉框的属性值绑定模型 自定义模型 与“设备名称”下拉框绑定，将从下拉框的值赋给当前下拉框值。 equipmentOptions 查询系统中的设备，设备下拉框的可选项 服务模型 与公共接口equipmentSelectListQuery关联。 setInstanceId 查询系统中的设备，设备下拉框的可选项 服务模型 与公共接口createWorkOrder关联。

实现“生成工单” 通过定义“提交”按钮的“点击”事件，实现生成工单的能力。定义“取消”按钮的“点击”事件，返回工单列表页面（客服人员）。 定义“提交”按钮“点击”事件。 在“HW__createWorkOrder”页面的“设计视图”下，选中“提交”按钮。 在右侧“事件”页签中，单击“点击”后的“+”。 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码。 事件代码中，“HW”为命名空间的名称，请根据实际需求进行替换。 // 配置页面的bpm参数bp.name，通过submitTask方法启动BPM并提交工单数据workOrderData到BPM context.$page.params["bp.name"] = "HW__WorkOrderBpm"; let basicInfo = $model.get('basicInfo').getData(); basicInfo.HW__workOrderId__CST = basicInfo.HW__type__CST + "_" + new Date().getTime(); let workOrderData = { "workOrderData": basicInfo }; context.$bp.submitTask(workOrderData).then(function (resp) { context.$page.loadStdPage('HW__workOrderList'); }); 单击“创建”，退出事件编排窗口。 定义“取消”按钮的“点击”事件。 在“设计视图”中，选中“取消”按钮。 参考“提交”按钮，给“取消”按钮定义以下代码事件 //返回工单列表页面 context.$page.loadStdPage('HW__workOrderList'); 单击“创建”，退出事件编排窗口。

验证 页面组装及事件添加完成后，需要在预览页面，初步检查页面预览效果，验证页面的数据绑定及事件代码正确性。当前工单流转相关的BPM及工单列表尚未创建，因此暂不验证“保存”、“取消”按钮。 在“HW__createWorkOrder”页面中，单击界面上方的，进入预览页面。 系统会弹出“HW__createWorkOrder”预览页面。 在“基本信息”区域的“设备名称”下拉框中，选中一个设备名称，检查“设备详情”区域是否显示了对应的设备详情。显示正确，则说明组件与模型的绑定，以及下拉框事件执行正确。如不显示，则需要检查相关事件代码。 检查“工单类型”、“优先级”下拉框中，是否有值，显示正确则说明下拉框属性设置正确。

实现“根据设备编码自动加载工单其他信息” 在“我的应用”中，单击“设备维修管理系统”，进入应用。 单击打开“HW__createWorkOrder”页面。 添加页面事件代码。 在“设计视图”中，选中最外层的“页面”，也可以直接单击组件导航，快速定位。 在右侧“事件”页签中，单击“加载”后的“+”，为页面添加事件代码。 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码。 $model.ref('equipmentOptions').setData({inputParam:{}}); $model.ref('equipmentOptions').run().then(function(response){ if(response.equipList){ $model.ref("equipmentList").setData(response.equipList); } }); 单击“创建”，退出事件编排窗口。

实现“显示设备详细信息” 通过定义“基本信息”区域“设备名称”下拉框的“数据改变”事件，可以实现根据所选设备，在“设备详情”区域显示设备信息。 在“HW__createWorkOrder”页面中，选中“设备名称”下拉框。 图1 添加“数据改变”事件代码 在右侧“事件”页签中，单击“数据改变”后的“+”。 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码。 事件代码中，“HW”为命名空间的名称，请根据实际需求进行替换。 let equipment = $model.ref("basicInfo").getData(); let equipmentId = equipment.HW__equipmentId__CST; let queryEquipParam = {"id" : equipmentId}; $model.ref('equipmentOptions').setData({inputParam: queryEquipParam}); $model.ref('equipmentOptions').run().then(function (response) { if (response.equipment) { $model.ref("equipmentInfo").setData(response.equipment); } }); 单击“创建”，退出事件编排窗口。