流程添加时间线

This commit is contained in:
zhujiyan
2024-06-03 20:00:24 +08:00
parent a83ceedfda
commit 374f2e430d

View File

@@ -1,20 +1,24 @@
<template>
<el-card v-loading="loading" class="box-card">
<el-col :offset="3" :span="17">
<div class="block">
<div class="item_line">
<el-timeline>
<el-timeline-item
v-if="processInstance.endTime"
:type="getProcessInstanceTimelineItemType(processInstance)"
>
<p style="font-weight: 700">
结束流程 {{ formatDate(processInstance?.endTime) }} 结束
<el-tag :type="getTaskTimelineItemType(processInstance.status)">
{{ getTaskNameItemType(processInstance.status) }}
</el-tag>
</p>
</el-timeline-item>
<div class="return_send" v-for="(item, index) in tasksList" :key="index">
<div class="end_item_line">
<div class="end_item_lines"></div>
<el-timeline-item
v-if="processInstance.endTime"
:type="getProcessInstanceTimelineItemType(processInstance)"
>
<p style="font-weight: 700">
结束流程 {{ formatDate(processInstance?.endTime) }} 结束
<el-tag :type="getTaskTimelineItemType(processInstance.status)">
{{ getTaskNameItemType(processInstance.status) }}
</el-tag>
</p>
</el-timeline-item>
</div>
<div class="start_item_line" v-for="(item, index) in tasksList" :key="index">
<div class="start_item_lines"></div>
<!-- 最后一条不显示重新发起 -->
<el-timeline-item type="success" v-if="index != 0 && item.status != '1'">
<p style="font-weight: 700">
@@ -219,3 +223,32 @@ const refresh = () => {
emit('refresh')
}
</script>
<style lang="scss" scoped>
.item_line {
.end_item_line {
position: relative;
.end_item_lines {
position: absolute;
left:4px;
top:10px;
width: 2px;
height: 100%;
background: #eeeeee;
}
}
.start_item_line {
position: relative;
.start_item_lines {
position: absolute;
left:4px;
top:10px;
width: 2px;
height: 100%;
background: #eeeeee;
}
}
}
::v-deep .el-timeline-item__tail {
display: none !important;
}
</style>