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

应用场景 华为云Astro轻应用提供了自定义低代码页面组件的能力，当预置的组件不能满足您的业务需求时，您可以按照本实践提供的组件规范开发符合自己业务的组件，以此来灵活地扩展平台功能，提高应用构建的效率和灵活性。 本实践以开发一个imgButton组件为例，向您介绍华为云Astro轻应用自定义组件的规范，同时阐述在实现各项功能时需修改的配置项，以及最终发布该自定义组件并在页面上使用的流程，希望在您开发自己的组件时能得到帮助。 本实践中自定义的imgButton组件，用于定制按钮样式、文本等内容。当标准页面预置的按钮组件样式、文本等内容无法满足需求时，可参照本实践进行自定义。

自定义标准页面组件操作流程 华为云Astro轻应用为您提供了一个自定义组件模板包workCards.zip，本章节介绍如何基于workCards.zip模板包自定义一个imgbutton组件，流程如表1所示。 表1 自定义标准页面组件流程说明 序号 步骤 说明 1 步骤一：获取自定义组件模板包 获取自定义组件模板包workCards.zip。 了解workCards.zip模板包的结构和定义规范。 2 步骤二：自定义标准页面组件imgButton 解压workCards.zip模板包，修改解压后的文件夹名称为“imgButton”。 根据业务需求，自定义标准页面组件。 将imgButton文件夹中的内容进行打包，生成自定义组件包“dist\imgButton-***.zip”。 3 步骤三：上传自定义组件包 将自定义组件上传到华为云Astro轻应用。 4 步骤四：验证自定义组件是否符合预期 创建一个标准页面，将自定义组件拖拽到该页面中，组件能够正常显示。为自定义组件添加显示和隐藏事件，检查效果是否达到预期。 父主题： 如何自定义华为云Astro轻应用标准页面组件包

其他操作：通过连接器调用流式报文接口 在华为云Astro轻应用中，除了通过脚本对接大模型接口，还支持通过自定义连接器对接大模型接口。步骤一：创建脚本对接大模型接口中介绍了如何通过脚本对接大模型接口，此处为您介绍如何通过自定义连接器来对接大模型接口。 创建自定义连接器。 在应用设计器中，选择“集成”，单击“连接器”下的“连接器实例”。 在“类型”中，选择“自定义连接器”，进入自定义连接器页面。 单击“+”，配置连接器信息，单击“保存”。 图10 创建自定义连接器 表5 自定义连接器参数说明 参数 说明 示例 标签 自定义连接器的标签，创建后可修改。 取值范围：1~64个字符。 流式连接器 名称 自定义连接器的名称，名称是连接器在系统中的唯一标识，创建后不可修改。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 标识前模糊掉的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 streamconnector 为自定义连接器添加动作。 在“动作”页签中，单击“新建”。 设置动作的基本信息，单击“下一步”。 图11 设置基本信息 表6 动作基本信息参数说明 参数 说明 示例 标签 新建动作的标签名，用于在页面显示。 取值范围：1~64个字符。 streamaction 名称 新建动作的名称，名称是动作在系统中的唯一标识。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 标识前模糊掉的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 streamaction URL 待调用大模型接口的URL地址。 https://example.com 方法 选择请求的方法，可以设置为POST或GET。 POST 内容类型 输入内容的类型取决于第三方支持的具体种类，该类型在HTTP标准协议中定义。 application/json 返回类型 选择接口的返回类型，支持“application/json”和“text/event-stream”两种类型。 application/json：选择该类型时，系统将忽略第三方实际返回的“Content-Type”，采用第三方配置的“Content-Type”来解析返回内容。 text/event-stream：选择该类型时，将以处理流式报文的方式处理接口返回值，需要确保第三方接口的返回值为流式报文，且响应体中的“Content-Type”为“text/event-stream”。 text/event-stream 警告： “返回类型”必须设置为“text/event-stream”，否则自定义连接器的执行逻辑不会走流式的处理逻辑。 本示例无需设置消息头入参，请单击删除第一行参数，再单击“下一步”。 设置输入参数，单击“下一步”。 图12 输入参数配置页面 表7仅介绍本实践中使用到的参数，其他参数解释请参见使用自定义连接器调用第三方接口。 表7 输入参数说明 参数 说明 示例 标签 输入参数的标签名，用于在页面显示。 message 名称 新建输入参数的名称，名称是输入参数在系统中的唯一标识。 message 参数位置 设置输入参数的位置。 消息体 数据类型 设置输入参数的数据类型，直接在下拉框中选择。 字符串 本示例无需设置输出参数，请单击删除第一行参数，再单击“保存”。 返回动作页签，单击该动作所在行的，启用该动作。 图13 动作已启用 为连接器添加认证信息。 为连接器添加认证信息不是本实践重点介绍的内容，具体操作可参考步骤2：配置连接器认证信息。 验证连接器调用流式报文接口。 在动作列表中，单击2中创建的动作，进入动作详情页。 在动作详情页，单击页面上方的“测试”。 图14 选择测试 创建脚本，在脚本中调用自定义连接器。 参考步骤一：创建脚本对接大模型接口中操作，创建一个空白脚本，在脚本编辑器中输入如下示例代码。其中，“命名空间__streamconnector”为1中创建连接器的名称，“命名空间__streamaction”为2中为连接器添加的动作，“命名空间__authname”为3中为连接器添加的认证信息。 import * as context from 'context'; import * as connector from 'connector'; /* * The input parameter is defined by `@action.param()`. */ export class Input { @action.param({ type: "String", required: true, description: "the operation type" }) inputParam: string; } /* * The output parameter is defined by `@action.param()`. */ export class Output { } /* * Define the main service class. * * - The service entry function is defined by `@action.method()`. * - All dependent objects should be defined via `@useObject([])` (for objects) or `@useBo([])` (for business objects). */ export class Calculator { @action.method({ input: "Input", output: "Output", description: "do a operation" }) run(input: Input): Output { let output = new Output(); // 页面上自己创建的自定义连接器的调用方法，第一个参数是创建的自定义连接器名称，第二个参数是认证信息名称 let client2 = connector.newClient("命名空间__streamconnector", "命名空间__authname"); let input2 = { "message": input.inputParam, "stream": true }; // 第一个入参是动作名称， 第二个参数是入参 let resp2 = client2.invoke("命名空间__streamaction", input2); context.getHttp().response.setBody(resp2.data) return output; } } 创建一个标准页面，添加一个智能助手组件并做相关设置，具体操作同步骤二：调用流式报文接口实现智能对话。

