文章目录
概要
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>exportdefault{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(){returnthis.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'exportdefault{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(){returnthis.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){returngetDate(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>
本文转载自: https://blog.csdn.net/demotang1/article/details/139301128
版权归原作者 想暴富的糖 所有， 如有侵权，请联系我们删除。
版权归原作者 想暴富的糖 所有， 如有侵权，请联系我们删除。