全部文档
文档中心工作流使用手册关联元素UX参考案例

参考案例

👉

点击跳转:内部成员建议在语雀文档中查看

本文包含 DeepUX 组件和工作流配套使用的常见需求及对应配置。实现某一需求的配置方式有很多种,本文档仅提供参考,可在理解后拓展出其他配置方式。

DeepUX 组件为使用工作流提供了最重要的前端展示方式,今后会也逐步迭代 DeepUX 与工作流的配套设施。因此,在工作流使用场景中,强烈建议使用 DeepUX 组件而非页面组件,页面组件已停止迭代工作流相关功能。

DeepUX 组件对于 DeepModel 相关的数据源,会支持更多展示方式,因此,强烈建议您:

  • 注册DeepModel组件

  • 工作流组件部署的环境变量 EXPORT_DATASOURCE_MODE=MODEL

    • 该环境变量决定工作流的相关后台表所在的数据库

    • 值变化则意味着切换数据库,则会导致在页面展示上出现历史数据丢失的现象(例如工作流实例被清空),因此请在所有工作流实例都完成的情况下再进行切换

在以下具体案例中,但凡出现

【对象】、【对象组】、【DeepQL】、【DeepModel】、【对象分析查询】
等字样,即说明该案例中必须满足以上两个条件,否则无法实现。

指标卡控件可展示数据源中的数字类型字段的值。

需求:

  • UX中的【指标卡】控件可以展示【我的任务】和【待认领的任务】的数量

  • 无需区分工作流元素,统计所有工作流的数量



此方式需要注册DeepModel组件,且工作流组件部署的环境变量 EXPORT_DATASOURCE_MODE=MODEL 。


Step1:进入deep_model_console,添加工作流对象组



Step2:添加分析查询-我的任务

  • 若没有此功能,请将组件部署的版本升级到最新版,或采用【查询器】功能替代(那么后续UX中的数据源类型需要选择【自定义查询-DeepQL】,查询器如何使用请参考DeepModel组件文档)

  • 查询对象:DFTask

  • 分析维度:.task_status

  • 度量:DFTask对象,计数

  • 过滤条件:任务状态在进行中,且,执行人等于当前用户 或 执行人的用户组中的用户等于当前用户

    • 当前用户的JS表达式需要替换为【space+您的空间编码+::current_user_id】

    • 获取空间编码的方式之一:F12进入开发者工具,刷新平台中任一标签页,切至【网络】标签,选择任一行数据,查看【标头-请求标头】中的Space值

Copy
    .task_status 等于 InProgress
且	(
    .assignee.system_user.user_id 等于 global spacenbjoip::current_user_id
    或
    .assignee.system_group.user.user_id 等于 global spacenbjoip::current_user_id
    )
```<br>![1715245064202-5dcfa348-5cb3-42fd-8c6b-b7e92792f943](../../../media/1715245064202-5dcfa348-5cb3-42fd-8c6b-b7e92792f943.png)<br>



**Step3:添加分析查询-待认领的任务**

+ 同Step2,仅改变了过滤条件:任务状态在进行中,且,执行人为空,且,**候选人**等于当前用户 或 **候选人**的用户组中的用户等于当前用户

```python
    .task_status 等于 InProgress
且	
    .assignee 为空
    (
    .candidate.system_user.user_id 等于 global spacenbjoip::current_user_id
    或
    .candidate.system_group.user.user_id 等于 global spacenbjoip::current_user_id
    )

Step4:在UX中添加数据源

  • 数据源类型为【对象分析查询】

  • 分别将前两步添加的分析查询都添加为数据源



Step5:在UX中添加指标卡控件

  • 分别关联对应的数据源,添加的指标数字关联的属性为count_of_DFTask



适用于没有注册DeepModel组件,且工作流组件没有部署在 MODEL 上的情况。

Step1:新建python元素,用作UX中的数据源



用于参考的示例代码如下:

Copy
from deepfos.lib.deepux import Struct, Integer, as_datasource
from deepfos.element.workflow import WorkFlow
import pandas as pd

class Data(Struct):
    my_task_num: Integer
    claim_task_num: Integer

@as_datasource(struct=Data)

def main(p1, p2):
    # 指定任意一个存在的工作流元素编码
    flow = WorkFlow('budget_Status_MultiSubprocess')

    # 我的任务(不分工作流元素,返回所有我的任务)
    my_task = flow.list_my_task(status=None, as_dataframe=False)
    my_task_num = len(my_task)

    # 待认领的任务(不分工作流元素,返回所有待认领的任务)
    claim_task = flow.list_claim_task(as_dataframe=False)
    claim_task_num = len(claim_task)

    df = pd.DataFrame({
        'my_task_num': [my_task_num],
        'claim_task_num': [claim_task_num],
    })
    return df