步骤一：创建脚本对接大模型接口 在华为云Astro轻应用中，您可以通过脚本和自定义连接器两种方式来对接大模型接口。本步骤以脚本为例进行介绍，连接器如何对接大模型接口请参见其他操作：通过连接器调用流式报文接口。 创建一个低代码应用。 参考授权用户使用华为云Astro轻应用并购买实例中操作，申请华为云Astro轻应用免费试用或购买商业实例。 实例购买后，在华为云Astro轻应用服务控制台的“主页”中，单击“进入首页”，进入应用开发页面。 在“应用”中，单击“新建低代码应用”或单击，进入新建低代码应用页面。 在新建低代码应用页面，应用类型选择“标准应用”，单击“确定”。 输入应用的标签和名称，单击“新建”，即可进入应用设计器。 图2 创建一个空白应用 表2 新建空白应用参数说明 参数 说明 示例 标签 新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。 我的第一个应用 名称 新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加命名空间__。命名要求如下： 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。 A 在应用设计器中，选择“逻辑”，单击脚本后的“+”。 新建一个空白的脚本，名称设置为“streamScript”，单击“添加”。 图3 创建脚本 表3 新建脚本参数说明 参数 说明 示例 名称 在输入框中，输入新建脚本的名称。命名要求如下： 长度不能超过63个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，没有连续的下划线，且不能以下划线结尾。 streamScript 在脚本编辑器中，输入示例代码。 本示例代码主要实现的功能包括：创建一个客户端，通过POST方法和GET方法调用相应的接口，使后台以处理流式报文的方式处理接口返回的数据。其中，https://example.com为待调用大模型接口的地址。 通过脚本直接调用SSE协议的ULR时，传入参数“isStream”必须设置为“true”，否则不会走流式的处理逻辑。 import * as context from 'context'; import * as http from 'http'; /* * The input parameter is defined by `@action.param()`. */ export class Input { @action.param({ type: "String", required: true, description: "the operation type" }) inputParam: string; } /* * The output parameter is defined by `@action.param()`. */ export class Output { } /* * Define the main service class. * * - The service entry function is defined by `@action.method()`. * - All dependent objects should be defined via `@useObject([])` (for objects) or `@useBo([])` (for business objects). */ export class CallSseUrl { @action.method({ input: "Input", output: "Output", description: "do a operation" }) run(input: Input): Output { let output = new Output(); let cli = http.newClient() let resp = cli.post("https://example.com", { isStream: true, data: { "message": input.inputParam }, headers: { "Content-Type": "application/json" } }) return output; } } 单击脚本编辑器上方的，保存脚本。 调试脚本验证脚本是否符合预期。 在脚本编辑器上方单击，进入脚本调试页面。 在“输入参数”页签中，输入如下示例。 图4 设置输入参数 { "inputParam": "我想创建一个差旅管理应用" } 单击，执行脚本。 在“输出参数”中，输出如下流式内容，表明脚本输出正常。 图5 脚本输出内容 好的！为您**智能规划**了"**差旅管理**"应用的构建计划如下： 1. 创建一个名为"**差旅管理**"的低代码应用； 2. 添加模型对象"**差旅管理**"，包含字段： - **出发城市**（下拉选择） - **目的城市**（下拉选择） - **出发时间**（日期） - **结束时间**（日期） - **出差目的**（文本） 3. 为"**差旅管理**"模型生成一个标准的**增删改查界面**； 4. 配置一条脚本逻辑："**提交申请后，自动流转到审批人进行审核**"。 请问您是否确认该构建计划？ 您可以输入： - "**确认**"，我将开始执行； - 或输入**修改意见**，例如"增加一个报销单模型"或"把交通工具改为文本字段"。 脚本校验符合预期后，单击脚本编辑器上方的，启用脚本。

