feat: 新增当前节点用户/角色展示

src/assets/icons/flow/publish.svg

@@ -0,0 +1,7 @@
+<svg t="1711676016450" class="icon" viewBox="0 0 1025 1024" version="1.1"
+	xmlns="http://www.w3.org/2000/svg" p-id="4281" xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="64.0625" height="64">
+	<path
+		d="M23.2 347.2c-52.4 16.8 0.4 66.4 0.4 66.4l176.8 147.6 550.8-326c0 0-372 286.4-485.6 375.2l383.6 290c60.8 40 76.4 8 76.4 8l26.8-63.2 270.4-752.4c10-26-18.4-56-49.2-51.2L23.2 347.2 23.2 347.2M414.8 787.6l-146.8-109.6-0.4 212L414.8 787.6 414.8 787.6M414.8 787.6"
+		p-id="4282"></path>
+</svg>

src/components/Flow/FlowNodeAvatar.vue

@@ -69,6 +69,10 @@ onBeforeMount(() => {
 	align-items: center;
 	width: fit-content;
 
+	.el-avatar {
+		background: #02a8fa;
+	}
+
 	.icon {
 		overflow: hidden;
 		flex-shrink: 0;

src/components/Flow/FlowTypeDot.vue

@@ -2,29 +2,15 @@
 	<div class="assignee-container">
 		<!-- 类型 -->
 		<template v-if="type === TaskTypeEnum.TRANSFER">
-			<el-avatar :size="36" color="#FF9900" style="background-color: #ff9900">
-				<svg-icon color="#FF9900" icon-class="transfer" class-name="svg-icon" />
+			<el-avatar :size="36" color="#1989fa" style="background-color: #1989fa">
+				<svg-icon color="#FFF" style="font-size: 20px" icon-class="flow-publish" class-name="svg-icon" />
 			</el-avatar>
 		</template>
 		<template v-else>
-			<flow-node-avatar :size="36" :show-name="false" />
+			<flow-node-avatar :size="36" :show-name="false" :name="name" />
 		</template>
 
 		<!-- 状态 -->
-		<!-- <div class="badge">
-			<template v-if="status === TaskStatusEnum.ACTIVE">
-				<svg-icon color="#2A5EFF" icon-class="active" />
-			</template>
-			<template v-else-if="status === TaskStatusEnum.JUMP">
-				<svg-icon color="#FF9900" icon-class="jump" />
-			</template>
-			<template v-else-if="status === TaskStatusEnum.COMPLETE">
-				<svg-icon icon-class="approval" />
-			</template>
-			<template v-else-if="status === TaskStatusEnum.REJECT">
-				<svg-icon icon-class="reject" />
-			</template>
-		</div> -->
 		<div class="badge">
 			<template v-if="type === 3">
 				<svg-icon icon-class="reject" />
@@ -43,7 +29,8 @@ import { TaskTypeEnum, TaskStatusEnum } from './enums'
 
 defineProps({
 	status: { type: Number, default: 0 },
-	type: { type: Number, default: 0 }
+	type: { type: Number, default: 0 },
+	name: { type: String, default: '' }
 })
 </script>
 

src/views/approve/components/approvedContent.vue

@@ -48,13 +48,13 @@
 						<el-timeline style="margin-left: 50px">
 							<el-timeline-item v-for="active in activeData" :key="active.id" hollow :timestamp="formatTimestamp(new Date(active.createTime))">
 								<template #dot>
-									<FlowTypeDot :status="active.taskState" :type="active.taskType" />
+									<FlowTypeDot :status="active.taskState" :type="active.taskType" :name="active.createBy" />
 								</template>
 								<div v-show="active.type === 0" class="timeline-box flex-1">
-									<span style="font-size: 16px; color: #86909c; display: block; margin-bottom: 3px">评论</span>
+									<span style="color: #86909c; display: block; margin-bottom: 3px; padding-left: 4px">评论</span>
 									<div class="flex flex-align-center">
 										<div class="timeline-box-user flex-1">
-											{{ active.createBy }}
+											<span style="padding-left: 4px">{{ active.createBy }}</span>
 											<div class="comment">
 												<div class="comment-content">{{ active.content }}</div>
 											</div>
@@ -64,11 +64,16 @@
 								</div>
 
 								<div v-show="active.type !== 0" class="timeline-box flex-1">
+									<span style="color: #86909c; display: block; margin-bottom: 3px; padding-left: 4px">{{ active.taskName }}</span>
 									<div class="flex flex-align-center">
 										<div class="timeline-box-user flex-1">
-											<FlowNodeAvatar :name="active.createBy" />
-											<div class="comment">
-												<div class="comment-content">{{ active.duration }}</div>
+											<span style="padding-left: 4px">{{ active.createBy }}</span>
+											<div style="display: flex; gap: 6px; margin-top: 3px">
+												<FlowNodeAvatar v-for="nodeUser in JSON.parse(active.content).nodeUserList" :key="nodeUser.id" :name="nodeUser.name" />
+												<FlowNodeAvatar v-for="nodeRole in JSON.parse(active.content).nodeRoleList" :key="nodeRole.id" :name="nodeRole.name" />
+											</div>
+											<div v-if="JSON.parse(active.content).content" class="comment">
+												<div class="comment-content">{{ JSON.parse(active.content).content }}</div>
 											</div>
 										</div>
 										<span class="timeline-box-date">{{ formatTimestamp(active.finishTime) }}</span>
@@ -190,7 +195,7 @@ import LoseSignDialog from './loseSignDialog'
 import RollbackDialog from './rollbackDialog'
 import viewForm from '@/utils/form'
 import { storeToRefs } from 'pinia'
-import {ElMessage, ElMessageBox} from "element-plus";
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 defineProps({
 	/**
@@ -532,4 +537,8 @@ watch(
 .timeline-box {
 	margin-left: 5px;
 }
+
+:deep(.el-timeline-item__timestamp) {
+	margin-left: 6px;
+}
 </style>