操作步骤 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在应用中，单击下方“配置”，进入应用配置。 图1 应用配置入口 在应用配置页面，单击“业务权限凭证”页签，进入业务权限凭证。 图2 业务权限凭证 单击“导入”，在弹窗中勾选“cs”、“ds”、“ms”、“Login”，然后单击“导入”。 图3 导入业务权限凭证 在页面下方，单击“服务”，进入公共接口页面。 图4 创建公共接口入口 为“createWorkOrder”公共接口，添加客服人员业务凭证“cs”。 在接口列表中，单击“createWorkOrder”接口，进入接口详情。 在接口详情页面，单击“业务权限凭证”下的“编辑”。 图5 编辑业务权限凭证 在编辑业务权限凭证弹窗中，勾选“cs”，再单击，然后单击“保存”。 图6 选择客服人员业务凭证cs 参考6，给其他公共接口添加业务权限凭证，详细接口名及业务凭证如表1所示。 表1 需要添加业务凭证的公共接口 编号 公共接口名 需要添加的业务凭证 涉及业务用户 1 createWorkOrder（上一步已添加） cs 客服人员 2 equipmentSelectListQuery cs 客服人员 3 judgeNextStatus ms 维修人员 4 modifyOrderStatus ms 维修人员 5 queryWorkOrder cs、ds、ms 客服人员、派单人员、维修人员 6 queryWorker ds 派单人员 7 login Login 客服人员、派单人员、维修人员

操作步骤 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“User”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“registerPortalUser”，单击“添加”。 在代码编辑器中，插入如下脚本代码。 import * as buffer from "buffer";import * as crypto from "crypto";import * as db from "db";import * as context from 'context';import * as http from 'http';import * as permission from 'permission'; //定义入参结构，包括注册账号的用户名、密码和角色，为必填字段@action.object({ type: "param" })export class ActionInput { @action.param({ type: 'String', required: true, label: 'string' }) username: string; @action.param({ type: 'String', required: true, label: 'string' }) password: string; @action.param({ type: 'String', required: true, label: 'string' }) role: string;}//定义出参结构，出参包含1个参数，portaluser的记录id@action.object({ type: "param" })export class ActionOutput { @action.param({ type: 'String' }) msg: string;}//使用数据对象PortalUser@useObject(['PortalUser'])@action.object({ type: "method" })export class RegisterPortalUser { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public registerPortalUser(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作pu为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let s = db.object('PortalUser'); let saltedPassword = salt(input.password); let userMsg = { "usrName": input.username, "name": input.username, "userPassword": saltedPassword['saltedPassword'], "passwordSalt": saltedPassword['salt'], "userType": input.role }; let userId = s.insert(userMsg); if (userId) { out.msg = "注册成功！"; } else { error.name = "USERERROR"; error.message = "注册失败！"; throw error; } } catch (error) { if (error.name == "405230618") { error.message = "该用户名已注册！" } console.error(error.name, error.message); context.setError(error.name, error.message); } return out; }} function _salt(password: string, saltBuf: buffer.Buffer, encoding: buffer.Encoding = buffer.Encoding.Base64): string { const passwordBuf = buffer.from(password) const crypt = crypto.pbkdf2(passwordBuf, saltBuf, 1000, 32, crypto.Hashs.SHA1) return crypt.toString(encoding)} function salt(password: string, encoding: buffer.Encoding = buffer.Encoding.Base64): object { const saltBuf = crypto.randomBytes(6) const saltedPassword = _salt(password, saltBuf, encoding) return { salt: saltBuf.toString(encoding), saltedPassword: saltedPassword }} 单击编辑器上方的，保存脚本。 测试脚本能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部输入测试数据，单击测试窗口右上角执行图标。 { "username": "test_cs", "password": "***", "role": "cs"} 执行成功，会在“输出”页签返回查询结果。 { "msg": "注册成功！"} 测试成功，单击编辑器上方的，启用发布脚本。

