# 通过华为云Astro轻应用工作流中的用户任务实现优先审批功能 #### 应用场景 在企业运营过程中，经常会遇到一些需要快速处理或者特殊关注的任务。例如，某些紧急项目需要快速审批，以便尽快启动。当企业重要客户提出需求时，需要快速响应以满足客户需求。或者在某些特殊情况下，高层领导需要具有优先审批权。 在华为云Astro轻应用的工作流中，通过设置用户任务的优先审批功能，可轻松实现上述功能。用户任务用来表示业务流程中由用户参与完成的工作。当引擎处理到该节点时，给指定的用户或者一组用户创建待处理的任务项，等待用户的处理。关于用户任务图元的详细介绍，可参见[为华为云Astro轻应用工作流添加活动类图元](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9180.html#section0)。 本实践将为您介绍在华为云Astro轻应用工作流中，如何通过配置用户任务的审批动作和终止动作，在会签过程中实现优先级审批功能。 #### 方案优势 华为云Astro轻应用工作流中内置了实现顺序审批、或签和会签等任务分派规则，可基于用户任务实现复杂的任务分派规则，应对复杂的交互流程。 #### 操作流程 在华为云Astro轻应用的工作流中，通过配置用户任务，在会签过程中实现优先审批功能的流程，如[图1]所示。 图1优先审批功能实现流程 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002110773194.png) #### 步骤一：创建审批流对象 创建一个审批流对象，用于存储用户提交的申请数据。 1. 创建一个低代码应用。 1. 参考[授权用户使用华为云Astro轻应用并购买实例](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9046.html)中操作，申请华为云Astro轻应用免费试用或购买商业实例。 2. 实例购买后，在华为云Astro轻应用服务控制台的"主页"中，单击"进入首页"，进入应用开发页面。 3. 在"应用"中，单击"新建低代码应用"或单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002134818046.png "点击放大")，进入新建低代码应用页面。 首次创建应用时，请根据界面提示创建一个命名空间。命名空间一旦创建，不能修改和删除，创建前请确认好相关信息。建议使用公司或团队的缩写作为命名空间。 4. 在新建低代码应用页面，应用类型选择"标准应用"，单击"确定"。 5. 输入应用的标签和名称，单击"新建"，即可进入应用设计器。 图2创建一个空白应用 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002170372113.png "点击放大") 表1新建空白应用参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。 | 我的第一个应用 | | 名称 | 新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加***命名空间***__。命名要求如下： - 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。 | A | 2. 在应用设计器的左侧导航栏中，选择"数据"，单击对象中的"+"。 3. 设置对象的名称和唯一标识，单击"确定"。 图3创建对象processDemo ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107131716.png "点击放大") 表2新建processDemo对象参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 对象名称 | 新建对象的名称，创建后可修改。 取值范围：1\~80个字符。 | processDemo | | 唯一标识 | 新建对象在系统中的标识，创建后不支持修改。命名要求如下： - 长度不能超过63个字符，包括前缀命名空间的长度。 标识前模糊掉的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母，数字和下划线组成，且不能以下划线结尾。 | processDemo | 4. 在已创建的对象中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107593388.png)，进入对象详情页面。 5. 在"字段"页签，单击"添加"，为对象添加apply字段。 图4添加apply字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107126352.png "点击放大") 表3添加apply字段参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 显示名称 | 新建字段的名称，创建后可修改。 取值范围：1\~63个字符。 | 申请标题 | | 唯一标识 | 新建字段在系统中的标识，创建后不支持修改。命名要求如下： - 长度不能超过63个字符，包括前缀命名空间的长度。 - 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。 | apply | | 字段类型 | 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143232233.png)，在弹出的页面中，根据页面提供的参数解释，选择新建字段所属的类型。 | 文本 | | 数据长度 | 允许输入字段的长度。 | 64 | 6. 在"字段"页签，再次单击"添加"按钮，添加[表4]中字段。 图5processDemo对象中包含字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002129941498.png "点击放大") 表4待添加字段 | 显示名称 | 唯一标识 | 字段类型 | |:---|:---|:---| | 申请类型 | type | 文本 | | 申请时间 | deadline | 日期 | | 流程标识 | bpmId | 文本 | | 流程状态 | bpmState | 文本 | #### 步骤二：创建脚本 1. 创建脚本submit，用于启动工作流。 1. 在应用设计器中，选择"逻辑"，单击脚本后的"+"。 2. 新建一个空白的脚本，名称设置为"submit"，单击"添加"。 图6创建脚本submit ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002142848757.png "点击放大") 3. 在脚本编辑器中，输入示例代码。 ``` import * as bpm from 'bp'; @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'Object', required: true, label: 'tripData' }) applicationData: object; } @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'String', required: true, label: 'interviewID' }) interviewID: string; } @action.object({ type: "method" }) export class SubmitTrip { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public run(input: ActionInput): ActionOutput { let out = new ActionOutput(); out.interviewID = bpm.newClientV1().start('命名空间__bpm1', { data: input.applicationData }).interviewId; return out; } } ``` 其中，*"命名空间__bpm1"* 为待创建工作流的名称，即[步骤六：创建审批工作流]中设置的值。 4. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107593396.png)，保存脚本，保存成功后单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143232241.png)，激活脚本。 2. 创建脚本createApplication，用于提交审批流数据，并将数据写入[步骤一：创建审批流对象]中创建的对象。 1. 在应用设计器中，选择"逻辑"，单击脚本后的"+"。 2. 新建一个空白的脚本，名称设置为"createApplication"，单击"添加"。 3. 在脚本编辑器中，输入示例代码。 ``` import * as db from 'db'; @useObject(['命名空间__processDemo__CST']) @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'object', required: true, label: 'applicationData' }) applicationData: object; @action.param({ type: 'string', required: true, label: 'interviewID' }) interviewID: string; } @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'string', required: true, label: 'id' }) id: string; } @action.object({ type: "method" }) export class CreateBusiTrip { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public run(input: ActionInput): ActionOutput { const out = new ActionOutput(); let engine = db.object('命名空间__processDemo__CST'); input.applicationData['命名空间__bpmId__CST'] = input.interviewID; out.id = engine.insert(input.applicationData); return out; } } ``` 其中，*"命名空间__processDemo__CST"* 为[步骤一：创建审批流对象]中创建的对象，*"命名空间__bpmId__CST"*为对象中添加的字段。 4. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107433624.png)，保存脚本，保存成功后单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143152613.png)，激活脚本。 3. 创建脚本queryApplication，用于根据bpmId查询审批流数据。 1. 在应用设计器中，选择"逻辑"，单击脚本后的"+"。 2. 新建一个空白的脚本，名称设置为"queryApplication"，单击"添加"。 3. 在脚本编辑器中，输入示例代码。 ``` import * as bpm from 'bp'; import * as db from 'db'; @useObject(['命名空间__processDemo__CST']) @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'String', required: true, label: 'interviewID' }) interviewID: string; } @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'Object', required: true }) detail: object; } @action.object({ type: "method" }) export class QueryMyApproDetail { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public run(input: ActionInput): ActionOutput { let out = new ActionOutput(); out.detail = {}; let instanceId = input.interviewID; const bp = bpm.newInstanceClient(); let appliObj = db.object('命名空间__processDemo__CST'); let conditions = [{ "field": "命名空间__bpmId__CST", "operator": db.Operator.eq, "value": input.interviewID }]; let applications = appliObj.queryByCondition({ "conjunction": "AND", "conditions": conditions }); if (applications.length > 0) { input.interviewID; out.detail = { 命名空间__apply__CST: applications[0].命名空间__apply__CST, 命名空间__deadline__CST: applications[0].命名空间__deadline__CST, 命名空间__type__CST: applications[0].命名空间__type__CST, 命名空间__bpmId__CST: input.interviewID }; } return out; } } ``` 其中，*"命名空间__processDemo__CST"* 为[步骤一：创建审批流对象]中创建的对象，*"命名空间__bpmId__CST"* 、*"命名空间__apply__CST"* *、"命名空间__deadline__CST"* 和*"命名空间__type__CST"*为对象中添加的字段。 4. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107593392.png)，保存脚本，保存成功后单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143232237.png)，激活脚本。 4. 创建脚本approve，用于处理审批任务。 1. 在应用设计器中，选择"逻辑"，单击脚本后的"+"。 2. 新建一个空白的脚本，名称设置为"approve"，单击"添加"。 3. 在脚本编辑器中，输入示例代码。 ``` import * as bpm from 'bp'; import * as context from 'context'; import * as db from 'db'; @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'String', required: true, label: 'state' }) state: string; @action.param({ type: 'String', required: true, label: 'interviewID' }) interviewID: string; } @action.object({ type: "method" }) export class ApproveTrip { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public run(input: ActionInput) { let instanceId = input.interviewID; let taskClient = bpm.newTaskClient(); let res = taskClient.queryByCondition({ condition: { conjunction: db.Conjunction.AND, conditions: [ { field: "processInsID", operator: db.Operator.eq, value: instanceId }, { field: "assigneeID", operator: db.Operator.eq, value: context.getUserId() } ] }, }); if (res.length) { const taskId = res[0].id; var count; let vars = taskClient.getVars(taskId, ["pass"]); if (vars["pass"]) { count = vars["pass"]; } else { count = 0; } if (input.state == "PASS") { bpm.newTaskClient().complete(taskId, '', { pass: count + 1 }) } else { bpm.newTaskClient().complete(taskId, '', {}) } } } } ``` 4. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107433620.png)，保存脚本，保存成功后单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143152609.png)，激活脚本。 5. 创建脚本getTask，用于获取审批流中的任务id。 1. 在应用设计器中，选择"逻辑"，单击脚本后的"+"。 2. 新建一个空白的脚本，名称设置为"getTask"，单击"添加"。 3. 在脚本编辑器中，输入示例代码。 ``` import * as db from 'db'; import * as bp from 'bp'; import * as context from 'context'; @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'String', required: true, label: 'interviewID' }) interviewID: string; } export class ActionOutput { @action.param({ type: 'String', required: true, label: 'taskId' }) taskId: string; } @action.object({ type: "method" }) export class ApproveTrip { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public run(input: ActionInput): ActionOutput { let out = new ActionOutput(); let instanceId = input.interviewID; let taskClient = bp.newTaskClient() let res = taskClient.queryByCondition({ condition: { conjunction: db.Conjunction.AND, conditions: [ { field: "processInsID", operator: db.Operator.eq, value: instanceId }, { field: "assigneeID", operator: db.Operator.eq, value: context.getUserId() } ] }, }); if (res.length > 0) { let taskId = res[0]['id']; out.taskId = taskId; console.log(taskId) return out; } return out; } } ``` 4. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002145082557.png)，保存脚本，保存成功后单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002145122149.png)，激活脚本。 6. 创建脚本getUserName，用于获取用户名。 1. 在应用设计器中，选择"逻辑"，单击脚本后的"+"。 2. 新建一个空白的脚本，名称设置为"getTask"，单击"添加"。 3. 在脚本编辑器中，输入示例代码。 ``` import * as objectstorage from 'objectstorage'; import * as buffer from 'buffer'; import * as excel from 'excel'; import * as context from 'context'; import * as db from 'db';//导入处理object相关的标准库 //定义入参结构 @action.object({ type: "param" }) export class ActionInput { } //定义出参结构，出参包含1个参数，workOrder的记录id @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'string', required: false, label: 'string' }) res: string; } //使用数据对象命名空间__processDemo__CST @useObject(['User']) @action.object({ type: "method" }) export class CreateWorkOrder { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public createWorkOrder(input: ActionInput): ActionOutput { let out = new ActionOutput(); try { let s = db.object('User'); //查询User表 let condition = { "conjunction": "AND", "conditions": [{ "field": "id", "operator": "eq", "value": context.getUserId() }] }; let userRecod = s.queryByCondition(condition); if (userRecod) { out.res = userRecod[0].usrName; return out; } } catch (error) { console.error(error.name, error.message); } return out; } } ``` 4. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002118248492.png)，保存脚本，保存成功后单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002153646773.png)，激活脚本。 #### 步骤三：创建提交申请页面 创建一个提交申请的标准页面，页面中包括申请标题、申请类型和申请时间三个字段，用于用户提交申请。 1. 创建一个空白标准页面。 1. 在应用设计器中，选择"界面"，单击页面后的"+"。 2. 输入页面的标签和名称，单击"添加"，新建一个标准页面。 图7创建提交申请标准页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108050598.png "点击放大") 2. 新建对象模型apply。 1. 在标准页面底部，单击"模型视图"，将页面从设计视图切换到模型视图。 2. 单击"新增模型"，输入模型名称（如apply）、"来源"选择"对象"，单击"下一步"。 图8新建对象模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002142847533.png "点击放大") 3. 选择[步骤一：创建审批流对象]中创建的对象并选中apply、type和deadline字段，单击"下一步"，再单击"确定"，完成模型的创建。 图9选择对象和字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002165210929.png "点击放大") 3. 新建服务模型submit_bpm。 1. 在模型视图页面，单击"新增模型"，输入模型名称（如submit_bpm）、"来源"选择"服务"，单击"下一步"。 图10新建服务模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107538950.png "点击放大") 2. 选择[1]中创建的脚本，单击"确定"。 图11选择提交脚本 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002144900093.png "点击放大") 图12选择脚本后效果 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002109421916.png "点击放大") 3. 单击"下一步"，再单击"确定"，完成模型的创建。 4. 返回设计视图页面，拖入输入框、日期选择框和下拉框，并绑定对应的对象模型。 1. 在标准页面底部，单击"设计视图"，将页面从模型视图切换到设计视图。 2. 在"基本组件"中，拖拽输入框、日期选择框、下拉框和按钮组件到画布中，布局[图13]。 图13提交审批标准页面布局 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107548962.png "点击放大") 3. 选中组件，修改输入框、日期选择框、下拉框组件的标签为申请标题、申请时间和申请类型。 图14修改组件标题 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143069717.png "点击放大") 4. 选中输入框组件，在"属性 \> 数据绑定"中单击"值(value)绑定"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107551642.png)，为组件绑定[2]中对象模型的"*命名空间* __apply__CST"字段。 图15为组件绑定对象模型中的apply字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143071301.png "点击放大") 5. 按照上述操作，分别为日期选择框和下拉框组件绑定[2]中对象模型的"*命名空* 间__deadline__CST"字段和"*命名空间* __type__CST"字段。 图16为组件绑定对象模型中的deadline字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107555594.png "点击放大") 图17为组件绑定对象模型中的type字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143075477.png "点击放大") 6. 选中下拉框组件，将"属性 \> 基本属性 \> 选项"的值设置为"出差"和"报销"。 图18设置选项值 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143923221.png) 7. 选中按钮组件，将"显示名称"修改为"提交申请"。 8. 在"事件"页签，单击"点击"后的"+"，为按钮添加如下事件。 ``` var apply = $model.ref("apply").getData(); var submit = $model.ref("submit_bpm").getData(); submit.inputParam.applicationData = apply; $model.ref("submit_bpm").run().then(function(data){ context.$message.success('Submitted successfully.'); closeCurrentTab(); }) .catch(function (err) { console.log('error is', error); context.$message.error('Submission failed:' + error.resMsg); }); function closeCurrentTab() { if (parent.bingo) { var removeTab = parent.bingo.removeTab; var getCurrentTab = parent.bingo.getCurrentTab; if (removeTab && getCurrentTab) { return removeTab(getCurrentTab()); } } if (window.parent != window) { window.parent.close(); } else { window.close(); } } ``` 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143426005.png)，保存页面。 6. 保存成功后，单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107747052.png)，预览效果。 #### 步骤四：创建审批数据表页面 创建一个标准页面，用于呈现用户提交的审批数据，并在操作列中增加一个审批按钮，单击该按钮可进入审批页面。 1. 创建一个空白标准页面。 1. 在应用设计器中，选择"界面"，单击页面后的"+"。 2. 输入页面的标签和名称（如processBpm），单击"添加"，新建一个标准页面。 图19创建审批数据表标准页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107439060.png "点击放大") 2. 新建对象模型processBpm。 1. 在标准页面底部，单击"模型视图"，将页面从设计视图切换到模型视图。 2. 单击"新增模型"，输入模型名称（如processBpm）、"来源"选择"对象"，单击"下一步"。 3. 选择[步骤一：创建审批流对象]中创建的对象并选中apply、type、deadline、bpmId和bpmState字段，单击"下一步"，再单击"确定"，完成模型的创建。 图20选择对象和字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002118394236.png "点击放大") 3. 返回设计视图页面，拖入表格组件，并为组件绑定对象模型。 1. 在"基本组件"中，拖拽表格组件到画布中。 图21提交审批标准页面布局 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143414877.png "点击放大") 2. 选中表格组件，在"属性 \> 数据绑定"中单击"值(value)绑定"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143545625.png)，为组件绑定[2]中对象模型processBpm。 图22为组件绑定对象模型processBpm ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107737568.png "点击放大") 3. 选中表格组件，在"属性 \> 表格列"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107739772.png)，为表格添加操作列。 图23选择添加操作列 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002118237828.png "点击放大") 4. 单击新增操作列Operation1后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143539205.png)，修改列标题为"操作"。 图24修改列标题为操作 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143420693.png "点击放大") 5. 在"操作按钮"中，单击"添加操作按钮"，修改"标签"为"审批"。 6. 单击审批按钮后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107904368.png)，再单击动作列表后的"+"， 图25为审批按钮添加自定义动作 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002154695997.png "点击放大") ``` context.$page.openStdPage('命名空间__Approval', 'interviewID=' + $current.$attrs.row.命名空间__bpmId__CST); ``` 其中，"命名空间__Approval"为[步骤五：创建审批处理页面]中创建的标准页面，"命名空间__bpmId__CST"为[步骤一：创建审批流对象]中添加的字段。 7. 在"禁用"中，输入如下代码，即审批通过后将审批的按钮置灰。 图26禁用设置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002118406116.png "点击放大") ``` $row.命名空间__bpmState__CST == "PASS" || $row. 命名空间__bpmState__CST == "FAIL" ``` 其中，"*命名空间* __bpmState__CST"为[6]中添加的对象字段。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107747048.png)，保存页面。 #### 步骤五：创建审批处理页面 创建一个审批申请的标准页面，页面中包含申请标题、申请类型和申请时间三个字段，同时包括通过、不通过、经理通过和经理不通过四个按钮。 1. 创建一个空白标准页面。 1. 在应用设计器中，选择"界面"，单击页面后的"+"。 2. 输入页面的标签和名称（如Approval），单击"添加"，新建一个标准页面。 图27创建审批数据表标准页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143556573.png "点击放大") 2. 新建脚本模型queryApplication，用于查询对应bpmId的审批数据。 1. 在标准页面底部，单击"模型视图"，将页面从设计视图切换到模型视图。 2. 单击"新增模型"，输入模型名称（如queryApplication）、"来源"选择"服务"，单击"下一步"。 3. 选择[3]中创建的脚本，单击"下一步"，再单击"确定"，完成模型的创建。 图28选中脚本 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002109268036.png "点击放大") 图29选中脚本后效果 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002144906809.png "点击放大") 3. 新建对象模型process。 1. 在模型视图页面，再次单击"新增模型"，输入模型名称（如process）、"来源"选择"对象"，单击"下一步"。 2. 选择[步骤一：创建审批流对象]中创建的对象并选中apply、type和deadline字段，单击"下一步"，再单击"确定"，完成模型的创建。 图30选择对象和字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002129831808.png "点击放大") 4. 新建脚本模型approve，用于提交审批结果。 1. 在模型视图页面，再次单击"新增模型"，输入模型名称（如approve）、"来源"选择"服务"，单击"下一步"。 2. 选择[4]中创建的脚本，单击"下一步"，再单击"确定"，完成模型的创建。 图31选择所需的脚本 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002144910217.png "点击放大") 图32设置后效果 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143740237.png "点击放大") 5. 新建脚本模型getTask，用于某个领导审批同意后该节点自动完成，忽略其他人的意见提交审批结果。 1. 在模型视图页面，再次单击"新增模型"，输入模型名称（如getTask）、"来源"选择"服务"，单击"下一步"。 2. 选择[5]中创建的脚本，单击"下一步"，再单击"确定"，完成模型的创建。 图33选择所需的脚本 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002109802186.png "点击放大") 图34设置后效果 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002145361349.png "点击放大") 6. 新建脚本模型getUserName，用于获取用户名。 1. 在模型视图页面，再次单击"新增模型"，输入模型名称（如getUserName）、"来源"选择"服务"，单击"下一步"。 2. 选择[6]中创建的脚本，单击"下一步"，再单击"确定"，完成模型的创建。 图35选择所需的脚本 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002118251156.png "点击放大") 图36设置后效果 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002153650749.png "点击放大") 7. 新增自定义模型managerFlag和approverFlag，用于控制按钮回显。 1. 在模型视图页面，单击"新增模型"，输入模型名称（如managerFlag）、"来源"选择"自定义"，单击"下一步"。 2. 单击"下一步"，再单击"确定"，完成模型的创建。 3. 按照上述操作，创建自定义模型"approverFlag"。 图37查看创建的模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002153775257.png "点击放大") 8. 返回设计视图页面，拖入组件，并为组件绑定对象模型。 1. 在"基本组件"中，拖拽2个输入框和1个日期选择框组件到画布中。 图38审批处理标准页面布局 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143608185.png "点击放大") 2. 选中组件，修改组件标签为申请标题、申请时间和申请类型。 图39修改组件标签 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143609425.png "点击放大") 3. 选中第一个输入框组件，在"属性 \> 数据绑定"中单击"值(value)绑定"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143620469.png)，为组件绑定[3]中对象模型的"*命名空间* __apply__CST"字段。 图40为组件绑定对象模型中的apply字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002109281504.png "点击放大") 4. 按照同样方法，为日期选择框组件绑定"*命名空间__deadline__CST* "字段，为第二个输入框绑定"*命名空间*__type__CST"字段。 5. 再拖入四个按钮组件到画布中，并修改按钮名称为"通过"、"驳回"、"经理通过"和"经理驳回"。 图41修改按钮名称 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002118262274.png "点击放大") 6. 选中页面组件，在"事件"中，单击加载后的"+"。 图42为页面添加事件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002109460326.png "点击放大") 7. 在自定义动作中，输入如下代码。 图43输入事件代码 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107978920.png "点击放大") ``` var bpTaskId = context.$page.params.interviewID; if (bpTaskId) { var model = $model.ref('queryApplication'); var data = model.getData(); data.inputParam.interviewID = bpTaskId; model.run().then(function (data) { var result = data.detail; $model.ref("process").setData(result); }).catch(function (err) { context.$message.error(err.resMsg || err.message || err); }); } //审批人列表 var approver = ["user_name1","user_name2"] //经理列表 var manager = ["user_name3"] $model.ref('getUserName').run().then(function(data){ if (!approver.includes(data['res'])) { $model.ref("approverFlag").setData(true); } if (!manager.includes(data['res'])) { $model.ref("managerFlag").setData(true); } else { //如果是经理，把审批人的按钮也隐藏了 $model.ref("approverFlag").setData(true); } }).catch(function(error){ console.log('error is', error); context.$message.error('Submission failed:' + error.resMsg); }); ``` 其中，"queryApplication"为[2]中创建的脚本模型，"user_name1"、"user_name2"为审批人名称，"user_name3"为经理审批人名称。 8. 选中"通过"按钮，在事件页签中，单击"点击"后的"+"，为按钮添加自定义动作。 ``` var data = $model.ref('process').getData(); var approve = $model.ref('approve').getData(); approve.inputParam.interviewID = data['命名空间__bpmId__CST']; approve.inputParam.state = 'PASS'; $model.ref('approve').run().then(function(data){ context.$message.success('Submitted successfully.'); closeCurrentTab(); }).catch(function(error){ console.log('error is', error); context.$message.error('Submission failed:' + error.resMsg); }); function closeCurrentTab() { if (parent.bingo) { var removeTab = parent.bingo.removeTab; var getCurrentTab = parent.bingo.getCurrentTab; if (removeTab && getCurrentTab) { return removeTab(getCurrentTab()); } } if (window.parent != window) { window.parent.close(); } else { window.close(); } } ``` 其中，"process"为[3]中创建的对象模型，"approve"为[4]创建的脚本模型。"命名空间__bpmId__CST"为[步骤一：创建审批流对象]中添加的字段。 9. 再次选中"通过"按钮，在"属性"中单击"属性值绑定"后的"+"，为组件绑定[7]中自定义的模型"approverFlag"。 图44为通过按钮绑定approverFlag模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002165359593.png "点击放大") 10. 选中"驳回"按钮，在事件页签中，单击"点击"后的"+"，为按钮添加自定义动作。 ``` var data = $model.ref('process').getData(); var approve = $model.ref('approve').getData(); approve.inputParam.interviewID = data['命名空间__bpmId__CST']; approve.inputParam.state = 'FAIL'; $model.ref('approve').run().then(function(data){ context.$message.success('Submitted successfully.'); closeCurrentTab(); }).catch(function(error){ console.log('error is', error); context.$message.error('Submission failed:' + error.resMsg); }); function closeCurrentTab() { if (parent.bingo) { var removeTab = parent.bingo.removeTab; var getCurrentTab = parent.bingo.getCurrentTab; if (removeTab && getCurrentTab) { return removeTab(getCurrentTab()); } } if (window.parent != window) { window.parent.close(); } else { window.close(); } } ``` 其中，"process"为[3]中创建的对象模型，"approve"为[4]创建的脚本模型。"命名空间__bpmId__CST"为[步骤一：创建审批流对象]中添加的字段。 11. 再次选中"驳回"按钮，在"属性"中单击"属性值绑定"后的"+"，为组件绑定[7]中自定义的模型"approverFlag"。 图45为驳回按钮绑定approverFlag模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002119642534.png "点击放大") 12. 选中"经理通过"按钮，在事件页签中，单击"点击"后的"+"，为按钮添加自定义动作。 ``` var dataTask = $model.ref('getTask').getData(); dataTask.inputParam.interviewID= context.$page.params.interviewID; $model.ref('getTask').run().then(function(data){ context.$message.success('Submitted successfully.'); console.log(data); var taskId = data.taskId; var _url = `/u-route/baas/bp/v2.0/runtime/tasks/${taskId}`; var _inputParam = {action:'经理审批', variables:{pass:2}}; var _method = 'PUT'; var _header = {'Content-Type':'application/json'}; context.service(_url).run(_inputParam,_method,_header).then(function(response){ console.log("success"); }); closeCurrentTab(); }).catch(function(error){ console.log('error is', error); context.$message.error('Submission failed:' + error.resMsg); }); function closeCurrentTab() { if (parent.bingo) { var removeTab = parent.bingo.removeTab; var getCurrentTab = parent.bingo.getCurrentTab; if (removeTab && getCurrentTab) { return removeTab(getCurrentTab()); } } if (window.parent != window) { window.parent.close(); } else { window.close(); } } ``` 其中，"getTask"为[5]中创建的脚本模型。 13. 再次选中"经理通过"按钮，在"属性"中单击"属性值绑定"后的"+"，为组件绑定[7]中自定义的模型"managerFlag"。 图46为经理通过按钮选择managerFlag模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002119414600.png "点击放大") 14. 选中"经理驳回"按钮，在事件页签中，单击"点击"后的"+"，为按钮添加自定义动作。 ``` var dataTask = $model.ref('getTask').getData(); dataTask.inputParam.interviewID= context.$page.params.interviewID; $model.ref('getTask').run().then(function(data){ context.$message.success('Submitted successfully.'); console.log(data); var taskId = data.taskId; var _url = `/u-route/baas/bp/v2.0/runtime/tasks/${taskId}`; var _inputParam = {action:'经理审批', variables:{pass:0}}; var _method = 'PUT'; var _header = {'Content-Type':'application/json'}; context.service(_url).run(_inputParam,_method,_header).then(function(response){ console.log("success"); }); closeCurrentTab(); }).catch(function(error){ console.log('error is', error); context.$message.error('Submission failed:' + error.resMsg); }); function closeCurrentTab() { if (parent.bingo) { var removeTab = parent.bingo.removeTab; var getCurrentTab = parent.bingo.getCurrentTab; if (removeTab && getCurrentTab) { return removeTab(getCurrentTab()); } } if (window.parent != window) { window.parent.close(); } else { window.close(); } } ``` 其中，"getTask"为[5]中创建的脚本模型。 15. 再次选中"经理驳回"按钮，在"属性"中单击"属性值绑定"后的"+"，为组件绑定[7]中自定义的模型"managerFlag"。 图47为经理驳回按钮选择managerFlag模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002119414608.png "点击放大") 9. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002107981904.png)，保存页面。 #### 步骤六：创建审批工作流 创建一个审批申请的工作流，通过配置用户任务的审批动作和终止动作，实现优先级审批功能。 1. 在应用设计器的左侧导航栏中，选择"流程"，单击工作流后的"+"。 2. 输入工作流的标签和名称（如bpm1），单击"添加"。 3. 创建变量和对象变量。 1. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108146100.png)，进入全局上下文页面。 2. 单击变量后的"+"，创建一个变量variable0。 3. 单击变量后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108148276.png)，选择"设置"，修改"名称"为"pass"，"数据类型"选择"数字"。 图48创建变量pass ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002145123881.png "点击放大") 4. 在全局上下文中，单击对象变量后的"+"，创建一个对象变量。 图49创建对象变量data ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002145124353.png "点击放大") 表5新建data对象变量 | 参数 | 说明 | 示例 | |:---|:---|:---| | 名称 | 新建对象变量的名称，变量名是变量在流程中引用的唯一标识。修改变量名不会改变图元中的引用，但是可能导致流程不可用。 取值范围：1\~80个字符。 | data | | 对象 | 在下拉框中，选择具体的对象，本示例选择[步骤一：创建审批流对象]中创建的对象。 | 命名空间__processDems__CST | 图50查看已创建变量 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002154176373.png) 4. 创建审批工作流。 1. 按照[图51]，为工作流添加所需的图元。 图51审批工作流布局 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002109367252.png "点击放大") 2. 分别选中脚本图元、用户任务图元、记录更新图元，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143763185.png)，修改图元标签为创建审批表、审批流程、成功和失败。 图52修改图元标签 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002154001193.png "点击放大") 3. 连接图元指定图元的逻辑关系，如[图53]。 根据逻辑实现，需要在拖入并配置好所有图元后，将图元按照逻辑顺序有序的连接起来。在执行工作流时，系统会根据连线顺序有序执行图元任务，从而实现整个流程运转。 图53指定逻辑关系 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002109528112.png "点击放大") 5. 配置工作流中的图元。 1. 选中脚本图元，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108031178.png)，按照[图54]设置脚本图元。 图54设置脚本图元 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108076336.png "点击放大") 2. 选中用户任务图元，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143759077.png)，按照[图55]设置用户图元。 图55设置用户图元 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002154696701.png "点击放大") 图56审批配置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002154781105.png) 表6用户任务参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 界面 \> 任务标题 | 显示在任务界面的标题。 | 申请审批 | | 界面 \> 渲染类型 | 用户处理的界面，可以是标准页面、标准表单或高级页面。 | 标准页面 | | 界面 \> 页面 | 根据渲染类型，选择具体的页面。 | 选择[步骤五：创建审批处理页面]中创建的页面"*命名空间*__Approval"。 | | 接收人 \> 类型 | 待处理任务的用户类型。 | 名称和表达式 | | 接收人 \> 参与者 \> 类型 | 当"类型"为"名称和表达式"时，该参数才会显示。参与者类型可以是用户、业务用户、组或者表达式。 | 用户 | | 接收人 \> 参与者 \> 取值 | 选择接收该任务的用户，不包括业务用户。 | user_name1 user_name2 user_name3 | | 审批配置 \> 审批类型 | 选择审批的类型。 - 或签：任一个分配人均可审批 只需要接收人中的某一用户完成了审批，即可推动任务流程，走向下一个任务。 - 会签：每个分配人都需要审批 需要接收人中的用户群体满足您设置的审批条件才可推动任务流程，走向下一个任务。 | 会签：每个分配人都需要审批 | | 审批配置 \> 投票结果门槛 | 该参数取值表示百分比，如果达到设置的百分比，审批结果中最高的得票结果将覆盖 "$BP.TaskOutcome"系统变量，即将执行最高得票的审批结果。 | 66 | | 审批配置 \> 默认结果 | 审批百分比（已审批的人数/总的有效审批人数）未达到"投票结果门槛"百分比时，默认的审批结果。当审批类型为"会签：每个分配人都需要审批"时，该参数才会显示。 | 审批通过 | | 审批配置 \> 审批动作 | 设定一些候选的动作，作为默认审批结果。 | 审批通过,经理审批 | | 审批配置 \> 当存在如下动作时立即终止任务 | 当存在设定的某个或者某些动作时，立即终止任务。 | 经理审批 | 3. 选中排他网关和成功图元之间的连接，并做如下设置。 图57设置排他网关和成功图元之间的连线 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002143778933.png "点击放大") 4. 选中排他网关和失败图元之间的连接，并做如下设置。 图58设置排他网关和失败图元之间的连线 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002154006565.png "点击放大") 5. 选中成功图元，按照[图59]设置成功图元。 图59设置成功图元 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108428746.png "点击放大") 6. 选中失败图元，按照[图60]设置失败图元。 图60设置失败图元 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108427102.png "点击放大") 6. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108348286.png)，保存工作流。 7. 保存成功后，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108508026.png)，启用工作流。 #### 步骤七：设置应用菜单并验证功能 为应用添加一个"我要出差"和"我要待办"菜单，并验证工作流是否按照预设的流程执行。 1. 应用导航栏设置。 1. 进入应用设计器，在"开始"中，单击"应用导航设置"。 2. 在主导航设置页签中，单击"新建"，新建一个"我要出差"菜单。 图61添加我要出差菜单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002145545869.png "点击放大") 3. 按照上述操作，添加一个我的待办菜单。 图62添加我的待办菜单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002108348098.png "点击放大") 2. 员工提交出差申请。 1. 在应用主菜单中，单击"运行 \> 立即运行"，进入应用预览页面。 2. 在"我要出差"菜单中，提交出差申请。 图63提交出差申请 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002118981394.png "点击放大") 提交成功后，界面会提示"Submitted successfully"。 3. 主管审批申请。 1. 在应用主菜单中，单击"运行 \> 立即运行"，进入应用预览页面。 2. 在"我的待办"菜单中，单击待审批数据后的"审批"，进入审批页面。 图64单击审批 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002154023801.png "点击放大") 3. 审批申请。 本实践中提交的申请，需要[5.b]中配置的user_name1、user_name2和user_name3三个用户审批。其中，user_name3为经理角色，具有优先审批权，即user_name3审批后无需user_name1、user_name2再审批。 假设，张三提交了一个出差申请，正常情况下user_name1审批后，user_name2再审批，最后user_name3（经理）审批，user_name3审批后整个流程审批结束。如果张三申请后，user_name3（经理）直接进行了审批，则审批流程结束，无需user_name1和user_name2再审批，因为user_name3具有优先审批权。 图65正常审批界面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002119636794.png "点击放大") 图66经理审批界面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002154761101.png "点击放大")