init

src/views/workflow/process/common/AvatarEllipsis.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :class="{'line': row === 1, 'lines': row > 1}"
+       :title="hoverTip ? content: null"
+       :style="{'--row':row}">
+    <slot name="pre"></slot>
+    <div style="display: flex;flex-wrap: wrap;">
+      <div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
+        <el-avatar size="large"
+                   :src="user.avatar"></el-avatar>
+        <div v-if="user.icon"
+             class="el-timeline-item__node" :style="{
+                      backgroundColor: user.color
+                    }">
+          <el-icon v-if="user.icon" size="15" :class="user.class">
+            <component :is="user.icon"/>
+          </el-icon>
+        </div>
+        <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
+          <span class="item_name">{{ user.name }}</span>
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {Loading,Close,CircleCheckFilled,MoreFilled} from '@element-plus/icons-vue'
+import {defineProps} from "vue";
+const props = defineProps({
+  row: {
+    type: Number,
+    default: 1
+  },
+  hoverTip: {
+    type: Boolean,
+    default: false
+  },
+  userInfo: {
+    type: Array,
+    default: []
+  }
+})
+
+const init = () => {
+  for (let user of props.userInfo) {
+    initUser(user)
+  }
+}
+
+const initUser = (user) => {
+  let state = user.state
+  //创建节点
+  if (state === 'CREATE') {
+    user["icon"] = CircleCheckFilled
+    user["color"] = "#0bbd87"
+  }
+  //审批通过
+  if (state === 'AGREE' || state === 'AUTO_PASS') {
+    user["icon"] = CircleCheckFilled
+    user["color"] = "#0bbd87"
+  }
+  //审批处理中
+  if (state === 'RUNNING') {
+    user["icon"] = Loading
+    user["color"] = "#f78f5f"
+    user["class"] = 'is-loading'
+  }
+  //拒绝后评论
+  if (state === 'REFUSE') {
+    user["icon"] = Close
+    user["color"] = "#f56c6c"
+  }
+  if (state === 'PASS'){
+    user["icon"] = MoreFilled
+    user["color"] = "#c0c4cc"
+  }
+  return user;
+}
+
+init()
+</script>
+
+<style scoped>
+.avatar_name {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 1px;
+  /*width: 45px;*/
+  position: relative;
+}
+
+.el-timeline-item__node {
+  position: absolute;
+  bottom: 20px;
+  right: 1px;
+}
+
+.item_name {
+  width: 45px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-top: 3px;
+}
+</style>