1流程设计
新增
点击列表左上角“新增”按钮,可新增流程设计,这里只需要填写基本信息。
![56bf5c1a248f670fbcf792179e3950ef.jpeg](https://i-blog.csdnimg.cn/blog_migrate/747074b9dce58d3ed28f0c331e95780b.jpeg)
字段说明
显示名称,流程显示的名称,相当于中文标题
唯一编码,流程编码的唯一编码,通过该编码一流程定义的name相匹配
流程分类,假期管理、人事管理、智能财务、法务管理、行政管理、业务管理、其他等,可通过数据字典的流程分类进行配置。
图标,系统图标,可通过下拉选择获取
备注
查看
点击行操作右边的“查看”按钮
![41ae533e2e75e361d74c12c5e3993be2.jpeg](https://i-blog.csdnimg.cn/blog_migrate/dc4115157c11a1e4e578d1d26276fbcc.jpeg)
一共用两个tab,可以查看流程图和流程数据
流程图
![c0822ff6afbd606e5930a690360dab31.jpeg](https://i-blog.csdnimg.cn/blog_migrate/abf7231943f23f5c2f511f83eebd6b43.jpeg)
流程数据
![fa7e3624b02bd38c9428a190ade82ded.jpeg](https://i-blog.csdnimg.cn/blog_migrate/fb85996a5a8174f131137738a516d4c4.jpeg)
编辑
点击行操作右边的“编辑”按钮,可对流程设计的基本信息进行编辑
![7edcfccce7a5121bd9becaf1becc7ea4.jpeg](https://i-blog.csdnimg.cn/blog_migrate/40fe318bcc28c0454d8b2a7d5db87048.jpeg)
设计
点击行操作右边的“设计”按钮,可打开流程设计器进行流程的设计
![5c71482c781f327d28e04c8b8f015ecf.jpeg](https://i-blog.csdnimg.cn/blog_migrate/c887b46bb1ca171e883104e0780c74c6.jpeg)
![e850c9540f54a47a26e2a5e584541779.jpeg](https://i-blog.csdnimg.cn/blog_migrate/1a41f9c179e164030d480a9a8f0dba72.jpeg)
流程设计器
流程设计器主要由三部分组成:拖拽面板、画布、属性面板、控制面板。
拖拽面板
拖拽面板对应的就是左侧菜单,菜单的每一项对应的是流程节点模型,通过点击拖拽到画布的方式使用。
![1c76ac8a5f2f9b9dd64c94c475eef859.jpeg](https://i-blog.csdnimg.cn/blog_migrate/ba38de1d76847e5db328706766ef0153.jpeg)
菜单项说明:
开始节点,对应流程的开始节点模型StartModel
用户任务,对应流程的任务节点模型TaskModel
自定义任务,对应流程的自定义节点模型CustomModel
条件判断,对应流程的决策节点模型DecisionModel
分支,对应流程的分支节点模型ForkModel
合并,对应流程的合并节点模型JoinModel
结束节点,对应流程的结束节点模型EndModel
snaker子流程,对应流程的子流程模型SubProcessModel,该子流程是独立定义的方式
子流程,对应流程的子流程模型SubProcessModel,该子流程定义是包含在父流程的定义中
画布
画布就是所见即所得,有放大缩小、拖拽、移动、连线、编辑节点、编辑边、右键菜单等操作。
放大缩小,可通过ctrl+鼠标滚轮进行放大缩小
拖拽,可点击画布节点拖拽
移动,可通过鼠标滚轮或点击画布移动鼠标移动画布
连线,两节点可通过拖拽方式连线
编辑节点,可打开节点属性面板进行节点的属性编辑
编辑边,可打开边属性面板进行边的属性编辑
右键菜单,画布中右键,打开流程属性面板编辑流程属性,节点或边中右键,主要是删除节点和边。
属性面板
当鼠标点击节点、点击边或画布中右键时,会打开对应的属性面板进行属性编辑,因为不同节点,面板属性不一样,这里做个简单说明。
开始节点
![00ee7c9e0025a49f7aa018b38fc89a45.jpeg](https://i-blog.csdnimg.cn/blog_migrate/6ea0c935ad5d8ed79539fec04d1a3564.jpeg)
任务节点
![b444198b9a2daa990989939e484de52d.jpeg](https://i-blog.csdnimg.cn/blog_migrate/010fab364ddf6178cd334ef01adc7850.jpeg)
自定义任务节点
![02f3d0013e999aac4d48e1b8cb971e65.jpeg](https://i-blog.csdnimg.cn/blog_migrate/ae86f221c0e52893249374384db06888.jpeg)
决策节点
![a67046e67ddf121ce02a14e3d1b91541.jpeg](https://i-blog.csdnimg.cn/blog_migrate/9f7aa3ff79eb861f1f07af84d17ad2b0.jpeg)
分支节点
![95b46b1493fb3c0c3f2130ce2f900986.jpeg](https://i-blog.csdnimg.cn/blog_migrate/abb065093d29e34d66fcfde51dd48207.jpeg)
合并节点
![a051b58b0d67365394154456d856ed89.jpeg](https://i-blog.csdnimg.cn/blog_migrate/db0b5ff6cfcc86fe3522c3e6ff882597.jpeg)
结束节点
![9da708133f748fb67421c679b89f2d7c.jpeg](https://i-blog.csdnimg.cn/blog_migrate/a55c9ae0ddeac480259ac9979941749d.jpeg)
子流程节点
![8d5d7a2c25d35b1484babc9df69b01c5.jpeg](https://i-blog.csdnimg.cn/blog_migrate/f9b9bdb177da02cd0b338fe2b7f27429.jpeg)
控制面板
控制面板对应的是右上角菜单
![3724a35de52af57cff16677578e9266c.jpeg](https://i-blog.csdnimg.cn/blog_migrate/6c10acfd64a938bb2973b6b385e9249f.jpeg)
菜单项说明:
缩小,可对画布进行缩小操作
放大,可对画布进行放大操作
适应,可对画布进行自适应操作
上一步,可返回画布上一步
下一步,返回画布后再回退
清空,清空画布内容
查看,查看流程数据,一共两个tab,分别查看json和xml数据,其中json为logicflow的数据结构,xml为snakerflow工作流引擎的流程定义文件的数据结构。
导入,可导入json/xml流程数据,生成流程
设置高亮,可导入高亮数据,设置流程图高亮
保存,点击保存后,数据会同步到后端
表单设计
点击行操作右边的“…”更多“表单设计”按钮,可进行表单设计。
![f9e1990c304eef251f00557daa354637.jpeg](https://i-blog.csdnimg.cn/blog_migrate/3ba64faa7a1dc94acb0af84149ca22ed.jpeg)
需要注意的是,只有元数据表单才能进行在线设计,如果是自定义开发的表单,则只是显示预览。
自定义开发表单
由开发人员使用传统开发方式开发的表单,会对应某个.vue文件。
![9edb91f8596cb6f87e573698eeb33ee4.jpeg](https://i-blog.csdnimg.cn/blog_migrate/6018df6d971e2d9e19188d741311ecf3.jpeg)
元数据表单
通过配置元数据,生成json,然后解析json去渲染表单。
![de4a934c99e76a4de34d05a481af6e58.jpeg](https://i-blog.csdnimg.cn/blog_migrate/8d8c4dcdd3b908e3382b2b5e0363a2dc.jpeg)
表单属性
用于配置表单的属性,如标题、布局方式等
![4e5de98791c8e0ce1358ed2575409563.jpeg](https://i-blog.csdnimg.cn/blog_migrate/5d39920320641efb5a93d51fa2a3c744.jpeg)
新增
新增表单项
![287bc0aa3cd0edc0b32548599d3c50c4.jpeg](https://i-blog.csdnimg.cn/blog_migrate/63efa3f340fa7b853ecbeeadfd8e6a6a.jpeg)
排序
可通过“上移”“下移”对字段进行排序
![107e8095e0f24ec12aed7489db216c9f.jpeg](https://i-blog.csdnimg.cn/blog_migrate/ec2f2d52086aefdbe3ab321ff900cfd7.jpeg)
编辑
编辑表单项
![86e77215ce7ad888ec5293372fba873e.jpeg](https://i-blog.csdnimg.cn/blog_migrate/1807774ee864409bc973a25bd941b6e2.jpeg)
删除
删除表单项
![19a5b21c402e4bf8463a33eca7620d8b.jpeg](https://i-blog.csdnimg.cn/blog_migrate/a048bda24e7dc824a2d536a28f5f4124.jpeg)
保存
右下解“确定”按钮,点击后会提交到后端进行保存
![bf34edfeafcbf6461b7b79042dc9e661.jpeg](https://i-blog.csdnimg.cn/blog_migrate/b24cbbcb90b1a2810d5f04758d631369.jpeg)
部署
点击行操作右边的“…”更多“部署”按钮,可部署流程,该操作会生成新的流程定义版本。
![4d0c9988d0ce637bbf0ab4c1b34cf0d2.jpeg](https://i-blog.csdnimg.cn/blog_migrate/b9cd19fdcd3b2efdd19fb7f72d85d798.jpeg)
![08ed81c2e4db1ff8b7797a05fc0e7b02.jpeg](https://i-blog.csdnimg.cn/blog_migrate/ab34b0d5ace796cce13ecb164668cd5c.jpeg)
重新部署
点击行操作右边的“…”更多“重新部署”按钮,可部署流程,该操作会覆盖最新的流程定义版本。
![24ffd60d38b21a3a59790961b7c6adfa.jpeg](https://i-blog.csdnimg.cn/blog_migrate/0101b202ede176677a22ba2d010b26be.jpeg)
![4cb98d73fb475b2d82902b64b13d509c.jpeg](https://i-blog.csdnimg.cn/blog_migrate/294b3d6ad749a4386c1506e0db61d027.jpeg)
删除
点击行操作右边的“…”更多“删除”按钮,可删除流程设计。
![3f54cfdfb5c48db3666bdaf1b02e5565.jpeg](https://i-blog.csdnimg.cn/blog_migrate/ccdb0aba6a248b066d796512bf67f7e9.jpeg)
![3e9a24950bb76ca8f3ef1b8f1144c556.jpeg](https://i-blog.csdnimg.cn/blog_migrate/93f96a0ea9ada1ada061d18c0f6b9086.jpeg)
注:删除流程设计不会影响已部署的流程。
2流程定义
流程定义用于存放工作流引擎的流程定义文件数据,本系统中,该流程定义数据是通过流程设计同步过来的,对应的是流程设计的“部署”和“重新部署”操作。
![b70e4711d53601a085d6c951fec93d8b.jpeg](https://i-blog.csdnimg.cn/blog_migrate/9c135a4531fa5db32f248d5496730ea7.jpeg)
字段说明:
显示名称
唯一编码
流程分类
版本号,当为”部署“操作时,版本会自增1,当为”重新部署“时,版本号不变。
状态,启用和禁用,禁用后不允许发起流程。
查看
点击行操作右边的“查看”按钮,这里的查看和流程设计一样,可以查看流程图和流程数据
流程图
![e5c961848ac29dd39e1153c403f82f24.jpeg](https://i-blog.csdnimg.cn/blog_migrate/9be742a9cf71794342f9605338d2a6c7.jpeg)
流程图
![749f8015b48ef30f8a1deb0cc3e4a563.jpeg](https://i-blog.csdnimg.cn/blog_migrate/cdb3eff1ee96690cd4b74829b084b032.jpeg)
发起
点击行操作右边的“…”更多“发起”按钮,会弹出发起表单,填写后提交即可发起流程。
![4d209c03c7a9fef4a2b26d6bdfa731b4.jpeg](https://i-blog.csdnimg.cn/blog_migrate/8ec0e0445db60d3d4e62cb3d43b8a4c0.jpeg)
![fdc4b5fff18727dc13bc9c68ac7a359b.jpeg](https://i-blog.csdnimg.cn/blog_migrate/a1066d9dc7029e2c4c8ad8bd5415dc41.jpeg)
注意:不同的流程,发起的表单会略有不同,可通过流程属性的”实例启动表单“字段去控制。
启用/禁用
点击行操作右边的“…”更多“启用”按钮,可启用流程定义。
![72c7708d09a706ca690483d800676cba.jpeg](https://i-blog.csdnimg.cn/blog_migrate/afa00b36084b0ecdcfae94bb2cc31ca2.jpeg)
点击行操作右边的“…”更多“禁用”按钮,可禁用流程定义。
![ce263373180e81da5302206f61b72267.jpeg](https://i-blog.csdnimg.cn/blog_migrate/997bf65ed7235bb7edeb5bf766f57087.jpeg)
删除
点击行操作右边的“…”更多“删除”按钮,可删除流程定义。
![134b3423dc5d551fcb448659ca7b8f9c.jpeg](https://i-blog.csdnimg.cn/blog_migrate/6f6293eb21b7be06f4ef1dafa4d92606.jpeg)
![cfe411f62afb33983904a81ea04f9f37.jpeg](https://i-blog.csdnimg.cn/blog_migrate/0ff432866ba928eaefee49c78a945425.jpeg)
3发起申请
发起申请列表是对流程定义列表的优化,这里会对流程定义进行分组,且只显示最新版本的流程定义。
![6b53b2f8431c98986bd1f06724e95ea6.jpeg](https://i-blog.csdnimg.cn/blog_migrate/f85874f8f624880523d04808409a9317.jpeg)
点击图标或标题,会弹出发起表单,填写后提交即可发起流程
![b706e2cb4b2b8a4c27ce71dfdc49baec.jpeg](https://i-blog.csdnimg.cn/blog_migrate/0bd58a07fab378d91764357c7f3d7252.jpeg)
4我发起的
发起流程后,点击“我发起的”菜单项,可看到对应的我发起的列表数据。
![c212f5bfd23007eb2c187d42a8b51348.jpeg](https://i-blog.csdnimg.cn/blog_migrate/18c233147c7477760bd6e2579f0012a8.jpeg)
详情
点击行操作右边的“详情”按钮,可查看流程详情,流程详情由三部分构成:表单、流程图、审批记录,分别对应三个tab。
表单
表单区域是只读模式,对应发起审批时的表单
![59968b09644af9d815e3366bb8c4e789.jpeg](https://i-blog.csdnimg.cn/blog_migrate/42d3115ec7b31070324f3f1197e1cc24.jpeg)
流程图
流程图会存在高亮数据,区分已完成、正在进行、未开始节点。
![0f802dfd6a6e8de2ceda837306a3f571.jpeg](https://i-blog.csdnimg.cn/blog_migrate/e022892888a38aeb5d6e4c4576ae6ad5.jpeg)
审批记录
审批记录有两种呈现方式,时间轴和表格。
时间轴
![10eafdce934dd3d70d423bdff81e15a4.jpeg](https://i-blog.csdnimg.cn/blog_migrate/035a4bc7a0f206c5686a4f5c0366bc8e.jpeg)
表格
![ba3da70254265af9d84f718c23e8a8b7.jpeg](https://i-blog.csdnimg.cn/blog_migrate/fb787941a87fc610aa8d4876473ec84b.jpeg)
撤回
撤回有两种方式,但都只能撤回正在进行中的流程
点击行操作右边的“…”更多“撤回”按钮,可撤回流程。
![64453dcb9d43d4bacbe72b08b09cb079.jpeg](https://i-blog.csdnimg.cn/blog_migrate/c9e51e1b52cb0d24e0b0e8f702fc1182.jpeg)
![940b0d85054c1f7fd28fd23c6d197668.jpeg](https://i-blog.csdnimg.cn/blog_migrate/e6629a27a27302df0e899e212784739e.jpeg)
勾选左边复选框,也可进行“撤回”操作
![15e62fb98cca0afd7d8e20dc4017be8e.jpeg](https://i-blog.csdnimg.cn/blog_migrate/bec25ea72d72c8d3239c70695ff266dd.jpeg)
![ed7251cf842ffb05bb6e242935eb0561.jpeg](https://i-blog.csdnimg.cn/blog_migrate/4a9062b1ba969cbb14578c1169f4d91e.jpeg)
5我的待办
我的待办对应的是参与者的任务,当流程执行到对应的节点会产生对应的阻塞任务,该阻塞任务就形成“我的待办”。
![5f418f931233576bcebae692cb82c161.jpeg](https://i-blog.csdnimg.cn/blog_migrate/ada34c74d2c1d3d35a5740a131dae41a.jpeg)
办理
点击行操作右边的“办理”按钮,会弹出审批流程详情
![f65064ac29574df6243d96eb1a541671.jpeg](https://i-blog.csdnimg.cn/blog_migrate/206ef3e3a46eb7139e8f68b13c10fec0.jpeg)
审批流程详情主要分为两大区域:流程详情和操作区域,其中流程详情包含表单、流程图、审批记录三大板块。
![6ae2cf82b1fe3ec3f7eaf23ecf61ac64.jpeg](https://i-blog.csdnimg.cn/blog_migrate/3f3420077a7d7ab664b35c88aecfcb0f.jpeg)
表单
同“我发起的”->“详情”->“表单”
流程图
同“我发起的”->“详情”->“流程图”
审批记录
同“我发起的”->“详情”->“审批记录”
操作区域
在详情底部,增加了操作区域,该操作区域分为两部门,一部分是填写区,一部分是提供按钮。
![3879b28f98428505e00c79758a5a6482.jpeg](https://i-blog.csdnimg.cn/blog_migrate/1c1a89021f8ad3922bfb3e872ddb9efa.jpeg)
普通任务操作区
![d1f6c19fbb5bee6dcdf8f1bdf341ee65.jpeg](https://i-blog.csdnimg.cn/blog_migrate/eed50a323a69dba9f2c5e9cb934db0da.jpeg)
会签任务操作区
![db349f6d01392b04c547c65033c9b008.jpeg](https://i-blog.csdnimg.cn/blog_migrate/0bf227a27e56c37602b87d2172ab2f77.jpeg)
填写表单字段说明:
审批意见,必填项
上传附件
指定下一节点处理人(勾选时会出现选人操作),注:会签任务无该操作
是否抄送(勾选时会出现选人操作)
普通任务提交按钮说明:
同意,提交类型为同意,会驱动流程往下一个节点进行
拒绝,提交类型为拒绝,会将流程跳转到结束节点,驱动流程结束
退回上一步,提交类型为退回上一步,会跳转到上一个节点
退回发起人,提交类型为退回发起人,会跳转到发起人节点
跳转,提交类型为跳转,可跳转到已完成的历史节点(弹窗选择)
会签任务提交按钮说明:
同意,提交类型为同意,表示会签操作为“同意”
不同意,提交类型为不同意,表示会签操作为“不同意”
加签,增加会签参与人,该操作不会驱动流程向前行进
委托
点击行操作右边的“委托”按钮,会弹出选择代理人操作,选择后点击“确定”即委托成功,此时代理人会看到相应的待办任务。
![f6f1f34affd3dd42badfe1f7535d3f20.jpeg](https://i-blog.csdnimg.cn/blog_migrate/b3d1bebe47784c965fb1850ec4d9c8ab.jpeg)
![7a3559145a902e775f0e321c0e5c4869.jpeg](https://i-blog.csdnimg.cn/blog_migrate/3e08ce66f935423ecdea47a92e8ed775.jpeg)
我的已办
我的已办对应的是参与者已经完成的任务列表。
![95a9f345ac837e4711a7d31b570c35d9.jpeg](https://i-blog.csdnimg.cn/blog_migrate/6ba9fb13a15d8e72265614c56921392a.jpeg)
详情
同“我发起的”->“详情”
6我的抄送
在待办处理页中抄送过来的流程,只有查看权限
![a22136aec98c221e34fd57f38d41108a.jpeg](https://i-blog.csdnimg.cn/blog_migrate/8736392f860d43c9b18303e68c52d382.jpeg)
详情
同“我发起的”->“详情”
7相关源码
后端工程[1]
前端工程[2]
演示地址[3]
账号密码:admin/123456
参考资料
[1]
后端工程: https://gitee.com/mldong/mldong
[2]前端工程: https://gitee.com/mldong/mldong-vue
[3]演示地址: https://flow.mldong.com
感谢阅读,希望对你有所帮助 :) 来源:
juejin.cn/post/7313242093031276554
CTO:谁在项目中使用 Arrays.asList、ArrayList.subList,就立马滚蛋!
最近面试BAT,整理一份面试资料《Java面试BAT通关手册》,覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。
获取方式:点“在看”,关注公众号并回复 666 领取,更多内容陆续奉上。
明天见(。・