Merge remote-tracking branch 'origin/master'

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

@@ -5,8 +5,11 @@
     <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 class="circle-user">
+          <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
+            <span class="item_name">{{ user.name }}</span>
+          </el-tooltip>
+        </div>
         <div v-if="user.icon"
              class="el-timeline-item__node" :style="{
                       backgroundColor: user.color
@@ -15,17 +18,15 @@
             <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 {Loading, Close, CircleCheckFilled, MoreFilled} from '@element-plus/icons-vue'
 import {defineProps} from "vue";
+
 const props = defineProps({
   row: {
     type: Number,
@@ -38,6 +39,10 @@ const props = defineProps({
   userInfo: {
     type: Array,
     default: []
+  },
+  mode: {
+    type: String,
+    default: 'design'
   }
 })
 
@@ -70,7 +75,7 @@ const initUser = (user) => {
     user["icon"] = Close
     user["color"] = "#f56c6c"
   }
-  if (state === 'PASS'){
+  if (state === 'PASS') {
     user["icon"] = MoreFilled
     user["color"] = "#c0c4cc"
   }
@@ -80,7 +85,27 @@ const initUser = (user) => {
 init()
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.circle-user {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 1px solid #ACACAC;
+  position: relative;
+
+  .circle-icon {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    top: auto !important;
+    bottom: -9px;
+    right: 15px !important;
+  }
+}
+
 .avatar_name {
   display: flex;
   flex-direction: column;
@@ -92,7 +117,7 @@ init()
 
 .el-timeline-item__node {
   position: absolute;
-  bottom: 20px;
+  bottom: 0;
   right: 1px;
 }
 

src/views/workflow/process/nodes/Node.vue

@@ -17,24 +17,17 @@
         </el-icon>
         <template v-if="selectUser.show && mode === 'view'">
           <div class="avatar_button">
-            <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
+            <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :mode="mode" :user-info="userInfo"/>
             <el-button type="primary" :icon="Plus" circle/>
           </div>
         </template>
         <template v-else-if="showAvatar">
           <span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
-          <div v-else v-for="item in userInfo" class="circle-user">
-            <span>{{ item.name }}</span>
-            <el-button v-if="item.state==='RUNNING'" type="warning" loading circle class="circle-icon"></el-button>
-            <el-button v-else-if="item.state==='UNACTIVATED'" type="info" :icon="More" circle
-                       class="circle-icon"></el-button>
-            <el-button v-else type="success" :icon="Check" circle class="circle-icon"></el-button>
-          </div>
-          <!--          <avatar-ellipsis :row="3" :user-info="userInfo"/>-->
+          <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
         </template>
         <template v-else>
           <span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
-          <ellipsis :row="3" :content="content" v-else/>
+          <ellipsis :row="3" :content="content" :mode="mode" v-else/>
         </template>
       </div>
       <div class="node-error" v-if="showError">
@@ -190,26 +183,6 @@ const init = () => {
 </script>
 
 <style lang="scss" scoped>
-.circle-user {
-  width: 50px;
-  height: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  border: 1px solid #ACACAC;
-  position: relative;
-
-  .circle-icon {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    top: auto !important;
-    bottom: -9px;
-    right: 15px !important;
-  }
-}
-
 .root {
   &:before {
     display: none !important;