约束与限制 表1 约束与限制说明 限制类别 具体限制 脚本中参数限制 通过脚本直接调用SSE协议的ULR时，需要传入参数“isStream：true”，否则不会走流式的处理逻辑。 连接器配置中动作的限制 动作中的返回类型必须设置为text/event-stream，否则自定义连接器的执行逻辑不会走流式的处理逻辑。 开放接口中参数的限制 如果使用开放接口调用SSE协议的脚本，需要将接口信息中的API类型配置为STREAM（默认是rest），同时URL的前缀应该为/service-stream（会根据api类型自动显示），否则不会走流式的处理逻辑，接口执行会报错。

应用场景 开发者使用华为云Astro轻应用开发标准页面时，如果需要通过智能助手组件或其他组件对接外部大模型接口，可以直接在脚本或自定义连接器中配置对大模型接口的调用，支持以流式报文的形式获取大模型接口的返回值。最终在组件中，可实时接收接口返回信息，用户无需等待接口完成全部数据传输即可查看返回数据。 流式报文是指在数据传输过程中，数据不是一次性全部传输完毕，而是以流的形式逐步传输。 本实践将为您介绍，如何在脚本中调用大数据模型接口，实现在应用中接入大数据模型能力，开发AI应用。

步骤一：获取自定义组件模板包 为了增强标准页面组件的丰富性，华为云Astro轻应用为您提供了一个自定义组件模板workCards.zip，您可以基于该模板包自定义标准页面组件。开发标准页面组件前，请先了解自定义组件模板包的结构及定义规范，便于快速上手。 单击链接，获取华为云Astro轻应用自定义组件模板workCards.zip。 解压获取的workCards.zip包，了解自定义组件模板包的结构及定义规范。 图1 workCards.zip模板包结构 表1 workCards.zip模板包目录及文件说明 目录及文件 说明 build 用于存放组件的打包脚本。 dist 组件打包文件目录，文件打包后生成于此目录下。 preview 组件预览文件夹。 src 组件的主文件夹，组件的内容位于此文件夹中。 本实践中，自定义组件仅涉及修改“src\components\workCards”目录下的内容，详细介绍请参见表2。 .gitignore Git的忽略文件。 .npmrc 设置package.json中依赖包的安装源。 package.json 项目的依赖文件。 package-lock.json 用于锁定依赖文件的安装版本号。 README.md 项目提示文件，用于编写对该组件的描述。 vite.config.js Vite的配置文件。 图2 src\components\workCards目录结构 表2 src\components\workCards目录结构说明 目录及文件 说明 design-time 开发态组件文件目录。 static 静态文件目录。 cube.svg/workCards.svg 业务中使用的图标。 index.js 组件主入口文件。 workCards.json 组件的描述文件，用于自定义组件配置面板的规格，即校验和辅助编写自定义组件配置面板的JSON文件。workCards.json文件的编写需遵循JSON Schema规范，以便与主流的编辑器（如vscode、atom、sublime text、webstorm）集成。 workCards.json可以在插件包开发时修改，也可以在插件包编译后修改，编译前workCards.json文件存放在“src\components\workCards”目录下（如图3），编译后“dist\components\workCards”目录下（如表3）。 workCards.vue 组件的主文件。 图3 编译前workCards.json文件所在位置 图4 编译后workCards.json文件所在位置 表3 workCards.json参数说明 参数 说明 name 组件的名称，此处配置的名称主要用于后台元数据的存储和解析等。 长度不能超过64个字符，必须以英文字母开头，只能由英文字母、数字和特殊字符（_和-）组成。建议由厂商名_组件名_版本号组成，例如aaa_img-button_1.1.1。 组件的名称会存放在界面元数据的type中，如type: "my-component1"。 zip包的名称应该和此处name的取值保持一致，例如name设置为imgbutton，zip包名必须为imgbutton.zip。 title 组件别名会显示在标准页面开发界面左侧“组件”页签下的扩展组件中，建议简短并能展示组件特性。 取值范围：1~100个字符。 description 组件的描述信息，即当鼠标悬停在组件上时，展示的组件描述信息。 取值范围：1~200个字符。 category 组件的分类，为了保持界面构建器组件分类的一致性，请使用华为云Astro轻应用提供的组件分类，具体分类如表4所示。 icon 组件的图标，分为未选中时和选中时两个，必须为png格式，且每个png的大小不能超过16KB。 其他 用于定义包大小，编译后的组件包大小不能超过1MB。 表4 华为云Astro轻应用组件分类 分类 说明 navigation 导航组件，如菜单、工具栏或侧边栏。 data 数据组件，可以查看和编辑应用程序中的数据，例如Form、Table或List。 common 通用组件，如标签、图片、标题或段落。 container 容器组件，即包含其他组件的容器。例如，栅格布局组件Row/Col、流式布局组件、Panel、Tabs、Collapse或WidgetContainer。 input 显示和编辑实体属性，如文本框、日期选择器。 file 文件处理组件，例如文件上传下载组件、图片浏览组件或PDF预览组件。 button 触发动作的按钮，如保存按钮、页面跳转按钮。 report 聚合数据并以表格或图表的形式显示，如图表、透视表。 widget 业务卡片。 add-on 扩展组件。

