华为云用户手册

方案概述 在AstroZero中，支持扫码绑定 WeLink 。绑定WeLink后，可将AstroZero中开发的应用快速发布到WeLink中，实现企业业务的高效率、低成本创新。 发布WeLink轻应用是将已开发好的应用或全新开发的Web页面发布到WeLink，用户在WeLink APP中即可打开应用。发布WeLink轻应用适用于简单的应用场景。下面以创建“调查问卷轻应用”为例，介绍如何把AstroZero上开发的应用发布成WeLink（蓝标）轻应用。 调查问卷模板为企业和个人提供调查问卷应用模板，用于收集资料或管理问题记录。该模板以对AstroZero开发者展开调查问卷为例，可基于该应用模板快速自定义调查问卷内容。 图1 开发者调查问卷

开发前必读 设备管理功能主要是通过操作两个标准页面（编辑设备、设备管理），来实现电梯设备信息的新增、修改、删除、查询及监控等功能的。 设备管理界面的大致构想，如图1所示。界面上默认显示应用中保存的所有电梯设备信息，可以直接新增、修改或者删除电梯记录，也可以查询部分电梯记录。 单击“新增设备”按钮，可以在界面上插入一个空行，输入内容后单击“保存”，即可新插入一条电梯记录。 直接编辑表格中任意内容，单击“保存”，即可修改任意一条电梯记录。 选中记录，单击“删除”，即可删除任意一条电梯记录。 设置查询条件，单击“查询”，可以查询满足条件的电梯记录。 图1 电梯设备信息管理界面 通过开发设备管理功能，带您学习如何在AstroZero中，开发脚本、服务编排、标准界面和高级界面，并在开发过程中，细致解析设备管理的增加、删除和修改，以及设备位置信息监控功能开发过程及原理。 父主题： 设备管理开发

步骤四：在WeLink移动端测试应用 应用发布后，可以在WeLink移动端搜索并验证已发布的小程序应用。 在WeLink手机端，单击“业务”，搜索小程序“开发者”。 单击搜索结果列表中的应用名，进入调查问卷页面。 如果无法正常登录应用，且提示用户名已注册，请按照常见问题中操作处理。 图29 搜索小程序“开发者调查问卷” 输入问卷信息，单击“提交”，成功后跳转到“提交成功”页面。 图30 进入小程序页面 单击“查看详情”或“继续提交”，测试验证小程序的功能。 图31 提交成功 问卷调查完成后，切回到“开发者调查问卷”的应用开发页面，单击预览应用。在“调查问卷管理”页签中，可查看或删除相关数据。 图32 管理调查问卷记录

