工作流动态表单最佳实践

需求背景

为了提高操作效率并简化流程设计过程,应对伙伴们反映的在流程设计器中,即使填写/审批流程相同,不同模型也需重新配置的问题,我们引入了“动态表单”功能。此功能旨在减少重复配置的需求,通过设置节点名称和绑定视图,便可实现审批流程相同而视图不同,从而使得相同的审批流程可以被高效重复利用。

为确保伙伴们能够更加方便的使用动态表单,我们将典型示例整合至“工作流”中。本节将结合这些示例详细阐述“动态表单”功能的应用方法。

使用主要分为两个步骤:流程设计和动态表单配置。

流程设计

触发节点配置

  • 应用:工作流
  • 选择模型:动态表单任务
  • 触发场景:更新数据时
  • 选择更新字段:触发次数

触发节点配置

填写/审批节点配置

  1. 动态表单按钮设置为启用状态。
  2. 数据来源设置为触发节点。
  3. 动态表单函数默认有一条内置函数,选中即可。
  4. 数据保存方式、填写人等信息,同从前使用方式。
  5. 在动态表单模式下,数据权限的管理将不再由流程设计器控制,而是由用户所填写的视图进行控制。
    • 例如,若希望用户在“一审”阶段不能修改某字段,则应在设计视图时将相关字段设为只读模式。同样,若某些信息不宜在“一审”阶段展示给客户,相应字段应在设计过程中被设置为隐藏状态。

填写节点配置

若需在“一审”节点接收“一填”阶段的结果,数据来源设置为“一填[动态表单]”。其他配置项保持不变,按照上述说明进行设置。

审批节点配置

若希望“二填”节点的数据由用户填写,并希望内容处于空白状态,可将数据来源设置为“触发”节点。

通过这种配置,“二填”节点的数据将不会受到“一填”和“一审”节点数据的影响。

二填节点配置

二审节点的配置同一审,此处省略。

“终审”节点希望接收到“一审”节点的数据,可以将数据来源设置为一审。

终审节点配置

动态表单配置

首先创建动态表单任务:工作流->动态表单任务->创建,给流程起个名字。

创建动态表单任务

节点任务配置

  1. 流程名:通过下拉菜单选择,数据为动态表单任务中,创建的流程信息。
  2. 节点名称:【强制】确保与流程设计中的节点名称完全一致,否则将无法正确匹配到对应节点的视图。
  3. 模型:选定用于绑定节点视图的模型。
  4. 视图:选择视图前须先确定模型,系统将自动列出所选模型下的通过UI创建的视图供选择。

创建任务节点配置

查看配置效果

在工作流模块->动态表单->动态表单任务,点击“详情”,可以看到该流程所配置的节点信息。

任务列表

动态表单任务详情页

动态表单任务详情

流程触发

点击“触发”按钮将使触发次数自动递增。在流程设计器中配置触发节点时,我们已设定“触发次数”字段的变化作为流程启动的条件。

点击触发按钮

触发节点配置筛选条件

通过完成上述操作,我们已成功配置动态表单。现在可以利用触发节点的筛选条件,来确定触发按钮被点击后,所启动的流程。

触发节点配置筛选条件

自定义动态表单函数

如果所提供的示例未能满足您的需求,您可以根据自身的需求,对触发条件和动态表单函数进行相应的定制与调整。

  • 动态表单函数定义规则如下:
    • namespace:强制为 WorkflowFunctionConstant.FUNCTION_NAMESPACE。
    • fun:强制以 WorkflowFunctionConstant.WORKFLOW_CUSTOM_VIEW_FUNCTION_PREFIX 为前缀。
  • 入参说明:
    • 参数1:节点数据,例如,配合instanceof可以判断当前是填写节点(WriteNode)还是审批节点(ApprovalNode)。
    • 参数2:触发节点的模型数据,如果您的触发节点不确定,可以通过Map接收参数。
    • 参数3:该节点所配置数据来源的数据。
  • 出参说明:视图,如果出参为null,流程终止运行,错误信息提示为“流程节点执行失败,动态表单函数获取视图为空”。
