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

06-01 1783阅读

实现效果：

【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.子组件代码

        
      
    
    
      
      
      
        审批流程
      
      
      
      
        
        
          
            
      发起
      
            
              {{ startUser.nickname }}
              /
              {{ startUser.deptName }}
            
            
      待提交
      
          
          
            
      企业审核
      
            
              {{ item.nickname }}
              /
              {{ item.deptName }}
            
            
      待审批
      
          
          
            
      经办人
      
            
              {{ item.nickname }}
              /
              {{ item.deptName }}
            
            
      待审批
      
          
          
            
      领导审核
      
            
              {{ item.nickname }}
              /
              {{ item.deptName }}
            
            
      待审批
      
          
          
            
      结束
      
          
        
        
        
          
            
      发起
      
            
              {{ startUser.nickname }}
              /
              {{ startUser.deptName }}
            
            {{ parseTime(startTime ? startTime : '') }}
            
      已提交
      
          
          
            
      
              {{ task.name }}
            
      
            
              {{ task.assigneeUser.nickname }}
              /
              {{ task.assigneeUser.deptName }}
            
            
      
              {{ task.assigneeUser.nickname }}
              /
              {{ task.assigneeUser.deptName }}
            
      
            
      待审批
      
          
          
            
      结束
      
          
        
        
        
          
            
      发起
      
            
              {{ startUser.nickname }}
              /
              {{ startUser.deptName }}
            
            {{
              parseTime(startTime)
            }}
            
      已提交
      
          
          
            
      
              {{ task.name }}
            
      
            
              {{ task.assigneeUser.nickname }}
              /
              {{ task.assigneeUser.deptName }}
            
            
      
              {{ item.nickname }}
              /
              {{ item.deptName }}
            
      
            
              {{ parseTime(task.endTime) }}
            
            
      已通过
      
            
      待审批
      
          
          
            
      结束
      
          
        
        
        
          
            
      发起
      
            
              {{ startUser.nickname }}
              /
              {{ startUser.deptName }}
            
            {{
              parseTime(startTime)
            }}
            
      已提交
      
          
          
            
      
              {{ tasksData[0].name }}
            
      
            
              {{ tasksData[0].assigneeUser.nickname }}
              /
              {{ tasksData[0].assigneeUser.deptName }}
            
            {{ parseTime(tasksData[0].endTime) }}
            
      已通过
      
          
          
            
      
              {{ tasksData[1].name }}
            
      
            
              {{ tasksData[1].assigneeUser.nickname }}
              /
              {{ tasksData[1].assigneeUser.deptName }}
            
            {{ parseTime(tasksData[1].endTime) }}
            
      已通过
      
          
          
            
      
              {{ tasksData[2].name }}
            
      
            
              {{ tasksData[2].assigneeUser.nickname }}
              /
              {{ tasksData[2].assigneeUser.deptName }}
            
            {{ parseTime(tasksData[2].endTime) }}
            
      已通过
      
          
          
            
      结束
      
            
              已完结
            
            {
              parseTime(tasksData[1].endTime)
            }} -->
          
        
        
        
          
            
      发起
      
            
              {{ startUser.nickname }}
              /
              {{ startUser.deptName }}
            
            {{
              parseTime(startTime)
            }}
            
      已提交
      
          
          
            
      
              {{ task.name }}
            
      
            
              {{ task.assigneeUser.nickname }}
              /
              {{ task.assigneeUser.deptName }}
            
            
              {{ task.reviewerList[0].nickname }}
              /
              {{ task.reviewerList[0].deptName }}
            
            
              {{ parseTime(task.endTime) }}
            
            
      
              {{ task.result == 2 ? '已通过' : '' }}
            
      
            
      
              {{
                task.result === 3 ? '已退回' : task.result === 4 ? '已撤回' : ''
              }}
              
                {{ task.reason }}
              
            
      
          
          
            
      结束
      
            
            {
              parseTime(tasksData[1].endTime)
            }} -->
          
        
      
      
    
      
  
      


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使用。

      代码案例：

      父组件
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

相关阅读

目录[+]

取消
微信二维码
微信二维码
支付宝二维码