操作流程 将AstroZero中的应用发布成WeLink We码应用的流程，如图1所示。 图1 We码应用发布流程 步骤一：创建We码应用 在WeLink端发布小程序之前，需要以WeLink管理员账号登录WeLink开发平台，创建一个We码应用。 步骤二：在AstroZero上创建应用 We码应用创建完成后，需要在AstroZero租户账号中，创建一个应用，导入一个免登录App包，再配置企业WeLink相关系统参数。 步骤三：编译并发布应用 将已创建的应用编译发布到WeLink上，并设置AstroZero端及WeLink端的应用发布参数。 步骤四：在WeLink移动端测试应用 应用发布后，在WeLink移动端搜索并验证已发布的小程序应用。

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”目录中，将鼠标放在“Script”上，单击界面上出现的，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“queryEquipments”，单击“添加”。 系统实际创建的脚本名称为“HW__queryEquipments”，“HW__”前缀由租户命名空间namespace决定。新建创建的脚本，默认是当前用户锁定状态，可以进行编辑保存等操作。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在代码编辑器中，插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 /**************************** * 本脚本用于按条件查询设备列表 * **************************/import * as db from 'db';//导入处理object相关的标准库import * as context from 'context';//导入上下文相关的标准库import * as decimal from 'decimal';//导入decimal数据类型相关的标准库//定义入参结构@action.object({ type: "param" })export class ActionInput { @action.param({ type: 'String' }) name: string;//设备名称，需要按设备名称查询时传入 @action.param({ type: 'String' }) fullAddress: string;//完整地址，需要按完整地址查询时传入 @action.param({ type: 'Number', min: 0 }) start: decimal.Decimal;//分页信息，表示从第几条数据开始查询 @action.param({ type: 'Number', min: 0 }) limit: decimal.Decimal;//分页信息，表示一次查询几条数据}//定义出参结构@action.object({ type: "param" })export class ActionOutput { @action.param({ type: 'Any', isCollection: true, label: 'object' }) equipments: object[];//设备列表 @action.param({ type: 'String' }) total: string;//总共查到几条数据}@useObject(['HW__Equipment__ CS T']) //使用数据库对象HW__Equipment__CST@action.object({ type: "method" })export class QueryEquipments { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public queryEquipments(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 try { //获取HW__Equipment__CST这个Object的操作实例 let s = db.object('HW__Equipment__CST'); //option是db标准库queryByCondition方法的入参（选项选项），用于对查询结果排序、分组、聚合计算等 //这里构造的是按创建时间逆序返回查询结果 let option = { "options": { "orderby": [ { "field": "createdDate", "order": "desc" } ], } }; //如果有分页 if (input.start && input.limit) { let start = decimal.toNumber(input.start);//将decimal类型转换为接口需要的number类型 let limit = decimal.toNumber(input.limit); option.options['limit'] = limit; option.options['skip'] = start; } //condition是db标准库queryByCondition方法的入参（查询条件） let condition = { "conjunction": "AND", "conditions": [] }; //基本查询条件 condition.conditions.push({ "field": "id", "operator": "isnotnull", }); condition.conditions.push({ "field": "id", "operator": "ne", "value": "" }); //按设备名称查询 if (input.name && input.name != "") { condition.conditions.push({ "field": "name",//与对象中的字段名保持一致 "operator": "contains", "value": input.name }); } //按设备地址查询 if (input.fullAddress && input.fullAddress != "") { condition.conditions.push({ "field": "HW__fullAddress__CST", "operator": "contains", "value": input.fullAddress }); } //调用按条件查询HW__Equipment__CST的接口 out.equipments = s.queryByCondition(condition, option); //构造实时监控页面需要的属性字段longitude__CST、latitude__CST、fullAddress__CST和equipmentSn__CST for (let equip of out.equipments || []) { equip['longitude__CST'] = equip['HW__longitude__CST'];//与对象中的字段名保持一致 equip['latitude__CST'] = equip['HW__latitude__CST']; equip['fullAddress__CST'] = equip['HW__fullAddress__CST']; equip['equipmentSn__CST'] = equip['HW__equipmentSN__CST']; } //调用查询符合condition条件的数据总数的接口 out.total = s.count(condition) + ""; } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; }} 单击编辑器上方的，保存脚本。 测试脚本能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部，直接单击测试窗口右上角，执行脚本。 执行成功后，会在“输出”页签返回全部设备信息。 测试成功，单击编辑器上方的，启用脚本。

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 选中“创建一个新脚本”，在“名称”文本框中输入“equipmentSelectListQuery”，单击“添加”。 在代码编辑器中插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 import * as context from 'context';import * as decimal from 'decimal';import * as db from 'db';//使用数据库对象HW__Equipment__CST@useObject(['HW__Equipment__CST'])@action.object({ type: "param" })export class ActionInput { @action.param({ type: 'String' }) id: string;}@action.object({ type: "param" })export class ActionOutput { @action.param({ type: 'Any', label: 'object', isCollection: true }) equipList: object[]; @action.param({ type: 'Any', label: 'object' }) equipment: object;}@action.object({ type: "method" })export class EquipmentSelectListQuery { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public equipmentSelectListQuery(input: ActionInput): ActionOutput { let out = new ActionOutput(); let error = new Error; try { let objAct = db.object('HW__Equipment__CST'); if (input.id) { out.equipment = objAct.query(input.id); return out; } let option = { "options": { "orderby": [ { "field": "lastModifiedDate", "order": "desc" } ], "skip": 0, "limit": 1000 } }; let equipList = objAct.queryByCondition(null, option); let selectValue = equipList.map(function (v, i, a) { return { 'value': v['id'], 'display': v['name'] } }); out.equipList = selectValue; } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; }} 单击脚本编辑器上方的，保存脚本。

验证 单击脚本编辑器上方的，执行脚本。 在界面底部单击测试窗口右上角执行图标，进行测试。 如果不设置输入参数，会出现类似如下样例的测试结果（设备名称和设备id）。 { "equipList": [ { "display": "百草园B栋2单元2号", "value": "cQue000000e1qnhgtCng" } ]} 如果设置如下输入参数。 { "id":"cQue000000e1qnhgtCng"} 则脚本返回设备的详细信息，样例如下。 测试成功，单击编辑器上方的，发布脚本。