PS: 关于UX组件中的python数据源详细介绍,请查看UX相关文档:https://docs.deepfos.com/component/deepux/function/datasource#python-dataframe

Step2:在UX中添加数据源

数据源类型为【自定义查询-python】



Step3:在UX中添加指标卡控件

  • 关联python数据源,添加的指标数字关联的属性分别为my_task_numclaim_task_num




需求:

指标卡提示已超时的任务,点击可查看所有超时的任务列表,可对单条任务的负责人发送催办提醒。

前提:

Copy
1. 注册DeepModel组件
2. 工作流组件部署的环境变量 EXPORT_DATASOURCE_MODE=MODEL
3. 工作流的任务节点,配置了【到期策略】,需要用这里的【到期时间】判断任务是否超时,详见工作流对应节点的使用手册

DEMO 地址:

DEMO仅供内部成员使用,若未连接公司内网,则需通过公司VPN使用。请发送邮件至【ya.li@deepfinance.com】申请开通DEMO环境权限。

配置步骤:

Copy
1. 配置工作流,用于发送通知,举例:<br>![1726195671325-daec0cc9-a18e-4600-8805-193742b56576](../../../media/1726195671325-daec0cc9-a18e-4600-8805-193742b56576.png)<br>

2. 配置指标卡,用于统计超时任务数量,关联的数据源可用【对象分析查询】,详见本文中【指标卡】章节,配置参考:<br>![1726196538995-c77b2b24-f3e6-46f9-a695-a220e8f553cd](../../../media/1726196538995-c77b2b24-f3e6-46f9-a695-a220e8f553cd.png)<br>

3. 配置清单表,用于展示超时任务的列表
    1. 清单表可以配置在弹窗中
    2. 关联的数据源可直接用【对象-DFTask】,过滤条件(过滤出超时的):<br>![1726196851274-96690cc8-160f-4eb9-a1c7-1937cac0cfff](../../../media/1726196851274-96690cc8-160f-4eb9-a1c7-1937cac0cfff.png)<br>

    3. 操作列添加行按钮【催办】,配置事件:【点击】时【发起流程】,用于发送通知<br>![1726197493885-711096e6-7c4c-4786-ac77-3e52aace7049](../../../media/1726197493885-711096e6-7c4c-4786-ac77-3e52aace7049.png)<br>

4. 指标卡配置事件:【点击】时【打开弹窗】

效果展示:

思路拓展

其他类似的指标卡结合清单表的场景,都同理,只是数据源需要重新配置。


需求:

自定义流程实例列表,可点击行以查看流程详情,详情包含流程记录流程图

前提:

Copy
1. 注册DeepModel组件
2. 工作流组件部署的环境变量 EXPORT_DATASOURCE_MODE=MODEL

配置步骤:

Copy
1. 进入deep_model_console,添加工作流对象组<br>![1715240717116-43fa9642-93e8-4491-9580-c5448b3c69fc](../../../media/1715240717116-43fa9642-93e8-4491-9580-c5448b3c69fc.png)<br>

2. 新建UX页面,用来展示【流程实例详情】:
    1. 选择空白模板
    2. 添加变量`proc_id`
    3. 添加【流程记录】、【流程图】控件,控件中的`流程实例ID`配置项都设置为【UX变量-proc_id】<br>![1717728946390-5bf2a38d-e420-4e74-ba3d-11bc86e8d797](../../../media/1717728946390-5bf2a38d-e420-4e74-ba3d-11bc86e8d797.png)<br>

3. 新建UX页面,用来展示【流程实例列表】:
    1. 可选择模板【基于业务模型/对象】-【清单表(上下)】
    2. 数据源选择对象`DFProcess`<br>![1717727592702-4e9aec12-e59f-44db-a5a9-5ef32c139987](../../../media/1717727592702-4e9aec12-e59f-44db-a5a9-5ef32c139987.png)<br>

    3. 按需配置查询区域<br>![1717727737843-774e5553-873a-40ba-87e2-454cc71b1a92](../../../media/1717727737843-774e5553-873a-40ba-87e2-454cc71b1a92.png)<br>

    4. 按需优化过滤条件<br>![1717727952747-1e17d021-03bd-4384-8a52-6a804787f8d6](../../../media/1717727952747-1e17d021-03bd-4384-8a52-6a804787f8d6.png)<br>

    5. 添加操作列按钮,用来跳转【流程实例详情】页面<br>![1717728512218-dd2a34aa-5174-482b-a382-164667f509c5](../../../media/1717728512218-dd2a34aa-5174-482b-a382-164667f509c5.png)<br>

    6. 按钮事件配置【跳转内部页面】,跳转目标是此前配置的【流程实例详情】页面,跳转参数的值赋`数据源的proc_inst_id`<br>![1717729152050-c462fb3a-78d6-49aa-a9ad-1eb83f04c3c0](../../../media/1717729152050-c462fb3a-78d6-49aa-a9ad-1eb83f04c3c0.png)<br>

