论坛 › 前端开发 › 【vue2+Flowable工作流，审批流前端展示组件】

饭宝 发表于 2024-8-15 21:01:14

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

概要

vue2+Flowable工作流，审批流前端展示组件。
团体架构流程

vue2版本展示组件封装，vue3会出
技术细节

通过父组件传流程展示需要的各种参数，可根据自己使用流程组件举行对应。
实现结果：
https://img-blog.csdnimg.cn/direct/f3680c21fb164a808e81952c7443fe02.png
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 && tasksData.name" class="add-line-name">
            {{ tasksData.name }}
            </div>
            <label
            v-if="tasksData && tasksData.assigneeUser.nickname"
            style="font-weight: normal; margin-right: 30px"
            >
            {{ tasksData.assigneeUser.nickname }}
            <span v-if="tasksData.assigneeUser.deptName">/</span>
            {{ tasksData.assigneeUser.deptName }}
            </label>
            <label
            v-if="tasksData && tasksData.endTime"
            style="font-weight: normal"
            >{{ parseTime(tasksData.endTime) }}</label>
            <p style="color: #13ce66">已通过</p>
          </el-timeline-item>
          <el-timeline-item icon="el-icon-check" type="success">
            <div v-if="tasksData && tasksData.name" class="add-line-name">
            {{ tasksData.name }}
            </div>
            <label
            v-if="tasksData && tasksData.assigneeUser.nickname"
            style="font-weight: normal; margin-right: 30px"
            >
            {{ tasksData.assigneeUser.nickname }}
            <span v-if="tasksData.assigneeUser.deptName">/</span>
            {{ tasksData.assigneeUser.deptName }}
            </label>
            <label
            v-if="tasksData && tasksData.endTime"
            style="font-weight: normal"
            >{{ parseTime(tasksData.endTime) }}</label>
            <p style="color: #13ce66">已通过</p>
          </el-timeline-item>
          <el-timeline-item icon="el-icon-check" type="success">
            <div v-if="tasksData && tasksData.name" class="add-line-name">
            {{ tasksData.name }}
            </div>
            <label
            v-if="tasksData && tasksData.assigneeUser.nickname"
            style="font-weight: normal; margin-right: 30px"
            >
            {{ tasksData.assigneeUser.nickname }}
            <span v-if="tasksData.assigneeUser.deptName">/</span>
            {{ tasksData.assigneeUser.deptName }}
            </label>
            <label
            v-if="tasksData && tasksData.endTime"
            style="font-weight: normal"
            >{{ parseTime(tasksData.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 && tasksData.endTime">{{
            parseTime(tasksData.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.nickname }}
            <span v-if="task.reviewerList.deptName">/</span>
            {{ task.reviewerList.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 && tasksData.endTime">{{
            parseTime(tasksData.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 && tasksData.createTime"
            style="color: #fff; font-weight: normal"
            >{{ parseTime(tasksData.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 && tasksData.createTime"
            style="color: #fff; font-weight: normal"
          >{{ parseTime(tasksData.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 && tasksData.name" class="add-line-name">
            {{ tasksData.name }}
          </div>
          <label
            v-if="tasksData && tasksData.assigneeUser.nickname"
            style="color: #fff; font-weight: normal; margin-right: 35px"
          >
            {{ tasksData.assigneeUser.nickname }}
            <span v-if="tasksData.assigneeUser.deptName">/</span>
            {{ tasksData.assigneeUser.deptName }}
          </label>
          <label
            v-if="tasksData && tasksData.endTime"
            style="color: #fff; font-weight: normal"
          >{{ parseTime(tasksData.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 && tasksData.name" class="add-line-name">
            {{ tasksData.name }}
          </div>
          <label
            v-if="tasksData && tasksData.assigneeUser.nickname"
            style="color: #fff; font-weight: normal; margin-right: 40px"
          >
            {{ tasksData.assigneeUser.nickname }}
            <span v-if="tasksData.assigneeUser.deptName">/</span>
            {{ tasksData.assigneeUser.deptName }}
          </label>
          <label
            v-if="tasksData && tasksData.endTime"
            style="color: #fff; font-weight: normal"
          >{{ parseTime(tasksData.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 && tasksData.name" class="add-line-name">
            {{ tasksData.name }}
          </div>
          <label
            v-if="tasksData && tasksData.assigneeUser.nickname"
            style="color: #fff; font-weight: normal; margin-right: 12px"
          >
            {{ tasksData.assigneeUser.nickname }}
            <span v-if="tasksData.assigneeUser.deptName">/</span>
            {{ tasksData.assigneeUser.deptName }}
          </label>
          <label
            v-if="tasksData && tasksData.endTime"
            style="color: #fff; font-weight: normal"
          >{{ parseTime(tasksData.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 && tasksData.endTime">{{
            parseTime(tasksData.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 && tasksData.createTime"
            style="color: #fff; font-weight: normal"
          >{{ parseTime(tasksData.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.nickname }}
            <span v-if="task.reviewerList.deptName">/</span>
            {{ task.reviewerList.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 && tasksData.endTime">{{
            parseTime(tasksData.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?.str?. !== '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>


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: 【vue2+Flowable工作流，审批流前端展示组件】