<template>
|
<div class="approval-process">
|
<el-timeline>
|
<el-timeline-item v-for="(activity, index) in processData" :key="index" :type="activity.type">
|
<div v-if="activity.mode === 'card'">
|
<div class="member-list-card" v-for="(group, groupIndex) in activity.groups" :key="groupIndex">
|
<div class="member-item">
|
<div class="member-title">
|
{{ group.title }}
|
</div>
|
<div class="flex-over">
|
<div class="people-list" v-for="(member, memberIndex) in group.members" :key="memberIndex">
|
<div class="people-item">
|
<img :src="member.avatar" alt="" class="people-img" />
|
<div class="member-name">{{ member.name }}</div>
|
</div>
|
<div class="member-status">
|
<div class="member-status-text" :class="member.status === 'approved' ? 'success' : 'warning'
|
">
|
{{ member.status }}
|
</div>
|
<div v-if="member.status === '已确认'" class="member-status-time">
|
{{ member.approveTime }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else class="approval-process-item" :class="activity.type === 'primary' ? '' : 'approval-process-item1'">
|
<div v-for="(field, idx) in activity.fields" :key="idx" style="margin-bottom: 6px">
|
<span v-if="field.type == 'img'">
|
<el-image style="width: 50px; height: 50px;margin-left: 40px;" v-if="field.value" :src="field.value"
|
:preview-src-list="[field.value]">
|
</el-image>
|
</span>
|
<span v-else>
|
<span>{{ field.label }}</span>
|
<span>{{ field.value }}</span>
|
</span>
|
</div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "ApprovalProcess",
|
props: {
|
processData: {
|
type: Array,
|
required: true,
|
// 数据结构示例：
|
// [
|
// {
|
// type: 'primary',
|
// content: '提交审批',
|
// time: '2020-12-01 12:30',
|
// mode: 'list'
|
// },
|
// {
|
// type: 'success',
|
// mode: 'card',
|
// groups: [
|
// {
|
// title: '工艺工程师',
|
// members: [
|
// {
|
// name: '张三',
|
// avatar: '',
|
// status: 'approved',
|
// approveTime: '2025-04-08 12:30'
|
// }
|
// ]
|
// }
|
// ]
|
// }
|
// ]
|
// 数据结构示例：
|
// [
|
// {
|
// type: 'success',
|
// mode: 'card',
|
// groups: [
|
// {
|
// title: '工艺工程师',
|
// members: [
|
// {
|
// name:'',
|
// status:'',
|
// approveTime:'',
|
// avatar: '' // 头像地址，可选
|
// },
|
// {
|
// name:'',
|
// status:'',
|
// approveTime:'',
|
// avatar: ''
|
// }
|
// ]
|
// },
|
// {
|
// title: '实验员',
|
// members: [
|
// {
|
// name:'',
|
// status:'',
|
// approveTime:'',
|
// avatar: ''
|
// }
|
// ]
|
// }
|
// ]
|
// }
|
// ]
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.approval-process {
|
padding: 20px;
|
height: 100%;
|
overflow-y: auto;
|
}
|
|
.approval-process-item {
|
padding: 12px 17px 20px 12px;
|
border-radius: 10px;
|
background: rgba(236, 252, 254, 1);
|
}
|
|
.approval-process-item1 {
|
padding: 12px 17px 20px 12px;
|
border-radius: 10px;
|
background: rgba(241, 243, 245, 1);
|
}
|
|
.approval-process-item-name {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 16px;
|
color: #333333;
|
line-height: 22px;
|
}
|
|
.approval-process-item-time {
|
margin-top: 10px;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 14px;
|
color: #999999;
|
line-height: 20px;
|
}
|
|
::v-deep .el-timeline {
|
padding: unset;
|
|
.el-timeline-item__node {
|
width: 20px !important;
|
height: 20px !important;
|
background: #ffffff;
|
box-shadow: 0px 2px 6px 0px rgba(4, 156, 154, 0.36) !important;
|
border: 4px solid rgba(144, 147, 153, 0.4) !important;
|
left: -10px;
|
top: -8px;
|
}
|
|
.el-timeline-item__node--primary {
|
width: 20px !important;
|
height: 20px !important;
|
background: #ffffff;
|
box-shadow: 0px 2px 6px 0px rgba(4, 156, 154, 0.36) !important;
|
border: 4px solid rgba(10, 203, 202, 1) !important;
|
left: -10px !important;
|
top: -8px !important;
|
// border-image: linear-gradient(180deg, rgba(10, 203, 202, 1), rgba(4, 156, 154, 1)) 4 4 !important;
|
}
|
|
.member-list-card {
|
width: 280px;
|
height: 300px;
|
border-radius: 8px;
|
border: 1px solid #dcdfe6;
|
margin-top: 10px;
|
|
// &:nth-child(1) {
|
// background: linear-gradient(
|
// to bottom,
|
// rgba(4, 156, 154, 0.2) 0%,
|
// rgba(5, 242, 194, 0) 70%
|
// );
|
// }
|
|
&:nth-child(1) {
|
background: linear-gradient(to bottom,
|
rgba(5, 160, 193, 0.2) 0%,
|
rgba(5, 242, 194, 0) 70%);
|
}
|
|
&:nth-child(2) {
|
background: linear-gradient(to bottom,
|
rgba(255, 77, 79, 0.2) 0%,
|
rgba(255, 242, 194, 0) 70%);
|
}
|
|
&:nth-child(3) {
|
background: linear-gradient(to bottom,
|
rgba(250, 199, 20, 0.21) 0%,
|
rgba(255, 242, 194, 0) 70%);
|
}
|
|
.member-item {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.member-title {
|
margin-top: 20px;
|
width: 100%;
|
font-family: "Source Han Sans CN Bold Bold";
|
font-weight: bold;
|
font-size: 16px;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 16px;
|
text-align: left;
|
padding-left: 17px;
|
}
|
|
.flex-over {
|
margin-top: 12px;
|
flex: 1;
|
overflow: auto;
|
height: 100%;
|
}
|
|
.people-list {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 20px;
|
margin-top: 12px;
|
|
display: flex;
|
|
.people-item {
|
display: flex;
|
align-items: center;
|
}
|
|
.people-img {
|
width: 44px;
|
height: 44px;
|
border-radius: 50%;
|
margin-right: 10px;
|
}
|
|
.member-status {
|
align-items: flex-end;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.member-status-text {
|
width: 52px;
|
height: 22px;
|
line-height: 22px;
|
border-radius: 4px;
|
text-align: center;
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
}
|
|
.warning {
|
background: #fffbe6;
|
border-radius: 4px;
|
border: 1px solid #fff1b8;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 12px;
|
color: #faad14;
|
}
|
|
.success {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 12px;
|
color: rgba(0, 0, 0, 0.88);
|
}
|
|
.member-status-time {
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 12px;
|
color: rgba(0, 0, 0, 0.4);
|
line-height: 17px;
|
margin-top: 5px;
|
}
|
}
|
|
.member-name {
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 500;
|
font-size: 14px;
|
color: rgba(0, 0, 0, 0.8);
|
}
|
}
|
}
|
}
|
</style>
|