@Slf4j
@Component
@Fun(WorkflowFunctionConstant.FUNCTION_NAMESPACE)
public class DynamicFormCustom {

    /**
     * 根据动态表单任务获取视图
     *
     * @param node            节点数据
     * @param dynamicFormTask 触发节点数据
     * @param dataObj         源数据
     */
    @Function.fun(WorkflowFunctionConstant.WORKFLOW_CUSTOM_VIEW_FUNCTION_PREFIX + "fetchDynamicFormFunction")
    @Function.Advanced(displayName = "[内置]获取动态表单函数")
    @Function(name = "fetchDynamicFormFunction")
    public View fetchDynamicFormFunction(Node node, DynamicFormTask dynamicFormTask, Map<String, Object> dataObj) {
        DynamicFormTaskNode dynamicFormTaskNode = fetchDynamicFormTaskNode(node, dynamicFormTask);
        if (dynamicFormTaskNode == null) {
            return null;
        }
        dynamicFormTaskNode.fieldQuery(DynamicFormTaskNode::getView);
        return dynamicFormTaskNode.getView();
    }

    private DynamicFormTaskNode fetchDynamicFormTaskNode(Node node, DynamicFormTask dynamicFormTask) {
        List<DynamicFormTaskNode> dynamicFormTaskNodeList = Models.origin().queryListByWrapper(Pops.<DynamicFormTaskNode>lambdaQuery()
                .from(DynamicFormTaskNode.MODEL_MODEL)
                .eq(DynamicFormTaskNode::getNodeName, node.getNodeName())
                .eq(DynamicFormTaskNode::getTaskCode, dynamicFormTask.getCode())
        );
        if (CollectionUtils.isEmpty(dynamicFormTaskNodeList)) {
            return null;
        }
        if (dynamicFormTaskNodeList.size() > 1) {
            log.error("工作流动态获取表单函数视图匹配多个,{}", JsonUtils.toJSONString(dynamicFormTaskNodeList));
        }
        return dynamicFormTaskNodeList.get(0);
    }
}

Oinone社区 作者:夜神月原创文章,如若转载,请注明出处:https://doc.oinone.top/designer/workflowdesigner/16336.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
夜神月的头像夜神月数式员工
上一篇 2024年8月22日 am11:56
下一篇 2024年8月23日 am11:40