创建应用目录 使用华为账号，参考进入经典版开发环境中操作，进入AstroZero经典版开发环境。 在AstroZero经典版开发环境首页“项目”页签，单击“我的应用”下的“设备维修管理系统”，进入应用。 单击“设备维修管理系统”后的，再单击“目录”，在弹窗中输入“Equipment”，单击“保存”，创建一个“Equipment”目录。 图5 创建应用目录 图6 添加目录Equipment 参考上一步，按应用业务的功能模块，再创建WorkOrder和User目录。 在Equipment、WorkOrder和User目录下，参考图7所示，分别创建子目录Object、Script、Flow、Bpm和Page。 图7 创建应用目录

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”目录中，将鼠标放在“Flow”上，单击界面上出现的，在弹出菜单中选择“服务编排”。 选中“创建一个新的服务编排”，在“标签”和“名称”文本框中输入“queryEquipments”，并设置类型为“Autolaunched Flow”，单击“添加”。 系统实际创建的脚本名称为“HW__queryEquipments”，“HW__”前缀由租户命名空间namespace决定。新建创建的服务编排，默认是当前用户锁定状态，可以进行编辑保存等操作。 当编辑已有服务编排时，为防止编辑时多人篡改，编辑前请单击进行锁定。 定义服务编排用到的变量。 单击页面右侧的，再单击结构体中的“新增”，在弹出窗口中输入结构体类型名称“Equipment”，单击“保存”。 图1 创建私有结构体 单击，再单击“对象变量”后的“+”，在弹出窗口中定义私有结构体变量“equipments”，选中“是否为数组”（该变量将作为服务编排的输出参数，且因为查询结果可能是多条记录，所以要选）。单击“保存”，如图2所示。 图2 新增私有结构体变量 单击“变量”后的“+”，设置参数名称为“name”。 单击变量后的“...”，选择“设置”，修改变量的名称、类型，选择默认值“{!$GlobalConstant.EmptyString}”信息，如图4所示。 图3 新增变量 图4 设置变量 重复上一步，定义表1中的其他变量。 表1 服务编排变量说明 变量唯一标识 描述 数据类型 默认值 name（上一步已定义） 设备名称 文本 {!$GlobalConstant.EmptyString} fullAddress 完整地址 文本 {!$GlobalConstant.EmptyString} limit 分页查询的条目数 数字 {!$GlobalConstant.Null} start 分页查询开始条目 数字 {!$GlobalConstant.Null} total 查询到的总条目数 文本 不设置 在服务编排中添加并配置脚本图元。 从左侧拖拽脚本图元到画布中。 修改图元的基本信息，“标签”和“名称”都设置为“queryEquipments”。 图5 设置脚本图元基本信息 单击，指定图元对应的脚本名称 （HW__queryEquipments），并配置脚本的输入输出参数，如果下拉选项中没有目标脚本，请检查脚本是否已启用。 单击“全局上下文”，显示变量列表。在“输入参数”中，单击“新增行”，在下拉框中选择输入参数、依次拖拽变量到输入参数的“源”下。 在“输出参数”中，单击“新增行”，在下拉框中选择输出参数，并从变量和对象变量中拖拽“目标”，如图6所示。 请直接从全局上下文拖拽变量到输入输出参数下的对应位置，请勿手动输入，手动输入的值系统可能不识别。 图6 拖拽脚本的输入输出参数 定义服务编排的输入、输出参数，并保存服务编排。 在画布上，把鼠标放在起点图元图元上，从“+”拖动鼠标，在起点图元和脚本图元间增加连线；即将当前脚本设置为服务编排的起始节点。 鼠标在画布空白处点一下，单击右侧，设置服务编排的输入输出参数，如图7所示。 图7 拖拽服务编排的输入输出参数 单击服务编排界面上方的，保存服务编排。 测试服务编排能否正常执行。 单击服务编排编辑器上方的，执行服务编排。 在“输入参数”中，输入测试数据，单击“运行”。 执行成功，界面上会返回设备对象中的全部信息，样例如下： 图8 返回样例 （可选）在服务编排编辑器单击“跟踪”，可以查看到上一步的执行日志，方便定位错误。 测试成功，单击服务编排编辑器上方的，发布服务编排。

