首页 > 其他分享 >第二章 若依JFlow流程模型设计

第二章 若依JFlow流程模型设计

时间:2023-12-05 22:45:26浏览次数:30  
标签:请假 第二章 流程 表单 若依 点击 组件 JFlow 节点

若依-JFlow框架如何拉取、配置并运行请查看这篇文章:《第一章 若依-JFlow的配置与启动》

上一节我们讲解了如何拉取若依-JFlow框架代码并配置运行,这一部分我们就以公司员工请假的流程为例,设计一个流程,并为初始节点设计一个表单。

一、新建业务场景和流程模型

1. 启动项目以后,登录管理员账号(用户名:admin,密码:admin123),进入系统首页:

image-20231203223009921

2. 创建流程:点击左侧第二个JFlow流程设计,再点击流程模板:

image-20231203223138428

3. 系统中,流程树已经定义了一些业务场景(即不同的文件夹)如下图所示:

image-20231203223302018

和文件夹的创建方式一样,我们只需要鼠标右键,点击新建子级目录即可创建一个业务场景,如果需要删除,就点击删除目录即可:

image-20231204093425596

image-20231204093533548

这里我创建一个名为业务场景231204的业务场景:

image-20231204093630169

4. 创建流程模型:点击右上角新建流程

5. 流程名称自定义,设计模式选择专业模式即可,完成后点击右上角创建流程

image-20231204094009656

如果此时创建完成后,浏览器对弹出窗口拦截时,直接点击拦截窗口,选择始终允许弹出窗口并从http://localhost:8089重定向,然后点击完成即可:

image-20231204100030936

image-20231204100106500

6. 此时就会弹出一个流程设计的窗口:

image-20231204100258286

设计流程一共有五个步骤:

  1. 绘制流程图
  2. 设置接收人规则
  3. 设计表单
  4. 检查流程
  5. 测试并运行该流程

二、绘制流程图

1. 一个流程是由一个个流程节点组成的,如下图所示,Start Node和Node 2都是这个流程图的节点,绿色标志的是开始节点:

image-20231204101134781

2. 鼠标右键点击空白处,可以新建节点:

image-20231204101318505

3. 双击某个节点可以修改该节点的名称:

image-20231204101530818

4. 要想将两个节点连接起来,长按该节点的图标,然后将连接线拉向另一个节点:

231204001

当然,如果你需要对连接线上添加文字说明,双击连接线即可:

image-20231204102324735

如需删除连接线,也需要双击连接线,点击删除即可:

image-20231204102436768

以下是一个简单的请假的流程模型:

image-20231204102708338

三、设置接收人规则

接收人规则是指当前节点完成任务以后,这个任务转到下一节点时,由谁来处理。

JFlow默认的处理规则是:上一个节点选择那一个人(或者部门),就由这个人(部门)来处理。当然,我们也可以自行设计接收人规则。

鼠标右键点击节点,选择节点属性

image-20231204103928929

image-20231204104144498

接下来,我们就按照正常的请假流程设置每一个节点的接收人规则:

1. 员工填写请假单:我们假设公司所有的员工都可以填写请假单,因此规则设定为:所有的人员都可以发起:

image-20231204105502375

2. 部门领导审批:假设每一个员工都处于一个部门,那么员工要将请假单交给对应部门领导审批:

image-20231204105852064

假设部门领导角色是开发组长,这里选择程序员,点击保存,然后关闭此窗口:

image-20231204105947521

接收人规则页面也点击保存即可:

image-20231204110044483

3. 人事签字备案:设置规则和部门领导审批基本相同,分组模式中选择人力资源部经理审批即可:

image-20231204110314753

image-20231204110406551

image-20231204110436302

4. 总经理审批亦同理,分组模式中选择总经理审批即可:

image-20231204110745634

image-20231204110807995

image-20231204110835391

5. 查看请假单信息:由于是公司员工发起的请假申请,因此查看请假单信息应该由开始节点员工对应

image-20231204111121990

至此,整个请假流程的所有接收人规则设置完成。

四、设计单个节点表单

4.1 表单方案的说明

鼠标右键点击节点,点击表单方案

image-20231204152808020

系统默认给我们提供的是傻瓜表单。

image-20231204152751665

傻瓜表单指的是在一个表单中,对应一个标签和一个控件,例如:如果标签为姓名,那么控件对应的就是文本框;如果填写的是性别,那么需要填写的控件是单选框。

