<template>
|
<div class="c-time-line">
|
<el-timeline>
|
<el-timeline-item
|
v-for="(activity, index) in activities"
|
:key="index"
|
>
|
<el-card>
|
<div class="c-time-line__paragraph">开始: <span>{{activity.startTime}}</span></div>
|
<div class="c-time-line__paragraph2">{{activity.assignee}}: {{activity.taskName}}</div>
|
<div class="c-time-line__paragraph2">{{activity.comment}}</div>
|
<div class="c-time-line__paragraph">结束: <span>{{activity.endTime}}</span></div>
|
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</template>
|
|
<script>
|
|
|
// taskName: "采购经理审批"
|
// assignee: "admin"
|
// startTime: "2024-04-28 23:51:04"
|
// processInstanceId: "7529"
|
export default {
|
name: "TimeLine",
|
props: {
|
activities: {
|
type: Array,
|
default: () => ([])
|
}
|
}
|
};
|
</script>
|
|
<style>
|
|
.el-card__body {
|
width: 330px;
|
padding-top: 8px;
|
padding-bottom: 8px;
|
}
|
.el-timeline-item {
|
padding-bottom: 0px;
|
}
|
.c-time-line__paragraph {
|
margin-bottom: 4px;
|
line-height: 1.5em;
|
}
|
.c-time-line__paragraph span {
|
color: #1ab394;
|
}
|
.c-time-line__paragraph2 {
|
font-size: 18px;
|
line-height: 1.5em;
|
}
|
.el-timeline-item__node--normal {
|
background-color: #1ab394;
|
width:16px;
|
height: 16px;
|
left: -3px;
|
}
|
.el-timeline-item__tail {
|
top: 8px;
|
}
|
</style>
|