步骤二：通过服务编排开发登录页后端逻辑 在“A”应用的设计器中，单击左侧导航栏的“逻辑”，单击编排后的，新建一个Flow目录。 图3 创建目录 将鼠标放在“Flow”上，单击界面上出现的“+”，进入添加服务编排页面。 选中“创建一个新的服务编排”，“标签”和“名称”设置为“login”，类型设置为“Autolaunched Flow”，单击“添加”。 图4 创建服务编排 定义服务编排用到的变量。 单击，展开全局上下文，再单击“变量”后的，设置参数名称为“username”。 图5 新增变量 重复上一步，定义表1中其他变量。 表1 服务编排变量说明 名称（变量名称，唯一标识） 数据类型 username 文本 password 文本 captcha 文本 msg 文本 userId 文本 loginMsg 文本 单击“公式”后的，在左侧公式弹窗中，设置“名称”为“portalUserLogin”，“表达式”为“PORTALUSER LOG IN({!username})”，单击“保存”。 图6 添加公式变量“portalUserLogin” 参考上一步，创建表2中公式变量“verifyCode”。 表2 公式变量说明 名称 表达式 portalUserLogin PORTALUSERLOGIN({!username}) verifyCode VERIFYCODEWITHTYPE({!captcha},"login") 拖拽图元到服务编排画布，并配置图元的基本属性。 从图元区分别拖拽脚本（1个）、决策（3个）、赋值（3个）图元到画布中，图元排列如下图所示。 图7 图元排列 选中“Script0”图元，在右侧基本信息中，设置“标签”为“查询用户”。 参考上一步，设置其他图元的“标签”属性，具体值如下表所示。 表3 设置其他图元标签属性 名称（变量唯一标识，不需要修改） 标签 Decision0 判断账号密码 Decision1 判断是否包含验证码 Decision2 校验验证码 Assignment0 账号密码错误 Assignment1 执行登录 Assignment2 验证失败 图8 修改后图元 配置“查询用户”脚本图元。 单击，指定图元对应的脚本名称 （命名空间__login），并配置脚本的输入输出参数。 图9 指定脚本 单击“全局上下文”，显示变量列表，从“变量”中，拖拽“username”、“password”和“captcha”到“输入参数”下对应的“源”输入框中，在“输出参数”下，单击4次“新增行”，依次添加下拉选项中的输出参数字段，并从“变量”中拖拽相应的字段到“目标”输入框下，字段与变量对应关系如下图所示。 脚本图元中，输入参数、输出个数和指定脚本中需要的输入参数字段数是一致的。如果自定义脚本的输入参数有额外字段，额外的字段也需要同样操作。 请直接从全局上下文拖拽“变量”到对应的输入输出参数下，如果手动输入请确认输入参数与全局上下文中变量的值一致。 图10 拖拽脚本的输入输出参数 配置“判断账号密码”决策图元。 选择“判断账号密码”图元，在右侧单击图标，修改“默认”的“名称”为“CheckFail”。 图11 修改“默认”结果名称 单击“新增”，增加一个可编辑的结果，修改结果为“CheckSuccess”，在“可视”下单击“新增行”，并拖拽变量中的“msg”到“资源”下，设置“比较符”为“==”，“值”为“"登录成功！"”。 图12 修改可编辑的结果 请直接从全局上下文拖拽变量“msg”到“资源”下，如果手动输入请确认输入参数与全局上下文中变量的值一致。 “登录成功！”需要与“login”登录脚本中的输出参数一致。 配置“判断是否包含验证码”决策图元。 选择“判断是否包含验证码”图元，在右侧单击图标，修改“默认”的“名称”为“hasVerifyCode”。 图13 修改默认结果名称 单击“新增”，增加一个可编辑的结果，修改结果为“noVerifyCode”，在“可视”下单击“新增行”，并拖拽变量中的“captcha”到“资源”下，设置“比较符”为“==”，“值”为“""”。 图14 修改可编辑的结果 配置“校验验证码”决策图元。 选择“校验验证码”图元，在右侧单击图标，修改“默认”的“名称”为“verifyCodeFail”。 图15 修改“默认”名称 单击“新增”，增加一个可编辑的结果，修改结果为“verifyCodeSuccess”，在右侧选择“公式”，并从全局上下文中，拖拽“verifyCode”到“公式”下。 图16 修改可编辑的结果 配置“账号密码错误”赋值图元。 图17 配置“账号密码错误”图元 选择“账号密码错误”图元，在右侧单击图标，单击“新增行”。 从全局上下文的“系统变量”中，拖拽“$Flow.ResMsg”到“赋值”下，并设置“操作符”为“=”，拖拽“msg”到“值”。 单击“新增行”，拖拽“系统变量”下的“$Flow.ResCode”到“赋值”的“变量”下，设置“操作符”为“=”，设置“值”为“"1"”。 配置“执行登录”赋值图元。 图18 拖拽“执行登录”赋值的变量及值 选择“执行登录”图元，在右侧单击图标，单击4次“新增行”。 从全局上下文，拖拽“msg”等字段到“赋值”的“变量”下，并设置“操作符”为“=”，然后再拖拽“值”下的各个值，具体字段对应关系，如下图所示。 表4 变量与值对应关系 变量 操作符 值 loginMsg = portalUserLogin msg = msg username = username userId = userId 配置“验证失败”赋值图元。 图19 配置“验证失败”赋值图元 选择“验证失败”图元，在右侧单击图标，单击“新增行”。 从全局上下文“系统变量”，拖拽“$Flow.ResMsg”、“$Flow.ResCode”到“赋值”下，并设置操作符为“=”，分别设置“值”为“"账号或者密码错误！"”、“"1"”。 表5 赋值 变量 操作符 值 $Flow.ResMsg = "账号或者密码错误！" $Flow.ResCode = "1" 拖拽图元连线，并配置连线属性。 在画布上，把鼠标放在起点图元上，从“+”拖动鼠标，在起点图元和“查询用户”图元间增加连线；即将当前脚本设置为服务编排的起始节点。 依次在“查询用户”、“判断账号密码”、“判断是否包含验证码”、“执行登录”图元直接拖拽连线。 图20 拖拽连线 单击“判断账号密码”与“判断是否包含验证码”图元之间的连线，在右侧属性单击，在“连线”中修改“连线类型”为“CheckSuccess”。 图21 选中连线 单击“判断是否包含验证码”与“执行登录”图元之间的连线，在右侧属性单击，在“连线”中修改“连线类型”为“noVerifyCode”。 从“判断账号密码”图元上，拖拽一条连线到“账号密码错误”图元。 从“判断是否包含验证码”图元上，拖拽一条连线到“校验验证码”图元。 从“校验验证码”图元上，拖拽一条连线到“验证失败”图元。 从“校验验证码”图元上，拖拽一条连线到“执行登录”图元，并设置该连线的“连线类型”为“verifyCodeSuccess”。 连线拖拽完成，如下图所示。 图22 拖拽图元连线 定义服务编排的输入、输出参数，并保存服务编排。 鼠标在画布空白处点一下，单击右侧，设置服务编排的输入输出参数，如下图所示。 图23 拖拽服务编排的输入输出参数 服务编排的输入参数是用来执行服务编排时输入的参数，同时也是执行账号密码校验脚本时的输入参数。所以当账号密码校验脚本的有额外的输入参数字段，服务编排的输入参数也需要同步增加。 服务编排的输出参数是执行账号密码校验脚本时返回的参数，所以当账号密码校验脚本的有额外的输出参数字段，服务编排的输出参数也需要同步增加。 单击服务编排页面上方的，保存服务编排。 测试服务编排能否正常执行。 单击服务编排页面上方的，进入服务编排测试页面。 图24 服务编排测试页面 在“Flow Run”界面中，输入测试数据，单击“运行”。 其中，“test_cs”、“***”为业务用户的账号和密码。 { "username": "test_cs", "password": "***", "captcha": "" } 执行成功后，界面上会返回设备对象中的全部信息，示例如下： 图25 返回值示例 返回值提示登录成功，完成业务用户的登录。业务用户登录成功后，返回AstroZero，刷新页面后在页面右上角可以看到当前登录的用户已变成在服务编排中输入的业务用户。 测试成功后，单击编辑器上方的，启用并发布服务编排。

