aizuda-web-vue3/src/components/Flow/FlowTypeDot.vue

<template>
	<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>
		</template>
		<template v-else>
			<flow-node-avatar :size="36" :show-name="false" />
		</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>
</template>

<script setup lang="ts">
import SvgIcon from '../SvgIcon/index.vue'
import FlowNodeAvatar from './FlowNodeAvatar.vue'
import { TaskTypeEnum, TaskStatusEnum } from './enums'

defineProps({
	status: { type: Number, default: 0 },
	type: { type: Number, default: 0 }
})
</script>

<style lang="scss" scoped>
.assignee-container {
	position: relative;
	top: -5px;
	left: -13px;

	.badge {
		$BadgeSize: 18px;
		$BadgeOffset: -4px;
		position: absolute;
		width: $BadgeSize;
		height: $BadgeSize;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: $BadgeOffset;
		right: $BadgeOffset;
		z-index: 999;
		border: 2px solid #fff;
		background-color: #fff;
		border-radius: 50%;
		overflow: hidden;
	}

	.svg-icon {
		font-size: 36px;
	}
}
</style>