文档首页/ 华为云Astro轻应用/ 最佳实践/ 工作流专项/ 通过华为云Astro轻应用工作流中的用户任务实现优先审批功能
更新时间：2025-08-14 GMT+08:00
查看PDF
分享

通过华为云Astro轻应用工作流中的用户任务实现优先审批功能

应用场景

在企业运营过程中，经常会遇到一些需要快速处理或者特殊关注的任务。例如，某些紧急项目需要快速审批，以便尽快启动。当企业重要客户提出需求时，需要快速响应以满足客户需求。或者在某些特殊情况下，高层领导需要具有优先审批权。

在华为云Astro轻应用的工作流中，通过设置用户任务的优先审批功能，可轻松实现上述功能。用户任务用来表示业务流程中由用户参与完成的工作。当引擎处理到该节点时，给指定的用户或者一组用户创建待处理的任务项，等待用户的处理。关于用户任务图元的详细介绍，可参见为华为云Astro轻应用工作流添加活动类图元。

本实践将为您介绍在华为云Astro轻应用工作流中，如何通过配置用户任务的审批动作和终止动作，在会签过程中实现优先级审批功能。

方案优势

华为云Astro轻应用工作流中内置了实现顺序审批、或签和会签等任务分派规则，可基于用户任务实现复杂的任务分派规则，应对复杂的交互流程。

操作流程

在华为云Astro轻应用的工作流中，通过配置用户任务，在会签过程中实现优先审批功能的流程，如图1所示。

图1 优先审批功能实现流程

步骤一：创建审批流对象

创建一个审批流对象，用于存储用户提交的申请数据。

  1. 创建一个低代码应用。

    1. 参考授权用户使用华为云Astro轻应用并购买实例中操作，申请华为云Astro轻应用免费试用或购买商业实例。
    2. 实例购买后，在华为云Astro轻应用服务控制台的“主页”中，单击“进入首页”，进入应用开发页面。
    3. 在“应用”中，单击“新建低代码应用”或单击，进入新建低代码应用页面。

      首次创建应用时，请根据界面提示创建一个命名空间。命名空间一旦创建，不能修改和删除，创建前请确认好相关信息。建议使用公司或团队的缩写作为命名空间。

    4. 在新建低代码应用页面，应用类型选择“标准应用”，单击“确定”。
    5. 输入应用的标签和名称，单击“新建”，即可进入应用设计器。
      图2 创建一个空白应用
      表1 新建空白应用参数说明

      参数

      说明

      示例

      标签

      新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。

      我的第一个应用

      名称

      新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加命名空间__。命名要求如下：

      • 长度不能超过31个字符，包括前缀命名空间的长度。

        名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。

      • 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。

      A

  2. 在应用设计器的左侧导航栏中，选择“数据”，单击对象中的“+”。
  3. 设置对象的名称和唯一标识，单击“确定”。

    图3 创建对象processDemo
    表2 新建processDemo对象参数说明

    参数

    说明

    示例

    对象名称

    新建对象的名称，创建后可修改。

    取值范围：1~80个字符。

    processDemo

    唯一标识

    新建对象在系统中的标识，创建后不支持修改。命名要求如下：

    • 长度不能超过63个字符，包括前缀命名空间的长度。

      标识前模糊掉的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。

    • 必须以英文字母开头，只能由英文字母，数字和下划线组成，且不能以下划线结尾。

    processDemo

  4. 在已创建的对象中，单击，进入对象详情页面。
  5. 在“字段”页签，单击“添加”，为对象添加apply字段。

    图4 添加apply字段
    表3 添加apply字段参数说明

    参数

    说明

    示例

    显示名称

    新建字段的名称，创建后可修改。

    取值范围：1~63个字符。

    申请标题

    唯一标识

    新建字段在系统中的标识，创建后不支持修改。命名要求如下：

    • 长度不能超过63个字符，包括前缀命名空间的长度。
    • 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。

    apply

    字段类型

    单击，在弹出的页面中，根据页面提供的参数解释，选择新建字段所属的类型。

    文本

    数据长度

    允许输入字段的长度。

    64

  6. 在“字段”页签，再次单击“添加”按钮，添加表4中字段。

    图5 processDemo对象中包含字段
    表4 待添加字段

    显示名称

    唯一标识

    字段类型

    申请类型

    type

    文本

    申请时间

    deadline

    日期

    流程标识

    bpmId

    文本

    流程状态

    bpmState

    文本