多人协同开发，如何控制用户权限？ 在华为云Astro轻应用中多人协助开发时，可通过为不同的开发者分配不同的权限，来控制开发者对应用的查看、开发、管理等操作。 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。 在应用设计器的右上方，单击图标，进入协同页面。 图1 进入协同页面 单击“管理”下的“开发者”，再单击“被允许的用户”后的“添加”，选择需要协同开发的用户。 图2 选择需要协同开发的用户 单击“下一步”，为添加的用户设置权限，单击“确定”完成添加。 查看应用：允许通过应用设计器访问和查看应用内的元素。 编辑应用：允许进行应用开发编辑，包括应用信息、应用设置和应用内包含的元素。 删除应用：允许将该应用从环境中删除。 版本管理：允许对应用的版本进行管理，如发布版本、切换版本和删除旧版本等。 打包部署：允许打包应用和安装部署应用。 应用管理：允许管理应用的开发者和应用的安全等级等。 例如，为开发者用户“IAMUser01”添加查看查看应用和编辑应用的权限。设置后，在“被允许的用户”中可查看到添加的用户。以“IAMUser01”用户登录应用后，可查看和编辑当前应用。 父主题： 应用前端开发

操作步骤 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“WorkOrder”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“dispatchWorkOrder”，单击“添加”。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在代码编辑器中，插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 //本脚本用于派发工单 import * as db from 'db';//导入处理object相关的标准库 import * as context from 'context';//导入上下文相关的标准库 import * as date from 'date'; //定义入参结构，入参包含1个参数：工单状态的修改信息，为必填字段 @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'Any', required: true, label: 'object' }) transInfo: any; } //定义出参结构，出参包含2个参数，workOrder的记录id和派发后的责任人 @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'String' }) id: string; @action.param({ type: 'String' }) assignedFme: string; } //使用数据对象HW__WorkOrder__ CS T @useObject(['HW__WorkOrder__CST']) @action.object({ type: "method" }) export class DispatchWorkOrder { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public dispatchWorkOrder(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let transInfo = input.transInfo; //将入参赋值给transInfo变量，方便后面使用 let s = db.object('HW__WorkOrder__CST'); //获取HW__WorkOrder__CST这个Object的操作实例 //查询条件 let condition = { "conjunction": "AND", "conditions": [{ "field": "HW__workOrderId__CST", "operator": "eq", "value": transInfo['HW__workOrderId__CST'] }] }; //查找workOrderId所代表的工单信息 let workOrder = s.queryByCondition(condition); workOrder[0]['HW__status__CST'] = '待接单'; workOrder[0]['HW__assignedFme__CST'] = transInfo["HW__assignedFme__CST"].name; let isUpdated = s.updateByCondition(condition, workOrder[0]); if (isUpdated) { out.id = workOrder[0]['id']; out.assignedFme = transInfo["HW__assignedFme__CST"].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; } } 单击编辑器上方的，保存脚本。 测试脚本能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部输入测试数据，单击测试窗口右上角执行图标。 脚本中加粗斜体内容请替换为实际的对象名、字段名。 "name":"test"为当前租户名，可以在上一节的输出参数中查询。 { "transInfo": { "HW__workOrderId__CST": "WD0000123456", "HW__assignedFme__CST":{ "id":"", "name":"test" } } } 执行成功，会在“输出”页签返回查询结果。 图1 返回结果 测试成功，单击编辑器上方的，启用发布脚本。

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

