12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <template>
- <div class="assignee-container">
- <!-- 类型 -->
- <template v-if="type === TaskTypeEnum.TRANSFER">
- <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-if="status === 1">
- <el-avatar :size="36" style="background-color: #3f73f6">
- <svg-icon color="#FFF" style="font-size: 32px" icon-class="flow-approval" class-name="svg-icon" />
- </el-avatar>
- </template>
- <template v-else>
- <flow-node-avatar :size="36" :show-name="false" :name="name" />
- </template>
- <!-- 状态 -->
- <div class="badge">
- <template v-if="type === 3">
- <svg-icon icon-class="reject" />
- </template>
- <template v-else-if="status === 1">
- <svg-icon icon-class="active" color="#2a5eff" />
- </template>
- <template v-else>
- <svg-icon icon-class="approval" />
- </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 },
- name: { type: String, default: '' }
- })
- </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>
|