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

文章目录

概要

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

整体架构流程

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

技术细节

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

实现效果：

1.父组件代码

<ApprovalProcess
        :tasks-data="tasksData":start-user="startUser":start-time="startTime"
        process-definition-key="appropriate_reporting":add-form-flow-data="addFormFlowData":approval-flow-status="approvalFlowStatus":process-instance-id="processInstanceId"
        is-history="false"/>import ApprovalProcess from'../components/ApprovalProcess.vue'components:{
    ApprovalProcess,
    ColumnTip
  },

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

2.子组件代码

<template><div class="history-container"><!-- 审批流程、历史审批弹框内容 --><div class="approval-flow"><div v-if="isHistory == 'true' ? false : true"class="flow-label">
        审批流程
      </div><div class="flow-box"><!-- 待提交状态 --><el-timeline v-if="approvalFlowStatus == 0"><el-timeline-item style="margin-left: 60px":color="'#FFC600'"><div class="add-line-name">发起</div><label
              v-if="startUser"
              style="color: black; font-weight: normal; margin-right: 30px">{{ startUser.nickname }}<span>/</span>{{ startUser.deptName }}</label><p style="color: #ffc600">待提交</p></el-timeline-item><el-timeline-item style="margin-left: 60px":color="'#FFC600'"><div class="add-line-name">企业审核</div><label
              v-for="(item, index) in addFormFlowDataS.qyUserList":key="index"
              style="font-weight: 400; color: black; margin-right: 30px">{{ item.nickname }}<span>/</span>{{ item.deptName }}</label><p style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item style="margin-left: 60px":color="'#FFC600'"><div class="add-line-name">经办人</div><label
              v-for="(item, index) in addFormFlowDataS.gzUserList":key="index"
              style="font-weight: 400; color: black; margin-right: 30px">{{ item.nickname }}<span>/</span>{{ item.deptName }}</label><p style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item style="margin-left: 60px":color="'#FFC600'"><div class="add-line-name">领导审核</div><label
              v-for="(item, index) in addFormFlowDataS.gzldUserList":key="index"
              style="font-weight: 400; color: black; margin-right: 30px">{{ item.nickname }}<span>/</span>{{ item.deptName }}</label><p style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item style="margin-left: 60px"><div class="add-line-name">结束</div></el-timeline-item></el-timeline><!-- 待审批 --><el-timeline v-if="approvalFlowStatus == 1"><el-timeline-item icon="el-icon-check" type="success"><div class="add-line-name">发起</div><label
              v-if="startUser"
              style="color: black; font-weight: 400; margin-right: 30px">{{ startUser.nickname }}<span>/</span>{{ startUser.deptName }}</label><label
              v-if="startTime"
              style="font-weight: normal; font-weight: 400">{{parseTime(startTime ? startTime :'')}}</label><p style="color: #13ce66">已提交</p></el-timeline-item><el-timeline-item
            v-for="(task, index) in tasksData":key="index":color="task.timeLineCorlor":type="task.result ? task.istype : ''"><div class="add-line-name">{{ task.name }}</div><label
              v-if="task.result === 2 && task.assigneeUser.nickname"
              style="color: black; font-weight: normal; margin-right: 30px">{{ task.assigneeUser.nickname }}<span v-if="task.assigneeUser.deptName">/</span>{{ task.assigneeUser.deptName }}</label><div
              v-else-if="task.result === 1 || task.assigneeUser == null"
              style="
                display: block;color: black;
                font-weight: normal;
                margin-right: 30px;
              "
            >{{ task.assigneeUser.nickname }}<span v-if="task.assigneeUser.deptName">/</span>{{ task.assigneeUser.deptName }}</div><p v-if="task.name" style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item><div class="add-line-name">结束</div></el-timeline-item></el-timeline><!-- 审批中 --><el-timeline v-if="approvalFlowStatus == 7"><el-timeline-item icon="el-icon-check" type="success"><div class="add-line-name">发起</div><label
              v-if="startUser"
              style="font-weight: normal; margin-right: 30px">{{ startUser.nickname }}<span>/</span>{{ startUser.deptName }}</label><label v-if="startTime" style="color: black; font-weight: 400">{{parseTime(startTime)}}</label><p style="color: #13ce66">已提交</p></el-timeline-item><el-timeline-item
            v-for="(task, index) in tasksData":key="index":color="task.timeLineCorlor":icon="task.ischeck":type="task.istype"><div v-if="task.name"class="add-line-name">{{ task.name }}</div><label
              v-if="
                task &&
                  task.assigneeUser &&
                  task.assigneeUser.nickname &&
                  task.endTime
              "
              style="color: black; font-weight: normal; margin-right: 30px">{{ task.assigneeUser.nickname }}<span
                v-if="task && task.assigneeUser && task.assigneeUser.deptName">/</span>{{ task.assigneeUser.deptName }}</label><div
              v-else-if="task.result == 1"
              style="
                display: block;color: black;
                font-weight: normal;
                margin-right: 30px;
              "
               v-for="(item, index) in task.assigneeUserList">{{ item.nickname }}<span>/</span>{{ item.deptName }}</div><label
              v-if="task && task.endTime"
              style="color: black; font-weight: normal">{{parseTime(task.endTime)}}</label><p v-if="task.endTime" style="color: #13ce66">已通过</p><p v-if="!task.endTime" style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item><div class="add-line-name">结束</div></el-timeline-item></el-timeline><!-- 已完结 --><el-timeline v-if="approvalFlowStatus == 2"><el-timeline-item icon="el-icon-check" type="success"><div class="add-line-name">发起</div><label
              v-if="startUser"
              style="color: black; font-weight: normal; margin-right: 30px">{{ startUser.nickname }}<span>/</span>{{ startUser.deptName }}</label><label v-if="startTime" style="font-weight: 400">{{parseTime(startTime)}}</label><p style="color: #13ce66">已提交</p></el-timeline-item><el-timeline-item icon="el-icon-check" type="success"><div v-if="tasksData[0] && tasksData[0].name"class="add-line-name">{{ tasksData[0].name }}</div><label
              v-if="tasksData[0] && tasksData[0].assigneeUser.nickname"
              style="font-weight: normal; margin-right: 30px">{{ tasksData[0].assigneeUser.nickname }}<span v-if="tasksData[0].assigneeUser.deptName">/</span>{{ tasksData[0].assigneeUser.deptName }}</label><label
              v-if="tasksData[0] && tasksData[0].endTime"
              style="font-weight: normal">{{parseTime(tasksData[0].endTime)}}</label><p style="color: #13ce66">已通过</p></el-timeline-item><el-timeline-item icon="el-icon-check" type="success"><div v-if="tasksData[1] && tasksData[1].name"class="add-line-name">{{ tasksData[1].name }}</div><label
              v-if="tasksData[1] && tasksData[1].assigneeUser.nickname"
              style="font-weight: normal; margin-right: 30px">{{ tasksData[1].assigneeUser.nickname }}<span v-if="tasksData[1].assigneeUser.deptName">/</span>{{ tasksData[1].assigneeUser.deptName }}</label><label
              v-if="tasksData[1] && tasksData[1].endTime"
              style="font-weight: normal">{{parseTime(tasksData[1].endTime)}}</label><p style="color: #13ce66">已通过</p></el-timeline-item><el-timeline-item icon="el-icon-check" type="success"><div v-if="tasksData[2] && tasksData[2].name"class="add-line-name">{{ tasksData[2].name }}</div><label
              v-if="tasksData[2] && tasksData[2].assigneeUser.nickname"
              style="font-weight: normal; margin-right: 30px">{{ tasksData[2].assigneeUser.nickname }}<span v-if="tasksData[2].assigneeUser.deptName">/</span>{{ tasksData[2].assigneeUser.deptName }}</label><label
              v-if="tasksData[2] && tasksData[2].endTime"
              style="font-weight: normal">{{parseTime(tasksData[2].endTime)}}</label><p style="color: #13ce66">已通过</p></el-timeline-item><el-timeline-item icon="el-icon-check" type="success"><div class="add-line-name">结束</div><label><span
                style="
                  display: inline-block;color: #13ce66;

                  margin-right: 30px;
                "
              >已完结</span></label><!--<span v-if="tasksData[1] && tasksData[1].endTime">{{parseTime(tasksData[1].endTime)}}</span>--></el-timeline-item></el-timeline><!-- 退回流程状态 --><el-timeline v-if="approvalFlowStatus == 3"><el-timeline-item icon="el-icon-check" type="success"><div class="add-line-name">发起</div><label
              v-if="startUser"
              style="color: black; font-weight: normal; margin-right: 30px">{{ startUser.nickname }}<span>/</span>{{ startUser.deptName }}</label><label v-if="startTime" style="font-weight: 400">{{parseTime(startTime)}}</label><p style="color: #13ce66">已提交</p></el-timeline-item><el-timeline-item
            v-for="(task, index) in tasksData":key="index":color="task.timeLineCorlor":icon="task.ischeck":type="task.istype"><div v-if="task.name"class="add-line-name">{{ task.name }}</div><label
              v-if="task.assigneeUser && task.assigneeUser.nickname"
              style="color: black; font-weight: normal; margin-right: 30px">{{ task.assigneeUser.nickname }}<span v-if="task.assigneeUser.deptName">/</span>{{ task.assigneeUser.deptName }}</label><label
              v-if="task.reviewerList && !task.assigneeUser"
              style="color: black; font-weight: normal; margin-right: 30px">{{ task.reviewerList[0].nickname }}<span v-if="task.reviewerList[0].deptName">/</span>{{ task.reviewerList[0].deptName }}</label><label
              v-if="task.endTime"
              style="color: black; font-weight: normal">{{parseTime(task.endTime)}}</label><p
              v-if="task.assigneeUser"
              style="color: #13ce66; font-weight: normal">{{ task.result ==2?'已通过':''}}</p><p v-if="task.assigneeUser" style="color: red; font-weight: normal">{{
                task.result ===3?'已退回': task.result ===4?'已撤回':''}}<span v-if="task.reason" style="margin-left: 20px"><span>{{ task.reason }}</span></span></p></el-timeline-item><el-timeline-item><div class="add-line-name">结束</div><!--<label><span
                style="
                  display: inline-block;color: red;

                  margin-right: 30px;
                "
                >已完结</span
              ></label>--><!--<span v-if="tasksData[1] && tasksData[1].endTime">{{parseTime(tasksData[1].endTime)}}</span>--></el-timeline-item></el-timeline></div></div></div></template><script>exportdefault{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(){returnthis.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
    }}}</script><style scoped>.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;}</style>

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