操作步骤 在经典版应用开发页面，单击左侧导航栏下方的“配置”。 图1 应用配置入口 在“导航条”页签，单击“菜单树”右侧的“+”，选择“添加页签”。 图2 导航条添加页签 定义“设备管理”页签。 在“添加页签”弹窗中，设置以下信息，然后单击“保存”。 页面类型：设置为“标准页面页签”。 标签：设置为“设备管理”。 名称：设置为“equipmentManage”。 页面：设置为“HW__equipmentManage”。 图3 设备管理页签 请按照以上方式，创建表1的导航菜单。 表1 导航菜单 页签类型 标签 名称 页面 标准页面页签 工单管理 manageWorkOrderList HW__manageWorkOrder 标准页面页签 工单列表（客服人员） workOrderList HW__workOrderList 标准页面页签 工单列表（派单员） dispatchWorkOrder HW__dispatchWorkOrder 标准页面页签 工单列表（维修人员） workOrderListM HW__workOrderListM （可选）设置导航的布局及颜色。 您可以根据自己的喜好，设置导航的布局及颜色，默认导航菜单是靠左，蓝色。 如图4所示，单击红框中的布局，即可将导航菜单设置为横向菜单，然后单击“保存”。 图4 切换为横向导航

创建“判断下一步状态”脚本 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“WorkOrder”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“judgeNextStatus”，单击“添加”。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在代码编辑器中插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 //本脚本用于判断下一步状态变化import * as db from 'db';//导入处理object相关的标准库import * as context from 'context';//导入上下文相关的标准库//定义入参结构，入参包含1个参数：workOrder对象，为必填字段@action.object({ type: "param" })export class ActionInput { @action.param({ type: 'String', required: true, label: 'String' }) id: string;}//定义出参结构，出参包含1个参数，workOrder的记录id@action.object({ type: "param" })export class ActionOutput { @action.param({ type: 'Any', label: 'Object', isCollection: true }) statusList: object[];}//使用数据对象HW__WorkOrder__ CS T@useObject(['HW__WorkOrder__CST'])@action.object({ type: "method" })export class JudgeNextStatus { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public judgeNextStatus(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let id = input.id; let s = db.object('HW__WorkOrder__CST'); //获取HW__WorkOrder__CST这个Object的操作实例 //查询条件 let condition = { "conjunction": "AND", "conditions": [{ "field": "id", "operator": "eq", "value": id }] }; let workOrder = s.queryByCondition(condition); if (workOrder) { if (workOrder[0].HW__status__CST == "待接单") { out.statusList = [ { 'value': "接单", 'display': "接单" }, { 'value': "拒单", 'display': "拒单" }]; } if (workOrder[0].HW__status__CST == "处理中") { out.statusList = [{ 'value': "关单", 'display': "关单" }]; } } } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; }} 单击编辑器上方的，保存脚本。 测试脚本能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部，输入如下输出参数报文，单击测试窗口右上角执行图标，“ceHg000000e0glLbDQ2K”则是派单员操作的当前工单记录的工单id，您可以在处理工单脚本的测试结果中获取一个id值。 { "id": "ceHg000000e0glLbDQ2K"} 执行成功，会在“输出”页签返回查询结果。 图1 返回下一步状态 测试成功，单击编辑器上方的，启用发布脚本。 父主题： 开发“维修工程师处理工单”功能