对于小白而言,选择傻瓜表单即可应对多种场景。当然,JFlow还为我们提供了更多的表单方案:

image-20231204153816250

4.2 请假单页面分析与设计

接下来,我们就是用表单方案,设计各级角色的请假申请单。

1. 员工填写请假单:鼠标右键点击节点,选择设计表单。进入表单设计页面:

image-20231204154203357

2. 对于申请人而言,需要填写申请人姓名、所在部门名称、申请日期、请假类别(例如:事假、病假、婚假、丧假等)、请假事由、请假开始时间、请假结束时间、请假时长计算。

  • 对于申请人姓名、所在部门名称、申请日期我们只需要保证能获取到当前登录用户的信息和填写申请所在日期即可,直接让系统自动生成,不需要人为填写。
  • 请假类别对应的控件需要设置成单选框(假设请假只有一种情况)。
  • 请假开始时间、结束时间需要使用时间输入框。并且开始时间必须保证是今天及之后,结束时间必须是开始时间及之后。
  • 请假时长需要根据请假时间开始时间和请假结束时间计算即可。

4.3 绘制请假单基本框架

按照前面对请假单页面的分析,绘制请假单。

1. 申请人姓名:在左侧组件的基本字段中选中文字框拖入到中间区域,此时弹出一个提示框,这里我们组件名称为申请人姓名,组件id按照系统默认生成的即可,完成后点击继续添加:

image-20231204155818857

2. 接下来组件名称填写为申请人所在部门,然后点击创建并继续添加

image-20231204160050348

3. 申请日期的输入框类型是日期类型,然后填写组件名称,然后点击创建即可:

image-20231204160300519

4. 此时表单如下图所示:

image-20231204160403680

5. 请假事由是一个文本框,将左面文字组件拖入到表单即可:

image-20231204163815833

6. 添加请假开始时间和请假结束时间,选择日期组件,输入格式设定为日期即可:

image-20231204165216030

image-20231204165239922

7. 请假时长控件的输入框类型选择数值即可:

image-20231205084731593

8. 至此,我们的请假单基本框架就绘制完成了,如下图所示:

image-20231205092504817

4.4 对请假单进一步完善

1. 按照上面我们指定的要求:申请人姓名、所在部门、申请日期由系统自动生成,并且设置为只读。那么我们需要对这三个控件分别操作。

  • 首先,点击申请人姓名,点击小齿轮,进入组件设置:

image-20231204160611753

  • 我们能看到当前组件的基本信息,将系统默认值设置为登陆人员名称,然后点击保存,然后关闭这个窗口即可。

image-20231204160755988

  • 此时申请人姓名组件中文本框出现一个@WebUser.Name的标识,这是我们上一步设置的结果,不用修改。

image-20231204161014587

  • 申请人所在部门的设置和申请人姓名设置基本相同,只不过将系统默认值改为登陆人员部门名称

image-20231204161339799

  • 申请日期的系统默认值设置为@RDT表示当前日期:

image-20231204161555868

  • 设置完成后的表单如下图所示,我们需要将这三个组件设置为只读禁止修改:

image-20231204161729204

  • 以申请人姓名组件为例,我们选中这个组件,然后在右侧开启是否只读

image-20231204162023924

  • 申请人所在部门、申请日期的设置只读方式和前面的相同,设置完成后的效果图如下:

image-20231204162119535

2. 接下来,我们再添加两个组件:请假类别、请假事由。

  • 请假类别我们使用枚举单选控件,将其拉入表单中,此时会弹出一个添加枚举值字段的窗口,点击新建:

image-20231204163111633

  • 标签填写请假类别,对应的类别名称我们填写到下面的枚举框中,完成后点击保存:

image-20231204163404217

  • 选择请假类别的枚举值:

image-20231204163445971

  • 弹出框的内容,点击确定:

image-20231204163542696

  • 点击保存:

image-20231204163622231

  • 选择请假事由组件,在右侧组件设置中的文本类型设置为大块文本,开启超长文本,控件栅格选择整行:

image-20231204164856107

3. 接下来,我们为开始时间、结束时间、请假时长这三个组件设置规则:

  • 选中开始时间,点击齿轮,修改组件基本信息:选择日期输入限制,输入日期大于或等于当前日期,设置规则如下图所示:

image-20231204165807170

  • 选中结束时间,点击齿轮,修改组件基本信息:选择日期输入限制,输入日期大于等于请假开始时间,设置规则如下图所示:

image-20231205083750437

  • 选中请假时长,点击齿轮,修改组件基本信息:

image-20231205085558874

  • 为了更好向用户展示请假时长,我们需要对请假时长设置时间单位,由于我们在前面选择的是日期格式,因此请假时长单位是以天为单位:选中组件,在右侧组件设置的后置提示设置为“天”

image-20231205090844220

  • 请假是由用户填写上述的上述的开始日期和结束日期,经过系统计算而得出的,因此这一部分不需要我们填写,我们把这个控件设置为只读即可:选中请假时长控件,在右侧开启是否只读

image-20231205090938030

4. 点击最外面的组件,在右侧我们修改一下组件名字为:请假申请单

image-20231205090419676

5. 至此,“员工填写请假申请”节点的表单绘制完成,效果图如下图所示:

image-20231205091132577

当然,我们只绘制了一个节点表单,那么其他节点的表单也在上述表单的基础上进行绘制。如何在这个表单的基础上绘制其他节点的表单,以及后续所有表单绘制完成后的操作如何,我们放到下一篇文章讲解。

image-20231205174128064

标签:请假,第二章,流程,表单,若依,点击,组件,JFlow,节点
From: https://www.cnblogs.com/iCode504/p/17878491.html

相关文章

  • 第二章 链表part01
    第二章链表part01203.移除链表元素  Code:/***Definitionforsingly-linkedlist.*structListNode{*  intval;*  ListNode*next;*  ListNode():val(0),next(nullptr){}*  ListNode(intx):val(x),next(nullptr){}*  L......
  • 第一章 若依-JFlow的配置与启动
    若依(Ruoyi)一款开源的后台管理admin框架,JFlow是一款经典的纯国产全开源的工作流引擎,该版本是两者的完美结合。RuoYi是一个后台管理系统,基于经典技术组合(SpringBoot、ApacheShiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高......
  • 若依连接sql server
     spring:datasource:type:com.alibaba.druid.pool.DruidDataSourcedriverClassName:com.microsoft.sqlserver.jdbc.SQLServerDriverdruid:#主库数据源master:type:${spring.datasource.type}......
  • 已解决:若依后台访问 401认证失败,无权限访问系统资源
    暴力解决:简单粗暴,不够优雅若依安全框架采用的是SpringSecurity,所以仅需要在框架层面给他允许就行了,找到找到ruoyi-framework里面的SecurityConfig然后在里面添加你要访问的接口路径,即可放行!如果你的接口还加了别的权限注解,先注释掉,测试通了,再打开。......
  • 《Effective Java》阅读笔记-第二章
    EffectiveJava阅读笔记第二章创建和销毁对象第1条:用静态工厂方法代替构造器静态工厂方法优势:静态工厂方法有名称静态工厂方法可以详细的指定名称,而使用构造器时如果没有文档会难以区分不同构造器之间的区别。不必每次调用的时候创建一个新对象静态工厂方法可以缓......
  • 【具体数学】理性愉悦第二章
    求和因子在第一章中,我们对于递归式\[T_0=0,\\T_n=2T_{n-1}+1\\(n>0)\]使用了两边\(+1\)然后转化为\(U_n\)的方法,从而得出\(T_n=2^n-1\)。我们还可以采用另外一种方法。令两边除以\(2^n\),\[\dfrac{T_n}{2^n}=\dfrac{T_{n-1}}{2^{n-1}}+\dfrac{1}{......
  • 若依系统单租户扩展为多租户的大体方案
    基本方案将ruoyi-vue扩展为多租户,查看了下其生态中也有一些多租户的扩展,感觉都有些简单,不太完善,所以并没有采用。多租户实现方式只用了最简单的表中添加字段标识tenant_id的方式来实现多租户,其他单独数据库、独立表等方式未涉及。采用的mybatis-plus提供的多租户方案,也测试过......
  • 第二章 文件管理
    2.1文件目录与路径2.1.1文件目录Linux的文件都在根目录下,其中箭头指向的是真实存在的文件。用户如需查看根目录下的文件,可以使用ls命令。2.1.2文件路径1.绝对路径绝对路径是指从根目录开始的路径,用户通过cd命令以绝对路径进入某个文件夹。例如,cd/usr/share/doc/此时,用户......
  • 若依集成mybatisplus实现mybatis增强
    ......
  • 若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页
    若依vue前端动态设置路由path不同参数在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起:https://blog.csdn.net/weixin_43991241/article/details/126319259?ops_request_misc=&request_id=&biz_id=102&utm_term=matched.redir......