小结

自己使用过程中遇到的场景，可自己修改样式在ColumnTip使用。
代码案例：
父组件

<el-table-column
                label="流程状态"
                align="center"
                prop="apply.status"><template slot-scope="scope"><el-tooltip placement="bottom"><div slot="content"><ColumnTip
                        :tasks-data="tasksData":start-user="startUser":start-time="startTime":approval-level="approvalLevel":reject-level="rejectLevel":add-form-flow-data="addFormFlowData":approval-flow-status="approvalFlowStatus":process-instance-id="scope.row.processInstanceId"/></div><div
                      @mouseenter="
                        (e)=>{handleClick(scope.row.apply, e)}
                      "
                    ><dict-tag
                        :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS":value="scope.row.apply.status"/></div></el-tooltip></template></el-table-column>import ColumnTip from'../components/ColumnTip.vue'components:{
    ApprovalProcess,
    ColumnTip
  },

子组件代码

<template><div class="history-container"><!-- 状态栏tips内容 --><div class="flow-box"><!-- 待提交状态 --><el-timeline v-if="approvalFlowStatus == 0"><el-timeline-item style="margin-left: 60px":color="'#FFC600'"><div class="add-line-name">发起</div><label
            v-for="(item, index) in addFormFlowDataS.startUserList":key="index"
            style="color: #fff; font-weight: 500; margin-right: 30px">{{ item.nickname }}<span>/</span>{{ item.deptName }}</label><p style="color: #ffc600">待提交</p></el-timeline-item><el-timeline-item style="margin-left: 60px":color="'#FFC600'"><div class="add-line-name">企业审核</div><label
            v-for="(item, index) in addFormFlowDataS.qyUserList":key="index"
            style="color: #fff; font-weight: 500; margin-right: 30px">{{ item.nickname }}<span>/</span>{{ item.deptName }}</label><p style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item style="margin-left: 60px":color="'#FFC600'"><div class="add-line-name">经办人</div><label
            v-for="(item, index) in addFormFlowDataS.gzUserList":key="index"
            style="color: #fff; font-weight: 500; margin-right: 30px">{{ item.nickname }}<span>/</span>{{ item.deptName }}</label><p style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item style="margin-left: 60px":color="'#FFC600'"><div class="add-line-name">领导审核</div><label
            v-for="(item, index) in addFormFlowDataS.gzldUserList":key="index"
            style="color: #fff; font-weight: 500; margin-right: 30px">{{ item.nickname }}<span>/</span>{{ item.deptName }}</label><p style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item style="margin-left: 60px"><div class="add-line-name">结束</div></el-timeline-item></el-timeline><!-- 待审批 --><el-timeline v-if="approvalFlowStatus == 1"><el-timeline v-if="approvalFlowStatus == 1 && tasksData.length > 0"><el-timeline-item
            style="margin-left: 60px"
            icon="el-icon-check"
            type="success"><div class="add-line-name">发起</div><label
              v-if="startUser"
              style="color: #fff; font-weight: 500; margin-right: 30px">{{ startUser.nickname }}<span>/</span>{{ startUser.deptName }}</label><label
              v-if="tasksData[0] && tasksData[0].createTime"
              style="color: #fff; font-weight: normal">{{parseTime(tasksData[0].createTime)}}</label><p style="color: #13ce66">已提交</p></el-timeline-item><el-timeline-item
            v-for="(task, index) in tasksData":key="index"
            style="margin-left: 60px":color="task.timeLineCorlor":type="task.result ? task.istype : ''"><div class="add-line-name">{{ task.name }}</div><label
              v-if="task.result === 2 && task.assigneeUser.nickname"
              style="color: #fff; font-weight: normal; margin-right: 30px">{{ task.assigneeUser.nickname }}<span v-if="task.assigneeUser.deptName">/</span>{{ task.assigneeUser.deptName }}</label><div
              v-else-if="task.result === 1 || task.assigneeUser == null"
              style="
                display: block;color: #fff;
                font-weight: normal;
                margin-right: 30px;
              "
            >{{ task.assigneeUser.nickname }}<span v-if="task.assigneeUser.deptName">/</span>{{ task.assigneeUser.deptName }}</div><p v-if="task.name" style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item style="margin-left: 60px"><div class="add-line-name">结束</div></el-timeline-item></el-timeline></el-timeline><!-- 审批中 --><el-timeline v-if="approvalFlowStatus == 7 && addFormFlowData != {}"><el-timeline-item
          style="margin-left: 60px"
          icon="el-icon-check"
          type="success"><div class="add-line-name">发起</div><label
            v-if="startUser"
            style="color: #fff; font-weight: 500; margin-right: 30px">{{ startUser.nickname }}<span>/</span>{{ startUser.deptName }}</label><label
            v-if="tasksData[0] && tasksData[0].createTime"
            style="color: #fff; font-weight: normal">{{parseTime(tasksData[0].createTime)}}</label><p style="color: #13ce66">已提交</p></el-timeline-item><el-timeline-item
          v-for="(task, index) in tasksData":key="index"
          style="margin-left: 60px":color="task.timeLineCorlor":icon="task.ischeck":type="task.istype"><div v-if="task.name"class="add-line-name">{{ task.name }}</div><label
            v-if="
              task &&
                task.assigneeUser &&
                task.assigneeUser.nickname &&
                task.endTime
            "
            style="color: #fff; font-weight: normal; margin-right: 30px">{{ task.assigneeUser.nickname }}<span
              v-if="task && task.assigneeUser && task.assigneeUser.deptName">/</span>{{ task.assigneeUser.deptName }}</label><div
              v-else-if="task.result == 1"
              style="
                display: block;color: black;
                font-weight: normal;
                margin-right: 30px;color: white;
              "
               v-for="(item, index) in task.assigneeUserList">{{ item.nickname }}<span>/</span>{{ item.deptName }}</div><label
            v-if="task && task.endTime"
            style="color: #fff; font-weight: normal">{{parseTime(task.endTime)}}</label><p v-if="task.endTime" style="color: #13ce66">已通过</p><p v-if="!task.endTime" style="color: #ffc600">待审批</p></el-timeline-item><el-timeline-item style="margin-left: 60px"><div class="add-line-name">结束</div></el-timeline-item></el-timeline><!-- 已完结 --><el-timeline v-if="approvalFlowStatus == 2"><el-timeline-item
          style="margin-left: 60px"
          icon="el-icon-check"
          type="success"><div class="add-line-name">发起</div><label
            v-if="startUser"
            style="color: #fff; font-weight: 500; margin-right: 30px">{{ startUser.nickname }}<span>/</span>{{ startUser.deptName }}</label><label
            v-if="startTime"
            style=" color: #fff; font-weight: 400">{{parseTime(startTime)}}</label><p style="color: #13ce66">已提交</p></el-timeline-item><el-timeline-item
          style="margin-left: 60px"
          icon="el-icon-check"
          type="success"><div v-if="tasksData[0] && tasksData[0].name"class="add-line-name">{{ tasksData[0].name }}</div><label
            v-if="tasksData[0] && tasksData[0].assigneeUser.nickname"
            style="color: #fff; font-weight: normal; margin-right: 35px">{{ tasksData[0].assigneeUser.nickname }}<span v-if="tasksData[0].assigneeUser.deptName">/</span>{{ tasksData[0].assigneeUser.deptName }}</label><label
            v-if="tasksData[0] && tasksData[0].endTime"
            style="color: #fff; font-weight: normal">{{parseTime(tasksData[0].endTime)}}</label><p style="color: #13ce66">已审批</p></el-timeline-item><el-timeline-item
          style="margin-left: 60px"
          icon="el-icon-check"
          type="success"><div v-if="tasksData[1] && tasksData[1].name"class="add-line-name">{{ tasksData[1].name }}</div><label
            v-if="tasksData[1] && tasksData[1].assigneeUser.nickname"
            style="color: #fff; font-weight: normal; margin-right: 40px">{{ tasksData[1].assigneeUser.nickname }}<span v-if="tasksData[1].assigneeUser.deptName">/</span>{{ tasksData[1].assigneeUser.deptName }}</label><label
            v-if="tasksData[1] && tasksData[1].endTime"
            style="color: #fff; font-weight: normal">{{parseTime(tasksData[1].endTime)}}</label><p style="color: #13ce66">已审批</p></el-timeline-item><el-timeline-item
          style="margin-left: 60px"
          icon="el-icon-check"
          type="success"><div v-if="tasksData[2] && tasksData[2].name"class="add-line-name">{{ tasksData[2].name }}</div><label
            v-if="tasksData[2] && tasksData[2].assigneeUser.nickname"
            style="color: #fff; font-weight: normal; margin-right: 12px">{{ tasksData[2].assigneeUser.nickname }}<span v-if="tasksData[2].assigneeUser.deptName">/</span>{{ tasksData[2].assigneeUser.deptName }}</label><label
            v-if="tasksData[2] && tasksData[2].endTime"
            style="color: #fff; font-weight: normal">{{parseTime(tasksData[2].endTime)}}</label><p style="color: #13ce66">已审批</p></el-timeline-item><el-timeline-item
          style="margin-left: 60px"
          icon="el-icon-check"
          type="success"><div class="add-line-name">结束</div><label><span
              style="
                display: inline-block;color: #13ce66;
                font-weight:500;
                margin-right: 30px;
              "
            >已完结</span></label><span v-if="tasksData[1] && tasksData[1].endTime">{{parseTime(tasksData[1].endTime)}}</span></el-timeline-item></el-timeline><!-- 退回流程状态 --><el-timeline v-if="approvalFlowStatus == 3 && tasksData.length > 0"><el-timeline-item
          style="margin-left: 60px"
          icon="el-icon-check"
          type="success"><div class="add-line-name">发起</div><label
            v-if="startUser"
            style="color: #fff; font-weight: 500; margin-right: 30px">{{ startUser.nickname }}<span>/</span>{{ startUser.deptName }}</label><label
            v-if="tasksData[0] && tasksData[0].createTime"
            style="color: #fff; font-weight: normal">{{parseTime(tasksData[0].createTime)}}</label><p style="color: #13ce66">已提交</p></el-timeline-item><el-timeline-item
          v-for="(task, index) in tasksData":key="index"
          style="margin-left: 60px":color="task.timeLineCorlor":icon="task.ischeck":type="task.istype"><div v-if="task.name"class="add-line-name">{{ task.name }}</div><label
            v-if="task.assigneeUser && task.assigneeUser.nickname"
            style="color: #fff; font-weight: normal; margin-right: 30px">{{ task.assigneeUser.nickname }}<span v-if="task.assigneeUser.deptName">/</span>{{ task.assigneeUser.deptName }}</label><!--<label
              v-if="task.reviewerList && !task.assigneeUser"
              style="color: #fff; font-weight: normal; margin-right: 30px">{{ task.reviewerList[0].nickname }}<span v-if="task.reviewerList[0].deptName">/</span>{{ task.reviewerList[0].deptName }}</label>--><label v-if="task.endTime" style="color: #fff; font-weight: normal">{{parseTime(task.endTime)}}</label><p
            v-if="task.assigneeUser"
            style="color: #13ce66; font-weight: normal">{{ task.result ==2?'已通过':''}}</p><p v-if="task.assigneeUser" style="color: red; font-weight: normal">{{
              task.result ===3?'已退回': task.result ===4?'已撤回':''}}<span v-if="task.reason" style="margin-left: 20px"><span>{{ task.reason }}</span></span></p></el-timeline-item><el-timeline-item style="margin-left: 60px":color="'red'"><div class="add-line-name">结束</div><label><span
              style="
                display: inline-block;color: red;
                font-weight:500;
                margin-right: 30px;
              "
            >已退回</span></label><span v-if="tasksData[1] && tasksData[1].endTime">{{parseTime(tasksData[1].endTime)}}</span></el-timeline-item></el-timeline></div></div></template><script>import{ getDate }from'@/utils/dateUtils'exportdefault{name:'ColumnTip',props:{startUser:{type: Object
    },approvalFlowStatus:{},addFormFlowData:{type: Object,required:true},tasksData:{type: Array,default:()=>[]},startTime:{type: Number
    },approvalLevel:{type: Number,default:null},rejectLevel:{type: Number,default:null}},data(){return{timeLineCorlor:'',ischeck:'',addFormFlowDataS:{}}},computed:{isShowReason(){returnthis.tasksData[2]?.str?.[1]!=='null'}},watch:{addFormFlowData:{immediate:true,// 第一次进入页面时也触发handler(newData){// console.log(newData)// 子组件接收到新的属性值时执行的逻辑this.addFormFlowDataS = newData
      }},tasksData(val){this.getTimelineColor(val)},startTime(newVal){return newVal
    }},created(){},mounted(){
    console.log('taskdata',this.startTime)},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
    },// 审批流程图标getTimelineItemIcon(item){if(!item){return}if(item.result ===1){return'el-icon-time'}if(item.result ===2){return'el-icon-check'}if(item.result ===3){return'el-icon-close'}if(item.result ===4){return'el-icon-remove-outline'}return''},getTimelineItemType(item){if(!item){return}if(item.result ===1){return'primary'}if(item.result ===2){return'success'}if(item.result ===3){return'danger'}if(item.result ===4){return'info'}return''},// 审批耗时秒数getDateStar(ms){returngetDate(ms)}}}</script><style scoped>.flow-box {
  margin-right: 100px;width: 500px;height: auto;/* height: 380px; */color: #fff;}.history-container /deep/.el-timeline {
  margin-left: 20px;margin: 10px;}.history-container /deep/.el-timeline-item {
  min-height: 60px;display: flex;height: auto;}.line-name {position: absolute;left:-65px;top:-1px;color: #fff;
  text-align: right;}.add-line-name {width: 100px;position: absolute;
  text-align: right;left:-110px;top: 0px;color: #fff;}</style>