流程变量在服务任务出入参中的应用

功能介绍

为了提升流程的灵活性和集成能力，流程引擎支持在流程中定义服务任务，用于调用内部或外部的API接口。通过服务任务，您可以实现：

• 流程变量作为入参：将流程上下文中的变量传递给服务任务接口，实现数据无缝流转。
• 出参存入流程变量：将接口返回的结果存入新的流程变量，供后续节点（如用户任务、网关等）使用。

该能力可实现数据获取、加工处理、结果回写的全流程自动化执行，大幅减少人工干预，缩短业务链路响应周期，提升跨系统业务流程的自动化与标准化水平。

本文以调用“/services/rdm/common/api/Language/create”接口创建“Language”语言实例为例，完整演示服务任务从配置、发布到验证的全流程操作。

前提条件

• 已在应用运行态获取一个可调用的数据服务API。具体操作请参见全量数据服务。

  示例接口路径：/services/rdm/common/api/Language/create，用于创建Language实例数据。

• 已登录流程引擎。

创建流程服务编排

流程服务编排是服务任务的调用载体，需要优先完成流程服务编排的创建与发布，才能被流程元模板的“服务任务”节点引用。

1. 在左侧导航栏中，选择“流程编排服务 > 流程服务编排”，进入“流程服务编排”页面。
2. 单击“创建”，展开“创建服务”页面。
3. 选择“手动创建”页签，参照如下参数说明完成配置后，单击“下一步”。

   表1 基本信息配置信息

   参数	参数说明	示例
   服务名称	流程服务编排的名称。	ProcessServiceOrchestration_API_002_create
   服务来源	服务的来源类型	XDM

4. 在“配置信息”中，参照如下参数说明完成配置，确认无误后单击“保存并发布”。

   表2 配置信息配置信息

   参数	参数说明	示例
   服务类型	服务的协议类型。	HTTP
   服务地址	完整的调用URL。 格式： {域名/IP:端口}/[运行服务文根]/接口路径	https://dme.cn-north-4.huaweicloud.com/rdm_b38868cddaef455583c0115277b5c6c6_app/services/rdm/common/api/Language/create
   方法类型	HTTP请求方法。	POST
   Header参数	请求头配置。	参数名称：applicationId，参数值：${x-application-id} 参数名称：tenantId，参数值：${x-tenant-id}
   Body参数	请求体配置。	参数类型：JSON Rest模板：{"params":${input}}
   返参模板	响应结果提取规则。	${response.content}

   

   “Rest模板”中的“${input}”为流程变量的占位符，将在服务任务中动态替换。

创建流程元模板

接下来，创建一个流程元模板，并在流程图中使用服务任务。

1. 在左侧导航栏中，选择“流程编排服务 > 流程元模板”，进入“流程元模板”页面。
2. 单击“创建”，展开“创建流程元模板”页面。
3. 选择“手动创建”页签，参照如下参数说明完成配置后，单击“保存”。

   表3 流程元模板基础信息

   参数	参数说明	示例
   英文名称	流程元模板的英文名称。	Language
   中文名称	流程元模板的中文名称。	语言

4. 流程元模板创建完成后，自动进入“流程编辑”页面，可基于业务需求可视化设计流程图。
   1. 从左侧“流程工具”栏依次拖入2个“用户任务”、1个“服务任务”和1个“结束事件”至画布，并使用连接工具依次连接画布中的各个组件。
      图1 设计流程图
      
   2. 选中“用户任务”，在右侧工具信息设置面板的“常规”页签，将“中文名称”定义为“用户任务1”，单击“设置责任人”，指定审批人（如“User001”）。
   3. 选中另一个“用户任务”，在右侧工具信息设置面板的“常规”页签，将“中文名称”定义为“用户任务2”，单击“设置责任人”，指定审批人（如“User002”）。
   4. 选中“服务任务”，在右侧工具信息设置面板的“常规”页签，完成以下配置：
      图2 设置服务任务
      
      • 调用服务：选择“服务定义”，单击，选择创建流程服务编排中已发布的流程服务编排（如“ProcessServiceOrchestration_API_002_create”）。
      • 结果变量：输入“output”，用于接收接口返回的响应结果，作为后续节点可复用的流程变量。

