概要

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>