步骤三：新建开放接口 开放接口是用户将在应用中开发的脚本、服务编排等包装成自定义REST接口的形式，供其他系统进行调用。本示例将开发的服务编排包装发布REST接口，供业务用户登录页前台开发实施步骤中操作调用。 在“A”应用的设计器中，单击左侧导航栏的“集成”。 单击开放接口后的“+”，进入新建开放接口页面。 设置接口参数，单击“保存”。 图26 新建开放接口 表6 开放接口参数说明 参数 说明 示例 标签 新建API接口的标签，长度不能超过64个字符。 login 操作名称 新建API接口的操作名称，必须以英文字母开头，由英文字母，数字和单下划线组成，不能以单下划线结尾，且长度不能超过40个字符。 login 版本 API接口的版本，格式为“x.y.z”。 1.3.3 URL API接口路径， 固定以 /service/{命名空间}__{应用名}/{版本} 开头， 后面接API的具体路径。此处设置的内容是新建开放接口提供给外部访问的URL。 /service/命名空间__A/版本/Flow_login 类型 选择资源类型，只有服务编排类型的接口能够在服务编排中被调用，其他类型接口只能通过API的形式进行调用。 服务编排 资源 根据类型选择需要绑定的资源。 选择步骤二：通过服务编排开发登录页后端逻辑中创建的服务编排，请确保服务编排已启用，否则此处选择不到。 方法 API接口的HTTP方法。 本示例选择“POST”，即请求服务器新增资源或执行特殊操作。 POST

期望实现效果 在开发前端页面时，可以在脚本中为表单添加一些提交限制，来提升用户体验和数据的安全。例如，在脚本中定义一个延迟时间（如图1），在规定的时间内提交表单时，提示“Submission failed: Not PortalUser!”（如图2）；超出规定的时间，则提示“Submission failed: Submitted too late”（如图3）。 图1 通过脚本限定 图2 非业务用户无法提交 图3 提示提交过晚

