【vue2+Flowable工作流，审批流前端展示组件】

实现效果：

文章目录

• • 概要
  • 整体架构流程
  • 技术细节
  • 小结

    概要

    vue2+Flowable工作流，审批流前端展示组件。

    本人已实现activiti工作流引入vue2，

    如有需求请移步activiti工作流单独引入vue2方法, 全网最全!!!

    vue全局日期格式化成年月日 时分秒

    如有需求请移步vue+moment转化日期格式为年月日时分秒！最简洁版

    整体架构流程

    vue2版本展示组件封装，vue3会出

    技术细节

    通过父组件传流程展示需要的各种参数，可根据自己使用流程组件进行对应。

    1.父组件代码

       
          import ApprovalProcess from '../components/ApprovalProcess.vue'
      components: {
        ApprovalProcess,
        ColumnTip
      },
    

    关键参数approvalFlowStatus，字典里可配置不同审批状态，传递的参数都是工作流中存在的字段

    2.子组件代码

    可根据后台数据进行适当修改，已适配待提交状态/待审批/审批中/已完结/退回等流程

    小结

    自己使用过程中遇到的场景，可自己修改样式在ColumnTip使用。

    代码案例：

    父组件

      
                    
                  
          import ColumnTip from '../components/ColumnTip.vue'        
      components: {
        ApprovalProcess,
        ColumnTip
      },
    

    子组件代码