【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> 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     }   } } </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'  export default {   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() {       return this.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) {       return getDate(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>