应用场景 使用AstroZero开发完应用后，系统会为应用预置一个默认的登录页，业务用户可通过默认的登录页登录应用。除了使用默认的登录页，您还可以根据自身业务的实际需求，使用AstroZero为应用自定义一个登录页。通过在登录页中输入用户名、密码和手机号码等登录信息，与系统中存储的业务用户信息进行对比，来验证业务用户的身份，并根据设置的业务用户权限，为业务用户分配相应的资源和访问权限。 例如，自定义一个图1中的登录页，在登录页中输入业务用户名及密码，单击“登录”，即可登录应用。其中，“登录”逻辑是通过“自定义登录”组件，调用用户登录服务编排完成的。在自定义登录页前，请先了解下方的业务用户的登录方式和业务用户的登录机制。 图1 自定义登录页面

业务用户的登录机制 业务用户前台登录和后台登录，在登录过程中的服务逻辑实现过程如下： 通过调用“账号密码校验”脚本，查询登录账号密码，判断当前登录的账号密码是否正确。 如果判断账号密码错误，直接执行“账号密码错误”。账号密码正确，继续判断是否有验证码。 如果判断当前登录没有验证码，则直接执行登录。当前有验证码，则继续判断验证码是否正确。 如果判断验证码正确，则执行登录操作，验证码错误，则执行验证失败。

业务用户的登录方式 业务用户登录AstroZero有两种登录方式：后台登录和前台登录。 业务用户在后台登录时，是使用自定义的服务编排来调用“login”脚本，查询登录账号密码，判断当前登录的账号密码是否正确，来实现业务用户后台登录功能。 业务用户在前台登录时，需要先在线下开发一个登录组件，上传到高级页面，并在高级页面中配置组件桥接器中的数据。最后在页面中输入登录账号密码，通过调用“用户登录服务编排”，实现业务用户页面登录功能。

功能实现方法 准备工作。 需要拥有一个华为账号或一个可用于访问OBS的 IAM 用户，即先注册华为云并实名认证、创建IAM用户、充值以及购买资源包，具体操作请参见使用OBS前需要做的准备工作。 获取AK（Access Key ID）、SK（Secret Access Key），即访问密钥对，具体操作请参见获取AK/SK。 已在华为OBS上，创建存储桶（例如“bing.testonly.1”），用于后续存储对象使用，具体操作请参见如何创建桶，请记录创建桶时选择的区域。 创建一个低代码应用。 参考授权用户使用AstroZero并购买实例中操作，申请AstroZero免费试用或购买商业实例。 实例购买后，在AstroZero服务控制台的“主页”中，单击“进入首页”，进入应用开发页面。 在“应用”中，单击“新建低代码应用”或单击，进入新建低代码应用页面。 在新建低代码应用页面，应用类型选择“标准应用”，单击“确定”。 输入应用的标签和名称，单击“新建”，即可进入应用设计器。 图2 创建一个空白应用 表1 新建空白应用参数说明 参数 说明 示例 标签 新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。 我的第一个应用 名称 新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加命名空间__。命名要求如下： 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在AstroZero中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。 A 创建一个OBS连接器。 在应用设计器中，选择“集成”，单击“连接器”下的“连接器实例”。 在存储中，选择“OBS”，单击“+”，进入创建OBS页面。 输入基本信息并添加桶，单击“保存”。 图3 设置桶基本信息 图4 添加桶 表2 新建OBS连接器参数说明 参数 说明 示例 名称 新建OBS连接器的名称。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 标识前模糊掉的内容为命名空间，在AstroZero中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。 upload 访问密钥 配置用户的访问密钥AK。 1中获取的Access Key ID值 密钥 配置与访问密钥AK结合使用的私有访问密钥SK。 1中获取的Secret Access Key值 桶 设置存储桶所在的区域和桶名称。 区域选择“华北-北京四”，桶名称为“bing.testonly.1”，即1中提前创建的桶 创建标准页面，用于上传文件。 在应用设计器中，选择“界面”，单击页面后的“+”，新建一个标准页面。 在标准页面中，拖入一个“上传”组件。 图5 拖入上传组件 选中上传组件，存储选择“OBS”，并选择3中创建好的连接器。 图6 设置存储信息 定义文件的上传路径。 图7 设置上传路径 返回标准页面，单击，保存页面，保存成功后单击，预览效果。

