<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 && activity.mode == 'card'">
|
<div class="member-list-card" v-for="item in 3" :key="item">
|
<div class="member-item">
|
<div class="member-title">
|
{{ ["工艺工程师", "实验员", "化验师"][item - 1] }}
|
</div>
|
<div class="flex-over">
|
<div class="people-list" v-for="item in 10" :key="item">
|
<div class="people-item">
|
<img src="" alt="" class="people-img" />
|
<div class="member-name">{{ item }}</div>
|
</div>
|
<div class="member-status">
|
<div
|
class="member-status-text"
|
:class="
|
activity.type == 'success' ? 'success' : 'warning'
|
"
|
>
|
{{ activity.type == "success" ? "同意" : "待审批" }}
|
</div>
|
<div
|
v-if="activity.type == 'success'"
|
class="member-status-time"
|
>
|
2025-04-08 12:30
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
v-else
|
class="approval-process-item"
|
:class="activity.type == 'primary' ? '' : 'approval-process-item1'"
|
>
|
<div class="approval-process-item-name">提交人：李雷雷</div>
|
<div class="approval-process-item-time">
|
提交时间：2020-12-01 12:30
|
</div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "ApprovalProcess",
|
props: {
|
status: {
|
type: String,
|
default: "approved", // pending-等待审核, approved-已通过
|
validator: (value) => ["pending", "approved"].includes(value),
|
},
|
submitTime: {
|
type: String,
|
default: "",
|
},
|
approver: {
|
type: String,
|
default: "",
|
},
|
approveTime: {
|
type: String,
|
default: "",
|
},
|
mode: {
|
type: String,
|
default: "",//card-就是卡片模式，其他就是列表模式
|
},
|
},
|
computed: {
|
processData() {
|
const baseData = [
|
{
|
content: "提交审批",
|
time: this.submitTime,
|
type: "primary",
|
},
|
];
|
|
if (this.status === "approved") {
|
console.log("111111111111111", this.status);
|
|
baseData.push({
|
content: `${this.approver}审批通过`,
|
time: this.approveTime,
|
type: "success",
|
mode: this.mode,
|
});
|
} else {
|
console.log("122222222222222221", this.status);
|
baseData.push({
|
content: "等待审核",
|
time: this.submitTime,
|
type: "warning",
|
mode: this.mode,
|
});
|
}
|
|
return baseData;
|
},
|
},
|
};
|
</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(2) {
|
background: linear-gradient(
|
to bottom,
|
rgba(5, 160, 193, 0.2) 0%,
|
rgba(5, 242, 194, 0) 70%
|
);
|
}
|
|
&:nth-child(3) {
|
background: linear-gradient(
|
to bottom,
|
rgba(255, 77, 79, 0.2) 0%,
|
rgba(255, 242, 194, 0) 70%
|
);
|
}
|
|
&:nth-child(4) {
|
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>
|