步骤二：创建脚本

  1. 创建脚本submit，用于启动工作流。

    1. 在应用设计器中，选择“逻辑”，单击脚本后的“+”。
    2. 新建一个空白的脚本，名称设置为“submit”，单击“添加”。
      图6 创建脚本submit
    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. 单击，保存脚本，保存成功后单击，激活脚本。

  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. 单击，保存脚本，保存成功后单击，激活脚本。

  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. 单击，保存脚本，保存成功后单击，激活脚本。

  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. 单击，保存脚本，保存成功后单击，激活脚本。

  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. 单击，保存脚本，保存成功后单击，激活脚本。

  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. 单击，保存脚本，保存成功后单击，激活脚本。

步骤三：创建提交申请页面

创建一个提交申请的标准页面，页面中包括申请标题、申请类型和申请时间三个字段，用于用户提交申请。

  1. 创建一个空白标准页面。

    1. 在应用设计器中，选择“界面”，单击页面后的“+”。
    2. 输入页面的标签和名称，单击“添加”，新建一个标准页面。
      图7 创建提交申请标准页面

  2. 新建对象模型apply。

    1. 在标准页面底部，单击“模型视图”，将页面从设计视图切换到模型视图。
    2. 单击“新增模型”，输入模型名称（如apply）、“来源”选择“对象”，单击“下一步”。
      图8 新建对象模型
    3. 选择步骤一：创建审批流对象中创建的对象并选中apply、type和deadline字段，单击“下一步”，再单击“确定”，完成模型的创建。
      图9 选择对象和字段

  3. 新建服务模型submit_bpm。

    1. 在模型视图页面，单击“新增模型”，输入模型名称（如submit_bpm）、“来源”选择“服务”，单击“下一步”。
      图10 新建服务模型
    2. 选择1中创建的脚本，单击“确定”。
      图11 选择提交脚本
      图12 选择脚本后效果
    3. 单击“下一步”，再单击“确定”，完成模型的创建。

  4. 返回设计视图页面，拖入输入框、日期选择框和下拉框，并绑定对应的对象模型。

    1. 在标准页面底部，单击“设计视图”，将页面从模型视图切换到设计视图。
    2. 在“基本组件”中，拖拽输入框、日期选择框、下拉框和按钮组件到画布中，布局图13。
      图13 提交审批标准页面布局
    3. 选中组件，修改输入框、日期选择框、下拉框组件的标签为申请标题、申请时间和申请类型。
      图14 修改组件标题
    4. 选中输入框组件，在“属性 > 数据绑定”中单击“值(value)绑定”后的，为组件绑定2中对象模型的“命名空间__apply__CST”字段。
      图15 为组件绑定对象模型中的apply字段
    5. 按照上述操作，分别为日期选择框和下拉框组件绑定2中对象模型的“命名空间__deadline__CST”字段和“命名空间__type__CST”字段。
      图16 为组件绑定对象模型中的deadline字段
      图17 为组件绑定对象模型中的type字段
    6. 选中下拉框组件，将“属性 > 基本属性 > 选项”的值设置为“出差”和“报销”。
      图18 设置选项值
    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. 单击页面上方的，保存页面。
  6. 保存成功后，单击页面上方的，预览效果。

步骤四：创建审批数据表页面