操作步骤 在经典版应用开发页面，单击左侧导航栏下方的“配置”。 图1 应用配置入口 在“导航条”页签单击“菜单树”右侧的“+”，选择“添加页签”。 图2 添加页签 定义“新增用户”页签。在“添加页签”弹窗中，设置以下信息，然后单击“保存”。 页面类型：设置为“标准页面页签”。 标签：设置为“新增用户”。 名称：设置为“addUser”。 页面：设置为“portalUserList”。 图3 添加“新增用户”页面 在应用左侧导航下，单击，进入应用预览页面。 图4 查看应用 在应用菜单上，单击“新增用户”，进入用户管理页面。 图5 新增用户 在用户管理页面，单击“新增用户”，在弹窗中设置用户名、密码及角色。 图6 添加新用户 创建完成后，在用户列表中，查看是否已存在刚刚添加的用户， 如果有，则说明页面及事件代码设置正确。如果页面有报错，请根据页面报错定位问题。

功能实现方法 创建一个低代码应用。 参考授权用户使用AstroZero并购买实例中操作，申请AstroZero免费试用或购买商业实例。 实例购买后，在AstroZero服务控制台的“主页”中，单击“进入首页”，进入应用开发页面。 在“应用”中，单击“新建低代码应用”或单击，进入新建低代码应用页面。 在新建低代码应用页面，应用类型选择“标准应用”，单击“确定”。 输入应用的标签和名称，单击“新建”，即可进入应用设计器。 图2 创建一个空白应用 表1 新建空白应用参数说明 参数 说明 示例 标签 新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。 我的第一个应用 名称 新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加命名空间__。命名要求如下： 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在AstroZero中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。 A 在应用设计器中，选择“界面”，单击高级页面后的“+”，新建一个高级页面。 单击，拖拽轮播组件到右侧画布中。 图3 拖入轮播组件 在轮播组件上，单击右键选择“高级设置”。 单击“轮播设置”，根据个人实际需求，设置轮播方向、图片播放时间间隔等。 图4 选择轮播设置 图5 轮播设置 新增轮播图片并设置URL跳转。 再次选中轮播组件，单击右键选择“高级设置”，选择“图片管理”。 图6 选择图片管理 单击“添加”，选中所需的图片，单击“保存”。 选中已添加的图片，在右侧图片设置中，单击链接后的。 设置跳转的URL地址，单击“确定”。 图7 设置链接 单击“确定”，返回高级页面。 单击，保存高级页面，保存成功后单击，发布高级页面。 发布成功后，单击，预览效果。

创建脚本 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“WorkOrder”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“deleteWorkOrder”，单击“添加”。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在代码编辑器中插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 //本脚本用于删除工单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: 'String' }) id: string;}//使用数据对象HW__WorkOrder__CST@useObject(['HW__WorkOrder__CST'])@action.object({ type: "method" })export class DeleteWorkOrder { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public deleteWorkOrder(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 isDeleted = s.deleteByCondition(condition); if (isDeleted) { 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; }} 单击编辑器上方的，保存脚本。 测试脚本能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部，输入以下报文作为“输入参数”，然后单击测试窗口右上角执行图标。“ceHg000000e0glLbDQ2K”则是派单员操作的当前工单记录的工单id，您可以在派单功能脚本的测试结果中获取一个id值。 { "id":"ceHg000000e0glLbDQ2K"} 执行成功，会在“输出”页签返回查询结果。 测试成功，单击编辑器上方的，启用发布脚本。

创建公共接口 参考之前创建公共接口的步骤，创建“删除工单”脚本对应的公共接口。 在设计视图下，单击下方“服务”，进入公共接口创建页面。 图1 创建公共接口入口 在公共接口中，单击“新建”。 图2 公共接口创建 创建“删除工单”脚本对应的公共接口，详细接口信息如表1所示。 表1 公共接口 设置操作 版本 URL 方法 类型 资源 deleteWorkOrder 1.0.0 /deleteWorkOrder DELETE 脚本 HW__deleteWorkOrder

BPM能力 BPM可以提供如下能力，本示例中仅使用到前三种能力： 端到端页面流编排 将用户交互的前端页面与各种任务之间进行编排，形成一个完整的商业流。 支持长流程 步骤之间可以是立即执行，也可以是小时、天、甚至更长时间的间隔，支持SLA期限管理。 跨人员的工作流 支持每一步由不同的用户、组串行或并行处理。 BPM内部进行调用 BPM可以作为子BPM被其他BPM进行内部调用。在总的BPM中使用“调用活动”元素，可嵌套使用子BPM。

