【vue2+Flowable工作流，审批流前端展示组件】
文章目录
- 概要
- 整体架构流程
- 技术细节
- 小结
概要
vue2+Flowable工作流，审批流前端展示组件。
整体架构流程
vue2版本展示组件封装，vue3会出
技术细节
通过父组件传流程展示需要的各种参数，可根据自己使用流程组件进行对应。
实现效果：
1.父组件代码
关键参数approvalFlowStatus，字典里可配置不同审批状态，传递的参数都是工作流中存在的字段
2.子组件代码
审批流程 发起 待提交
企业审核 待审批
经办人 待审批
领导审核 待审批
结束 发起 已提交
{{ task.name }} {{ task.assigneeUser.nickname }} / {{ task.assigneeUser.deptName }} 待审批
结束 发起 已提交
{{ task.name }} {{ item.nickname }} / {{ item.deptName }} 已通过
待审批
结束 发起 已提交
{{ tasksData[0].name }} 已通过
{{ tasksData[1].name }} 已通过
{{ tasksData[2].name }} 已通过
结束 { parseTime(tasksData[1].endTime) }} --> 发起 已提交
{{ task.name }} {{ task.result == 2 ? '已通过' : '' }}
{{ task.result === 3 ? '已退回' : task.result === 4 ? '已撤回' : '' }} {{ task.reason }}
结束 { parseTime(tasksData[1].endTime) }} --> 可根据后台数据进行适当修改，已适配待提交状态/待审批/审批中/已完结/退回等流程
小结
自己使用过程中遇到的场景，可自己修改样式在ColumnTip使用。
代码案例：
父组件
import ColumnTip from '../components/ColumnTip.vue' components: { ApprovalProcess, ColumnTip }, 子组件代码
发起 待提交
企业审核 待审批
经办人 待审批
领导审核 待审批
结束 0"> 发起 已提交
{{ task.name }} {{ task.assigneeUser.nickname }} / {{ task.assigneeUser.deptName }} 待审批
结束 发起 已提交
{{ task.name }} {{ item.nickname }} / {{ item.deptName }} 已通过
待审批
结束 发起 已提交
{{ tasksData[0].name }} 已审批
{{ tasksData[1].name }} 已审批
{{ tasksData[2].name }} 已审批
结束 {{ parseTime(tasksData[1].endTime) }} 0"> 发起 已提交
{{ task.name }} { task.reviewerList[0].nickname }} / {{ task.reviewerList[0].deptName }} --> {{ task.result == 2 ? '已通过' : '' }}
{{ task.result === 3 ? '已退回' : task.result === 4 ? '已撤回' : '' }} {{ task.reason }}
结束 {{ parseTime(tasksData[1].endTime) }}