创建一个标准页面，用于呈现用户提交的审批数据，并在操作列中增加一个审批按钮，单击该按钮可进入审批页面。

  1. 创建一个空白标准页面。

    1. 在应用设计器中，选择“界面”，单击页面后的“+”。
    2. 输入页面的标签和名称（如processBpm），单击“添加”，新建一个标准页面。
      图19 创建审批数据表标准页面

  2. 新建对象模型processBpm。

    1. 在标准页面底部，单击“模型视图”，将页面从设计视图切换到模型视图。
    2. 单击“新增模型”，输入模型名称（如processBpm）、“来源”选择“对象”，单击“下一步”。
    3. 选择步骤一：创建审批流对象中创建的对象并选中apply、type、deadline、bpmId和bpmState字段，单击“下一步”，再单击“确定”，完成模型的创建。
      图20 选择对象和字段

  3. 返回设计视图页面，拖入表格组件，并为组件绑定对象模型。

    1. 在“基本组件”中，拖拽表格组件到画布中。
      图21 提交审批标准页面布局
    2. 选中表格组件，在“属性 > 数据绑定”中单击“值(value)绑定”后的，为组件绑定2中对象模型processBpm。
      图22 为组件绑定对象模型processBpm
    3. 选中表格组件，在“属性 > 表格列”中，单击，为表格添加操作列。
      图23 选择添加操作列
    4. 单击新增操作列Operation1后的，修改列标题为“操作”。
      图24 修改列标题为操作
    5. 在“操作按钮”中，单击“添加操作按钮”，修改“标签”为“审批”。
    6. 单击审批按钮后的，再单击动作列表后的“+”，
      图25 为审批按钮添加自定义动作 
      context.$page.openStdPage('命名空间__Approval', 'interviewID=' + $current.$attrs.row.命名空间__bpmId__CST);

      其中，“命名空间__Approval”为步骤五：创建审批处理页面中创建的标准页面，“命名空间__bpmId__CST”为步骤一：创建审批流对象中添加的字段。

    7. 在“禁用”中，输入如下代码，即审批通过后将审批的按钮置灰。
      图26 禁用设置 
      $row.命名空间__bpmState__CST == "PASS" || $row. 命名空间__bpmState__CST == "FAIL"

      其中，“命名空间__bpmState__CST”为6中添加的对象字段。

  4. 单击页面上方的，保存页面。

步骤五：创建审批处理页面

