创建“生成工单”公共接口 在APP视图下，单击“服务”，进入公共接口创建页面。 图2 创建公共接口入口 单击“新建”，创建“生成工单”脚本“HW__createWorkOrder”的公共接口。 设置接口参数信息：操作名称为“createWorkOrder”，版本为“1.0.0”，URL为“/createWorkOrder”，“类型”选择“脚本”，“资源”为“HW__createWorkOrder”，方法为“POST”，然后单击“保存”。 图3 新建createWorkOrder接口

创建“生成工单”脚本 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“WorkOrder”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“createWorkOrder”，单击“添加”。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在代码编辑器中插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 //本脚本用于创建工单 import * as db from 'db';//导入处理object相关的标准库 import * as context from 'context';//导入上下文相关的标准库 import * as date from 'date'; //定义入参结构，入参包含1个参数：workOrder对象，为必填字段 @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'Object', required: true, label: 'object' }) workOrderData: object; } //定义出参结构，出参包含1个参数，workOrder的记录id @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'String' }) id: string; } //使用数据对象HW__WorkOrder__ CS T @useObject(['HW__WorkOrder__CST']) @action.object({ type: "method" }) export class CreateWorkOrder { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public createWorkOrder(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let workOrderData = input.workOrderData; //将入参赋值给workOrderData变量，方便后面使用 let s = db.object('HW__WorkOrder__CST'); //获取HW__WorkOrder__CST这个Object的操作实例 let userName = context.getUserName(); workOrderData['HW__status__CST'] = '待派单'; workOrderData['HW__assignedFme__CST'] = '派单员'; workOrderData['HW__createdBy__CST'] = userName; let id = s.insert(workOrderData); if (id) { out.id = id; } else { error.name = "WOERROR"; error.message = "无法创建工单！"; throw error; } } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; } } 单击编辑器上方，保存脚本。 测试脚本能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部输入测试数据，单击测试窗口右上角执行图标。 测试报文样例如下: { "workOrderData":{ "createdDate":"2020-09-30 12:00:00", "HW__recoveryTime__CST":"2020-09-30 12:00:00", "HW__arriveTime__CST":"2020-09-30 12:00:00", "HW__title__CST":"电梯无法关门", "HW__priority__CST":"高", "HW__workOrderId__CST":"WD0000123456", "HW__instanceId__CST":"" } } 执行成功，会在“输出”页签返回查询结果。 图1 输出工单ID号 测试成功，单击编辑器上方的，启用脚本。

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

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

创建“生成工单”公共接口 在APP视图下，单击“服务”，进入公共接口创建页面。 图2 创建公共接口入口 单击“新建”，创建“生成工单”脚本“HW__createWorkOrder”的公共接口。 设置接口参数信息：操作名称为“createWorkOrder”，版本为“1.0.0”，URL为“/createWorkOrder”，“类型”选择“脚本”，“资源”为“HW__createWorkOrder”，方法为“POST”，然后单击“保存”。 图3 新建createWorkOrder接口

创建“生成工单”脚本 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“WorkOrder”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“createWorkOrder”，单击“添加”。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在代码编辑器中插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 //本脚本用于创建工单import * as db from 'db';//导入处理object相关的标准库import * as context from 'context';//导入上下文相关的标准库import * as date from 'date';//定义入参结构，入参包含1个参数：workOrder对象，为必填字段@action.object({ type: "param" })export class ActionInput { @action.param({ type: 'Object', required: true, label: 'object' }) workOrderData: object;}//定义出参结构，出参包含1个参数，workOrder的记录id@action.object({ type: "param" })export class ActionOutput { @action.param({ type: 'String' }) id: string;}//使用数据对象HW__WorkOrder__CST@useObject(['HW__WorkOrder__CST'])@action.object({ type: "method" })export class CreateWorkOrder { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public createWorkOrder(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let workOrderData = input.workOrderData; //将入参赋值给workOrderData变量，方便后面使用 let s = db.object('HW__WorkOrder__CST'); //获取HW__WorkOrder__CST这个Object的操作实例 let userName = context.getUserName(); workOrderData['HW__status__CST'] = '待派单'; workOrderData['HW__assignedFme__CST'] = '派单员'; workOrderData['HW__createdBy__CST'] = userName; let id = s.insert(workOrderData); if (id) { out.id = id; } else { error.name = "WOERROR"; error.message = "无法创建工单！"; throw error; } } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; }} 单击编辑器上方，保存脚本。 测试脚本能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部输入测试数据，单击测试窗口右上角执行图标。 测试报文样例如下: { "workOrderData":{ "createdDate":"2020-09-30 12:00:00", "HW__recoveryTime__CST":"2020-09-30 12:00:00", "HW__arriveTime__CST":"2020-09-30 12:00:00", "HW__title__CST":"电梯无法关门", "HW__priority__CST":"高", "HW__workOrderId__CST":"WD0000123456", "HW__instanceId__CST":"" }} 执行成功，会在“输出”页签返回查询结果。 图1 输出工单ID号 测试成功，单击编辑器上方的，启用脚本。