效果展示:

思路拓展

结合清单表控件其他功能、UX中其他控件(例如边栏布局对象数据选择器等),丰富并优化流程实例列表。


业务场景:

填报表单后,提交,在提交前二次确认,防止用户未保存/计算表单。

核心配置:

任务处理控件的完成任务前节点添加动作【二次确认弹窗】



效果:

此处为语雀卡片,点击链接查看

拓展场景1:多个任务节点都使用这同一个待办界面,但只有某些节点需要弹出此二次弹窗(例如只有第一个填报节点需要)。

核心配置:

  1. UX添加变量pop(自定义变量编码即可)

  2. 需要二次弹窗的节点,跳转待办页面的参数加上pop,赋值"true"

  3. 二次确认弹窗的运行条件配置$var.pop == "true"

效果:

此处为语雀卡片,点击链接查看

思路拓展:

灵活运用二次确认弹窗的运行条件,还可以运用此UX控件中其他数据进行条件编写,例如当前处理节点=预算员提交当前部门=财务部······

业务场景:

流程中的前后两个节点都是同一个用户进行处理,需要在处理完上一个任务后,刷新到下一个任务的处理页面。

核心配置:

  1. UX的流程记录控件中,任务实例查询,用基于流程实例查询基于业务键查询

  2. 如果基于流程实例查询,工作流中的任务节点,给待办页面传参要包含proc_id = wfv$proc_id,即传流程实例ID

  3. 如果基于业务键查询,需要配置businessKey值,值要和流程实例的业务键对应上

  4. 基于这两种方式查询,可能查出多个任务实例(例如同一个流程,此用户处理了多次),会优先展示时间最近、且进行中的任务,并支持切换任务实例

DEMO元素:https://alpha.deepfos.com/element-deepflow/3-0-0/edit?elementName=DEMO_UX_05&folderId=DIR90dca264308f&moduleId=WKFL3_0&sign=YXBwSWQ9Y3pqbml3MDI0JnNwYWNlPWN6am5pdw%3D%3D

效果:

DEMO中,两种查询方式的主要配置截图见下文。

举例:流程实例ID可以由工作流组件传给待办跳转界面的UX变量proc_id,那么在对应UX中,则配置查询条件流程实例ID = UX变量proc_id即可。

当然,只要能在UX中赋值对应的流程实例ID,就能查询到对应的任务,展示对应的任务处理控件。例如系统中可能在每次发起流程后,都回写流程实例ID到业务表中,那么可能在UX中可以直接通过清单表等组件取到对应的流程实例ID值。总之,根据自身情况灵活配置。





举例:业务键可以由工作流组件传给待办跳转界面的UX变量businessKey,那么在对应UX中,则配置查询条件流程实例ID = UX变量businessKey即可。

同理,只要能在UX中取到对应的业务键的值,就能展示对应的任务实例页面,例如UX中可能直接存在维度选择器,能直接组成业务键,就不需要从工作流传参了。





业务场景:

例如审批流程为A->B->C->D,D驳回至A时,可以指定A重新提交后是否直接到D,无需B、C再重新审批。

核心配置:

  1. D处理时,对应UX的任务处理控件中,使用完成任务所需参数传参至工作流,告知A提交后的审批路线,这个参数存在节点D的acr$extra_res变量中

  2. A提交后需用排他网关判断后续是到B还是直接到D,判断条件需要用到节点D的acr$extra_res变量,因此节点D完成时,需要把acr$extra_res变量映射到全局变量中,以供排他网关使用





DEMO元素:https://alpha.deepfos.com/element-deepflow/3-0-0/edit?elementName=DEMO_UX_06&folderId=DIR8db0262e059f&moduleId=WKFL3_0&sign=YXBwSWQ9Y3pqbml3MDI0JnNwYWNlPWN6am5pdw%3D%3D

效果:

回到顶部

咨询热线

400-821-9199

我们使用 ChatGPT,基于文档中心的内容以及对话上下文回答您的问题。

ctrl+Enter to send