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

实现效果：

文章目录

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

    概要

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

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

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

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

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

    整体架构流程

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

    技术细节

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

    1.父组件代码

    Python

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

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

    2.子组件代码

    Python

    
    
    export default {<!-- -->
      name: 'ApprovalProcess',
      props: {<!-- -->
        startUser: {<!-- -->
          type: Object
        },
        createTime: {<!-- -->
          type: String,
          default: ''
        },
        startTime: {<!-- -->
          type: Number,
          default: null
        },
        isHistory: {<!-- -->
          type: String,
          default: ''
        },
        approvalFlowStatus: {<!-- -->
          // 审批流程状态
        },
        addFormFlowData: {<!-- -->
          // 表单的数据
        },
        processDefinitionKey: {<!-- -->
          type: String,
          default: `appropriate_reporting1` // decision_matter
        },
        tasksData: {<!-- -->
          type: Array,
          default: () => []
        }
      },
      data() {<!-- -->
        return {<!-- -->
          reviewerList: [], // 流程审批人列表
          // 审批流程激活的tab标签
          activeName: 'first',
          timeLineCorlor: '',
          ischeck: '',
          addFormFlowDataS: {<!-- -->}
        }
      },
      computed: {<!-- -->
        labelName() {<!-- -->
          return this.isHistory == 'true' ? '(历史审批)集团' : '集团'
        }
      },
      watch: {<!-- -->
        addFormFlowData: {<!-- -->
          immediate: true, // 第一次进入页面时也触发
          handler(newData) {<!-- -->
            // console.log(newData)
            // 子组件接收到新的属性值时执行的逻辑
            this.addFormFlowDataS = newData
          }
        },
        tasksData(val) {<!-- -->
          // console.log(val)
          this.getTimelineColor(val)
        },
        startUser: {<!-- -->
          deep: true,
          handler(val) {<!-- -->
            return val
          }
        }
      },
      created() {<!-- -->},
      mounted() {<!-- -->
        // console.log(`this.tasksData`, this.tasksData)
      },
      methods: {<!-- -->
        getTimelineColor(isTasksData) {<!-- -->
          // console.log(`isTasksData`, isTasksData)
          isTasksData.forEach((item, index) => {<!-- -->
            // 判断每一项的endTime是否有值
            if (item.endTime && item.result === 2) {<!-- -->
              item.timeLineCorlor = '#13ce66'
              item.ischeck = 'el-icon-check'
              item.istype = 'success'
            }
            if (
              item.result === 7 ||
              item.result === 1 ||
              item.assigneeUser == null
            ) {<!-- -->
              item.timeLineCorlor = '#ffc600'
              item.ischeck = ''
              item.istype = ''
            }
            if (item.result === 3 || item.result === 4) {<!-- -->
              item.timeLineCorlor = 'red'
              item.ischeck = ''
              item.istype = ''
            }
            if (item.result == null) {<!-- -->
              item.timeLineCorlor = ''
              item.ischeck = ''
              item.istype = ''
              isTasksData.splice(index, 1)
            }
          })
          return isTasksData
        }
      }
    }
    
    
    .approval-flow {<!-- -->
      display: flex;
    }
    .history-container .flow-label {<!-- -->
      width: 140px;
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      /* font-weight: 700; */
    }
    .flow-box {<!-- -->
      margin-left: 20px;
      width: 645px;
      min-height: 330px;
      height: auto;
    }
    .history-container /deep/ .el-timeline {<!-- -->
      padding-left: 37px;
      padding-top: 10px;
    }
    .history-container /deep/ .el-timeline-item {<!-- -->
      min-height: 60px;
      height: auto;
    }
    .line-name {<!-- -->
      position: absolute;
      left: -35px;
      top: -1px;
      color: #aaa;
    }
    .add-line-name {<!-- -->
      width: 100px;
      position: absolute;
      text-align: right;
      left: -110px;
      font-weight: normal;
      top: 0px;
      color: #aaa;
    }
    
    

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

    小结

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

    代码案例：

    父组件

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

    子组件代码