5. 配置完成后，单击右上角的“保存”。
6. 切换至“数据编辑”页面，单击“添加数据模型”，展开“添加数据模型”页面。
7. 在条件筛选区域，“所属应用”选择“XDM”，“英文名称”输入“Language”，筛选出目标模型，勾选后单击“保存”，完成模型与流程的绑定。
   图3 选择数据模型
   

8. 切换至“UI编辑”页面，在“编辑态”导航树栏选中“提交任务”节点。随后从左侧“物料”插件面板的“组件”页签，将“表单”组件拖入画布的折叠面板中。
   图4 添加表单组件
   

9. 选中画布中的“表单”组件，在右侧“属性”面板的“模型选择”区域，单击“选择模型”，在弹窗中选择7添加的数据模型并确认。
   图5 为表单组件绑定模型
   

10. 配置完成后，单击右上角的“保存”。
11. 在“编辑态”导航树栏选中“用户任务1”节点，切换至“用户任务1”页面。
12. 在左侧“状态管理”插件面板的“页面状态”页签中，单击“添加变量”。
13. 设置如下变量信息，单击“保存”。

    表4 添加页面变量

    参数	参数说明	示例
    变量名	用户自定义，表示当前创建的页面变量的名称。	tableData
    初始值	用户自定义。	""

14. 参考8 - 9，为“用户任务1”节点添加“表单”组件并绑定“Language”模型。
15. 选中画布中的“表单”组件，在右侧“属性”面板的“基础属性”区域，单击“绑定数据”右侧的，在弹窗中选择13添加的页面变量“this.state.tableData”并确认。
16. 在左侧“页面JS”插件面板中，输入如下代码，单击。

    function customUpdateProcessVariablesRequest(event) {
      // 更新流程变量
      const { updateProcessVariables } = this.utils.lcCommonJS();
      const { processInstanceId } = this.utils.lcUtils().useWorkflowQuery().workflowQuery.value;
      const params = { processInstanceId, input: this.state.tableData };
      updateProcessVariables(params).then((res) => {
        console.log(res);
      });
    }
    async function customSubmit(event) {
      // 自定义审批页面-提交&前置事件
      const { createTaskList } = this.utils.lcCommonJS();
      const { submitReviewHandler, updateGlobalStateHandler, reloadPage, submitValidHandler } =
      this.utils.lcUtils().useWorkflowBlock().useLcbReview(this.stores);
    
    
      try {
        await submitValidHandler();
      } catch {
        return;
      }
    
    
      createTaskList(customUpdateProcessVariablesRequest).
      addTask(submitReviewHandler).
      addTask(updateGlobalStateHandler).
      addTask(reloadPage).
      startTask();
    }

    

    代码第5行的“input”字段需与创建流程服务编排时定义“Body参数”的“Rest模板”键名${input}保持一致。

17. 在弹出的提示框中，单击“确认”。
18. 选中画布底部空白区域，在右侧“属性”面板的“基础信息”区域，将“使用插槽”的“自定义操作区”设置为。
    图6 开启插槽
    

19. 选中画布底部操作区的“提交”，在右侧“高级”面板中，将鼠标移动至“事件绑定”右侧的，单击“onClick 鼠标单击时触发”。
    图7 添加“onClick”事件
    

20. 将鼠标移动至19添加的“onClick”右侧的，单击“自定义JS”。
    图8 自定义JS
    

21. 在弹出的窗口中，选择“customSubmit”，单击“确定”。
    图9 绑定“customSubmit”事件
    