操作步骤 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“WorkOrder”中，在鼠标放在“Page”上，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。 在“标签”和“名称”文本框中输入“workOrderList”，单击“添加”。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。 定义模型“queryWorkOrder”。 在“模型视图”中，单击“新增模型”。 添加服务模型，模型名称“queryWorkOrder”，单击“下一步”。 “选择服务类型”为“公共接口”，“项目”为“设备维修管理系统”，“选择服务”为“queryWorkOrder”，单击“下一步”，再单击“确定”。 单击页面上方的，保存模型。 定义模型“workOrderInstance”。 在“模型视图”中，单击“新增模型”。 来源选择“自定义”，模型名称“workOrderInstance”，单击“下一步”。 单击模型名后的“新增节点”，新增表1所示的节点，然后单击“下一步”，再单击“确定”。 以下字段要与“工单对象”中的字段一致，其中加粗斜体内容部分要替换为当前账号对应的命名空间前缀。 表1 新增节点 字段名称 字段类型 字段描述 id Text 记录ID HW__workOrderId__CST Text 工单Id HW__priority__CST Text 优先级 HW__title__CST Text 工单标题 HW__status__CST Text 状态 HW__assignedFme__CST Text 当前处理人 createdDate DataTime 创单时间 HW__createdBy__CST Text 创建人 单击页面上方的，保存模型。 单击“设计视图”，从“模型视图”切换到“设计视图”。 拖拽页面标题。 从基本组件列表区拖拽一个“标题”组件到“页面内容”中。 在右侧“属性”页签中，将“标题内容”修改为“现场工单列表”。 单击页面上方的，保存页面标题。 从组件列表区拖拽一个“表格”组件到“标题”的下方。 绑定表格数据模型，并设置查询结果区域。 在“设计视图”中，选中“表格”，单击右侧“属性”页签，如图2所示。 图2 为表格绑定数据模型 在“选择模型”对话框中，选中“workOrderInstance”模型，单击“确定”。绑定模型后，系统自动将模型的所有字段添加为查询结果列。 单击上图中每个字段后的，修改列标题等字段属性。 以“工单ID”为例，其属性配置如图3所示，各个字段及修改后的列名如表2所示。 图3 设置“工单ID”列的属性 表2 修改各字段的显示属性 字段名 列标题 备注 id 记录ID 启用“隐藏”属性，即设置为true HW__workOrderId__CST 工单ID - HW__priority__CST 优先级 - HW__title__CST 工单标题 - HW__status__CST 状态 - HW__assignedFme__CST 当前处理人 - createdDate 创单时间 - HW__createdBy__CST 创建人 - 单击页面上方的，保存设置。 添加“创建工单”按钮。 选中“表格”，单击右侧“属性”页签中“表格区块”中“工具栏”后的“添加”按钮。 图4 增加查询条件区域 删除工具栏中多余的按钮，只保留“新增行”。 修改“新增行”的“显示名称”为“创建工单”。 单击页面上方的，保存设置。 创建查询条件区域。 单击“模型视图”，切换到模型视图，在表格模型“table_0_condition”后，单击编辑图标。 表格组件拖入后，页面将自动生成一个表格模型。“table_0_condition”即是在前面拖入的表格对应的表格模型，模型名可能跟拖入顺序及个数有关，一般情况下模型名称为“table_0_condition”，如果名称不一致，请根据实际情况修改。 图5 编辑表格模型 在表格模型“table_0_condition”中，单击“新增节点”，添加一个“queryInfo”节点，“数据类型”为“Any”，然后在“queryInfo”下，再单击“新增节点”添加3个子节点“createdBy”、“ title”、“status”。 图6 创建完成后的模型节点 设置完成后，单击“下一步”，再单击“确定”，保存设置。 单击“设计视图”，切换到设计视图，从左侧组件列表中，拖一个“表单”组件到“表格容器”的最上部（表格容器内部最上部），在“元数据表单配置向导”弹窗中，单击“取消”。 图7 向表格容器拖入表单 选中表单，在属性中“数据绑定”下，单击，为表单绑定“table_0_condition”中的“queryInfo”节点，并在提示弹窗中，单击“绑定并生成表单”，单击“确定”。 在表单中，分别选中并删除“createdBy”、“重置”按钮。 调整“title”、“status”、“保存”为1行，并删除多余分栏及容器，调整后，如图8所示。 图8 调整后表单 修改表单中输入框属性。 修改“title”的“标签”为“工单标题”。 修改“status”的“标签”修改为“状态”。 选中“保存”按钮，修改“显示名称”为“搜索”，设置单击“事件”页签，再单击，删除“提交表单”事件，然后单击“点击”后的“+”，进入事件编排页面，在“自定义动作”中，输入以下事件代码，单击“创建”。 图9 修改按钮事件代码 脚本中红色内容请替换为实际的对象名、字段名、页面名、组件ID。其中“table_0_condition”为当前表格组件的ID号，中间数字默认为“0”，如果有多次修改或创建该ID号会变化，选中表格后，在组件树上可以查看实际组件ID。 let pageInfo = $model.ref('table_0_condition').getData().pageInfo;let queryInfo = $model.ref('table_0_condition').getData().queryInfo;if (!queryInfo) { queryInfo = {};}let queryData = { "title": queryInfo.title, "status": queryInfo.status, "createdBy": queryInfo.createdBy, "start": 0, "limit": pageInfo.pageSize};$model.ref('queryWorkOrder').setData({ inputParam: queryData });$model.ref('queryWorkOrder').run().then(function (data) { $model.ref('workOrderInstance').setData(data.workOrderList); pageInfo.total = parseInt(data.total); $model.ref('table_0_condition').setData({ "pageInfo": pageInfo });}).catch(function (error) { console.log('error is', error);}); 选中“搜索”按钮所在的栏，在右侧“样式”下的“布局”中，设置上方外边距为“30”，使“搜索”按钮上下居中显示。 图10 设置搜索按钮布局样式（位置） 查询条件区域创建后，如图11所示。 图11 查询区域 单击页面上方的，保存设置。 添加页面事件代码。 在“设计视图”中选中最外层的“页面”，在右侧“事件”页签中，单击“加载”后的“+”，进入编辑动作页面。 在“自定义动作”中，输入如下脚本代码。 let pageInfo = $model.ref('table_0_condition').getData().pageInfo;let queryData = { "start": (pageInfo.curPage - 1) * pageInfo.pageSize, "limit": pageInfo.pageSize};$model.ref('queryWorkOrder').setData({ inputParam: queryData });$model.ref('queryWorkOrder').run().then(function (data) { $model.ref('workOrderInstance').setData(data.workOrderList); pageInfo.total = parseInt(data.total); $model.ref('table_0_condition').setData({ "pageInfo": pageInfo });}).catch(function (error) { console.log('error is', error);}); 单击“创建”，退出事件编排窗口。 添加“创建工单”按钮跳转事件，跳转事件功能是将页面跳转到“生成工单”页面。 选中“创建工单”按钮，在右侧“事件”页签中，单击“新增行”后的，进入事件编排页面。 在“自定义动作”中，输入以下事件代码。 //打开创建工单页面，需要根据实际页面名称修改context.$page.load('/besBaas/page#/HW__createWorkOrder') 单击“创建”，退出事件编排窗口。 单击页面上的，保存页面。

