FlowTypeDot.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div class="assignee-container">
  3. <!-- 类型 -->
  4. <template v-if="type === TaskTypeEnum.TRANSFER">
  5. <el-avatar :size="36" color="#1989fa" style="background-color: #1989fa">
  6. <svg-icon color="#FFF" style="font-size: 20px" icon-class="flow-publish" class-name="svg-icon" />
  7. </el-avatar>
  8. </template>
  9. <template v-else-if="status === 1">
  10. <el-avatar :size="36" style="background-color: #3f73f6">
  11. <svg-icon color="#FFF" style="font-size: 32px" icon-class="flow-approval" class-name="svg-icon" />
  12. </el-avatar>
  13. </template>
  14. <template v-else>
  15. <flow-node-avatar :size="36" :show-name="false" :name="name" />
  16. </template>
  17. <!-- 状态 -->
  18. <div class="badge">
  19. <template v-if="type === 3">
  20. <svg-icon icon-class="reject" />
  21. </template>
  22. <template v-else-if="status === 1">
  23. <svg-icon icon-class="active" color="#2a5eff" />
  24. </template>
  25. <template v-else>
  26. <svg-icon icon-class="approval" />
  27. </template>
  28. </div>
  29. </div>
  30. </template>
  31. <script setup lang="ts">
  32. import SvgIcon from '../SvgIcon/index.vue'
  33. import FlowNodeAvatar from './FlowNodeAvatar.vue'
  34. import { TaskTypeEnum, TaskStatusEnum } from './enums'
  35. defineProps({
  36. status: { type: Number, default: 0 },
  37. type: { type: Number, default: 0 },
  38. name: { type: String, default: '' }
  39. })
  40. </script>
  41. <style lang="scss" scoped>
  42. .assignee-container {
  43. position: relative;
  44. top: -5px;
  45. left: -13px;
  46. .badge {
  47. $BadgeSize: 18px;
  48. $BadgeOffset: -4px;
  49. position: absolute;
  50. width: $BadgeSize;
  51. height: $BadgeSize;
  52. display: flex;
  53. align-items: center;
  54. justify-content: center;
  55. bottom: $BadgeOffset;
  56. right: $BadgeOffset;
  57. z-index: 999;
  58. border: 2px solid #fff;
  59. background-color: #fff;
  60. border-radius: 50%;
  61. overflow: hidden;
  62. }
  63. .svg-icon {
  64. font-size: 36px;
  65. }
  66. }
  67. </style>