22. 配置完成后，单击右上角的“保存”。
23. 在“编辑态”导航树栏选中“用户任务2”，切换至“用户任务2”页面。
24. 在左侧“状态管理”插件面板的“页面状态”页签中，单击“添加变量”。
25. 设置如下变量信息，单击“保存”。

    表5 添加页面变量

    参数	参数说明	示例
    变量名	用户自定义，表示当前创建的页面变量的名称。	output
    初始值	用户自定义。	""

26. 在左侧“页面JS”插件面板中，输入如下代码，单击。

    function customGetProcessVariablesRequest(event) {
      const { getProcessVariables } = this.utils.lcCommonJS();
      getProcessVariables().then((res) => {
        console.log(res);
        this.state.output = res.data.data.output;
      });
    }

27. 在弹出的提示框中，单击“确认”。
28. 从左侧“物料”插件面板的“组件”页签，依次将“按钮”、“文本展示”、“输入框”组件拖入画布的折叠面板中。
    图10 添加组件
    

29. 选中“文本展示”组件，在右侧“属性”面板的“基础信息”区域，将“文本内容”设置为“获取服务任务出参数据：”。
    图11 设置文本内容
    

30. 选中“按钮”组件，在右侧“属性”面板的“基础信息”区域，将“按钮名称”设置为“获取流程变量”。
    图12 设置按钮名称
    

31. 选中“按钮”组件，切换至右侧“高级”面板，将鼠标移动至“事件绑定”右侧的，单击“onClick 鼠标单击时触发”。
32. 将鼠标移动至31添加的“onClick”右侧的，单击“自定义JS”，在弹窗中选择“customGetProcessVariablesRequest”并确认。
    图13 绑定“customGetProcessVariablesRequest”事件
    

33. 选中“输入框”组件，在右侧属性面板的“基础信息”区域，单击“默认值”右侧的，在弹窗中选择25添加的页面变量“this.state.output”并确认。
    图14 绑定“this.state.output”变量
    

34. 配置完成后，单击右上角的“保存”。

发布流程元模板

1. 单击左上角的“流程元模板”，返回流程元模板页面。
2. 在目标流程元模板（如“Language”）所在行，单击，检入流程元模板。
3. 在目标流程元模板（如“Language”）所在行，单击，发布流程元模板。

   等待约2分钟，使发布生效。

发起流程实例

1. 在流程元模板页面，在目标流程元模板（如“Language”）所在行，单击，发起流程。

   

2. 在提交任务页面，填写如下信息，单击“提交”。
   图15 填写提交信息
   

   表6 提交任务的填写信息

   参数	示例
   语言名称	中文
   系统版本	1
   唯一编码	123456
   用户任务1 审批人	User001
   用户任务2 审批人	User002

审批流程任务

1. 使用“User001”账号登录流程运行服务，进入“流程管理 > 我的流程任务”页面。
2. 在“我的待办”中，找到目标任务（即发起流程实例中提交的流程），单击其“任务名称”超链接，进入任务审批页面。
3. “结论”选择“通过”，单击“提交”。
4. 使用“User002”账号登录流程运行服务，进入“流程管理 > 我的流程任务”页面。
5. 在“我的待办”中，找到目标任务（即“User001”提交的流程），单击其“任务名称”超链接，进入任务审批页面。
6. 单击“获取流程变量”，查看“输入框”正常显示服务任务返回的output内容。
   图16 获取流程变量
   

7. “结论”选择“通过”，单击“提交”。

验证变量与数据实例

1. 进入“流程管理 > 流程实例”页面，单击目标实例的“实例名称”超链接，进入该实例详情页面。
2. 切换至“复杂流程”页签，在“变量”子页签中，查看input和output变量。
   • input变量内容与用户任务1的提交数据一致。
     图17 input变量值
     
   • output变量内容与用户任务2的“输入框”展示内容一致。
     图18 output变量值
     

3. 返回应用运行态，进入“数据模型管理 > 数据实例”页面。
4. “数据实体/关系实体”选择“Language”，确认数据实例已通过服务任务成功创建。
   图19 “Language”数据实例