期望实现效果 当用户开发的高级页面应用于多种设备时，如何才能保证在不同大小的设备上，能够呈现同样的网页？为此，AstroZero提供了高级页面的电脑端和移动端两种终端视图、流式布局的响应式布局，并为绝对布局提供“拉伸”功能辅助自适应。另外，为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式布局设计规范。组件的响应式设计，是高级页面适配多终端的重要前提。下面以开发一个满足响应式布局的商品列表组件为例，向您介绍如何适配多终端。 商品列表组件可以应用于不同分辨率的手机端和电脑端，组件中商品排布能够根据屏幕或者浏览器窗口大小自动调节。如图1中呈现的效果，屏幕或浏览器可视区域由宽变窄过程中，呈现出多终端适配的响应式效果，商品单行个数逐渐由五列变为一列。 图1 商品列表组件的响应式设计

了解BPM设计界面 图1 BPM设计界面 整体编辑器页面由上方按钮区域、左侧面板图元区域、中间画布工作区域、右侧属性配置区域四部分组成。 表1 BPM设计界面说明 编号区 域名 称 功能说明 1 功能按钮区域，包括锁定、解锁、启用（或者禁用）、保存、另存为新版本或者新BPM、运行、操作回退、撤销回退、启用流跟踪器以及切换版本的操作。支持快捷键操作，即可脱离鼠标直接用键盘操作。 2 BPM的组成图元，一个BPM业务流程由以下几个部分组成： 事件图元（Events）：用来表明BPM的生命周期中发生的事件，例如开始、捕获信号等。 网关图元（Gateways）：网关用来控制流程的执行流向，可理解为决策、判断。 活动图元（Activities）：是BPM的核心图元，可理解为节点或者步骤，例如调用脚本、用户需要做的任务。 3 BPM设计操作区域。在该区域可对BPM进行具体流程设计、组件放置。 不同色块的表示不同的泳道，BPM由一个或多个泳道组成，泳道中包括了实现不同功能逻辑的图元。 选中泳道或者某个图元，可以在右侧属性配置区域进行各种配置操作。 4 整个BPM、泳道或者图元属性设置区域。 当选择BPM中图元时，右侧配置区域为该图元的属性设置区域。 当选择BPM中空白区域时，右侧配置区域为该BPM的设置区域。 当选择泳道左侧标签时，右侧配置区域为该泳道的属性设置区域。

验证 单击界面上方的，进入预览页面，查看页面的展示效果，并验证以下功能： 在界面上单击“新增设备”，查看是否跳转到“编辑设备”页面，如未跳转，请检查事件代码中页面名称前缀是否是实际空间名。 检查“编辑设备”页面的“设备品牌”下拉框，“省市区”级联框的选项是否正确。 选项正确，则说明自定义模型、页面组件与模型绑定关系、以及页面on-load事件是正确的。 检查“编辑设备”页面（HW__editEquipment）的设备录入功能是否正确。 填写“设备名称”、“设备编码”等信息， 单击“保存”。 检查“设备管理”页面（HW__equipmentManage）是否包含新插入的数据。 如果查询结果页面显示新增数据，则说明新增功能以及页面的事件代码正确。 如果操作不成功，可以在页面事件脚本中增加debugger，使用Chrome 开发者工具 来调试定位问题。 检查“编辑设备”页面（HW__editEquipment）的设备修改功能是否正确。 单击一条记录后面的编辑按钮，查看是否跳转到“编辑设备”页面。 修改“设备名称”、“设备编码”等信息， 单击“保存”。 检查“设备管理”页面（HW__equipmentManage）当前设备记录是否更新。 如果查询结果页面显示更新数据，则说明修改功能以及页面的事件代码正确。 检查“设备管理”页面（HW__equipmentManage）的设备删除、查询、重置功能是否正确。 选中空白行或其他行，单击“删除”，验证删除功能是否正常，如果不能删除，请检查操作列“删除”按钮事件代码。 在查询区域分别输入“设备名称”、“地址”，单击“搜索”或“重置”验证查询电梯设备信息功能，如果不能查询或重置，请检查操作列按钮的事件代码。

操作步骤 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在应用中，单击下方“配置”，进入应用配置。 图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 客服人员、派单人员、维修人员

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“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个“按钮”的“显示名称”为“取消”，“类型”为“默认按钮”。 单击页面上方的，保存页面。

页面模型分析 页面模型负责与页面组件交互，获取生成工单需要的数据，页面模型需要先定义，然后再与页面组件进行绑定。 对于设备维修工单，需要录入的信息包括：工单基本信息、设备信息以及工单扩展信息。 打开创单页面，有如下处理逻辑： 在“基本信息”区域指定“设备名称”时，在“设备详情”区域自动显示设备信息。该能力需要开发（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 页面组件分析

操作步骤 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“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') 单击“创建”，退出事件编排窗口。 单击页面上的，保存页面。

操作步骤 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“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": "注册成功！"} 测试成功，单击编辑器上方的，启用发布脚本。