From 9a9f9dd67261e75d66c338f8573fd0b60f7cab9e Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期五, 09 五月 2025 16:26:36 +0800
Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory
---
laboratory/src/components/approvalProcess/index.vue | 167 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 99 insertions(+), 68 deletions(-)
diff --git a/laboratory/src/components/approvalProcess/index.vue b/laboratory/src/components/approvalProcess/index.vue
index 877c128..5a0816b 100644
--- a/laboratory/src/components/approvalProcess/index.vue
+++ b/laboratory/src/components/approvalProcess/index.vue
@@ -6,32 +6,40 @@
: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 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">
- {{ ["工艺工程师", "实验员", "化验师"][item - 1] }}
+ {{ group.title }}
</div>
<div class="flex-over">
- <div class="people-list" v-for="item in 10" :key="item">
+ <div
+ class="people-list"
+ v-for="(member, memberIndex) in group.members"
+ :key="memberIndex"
+ >
<div class="people-item">
- <img src="" alt="" class="people-img" />
- <div class="member-name">{{ item }}</div>
+ <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="
- activity.type == 'success' ? 'success' : 'warning'
+ member.status === 'approved' ? 'success' : 'warning'
"
>
- {{ activity.type == "success" ? "同意" : "待审批" }}
+ {{ member.status === "approved" ? "同意" : "待审批" }}
</div>
<div
- v-if="activity.type == 'success'"
+ v-if="member.status === 'approved'"
class="member-status-time"
>
- 2025-04-08 12:30
+ {{ member.approveTime }}
</div>
</div>
</div>
@@ -42,11 +50,15 @@
<div
v-else
class="approval-process-item"
- :class="activity.type == 'primary' ? '' : 'approval-process-item1'"
+ :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
+ v-for="(field, idx) in activity.fields"
+ :key="idx"
+ style="margin-bottom: 6px"
+ >
+ <span>{{ field.label }}</span>
+ <span>{{ field.value }}</span>
</div>
</div>
</el-timeline-item>
@@ -58,58 +70,77 @@
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;
+ 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: [
+ // {
+ // fields: [
+ // { label: '姓名', value: '张三' },
+ // { label: '状态', value: '同意' },
+ // { label: '审批时间', value: '2025-04-08 12:30' }
+ // ],
+ // avatar: '' // 头像地址，可选
+ // },
+ // {
+ // fields: [
+ // { label: '姓名', value: '李四' },
+ // { label: '状态', value: '待审批' }
+ // ],
+ // avatar: ''
+ // }
+ // ]
+ // },
+ // {
+ // title: '实验员',
+ // members: [
+ // {
+ // fields: [
+ // { label: '姓名', value: '王五' },
+ // { label: '状态', value: '同意' },
+ // { label: '审批时间', value: '2025-04-08 13:00' }
+ // ],
+ // avatar: ''
+ // }
+ // ]
+ // }
+ // ]
+ // }
+ // ]
},
},
};
@@ -230,7 +261,7 @@
text-align: left;
padding-left: 17px;
}
- .flex-over{
+ .flex-over {
margin-top: 12px;
flex: 1;
overflow: auto;
@@ -242,7 +273,7 @@
align-items: center;
padding: 0 20px;
margin-top: 12px;
-
+
display: flex;
.people-item {
display: flex;
--
Gitblit v1.7.1