创建一个审批申请的标准页面，页面中包含申请标题、申请类型和申请时间三个字段，同时包括通过、不通过、经理通过和经理不通过四个按钮。

  1. 创建一个空白标准页面。

    1. 在应用设计器中，选择“界面”，单击页面后的“+”。
    2. 输入页面的标签和名称（如Approval），单击“添加”，新建一个标准页面。
      图27 创建审批数据表标准页面

  2. 新建脚本模型queryApplication，用于查询对应bpmId的审批数据。

    1. 在标准页面底部，单击“模型视图”，将页面从设计视图切换到模型视图。
    2. 单击“新增模型”，输入模型名称（如queryApplication）、“来源”选择“服务”，单击“下一步”。
    3. 选择3中创建的脚本，单击“下一步”，再单击“确定”，完成模型的创建。
      图28 选中脚本
      图29 选中脚本后效果

  3. 新建对象模型process。

    1. 在模型视图页面，再次单击“新增模型”，输入模型名称（如process）、“来源”选择“对象”，单击“下一步”。
    2. 选择步骤一：创建审批流对象中创建的对象并选中apply、type和deadline字段，单击“下一步”，再单击“确定”，完成模型的创建。
      图30 选择对象和字段

  4. 新建脚本模型approve，用于提交审批结果。

    1. 在模型视图页面，再次单击“新增模型”，输入模型名称（如approve）、“来源”选择“服务”，单击“下一步”。
    2. 选择4中创建的脚本，单击“下一步”，再单击“确定”，完成模型的创建。
      图31 选择所需的脚本
      图32 设置后效果

  5. 新建脚本模型getTask，用于某个领导审批同意后该节点自动完成，忽略其他人的意见提交审批结果。

    1. 在模型视图页面，再次单击“新增模型”，输入模型名称（如getTask）、“来源”选择“服务”，单击“下一步”。
    2. 选择5中创建的脚本，单击“下一步”，再单击“确定”，完成模型的创建。
      图33 选择所需的脚本
      图34 设置后效果

  6. 新建脚本模型getUserName，用于获取用户名。

    1. 在模型视图页面，再次单击“新增模型”，输入模型名称（如getUserName）、“来源”选择“服务”，单击“下一步”。
    2. 选择6中创建的脚本，单击“下一步”，再单击“确定”，完成模型的创建。
      图35 选择所需的脚本
      图36 设置后效果

  7. 新增自定义模型managerFlag和approverFlag，用于控制按钮回显。

    1. 在模型视图页面，单击“新增模型”，输入模型名称（如managerFlag）、“来源”选择“自定义”，单击“下一步”。
    2. 单击“下一步”，再单击“确定”，完成模型的创建。
    3. 按照上述操作，创建自定义模型“approverFlag”。
      图37 查看创建的模型

  8. 返回设计视图页面，拖入组件，并为组件绑定对象模型。

    1. 在“基本组件”中，拖拽2个输入框和1个日期选择框组件到画布中。
      图38 审批处理标准页面布局
    2. 选中组件，修改组件标签为申请标题、申请时间和申请类型。
      图39 修改组件标签
    3. 选中第一个输入框组件，在“属性 > 数据绑定”中单击“值(value)绑定”后的，为组件绑定3中对象模型的“命名空间__apply__CST”字段。
      图40 为组件绑定对象模型中的apply字段
    4. 按照同样方法，为日期选择框组件绑定“命名空间__deadline__CST”字段，为第二个输入框绑定“命名空间__type__CST”字段。
    5. 再拖入四个按钮组件到画布中，并修改按钮名称为“通过”、“驳回”、“经理通过”和“经理驳回”。
      图41 修改按钮名称
    6. 选中页面组件，在“事件”中，单击加载后的“+”。
      图42 为页面添加事件
    7. 在自定义动作中，输入如下代码。
      图43 输入事件代码 
      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模型
    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模型
    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模型
    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模型

  9. 单击页面上方的，保存页面。

步骤六：创建审批工作流

