【vue2+Flowable工作流，审批流前端展示组件】
想暴富的糖 2024-07-25 13:03:01 阅读 97
文章目录
概要整体架构流程技术细节小结
概要
vue2+Flowable工作流，审批流前端展示组件。
整体架构流程
<code> vue2版本展示组件封装，vue3会出
技术细节
通过父组件传流程展示需要的各种参数，可根据自己使用流程组件进行对应。
实现效果：
1.父组件代码
<code> <ApprovalProcess
:tasks-data="tasksData"code>
:start-user="startUser"code>
:start-time="startTime"code>
process-definition-key="appropriate_reporting"code>
:add-form-flow-data="addFormFlowData"code>
:approval-flow-status="approvalFlowStatus"code>
:process-instance-id="processInstanceId"code>
is-history="false"code>
/>
import ApprovalProcess from '../components/ApprovalProcess.vue'
components: {
ApprovalProcess,
ColumnTip
},
关键参数approvalFlowStatus，字典里可配置不同审批状态，传递的参数都是工作流中存在的字段
2.子组件代码
<template>
<div class="history-container">code>
<!-- 审批流程、历史审批弹框内容 -->
<div class="approval-flow">code>
<div v-if="isHistory == 'true' ? false : true" class="flow-label">code>
审批流程
</div>
<div class="flow-box">code>
<!-- 待提交状态 -->
<el-timeline v-if="approvalFlowStatus == 0">code>
<el-timeline-item style="margin-left: 60px" :color="'#FFC600'">code>
<div class="add-line-name">发起</div>code>
<label
v-if="startUser"code>
style="color: black; font-weight: normal; margin-right: 30px"code>
>
{ { startUser.nickname }}
<span>/</span>
{ { startUser.deptName }}
</label>
<p style="color: #ffc600">待提交</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px" :color="'#FFC600'">code>
<div class="add-line-name">企业审核</div>code>
<label
v-for="(item, index) in addFormFlowDataS.qyUserList"code>
:key="index"code>
style="font-weight: 400; color: black; margin-right: 30px"code>
>
{ { item.nickname }}
<span>/</span>
{ { item.deptName }}
</label>
<p style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px" :color="'#FFC600'">code>
<div class="add-line-name">经办人</div>code>
<label
v-for="(item, index) in addFormFlowDataS.gzUserList"code>
:key="index"code>
style="font-weight: 400; color: black; margin-right: 30px"code>
>
{ { item.nickname }}
<span>/</span>
{ { item.deptName }}
</label>
<p style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px" :color="'#FFC600'">code>
<div class="add-line-name">领导审核</div>code>
<label
v-for="(item, index) in addFormFlowDataS.gzldUserList"code>
:key="index"code>
style="font-weight: 400; color: black; margin-right: 30px"code>
>
{ { item.nickname }}
<span>/</span>
{ { item.deptName }}
</label>
<p style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px">code>
<div class="add-line-name">结束</div>code>
</el-timeline-item>
</el-timeline>
<!-- 待审批 -->
<el-timeline v-if="approvalFlowStatus == 1">code>
<el-timeline-item icon="el-icon-check" type="success">code>
<div class="add-line-name">发起</div>code>
<label
v-if="startUser"code>
style="color: black; font-weight: 400; margin-right: 30px"code>
>
{ { startUser.nickname }}
<span>/</span>
{ { startUser.deptName }}
</label>
<label
v-if="startTime"code>
style="font-weight: normal; font-weight: 400"code>
>{ { parseTime(startTime ? startTime : '') }}</label>
<p style="color: #13ce66">已提交</p>code>
</el-timeline-item>
<el-timeline-item
v-for="(task, index) in tasksData"code>
:key="index"code>
:color="task.timeLineCorlor"code>
:type="task.result ? task.istype : ''"code>
>
<div class="add-line-name">code>
{ { task.name }}
</div>
<label
v-if="task.result === 2 && task.assigneeUser.nickname"code>
style="color: black; font-weight: normal; margin-right: 30px"code>
>
{ { task.assigneeUser.nickname }}
<span v-if="task.assigneeUser.deptName">/</span>code>
{ { task.assigneeUser.deptName }}
</label>
<div
v-else-if="task.result === 1 || task.assigneeUser == null"code>
style="
display: block;
color: black;
font-weight: normal;
margin-right: 30px;
"code>
>
{ { task.assigneeUser.nickname }}
<span v-if="task.assigneeUser.deptName">/</span>code>
{ { task.assigneeUser.deptName }}
</div>
<p v-if="task.name" style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item>
<div class="add-line-name">结束</div>code>
</el-timeline-item>
</el-timeline>
<!-- 审批中 -->
<el-timeline v-if="approvalFlowStatus == 7">code>
<el-timeline-item icon="el-icon-check" type="success">code>
<div class="add-line-name">发起</div>code>
<label
v-if="startUser"code>
style="font-weight: normal; margin-right: 30px"code>
>
{ { startUser.nickname }}
<span>/</span>
{ { startUser.deptName }}
</label>
<label v-if="startTime" style="color: black; font-weight: 400">{ { code>
parseTime(startTime)
}}</label>
<p style="color: #13ce66">已提交</p>code>
</el-timeline-item>
<el-timeline-item
v-for="(task, index) in tasksData"code>
:key="index"code>
:color="task.timeLineCorlor"code>
:icon="task.ischeck"code>
:type="task.istype"code>
>
<div v-if="task.name" class="add-line-name">code>
{ { task.name }}
</div>
<label
v-if="
task &&
task.assigneeUser &&
task.assigneeUser.nickname &&
task.endTime
"code>
style="color: black; font-weight: normal; margin-right: 30px"code>
>
{ { task.assigneeUser.nickname }}
<span
v-if="task && task.assigneeUser && task.assigneeUser.deptName"code>
>/</span>
{ { task.assigneeUser.deptName }}
</label>
<div
v-else-if="task.result == 1"code>
style="
display: block;
color: black;
font-weight: normal;
margin-right: 30px;
"code>
v-for="(item, index) in task.assigneeUserList"code>
>
{ { item.nickname }}
<span>/</span>
{ { item.deptName }}
</div>
<label
v-if="task && task.endTime"code>
style="color: black; font-weight: normal"code>
>
{ { parseTime(task.endTime) }}
</label>
<p v-if="task.endTime" style="color: #13ce66">已通过</p>code>
<p v-if="!task.endTime" style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item>
<div class="add-line-name">结束</div>code>
</el-timeline-item>
</el-timeline>
<!-- 已完结 -->
<el-timeline v-if="approvalFlowStatus == 2">code>
<el-timeline-item icon="el-icon-check" type="success">code>
<div class="add-line-name">发起</div>code>
<label
v-if="startUser"code>
style="color: black; font-weight: normal; margin-right: 30px"code>
>
{ { startUser.nickname }}
<span>/</span>
{ { startUser.deptName }}
</label>
<label v-if="startTime" style="font-weight: 400">{ { code>
parseTime(startTime)
}}</label>
<p style="color: #13ce66">已提交</p>code>
</el-timeline-item>
<el-timeline-item icon="el-icon-check" type="success">code>
<div v-if="tasksData[0] && tasksData[0].name" class="add-line-name">code>
{ { tasksData[0].name }}
</div>
<label
v-if="tasksData[0] && tasksData[0].assigneeUser.nickname"code>
style="font-weight: normal; margin-right: 30px"code>
>
{ { tasksData[0].assigneeUser.nickname }}
<span v-if="tasksData[0].assigneeUser.deptName">/</span>code>
{ { tasksData[0].assigneeUser.deptName }}
</label>
<label
v-if="tasksData[0] && tasksData[0].endTime"code>
style="font-weight: normal"code>
>{ { parseTime(tasksData[0].endTime) }}</label>
<p style="color: #13ce66">已通过</p>code>
</el-timeline-item>
<el-timeline-item icon="el-icon-check" type="success">code>
<div v-if="tasksData[1] && tasksData[1].name" class="add-line-name">code>
{ { tasksData[1].name }}
</div>
<label
v-if="tasksData[1] && tasksData[1].assigneeUser.nickname"code>
style="font-weight: normal; margin-right: 30px"code>
>
{ { tasksData[1].assigneeUser.nickname }}
<span v-if="tasksData[1].assigneeUser.deptName">/</span>code>
{ { tasksData[1].assigneeUser.deptName }}
</label>
<label
v-if="tasksData[1] && tasksData[1].endTime"code>
style="font-weight: normal"code>
>{ { parseTime(tasksData[1].endTime) }}</label>
<p style="color: #13ce66">已通过</p>code>
</el-timeline-item>
<el-timeline-item icon="el-icon-check" type="success">code>
<div v-if="tasksData[2] && tasksData[2].name" class="add-line-name">code>
{ { tasksData[2].name }}
</div>
<label
v-if="tasksData[2] && tasksData[2].assigneeUser.nickname"code>
style="font-weight: normal; margin-right: 30px"code>
>
{ { tasksData[2].assigneeUser.nickname }}
<span v-if="tasksData[2].assigneeUser.deptName">/</span>code>
{ { tasksData[2].assigneeUser.deptName }}
</label>
<label
v-if="tasksData[2] && tasksData[2].endTime"code>
style="font-weight: normal"code>
>{ { parseTime(tasksData[2].endTime) }}</label>
<p style="color: #13ce66">已通过</p>code>
</el-timeline-item>
<el-timeline-item icon="el-icon-check" type="success">code>
<div class="add-line-name">结束</div>code>
<label>
<span
style="
display: inline-block;
color: #13ce66;
margin-right: 30px;
"code>
>已完结</span>
</label>
<!-- <span v-if="tasksData[1] && tasksData[1].endTime">{ { code>
parseTime(tasksData[1].endTime)
}}</span> -->
</el-timeline-item>
</el-timeline>
<!-- 退回流程状态 -->
<el-timeline v-if="approvalFlowStatus == 3">code>
<el-timeline-item icon="el-icon-check" type="success">code>
<div class="add-line-name">发起</div>code>
<label
v-if="startUser"code>
style="color: black; font-weight: normal; margin-right: 30px"code>
>
{ { startUser.nickname }}
<span>/</span>
{ { startUser.deptName }}
</label>
<label v-if="startTime" style="font-weight: 400">{ { code>
parseTime(startTime)
}}</label>
<p style="color: #13ce66">已提交</p>code>
</el-timeline-item>
<el-timeline-item
v-for="(task, index) in tasksData"code>
:key="index"code>
:color="task.timeLineCorlor"code>
:icon="task.ischeck"code>
:type="task.istype"code>
>
<div v-if="task.name" class="add-line-name">code>
{ { task.name }}
</div>
<label
v-if="task.assigneeUser && task.assigneeUser.nickname"code>
style="color: black; font-weight: normal; margin-right: 30px"code>
>
{ { task.assigneeUser.nickname }}
<span v-if="task.assigneeUser.deptName">/</span>code>
{ { task.assigneeUser.deptName }}
</label>
<label
v-if="task.reviewerList && !task.assigneeUser"code>
style="color: black; font-weight: normal; margin-right: 30px"code>
>
{ { task.reviewerList[0].nickname }}
<span v-if="task.reviewerList[0].deptName">/</span>code>
{ { task.reviewerList[0].deptName }}
</label>
<label
v-if="task.endTime"code>
style="color: black; font-weight: normal"code>
>
{ { parseTime(task.endTime) }}
</label>
<p
v-if="task.assigneeUser"code>
style="color: #13ce66; font-weight: normal"code>
>
{ { task.result == 2 ? '已通过' : '' }}
</p>
<p v-if="task.assigneeUser" style="color: red; font-weight: normal">code>
{ {
task.result === 3 ? '已退回' : task.result === 4 ? '已撤回' : ''
}}
<span v-if="task.reason" style="margin-left: 20px">code>
<span>{ { task.reason }}</span>
</span>
</p>
</el-timeline-item>
<el-timeline-item>
<div class="add-line-name">结束</div>code>
<!-- <label>
<span
style="
display: inline-block;
color: red;
margin-right: 30px;
"code>
>已完结</span
>
</label> -->
<!-- <span v-if="tasksData[1] && tasksData[1].endTime">{ { code>
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="流程状态"code>
align="center"code>
prop="apply.status"code>
>
<template slot-scope="scope">code>
<el-tooltip placement="bottom">code>
<div slot="content">code>
<ColumnTip
:tasks-data="tasksData"code>
:start-user="startUser"code>
:start-time="startTime"code>
:approval-level="approvalLevel"code>
:reject-level="rejectLevel"code>
:add-form-flow-data="addFormFlowData"code>
:approval-flow-status="approvalFlowStatus"code>
:process-instance-id="scope.row.processInstanceId"code>
/>
</div>
<div
@mouseenter="
(e) => {
handleClick(scope.row.apply, e)
}
"code>
>
<dict-tag
:type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"code>
:value="scope.row.apply.status"code>
/>
</div>
</el-tooltip>
</template>
</el-table-column>
import ColumnTip from '../components/ColumnTip.vue'
components: {
ApprovalProcess,
ColumnTip
},
子组件代码
<template>
<div class="history-container">code>
<!-- 状态栏tips内容 -->
<div class="flow-box">code>
<!-- 待提交状态 -->
<el-timeline v-if="approvalFlowStatus == 0">code>
<el-timeline-item style="margin-left: 60px" :color="'#FFC600'">code>
<div class="add-line-name">发起</div>code>
<label
v-for="(item, index) in addFormFlowDataS.startUserList"code>
:key="index"code>
style="color: #fff; font-weight: 500; margin-right: 30px"code>
>
{ { item.nickname }}
<span>/</span>
{ { item.deptName }}
</label>
<p style="color: #ffc600">待提交</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px" :color="'#FFC600'">code>
<div class="add-line-name">企业审核</div>code>
<label
v-for="(item, index) in addFormFlowDataS.qyUserList"code>
:key="index"code>
style="color: #fff; font-weight: 500; margin-right: 30px"code>
>
{ { item.nickname }}
<span>/</span>
{ { item.deptName }}
</label>
<p style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px" :color="'#FFC600'">code>
<div class="add-line-name">经办人</div>code>
<label
v-for="(item, index) in addFormFlowDataS.gzUserList"code>
:key="index"code>
style="color: #fff; font-weight: 500; margin-right: 30px"code>
>
{ { item.nickname }}
<span>/</span>
{ { item.deptName }}
</label>
<p style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px" :color="'#FFC600'">code>
<div class="add-line-name">领导审核</div>code>
<label
v-for="(item, index) in addFormFlowDataS.gzldUserList"code>
:key="index"code>
style="color: #fff; font-weight: 500; margin-right: 30px"code>
>
{ { item.nickname }}
<span>/</span>
{ { item.deptName }}
</label>
<p style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px">code>
<div class="add-line-name">结束</div>code>
</el-timeline-item>
</el-timeline>
<!-- 待审批 -->
<el-timeline v-if="approvalFlowStatus == 1">code>
<el-timeline v-if="approvalFlowStatus == 1 && tasksData.length > 0">code>
<el-timeline-item
style="margin-left: 60px"code>
icon="el-icon-check"code>
type="success"code>
>
<div class="add-line-name">发起</div>code>
<label
v-if="startUser"code>
style="color: #fff; font-weight: 500; margin-right: 30px"code>
>
{ { startUser.nickname }}
<span>/</span>
{ { startUser.deptName }}
</label>
<label
v-if="tasksData[0] && tasksData[0].createTime"code>
style="color: #fff; font-weight: normal"code>
>{ { parseTime(tasksData[0].createTime) }}</label>
<p style="color: #13ce66">已提交</p>code>
</el-timeline-item>
<el-timeline-item
v-for="(task, index) in tasksData"code>
:key="index"code>
style="margin-left: 60px"code>
:color="task.timeLineCorlor"code>
:type="task.result ? task.istype : ''"code>
>
<div class="add-line-name">code>
{ { task.name }}
</div>
<label
v-if="task.result === 2 && task.assigneeUser.nickname"code>
style="color: #fff; font-weight: normal; margin-right: 30px"code>
>
{ { task.assigneeUser.nickname }}
<span v-if="task.assigneeUser.deptName">/</span>code>
{ { task.assigneeUser.deptName }}
</label>
<div
v-else-if="task.result === 1 || task.assigneeUser == null"code>
style="
display: block;
color: #fff;
font-weight: normal;
margin-right: 30px;
"code>
>
{ { task.assigneeUser.nickname }}
<span v-if="task.assigneeUser.deptName">/</span>code>
{ { task.assigneeUser.deptName }}
</div>
<p v-if="task.name" style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px">code>
<div class="add-line-name">结束</div>code>
</el-timeline-item>
</el-timeline>
</el-timeline>
<!-- 审批中 -->
<el-timeline v-if="approvalFlowStatus == 7 && addFormFlowData != {}">code>
<el-timeline-item
style="margin-left: 60px"code>
icon="el-icon-check"code>
type="success"code>
>
<div class="add-line-name">发起</div>code>
<label
v-if="startUser"code>
style="color: #fff; font-weight: 500; margin-right: 30px"code>
>
{ { startUser.nickname }}
<span>/</span>
{ { startUser.deptName }}
</label>
<label
v-if="tasksData[0] && tasksData[0].createTime"code>
style="color: #fff; font-weight: normal"code>
>{ { parseTime(tasksData[0].createTime) }}</label>
<p style="color: #13ce66">已提交</p>code>
</el-timeline-item>
<el-timeline-item
v-for="(task, index) in tasksData"code>
:key="index"code>
style="margin-left: 60px"code>
:color="task.timeLineCorlor"code>
:icon="task.ischeck"code>
:type="task.istype"code>
>
<div v-if="task.name" class="add-line-name">code>
{ { task.name }}
</div>
<label
v-if="
task &&
task.assigneeUser &&
task.assigneeUser.nickname &&
task.endTime
"code>
style="color: #fff; font-weight: normal; margin-right: 30px"code>
>
{ { task.assigneeUser.nickname }}
<span
v-if="task && task.assigneeUser && task.assigneeUser.deptName"code>
>/</span>
{ { task.assigneeUser.deptName }}
</label>
<div
v-else-if="task.result == 1"code>
style="
display: block;
color: black;
font-weight: normal;
margin-right: 30px;
color: white;
"code>
v-for="(item, index) in task.assigneeUserList"code>
>
{ { item.nickname }}
<span>/</span>
{ { item.deptName }}
</div>
<label
v-if="task && task.endTime"code>
style="color: #fff; font-weight: normal"code>
>
{ { parseTime(task.endTime) }}
</label>
<p v-if="task.endTime" style="color: #13ce66">已通过</p>code>
<p v-if="!task.endTime" style="color: #ffc600">待审批</p>code>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px">code>
<div class="add-line-name">结束</div>code>
</el-timeline-item>
</el-timeline>
<!-- 已完结 -->
<el-timeline v-if="approvalFlowStatus == 2">code>
<el-timeline-item
style="margin-left: 60px"code>
icon="el-icon-check"code>
type="success"code>
>
<div class="add-line-name">发起</div>code>
<label
v-if="startUser"code>
style="color: #fff; font-weight: 500; margin-right: 30px"code>
>
{ { startUser.nickname }}
<span>/</span>
{ { startUser.deptName }}
</label>
<label
v-if="startTime"code>
style=" color: #fff; font-weight: 400"code>
>{ { parseTime(startTime) }}</label>
<p style="color: #13ce66">已提交</p>code>
</el-timeline-item>
<el-timeline-item
style="margin-left: 60px"code>
icon="el-icon-check"code>
type="success"code>
>
<div v-if="tasksData[0] && tasksData[0].name" class="add-line-name">code>
{ { tasksData[0].name }}
</div>
<label
v-if="tasksData[0] && tasksData[0].assigneeUser.nickname"code>
style="color: #fff; font-weight: normal; margin-right: 35px"code>
>
{ { tasksData[0].assigneeUser.nickname }}
<span v-if="tasksData[0].assigneeUser.deptName">/</span>code>
{ { tasksData[0].assigneeUser.deptName }}
</label>
<label
v-if="tasksData[0] && tasksData[0].endTime"code>
style="color: #fff; font-weight: normal"code>
>{ { parseTime(tasksData[0].endTime) }}</label>
<p style="color: #13ce66">已审批</p>code>
</el-timeline-item>
<el-timeline-item
style="margin-left: 60px"code>
icon="el-icon-check"code>
type="success"code>
>
<div v-if="tasksData[1] && tasksData[1].name" class="add-line-name">code>
{ { tasksData[1].name }}
</div>
<label
v-if="tasksData[1] && tasksData[1].assigneeUser.nickname"code>
style="color: #fff; font-weight: normal; margin-right: 40px"code>
>
{ { tasksData[1].assigneeUser.nickname }}
<span v-if="tasksData[1].assigneeUser.deptName">/</span>code>
{ { tasksData[1].assigneeUser.deptName }}
</label>
<label
v-if="tasksData[1] && tasksData[1].endTime"code>
style="color: #fff; font-weight: normal"code>
>{ { parseTime(tasksData[1].endTime) }}</label>
<p style="color: #13ce66">已审批</p>code>
</el-timeline-item>
<el-timeline-item
style="margin-left: 60px"code>
icon="el-icon-check"code>
type="success"code>
>
<div v-if="tasksData[2] && tasksData[2].name" class="add-line-name">code>
{ { tasksData[2].name }}
</div>
<label
v-if="tasksData[2] && tasksData[2].assigneeUser.nickname"code>
style="color: #fff; font-weight: normal; margin-right: 12px"code>
>
{ { tasksData[2].assigneeUser.nickname }}
<span v-if="tasksData[2].assigneeUser.deptName">/</span>code>
{ { tasksData[2].assigneeUser.deptName }}
</label>
<label
v-if="tasksData[2] && tasksData[2].endTime"code>
style="color: #fff; font-weight: normal"code>
>{ { parseTime(tasksData[2].endTime) }}</label>
<p style="color: #13ce66">已审批</p>code>
</el-timeline-item>
<el-timeline-item
style="margin-left: 60px"code>
icon="el-icon-check"code>
type="success"code>
>
<div class="add-line-name">结束</div>code>
<label>
<span
style="
display: inline-block;
color: #13ce66;
font-weight: 500;
margin-right: 30px;
"code>
>已完结</span>
</label>
<span v-if="tasksData[1] && tasksData[1].endTime">{ { code>
parseTime(tasksData[1].endTime)
}}</span>
</el-timeline-item>
</el-timeline>
<!-- 退回流程状态 -->
<el-timeline v-if="approvalFlowStatus == 3 && tasksData.length > 0">code>
<el-timeline-item
style="margin-left: 60px"code>
icon="el-icon-check"code>
type="success"code>
>
<div class="add-line-name">发起</div>code>
<label
v-if="startUser"code>
style="color: #fff; font-weight: 500; margin-right: 30px"code>
>
{ { startUser.nickname }}
<span>/</span>
{ { startUser.deptName }}
</label>
<label
v-if="tasksData[0] && tasksData[0].createTime"code>
style="color: #fff; font-weight: normal"code>
>{ { parseTime(tasksData[0].createTime) }}</label>
<p style="color: #13ce66">已提交</p>code>
</el-timeline-item>
<el-timeline-item
v-for="(task, index) in tasksData"code>
:key="index"code>
style="margin-left: 60px"code>
:color="task.timeLineCorlor"code>
:icon="task.ischeck"code>
:type="task.istype"code>
>
<div v-if="task.name" class="add-line-name">code>
{ { task.name }}
</div>
<label
v-if="task.assigneeUser && task.assigneeUser.nickname"code>
style="color: #fff; font-weight: normal; margin-right: 30px"code>
>
{ { task.assigneeUser.nickname }}
<span v-if="task.assigneeUser.deptName">/</span>code>
{ { task.assigneeUser.deptName }}
</label>
<!-- <label
v-if="task.reviewerList && !task.assigneeUser"code>
style="color: #fff; font-weight: normal; margin-right: 30px"code>
>
{ { task.reviewerList[0].nickname }}
<span v-if="task.reviewerList[0].deptName">/</span>code>
{ { task.reviewerList[0].deptName }}
</label> -->
<label v-if="task.endTime" style="color: #fff; font-weight: normal">code>
{ { parseTime(task.endTime) }}
</label>
<p
v-if="task.assigneeUser"code>
style="color: #13ce66; font-weight: normal"code>
>
{ { task.result == 2 ? '已通过' : '' }}
</p>
<p v-if="task.assigneeUser" style="color: red; font-weight: normal">code>
{ {
task.result === 3 ? '已退回' : task.result === 4 ? '已撤回' : ''
}}
<span v-if="task.reason" style="margin-left: 20px">code>
<span>{ { task.reason }}</span>
</span>
</p>
</el-timeline-item>
<el-timeline-item style="margin-left: 60px" :color="'red'">code>
<div class="add-line-name">结束</div>code>
<label>
<span
style="
display: inline-block;
color: red;
font-weight: 500;
margin-right: 30px;
"code>
>已退回</span>
</label>
<span v-if="tasksData[1] && tasksData[1].endTime">{ { code>
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>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。