From bc48a619a1ddf7661ac4d3e80b1e32a17c696f0c Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期三, 09 四月 2025 10:36:33 +0800
Subject: [PATCH] 优化逻辑，修改审核流程样式
---
src/components/approvalProcess/index.vue | 236 +++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 204 insertions(+), 32 deletions(-)
diff --git a/src/components/approvalProcess/index.vue b/src/components/approvalProcess/index.vue
index ebec184..877c128 100644
--- a/src/components/approvalProcess/index.vue
+++ b/src/components/approvalProcess/index.vue
@@ -1,18 +1,53 @@
<template>
<div class="approval-process">
<el-timeline>
- <el-timeline-item v-for="(activity, index) in processData" :key="index" :type="activity.type"
- :timestamp="activity.time">
- <div class="approval-process-item" :class="activity.type == 'primary' ? '' : 'approval-process-item1'">
- <div class="approval-process-item-name">
- 提交人：李雷雷
+ <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>
@@ -21,54 +56,63 @@
<script>
export default {
- name: 'ApprovalProcess',
+ name: "ApprovalProcess",
props: {
status: {
type: String,
- default: 'pending', // pending-等待审核, approved-已通过
- validator: value => ['pending', 'approved'].includes(value)
+ default: "approved", // pending-等待审核, approved-已通过
+ validator: (value) => ["pending", "approved"].includes(value),
},
submitTime: {
type: String,
- default: ''
+ default: "",
},
approver: {
type: String,
- default: ''
+ default: "",
},
approveTime: {
type: String,
- default: ''
- }
+ default: "",
+ },
+ mode: {
+ type: String,
+ default: "",//card-就是卡片模式，其他就是列表模式
+ },
},
computed: {
processData() {
const baseData = [
{
- content: '提交审批',
+ content: "提交审批",
time: this.submitTime,
- type: 'primary'
- }
- ]
+ type: "primary",
+ },
+ ];
- if (this.status === 'approved') {
+ if (this.status === "approved") {
+ console.log("111111111111111", this.status);
+
baseData.push({
content: `${this.approver}审批通过`,
time: this.approveTime,
- type: 'success'
- })
+ type: "success",
+ mode: this.mode,
+ });
} else {
+ console.log("122222222222222221", this.status);
baseData.push({
- content: '等待审核',
+ content: "等待审核",
time: this.submitTime,
- type: 'warning'
- })
+ type: "warning",
+ mode: this.mode,
+ });
}
- return baseData
- }
- }
-}
+ return baseData;
+ },
+ },
+};
</script>
<style scoped lang="less">
@@ -113,9 +157,9 @@
.el-timeline-item__node {
width: 20px !important;
height: 20px !important;
- background: #FFFFFF;
+ background: #ffffff;
box-shadow: 0px 2px 6px 0px rgba(4, 156, 154, 0.36) !important;
- border: 4px solid rgba(144, 147, 153, 0.40) !important;
+ border: 4px solid rgba(144, 147, 153, 0.4) !important;
left: -10px;
top: -8px;
}
@@ -123,12 +167,140 @@
.el-timeline-item__node--primary {
width: 20px !important;
height: 20px !important;
- background: #FFFFFF;
+ 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>
\ No newline at end of file
--
Gitblit v1.7.1