创建一个审批申请的工作流，通过配置用户任务的审批动作和终止动作，实现优先级审批功能。

  1. 在应用设计器的左侧导航栏中，选择“流程”，单击工作流后的“+”。
  2. 输入工作流的标签和名称（如bpm1），单击“添加”。
  3. 创建变量和对象变量。

    1. 单击，进入全局上下文页面。
    2. 单击变量后的“+”，创建一个变量variable0。
    3. 单击变量后的，选择“设置”，修改“名称”为“pass”，“数据类型”选择“数字”。
      图48 创建变量pass
    4. 在全局上下文中，单击对象变量后的“+”，创建一个对象变量。
      图49 创建对象变量data
      表5 新建data对象变量

      参数

      说明

      示例

      名称

      新建对象变量的名称，变量名是变量在流程中引用的唯一标识。修改变量名不会改变图元中的引用，但是可能导致流程不可用。

      取值范围：1~80个字符。

      data

      对象

      在下拉框中，选择具体的对象，本示例选择步骤一：创建审批流对象中创建的对象。

      命名空间__processDems__CST
      图50 查看已创建变量

  4. 创建审批工作流。

    1. 按照图51，为工作流添加所需的图元。
      图51 审批工作流布局
    2. 分别选中脚本图元、用户任务图元、记录更新图元，单击，修改图元标签为创建审批表、审批流程、成功和失败。
      图52 修改图元标签
    3. 连接图元指定图元的逻辑关系，如图53。

      根据逻辑实现，需要在拖入并配置好所有图元后，将图元按照逻辑顺序有序的连接起来。在执行工作流时，系统会根据连线顺序有序执行图元任务，从而实现整个流程运转。

      图53 指定逻辑关系

  5. 配置工作流中的图元。

    1. 选中脚本图元，单击，按照图54设置脚本图元。
      图54 设置脚本图元
    2. 选中用户任务图元，单击，按照图55设置用户图元。
      图55 设置用户图元
      图56 审批配置
      表6 用户任务参数说明

      参数

      说明

      示例

      界面 > 任务标题

      显示在任务界面的标题。

      申请审批

      界面 > 渲染类型

      用户处理的界面，可以是标准页面、标准表单或高级页面。

      标准页面

      界面 > 页面

      根据渲染类型，选择具体的页面。

      选择步骤五：创建审批处理页面中创建的页面“命名空间__Approval”。

      接收人 > 类型

      待处理任务的用户类型。

      名称和表达式

      接收人 > 参与者 > 类型

      当“类型”为“名称和表达式”时，该参数才会显示。参与者类型可以是用户、业务用户、组或者表达式。

      用户

      接收人 > 参与者 > 取值

      选择接收该任务的用户，不包括业务用户。

      user_name1

      user_name2

      user_name3

      审批配置 > 审批类型

      选择审批的类型。

      • 或签：任一个分配人均可审批

        只需要接收人中的某一用户完成了审批，即可推动任务流程，走向下一个任务。

      • 会签：每个分配人都需要审批

        需要接收人中的用户群体满足您设置的审批条件才可推动任务流程，走向下一个任务。

      会签：每个分配人都需要审批

      审批配置 > 投票结果门槛

      该参数取值表示百分比，如果达到设置的百分比，审批结果中最高的得票结果将覆盖 “$BP.TaskOutcome”系统变量，即将执行最高得票的审批结果。

      66

      审批配置 > 默认结果

      审批百分比（已审批的人数/总的有效审批人数）未达到“投票结果门槛”百分比时，默认的审批结果。当审批类型为“会签：每个分配人都需要审批”时，该参数才会显示。

      审批通过

      审批配置 > 审批动作

      设定一些候选的动作，作为默认审批结果。

      审批通过,经理审批

      审批配置 > 当存在如下动作时立即终止任务

      当存在设定的某个或者某些动作时，立即终止任务。

      经理审批
    3. 选中排他网关和成功图元之间的连接，并做如下设置。
      图57 设置排他网关和成功图元之间的连线
    4. 选中排他网关和失败图元之间的连接，并做如下设置。
      图58 设置排他网关和失败图元之间的连线
    5. 选中成功图元，按照图59设置成功图元。
      图59 设置成功图元
    6. 选中失败图元，按照图60设置失败图元。
      图60 设置失败图元

  6. 单击页面上方的，保存工作流。
  7. 保存成功后，单击，启用工作流。

步骤七：设置应用菜单并验证功能

为应用添加一个“我要出差”和“我要待办”菜单，并验证工作流是否按照预设的流程执行。

  1. 应用导航栏设置。

    1. 进入应用设计器，在“开始”中，单击“应用导航设置”。
    2. 在主导航设置页签中，单击“新建”，新建一个“我要出差”菜单。
      图61 添加我要出差菜单
    3. 按照上述操作，添加一个我的待办菜单。
      图62 添加我的待办菜单

  2. 员工提交出差申请。

    1. 在应用主菜单中，单击“运行 > 立即运行”，进入应用预览页面。
    2. 在“我要出差”菜单中，提交出差申请。
      图63 提交出差申请

    提交成功后，界面会提示“Submitted successfully”。

  3. 主管审批申请。

    1. 在应用主菜单中，单击“运行 > 立即运行”，进入应用预览页面。
    2. 在“我的待办”菜单中，单击待审批数据后的“审批”，进入审批页面。
      图64 单击审批
    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 正常审批界面
      图66 经理审批界面

父主题： 工作流专项

相关文档