操作步骤 在经典版应用开发页面的设计视图下，单击“服务”，进入公共接口创建页面。 图1 服务入口 单击“新建”，如下图所示。 图2 公共接口创建 创建“处理工单”、“判断下一步状态”脚本对应的公共接口，详细接口信息如表1所示。 表1 公共接口 设置操作 版本 URL 方法 类型 资源 modifyOrderStatus 1.0.0 /modifyOrderStatus POST 脚本 HW__modifyOrderStatus judgeNextStatus 1.0.0 /judgeNextStatus POST 脚本 HW__judgeNextStatus

实现“生成工单” 通过定义“提交”按钮的“点击”事件，实现生成工单的能力。定义“取消”按钮的“点击”事件，返回工单列表页面（客服人员）。 定义“提交”按钮“点击”事件。 在“HW__createWorkOrder”页面的“设计视图”下，选中“提交”按钮。 在右侧“事件”页签中，单击“点击”后的“+”。 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码。 脚本中加粗斜体内容请替换为实际的命名空间前缀。 // 配置页面的bpm参数bp.name，通过submitTask方法启动BPM并提交工单数据workOrderData到BPMcontext.$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'); 单击“创建”，退出事件编排窗口。

实现“根据设备编码自动加载工单其他信息” 在“我的应用”中，单击“设备维修管理系统”，进入应用。 单击打开“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 添加“数据改变”事件代码 在右侧“事件”页签中，单击“数据改变”后的“+”。 在“添加动作”弹窗的“自定义动作”中，输入如下事件代码。 脚本中加粗斜体内容请替换为实际的命名空间前缀。 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); }}); 单击“创建”，退出事件编排窗口。

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

验证 因当前还未创建工单状态流转的BPM，因此派单功能还不能正常测试运行。本节只验证页面显示及跳转相关内容。 在“HW__dispatchWorkOrder”页面中，单击界面上方的，进入页面预览，在页面预览中进行以下验证。 查看页面显示：正常情况下，系统会显示客服人员创建的工单，且每条记录后都有派单图标，如果工单状态为“待派单”，则派单按钮为高亮可用状态，如果不是“待派单”状态，则按钮灰度不可用。 如果当前工单列表中没有“待派单”状态的工单，可以在“生成工单”脚本中输入一条测试数据，生成一条工单。 图1 页面预览 查看页面跳转。 选择一条“工单状态”为“待派单”的工单记录，单击“派单”按钮，查看是否弹出“处理工单对话框”，如果未跳转，请检查操作列“派单”按钮上的事件。 在“处理工单对话框”中，查看是否显示“工单ID”，“选择工程师”下拉框是否显示正常，如果不正常，需要检查“派单”对话框相关事件代码及属性值绑定。 图2 处理工单对话框 父主题： 开发“派单员派发工单”功能