相关推荐

  • 【工作流】如何在业务模型的列表中展示工作流的审批按钮

    介绍 当我们需要在业务模型的列表中展示审批的按钮时,我们可以通过自定义的方式完成扩展,这样就可以在业务数据中直接点击该动作按钮跳转到工作流待办详情页处理审批或填写任务 1.先在业务数据模型中新增userTaskList字段存放该条数据的工作流待办数据 @Model.model(DemoItem.MODEL_MODEL) @Model(displayName = "测试商品") public class DemoItem extends IdModel { @Field.one2many @Field(displayName = "工作流任务列表", store = NullableBoolEnum.FALSE, invisible = true) @Field.Relation(store = false) private List<WorkflowUserTask> userTaskList; } 2. 在业务数据的查询方法中查询当前登录用户在工作流任务中的数据 @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "查询列表", timeout = 50000) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.LOCAL, FunctionOpenEnum.REMOTE, FunctionOpenEnum.API}) public Pagination<DemoItem> queryPage(Pagination<DemoItem> page, QueryWrapper<DemoItem> queryWrapper) { new DemoItem().queryPage(page, queryWrapper); List<Long> bizIds = page.getContent().stream().map(DemoItem::getId).collect(Collectors.toList()); LambdaQueryWrapper<WorkflowUserTask> userTaskWrapper = new LambdaQueryWrapper<>(); userTaskWrapper.setModel(WorkflowUserTask.MODEL_MODEL); userTaskWrapper.select(WorkflowUserTask::getId, WorkflowUserTask::getNodeDataBizId); userTaskWrapper.eq(WorkflowUserTask::getUserId, PamirsSession.getUserId()) .eq(WorkflowUserTask::getModel, DemoItem.MODEL_MODEL) .eq(WorkflowUserTask::getStatus, WorkflowUserStatusEnum.ACTIVE) .in(WorkflowUserTask::getNodeDataBizId, bizIds); Pagination<WorkflowUserTask> userTaskPagination = new Pagination<>(); userTaskPagination.setCurrentPage(1); userTaskPagination.setSize(200L); userTaskPagination.setSort(new Sort().addOrder(SortDirectionEnum.DESC, WorkflowUserTask::getCreateDate)); List<WorkflowUserTask> userTasks = new WorkflowUserTask().queryListByWrapper(userTaskPagination, userTaskWrapper); Map<Long, WorkflowUserTask> map = userTasks.stream().collect(Collectors.toMap(WorkflowUserTask::getNodeDataBizId, v -> v, (a, b) -> a)); page.getContent().forEach((item) -> { WorkflowUserTask workflowUserTask = map.get(item.getId()); if (workflowUserTask != null) { item.setUserTaskList(Lists.newArrayList(workflowUserTask)); } }); return page; } 3. 在界面设计器拖一个服务端动作到操作列中 4. 将工作流任务列表字段userTaskList拖到表格列中并隐藏该字段 5. 前端自定义跳转到工作流待办详情页的动作组件 import { ActionType, ActionWidget, ClickResult, executeViewAction, RuntimeViewAction, ServerActionWidget, SPI, ViewActionTarget, ViewType, Widget } from '@kunlun/dependencies'; // name为界面设计器拖出的动作名称 @SPI.ClassFactory(ActionWidget.Token({ actionType: ActionType.Server, model: 'demo.DemoItem', name: 'uiServer0358d42817d64fe7908fe48dfce084d3' })) class WorkflowJumpActionWidget extends ServerActionWidget { @Widget.Reactive() public get invisible(): boolean { if (!this.activeRecords?.[0]?.userTaskList?.[0]?.id) { return true; } return super.invisible; } protected async clickAction(): Promise<ClickResult> { const…

    2024年5月8日
    1.4K00
  • 流程设计器的导入导出

    目录 依赖包安装GraphQL的工具登录gql导出生成json文件业务工程中导入示例代码生产环境使用流程设计器 简介 通过调用导出接口,将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> </dependency> 安装GraphQL的工具 下载官网地址:https://github.com/Kong/insomnia/releases 登录gql 示例调用代码 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 导出生成json文件 执行GraphQL,直接返回导出数据。适用于通过浏览器直接下载文件。 指定模块导出 请求示例: mutation { workflowDesignerExportReqMutation { export(data: { module: "demo_core", fileName: "workflow_meta" }) { jsonUrl } } } 指定流程编码导出 请求示例: mutation { workflowDesignerExportReqMutation { export(data: { workflowCode: "WF0000000000132500", fileName: "workflow_meta" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoModuleAppInstall implements MetaDataEditor, LifecycleCompletedAllInit { //流程设计器导出的页面元数据json private static final String INSTALL_WORKFLOW_META_PATH = "install/workflow_meta.json"; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if(StringUtils.isBlank(INSTALL_WORKFLOW_META_PATH)) return; log.info("开始安装-元数据"); try { InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); if (null != util) { // 设计器的元数据 if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装流程设计器元数据"); DesignerInstallHelper.mateInitialization(util, INSTALL_WORKFLOW_META_PATH, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); } } } catch (Exception e) { log.error("初始化流程设计器导入异常", e); } } @Override public void process(AppLifecycleCommand command, Map<String, ModuleDefinition> runModuleMap) { if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装-流程设计器数据"); // 支持远程调用,但是执行的生命周期必须是LifecycleCompletedAllInit或之后. 本地如果安装了设计器,则没有要求 DesignerInstallHelper.bizInitialization(INSTALL_WORKFLOW_META_PATH); } } } 生产环境使用启动设计器 生产环境如无部署设计器docker镜像,可下载我们oinone-op-ds-all-mini-workflow镜像,单独安装流程设计器。由于导入的是流程设计器的数据,需要在流程设计器中编辑流程,合理设置相关的人员和自定义函数

    2024年5月16日
    1.6K00
  • 【工作流】如何自定义支持在加签的同时审批同意

    1.添加工作流相关依赖 业务的api工程添加工作流相关依赖 package pro.shushi.pamirs.demo.api; import org.springframework.stereotype.Component; import pro.shushi.pamirs.core.common.CommonModule; import pro.shushi.pamirs.file.api.FileModule; import pro.shushi.pamirs.meta.annotation.Module; import pro.shushi.pamirs.meta.base.PamirsModule; import pro.shushi.pamirs.meta.common.constants.ModuleConstants; import pro.shushi.pamirs.user.api.UserModule; import pro.shushi.pamirs.workflow.app.api.WorkflowModule; @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", priority = 1, dependencies = {ModuleConstants.MODULE_BASE, CommonModule.MODULE_MODULE, UserModule.MODULE_MODULE, // 此处新增工作流依赖 WorkflowModule.MODULE_MODULE, FileModule.MODULE_MODULE } ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) public class DemoModule implements PamirsModule { public static final String MODULE_MODULE = "demo_core"; public static final String MODULE_NAME = "DemoCore"; @Override public String[] packagePrefix() { return new String[]{ "pro.shushi.pamirs.demo" }; } } 业务的core工程添加工作流相关依赖 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> 2.自定义action动作,在一个动作内分别执行工作流应用自带的加签和审核同意动作 package pro.shushi.pamirs.demo.core.action; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import org.springframework.transaction.annotation.Transactional; import pro.shushi.pamirs.meta.annotation.Action; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.ActionContextTypeEnum; import pro.shushi.pamirs.meta.enmu.ViewTypeEnum; import pro.shushi.pamirs.workflow.app.api.model.WorkflowTaskInstance; import pro.shushi.pamirs.workflow.app.api.model.WorkflowUserTask; import pro.shushi.pamirs.workflow.app.core.action.WorkflowUserTaskAction; import pro.shushi.pamirs.framework.common.utils.ObjectUtils; @Component @Model.model(WorkflowUserTask.MODEL_MODEL) public class DemoWorkflowUserTaskAction { @Autowired private WorkflowUserTaskAction workflowUserTaskAction; @Transactional(rollbackFor = {Exception.class}) @Action(displayName = "加签并审核同意", bindingType = ViewTypeEnum.FORM, contextType = ActionContextTypeEnum.SINGLE) public WorkflowUserTask approveAddsignAgree(WorkflowUserTask workflowUserTask) throws Throwable { WorkflowUserTask addsignRes = workflowUserTaskAction.approveAddsign(ObjectUtils.clone(workflowUserTask)); WorkflowTaskInstance updateTaskInstance = new WorkflowTaskInstance(); updateTaskInstance.setId(addsignRes.getTaskId()); updateTaskInstance.setLocked(false); updateTaskInstance.updateById(); WorkflowUserTask res = workflowUserTaskAction.approveAgree(ObjectUtils.clone(workflowUserTask)); return res; } } 3.自定义加签的view视图文件workflow_signature_form.xml,放到src/resources目录下,从数据库复制出工作流加签页面原有的视图,将里面的加签动作替换为上面自定义的新动作approveAddsignAgree <view widget="form"> <template slot="actions"> <action name="internalGotoListTableRouter" priority="0" label="返回" actionType="CLIENT" fun="$$internal_GotoListTableRouter" type="default"/> <action…

    2024年6月6日
    1.2K00
  • 工作流用户待办过滤站内信

    工作流用户待办过滤站内信 全局过滤 启动工程application.yml中配置: pamirs: workflow: notify: false 个性化过滤 实现pro.shushi.pamirs.workflow.app.api.service.WorkflowMailFilterApi接口 返回true表示需要发送站内信 返回false表示不需要发送站内信 示例: import org.apache.commons.lang3.StringUtils; import pro.shushi.pamirs.message.model.PamirsMessage; import pro.shushi.pamirs.meta.annotation.Fun; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.user.api.model.PamirsUser; import pro.shushi.pamirs.workflow.app.api.model.WorkflowUserTask; import pro.shushi.pamirs.workflow.app.api.service.WorkflowMailFilterApi; /** * MyWorkflowMailFilterImpl * * @author yakir on 2025/02/24 16:28. */ @Fun(WorkflowMailFilterApi.FUN_NAMESPACE) public class MyWorkflowMailFilterImpl implements WorkflowMailFilterApi { @Override @Function public Boolean filter(WorkflowUserTask workflowUserTask, PamirsUser user, PamirsMessage message) { // 按用户待办过滤 workflowUserTask if (10000L == workflowUserTask.getInitiatorUid()){ return true; } // 按用户过滤 user if (1000L == user.getId()){ return true; } // 按站内信消息过滤 message if (StringUtils.contains(message.getBody(), "你好")) { return true; } return false; } }

    2025年2月24日
    91100
  • 设计器串联动作使用说明

    工作流串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE。 流程创建 流程串联动作仅支持模型触发。 说明:当流程满足触发条件后,该流程将自动执行,和是否开启代码手动触发无关。此外,为了适应特定的业务场景,流程串联动作可与触发机制相结合使用。若流程设计为仅需手动触发,则可通过在筛选条件中设置一个恒不成立的逻辑表达式来实现这一需求。 界面设计器配置 在界面设计器的组件库 → 动作中找到“工作流”;仅能选择流程触发模型和当前主视图所属模型相同的流程;按钮点击后,流程触发。 说明 工作流及数据流程动作的触发需确保相关数据的存在,因此在运行时的创建页中,按钮将以禁用状态显示,防止在数据缺失时触发流程。 数据流程串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”和“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE和EipModule.MODULE_MODULE。 界面设计器配置 数据流程触发的配置和使用方式同工作流串联动作。 集成连接器串联动作 准备工作 界面所属模块需要保证依赖模块列表依赖了“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 EipModule.MODULE_MODULE 集成设计器接口配置 首先在集成设计器新增API 已配置Api“根据id查询用户”: 请求地址:/user/queryById/{id} 请求参数: 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 id Path 是 Integer 用户id[1~43有值] 响应参数: 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 id String Body 否 data.id 主键 name String Body 否 data.name 姓名 age String Body 否 data.age 年龄 country String Body 否 data.country 国家 gender String Body 否 data.gender 性别 界面设计器 在界面设计器的组件库 → 动作中找到“集成连接器”。 动作按钮创建完成后,在属性中找到连接器配置,选择Api资源。 请求参数配置 选择API资源后,若该API需配置请求与响应参数,则相应的参数配置项将会呈现。如上图所示,因所选API含有Path类型的参数,故可进行Path参数的映射配置。此API并无Body或Query类型的参数,因此这些配置项将不会显示。 Path参数的具体配置如下:左侧列出了集成设计器为API创建的参数名称,而右侧对应的是当前模型中的字段,将赋值表达式设定为ID。该配置的含义是:在用户点击按钮之后,系统将调用配置的Api资源,并以当前视图中的ID参数值来映射Path参数,发起请求。 响应参数配置 同样地,左侧的参数名称是由集成设计器配置的响应参数,而右侧则为当前模型中的字段。当请求成功发送并接收响应后,这些响应参数将会按照配置的规则被填充到表单或详情页面中。 发送请求前,若字段已填充数据,但在响应中未获取相应数据,则该字段将被置为空;比如在发送请求前,性别字段已有数据,而请求发送后,若接口返回的数据中未包含性别信息,则性别参数将会被置为空。 多对一字段将依据接口返回的数据从数据库中进行查询(queryOne)。若未查询到相关信息,则仅回填那些在响应中有值的字段。 运行时页面 响应参数一对多/多对多配置 集成设计器的API配置如下所示:条件查询用户 请求地址:/user/query 请求参数: 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 country Body 否 String 否 国家 name Body 否 String 否 用户姓名 响应参数: 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 data OBJECT Body 是 data 用户列表 »name String…

    2024年9月20日
    1.4K00

Leave a Reply

登录后才能评论