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

想暴富的糖

已于 2024-05-30 15:01:55 修改

阅读量852

点赞数 6

文章标签：前端 vue.js javascript html5

于 2024-05-29 17:47:53 首次发布

本文链接：https://blog.csdn.net/demotang1/article/details/139301128

版权

文章目录

概要

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>