文章目录
-
- 概要
- 整体架构流程
- 技术细节
- 小结
概要
vue2+Flowable工作流，审批流前端展示组件。
本人已实现activiti工作流引入vue2，
如有需求请移步activiti工作流单独引入vue2方法, 全网最全!!!
vue全局日期格式化成年月日 时分秒
如有需求请移步vue+moment转化日期格式为年月日时分秒！最简洁版
整体架构流程
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>