操作步骤 在“我的应用”中，单击“设备维修管理系统”，进入应用。 鼠标放在“Page”上，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。 在“标签”和“名称”文本框中输入“workOrderProcess”，单击“添加”。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。 单击页面右上部的，切换到手机端设计模式。 定义模型“statusInfo”。 在“模型视图”中，单击“新增模型”。 添加自定义模型，模型名称“statusInfo”，单击“下一步”。 单击“新增节点”，为模型添加节点“id”和“HW__status__CST”字段，字段类型都采用默认的Text。单击“下一步”，再单击“确定”，加粗斜体内容请替换为实际命名空间前缀。 单击页面上方的，保存模型。 定义模型“statusOptions”。 在“模型视图”中，单击“新增模型”。 添加服务模型，模型名称“statusOptions”，单击“下一步”， “服务类型”选择“公共接口”，“选择项目”为“设备维修管理系统”，“搜索”中的接口选择“judgeNextStatus”，单击“下一步”，再单击“确定”。 单击页面上方的，保存模型。 拖拽页面组件。 从“模型视图”切换到“设计视图”。 从左侧基本组件列表区中，拖拽1个“表单”到“页面内容”中。 因为当前还没有定义数据源，单击“取消”元数据表单配置向导弹窗，创建一个空的表单控件。 拖拽1个“分栏”到“表单”。 修改“分栏”为1栏（1行1列）。 图2 设置分栏为1行1列 拖拽1个“下拉框”到分栏的“栏”中，然后选中下拉框，在右侧属性面板中，对下拉框进行以下配置。 添加值绑定。 单击“数据绑定”下“值绑定”的，在弹窗中选择“ statusInfo”下的“HW__status__CST”字段。 添加属性值绑定。 单击“属性值绑定”的“+”，设置“属性”为“选项”，“模型字段”为“statusOptions”下“outputParam”节点的“statusList”。 图3 属性值绑定 修改“标签”为“选择下一步操作”，并设置“选项”为“user1，user1”、“user2，user2”。 图4 设置选项值 单击页面上方的，保存设置。 定义页面事件代码。 在“设计视图”中，选中最外层的“页面”。 在右侧“事件”页签中，单击“加载”后的“+”。 在添加动作弹窗中，输入如下事件代码。 let id = Page.params.id; $model.ref("statusInfo").setData({ "id": id }); $model.ref('statusOptions').setData({ inputParam: { "id": id } }); $model.ref('statusOptions').run(); 单击“创建”，退出事件编排窗口。 单击页面上方的，保存页面。

页面模型分析 页面模型负责与页面组件交互，传递处理工单需要的工单ID、工单状态等信息。结合页面需求，“处理工单”对话框页面，需要创建如下模型： 表1 模型分析 模型名称 作用 详细定义 statusInfo 保存派单的参数。 自定义模型，包含的计算节点如下，这些节点与派单接口的输入参数名称一一对应。 说明： 加粗斜体内容请替换为实际命名空间前缀。 id：工单ID HW__status__CST：下一环节状态 statusOptions 判断下一步状态。 服务模型，绑定公共接口“judgeNextStatus”，调用“judgeNextStatus”脚本，判断下一步状态。

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“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 页面组件分析