操作步骤 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“WorkOrder”中，鼠标放在“Page”上，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。 在“标签”和“名称”文本框中输入“workOrderDispatch”，单击“添加”。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。 定义模型“transInfo”。 在“模型视图”中，单击“新增模型”。 添加自定义模型，模型名称“transInfo”，单击“下一步”。 为模型添加节点“HW__workOrderId__CST”（字段类型Text）、“HW__assignedFme__CST”（字段类型Any），单击“下一步”，再单击“确定”，加粗斜体内容请替换为实际命名空间前缀。 单击页面上方的，保存模型。 定义模型“workerOptions”。 在“模型视图”中，单击“新增模型”。 添加服务模型，模型名称“workerOptions”，单击“下一步”。 “项目”选择“设备维修管理系统”，并为模型关联API“queryWorker”，单击“下一步”，再单击“确定”。 单击页面上方的，保存模型。 拖拽页面组件。 单击“设计视图”，返回页面设计。 将左侧基本组件区的“表单”拖拽到右侧页面中。 因为当前还没有定义数据源，单击“取消”，创建一个空的表单控件。 拖拽一个“分栏”到表单中。 选中“分栏”，在右侧单击PC下的单行图标，修改分栏为1栏，再单击“新增行”的，修改为2个分栏，每个分栏中有1栏。 图2 设置分栏为1栏 在第1个分栏中拖入一个“输入框”，在第2个分栏中拖入一个“下拉框”。 图3 拖入输入框、下拉框到分栏 选中“输入框”，在右侧属性面板中，单击，在选择模型弹窗中，选择“transInfo”下的“HW__workOrderId__CST”字段，并修改其“标签”为“工单ID”。 选择下拉框进行以下设置。 在右侧属性面板中，单击，在选择模型弹窗中，选择“transInfo”下的“HW__assignedFme__CST”字段，修改“标题”为“选择工程师”。 单击“属性值绑定”后的“+”，设置“属性”为“选项”，“模型字段”为“workerOptions.outputParam.userList”，即绑定属性值为服务对象的返回值。 图4 绑定服务对象的返回值 开启“弹层独立”。 图5 启用弹层独立 单击页面上方的，保存设置。 定义页面事件代码。 在“设计视图”中选中最外层的“页面”，在右侧“事件”页签中，单击“加载”后的“+”，进入编辑动作页面。 在“自定义动作”中，输入如下脚本代码。 红色内容请替换为实际命名空间前缀。 let workOrderId = Page.params.workOrderId;$model.ref("transInfo").setData({ "HW__workOrderId__CST": workOrderId });//查询维修人员列表，作为维修人员下拉框的可选值$model.ref('workerOptions').setData({ inputParam: {} });$model.ref('workerOptions').run(); 单击“创建”，关闭事件编排器，返回到页面。 单击页面上方的，保存页面。

操作步骤 在“HW__workOrderList”页面中，单击界面上方预览图标。 系统会弹出预览页面。 查看页面中页面布局、样式是否符合预期。 查看当前表格中的工单记录。当前表格中仅有一条测试数据，此数据是在生成工单脚本中输入的一条测试数据。 图1 查看工单记录 验证搜索功能。 在“工单标题”中，输入“电梯维修”，进行搜索，因为当前没有该标题的工单，因此搜索结果为空，然后再输入“电梯无法关门”，如果显示该工单记录，则说明搜索功能正确。 在“状态”中输入“待处理”，然后单击“搜索”，当前暂时没有“待处理”工单，因此搜索结果为空，再输入“待派单”后，单击“搜索”，则显示已存在工单，则说明搜索功能正常。 验证页面跳转事件。 单击“创建工单”，验证是否跳转到“生成工单”页面。如果页面跳转到工单列表页面，则说明验证成功。 因当前生成工单页面相关的BPM尚未创建，这里还无法验证创建工单功能。

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“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”，单击“下一步”。 设置服务类型为“公共接口”，“项目”选择“设备维修管理系统”，公共接口为“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 页面组件分析