flowable-engine-web/src/components/common/AvatarEllipsis.vue

@@ -4,9 +4,8 @@
        :style="{'--row':row}">
     <slot name="pre"></slot>
     <div style="display: flex;">
-      <div v-for="(user,index) in userInfo" :key="index">
-        <div>
-          <el-avatar style="margin-right: 5px;" size="large"
+      <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="{
@@ -17,8 +16,9 @@
                :class="user.icon"
             ></i>
           </div>
-        </div>
-        <div>{{user.name}}</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>
@@ -27,20 +27,20 @@
 <script>
 export default {
   name: "AvatarEllipsis",
-  install(Vue){
+  install(Vue) {
     Vue.component('avatarEllipsis', this)
   },
   components: {},
-  props:{
+  props: {
     row: {
       type: Number,
       default: 1
     },
-    hoverTip:{
+    hoverTip: {
       type: Boolean,
       default: false
     },
-    userInfo:{
+    userInfo: {
       type: Array,
       default: []
     }
@@ -52,7 +52,7 @@ export default {
     return {}
   },
   methods: {
-    init(){
+    init() {
       for (let user of this.userInfo) {
         this.initUser(user)
       }
@@ -79,7 +79,7 @@ export default {
         this.$set(user, "icon", "el-icon-close")
         this.$set(user, "color", "#f56c6c")
       }
-      if (state === 'pass'){
+      if (state === 'pass') {
         this.$set(user, "icon", "el-icon-more")
         this.$set(user, "color", "#c0c4cc")
       }
@@ -90,5 +90,18 @@ export default {
 </script>
 
 <style scoped>
-
+.avatar_name {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 5px;
+  /*width: 45px;*/
+}
+.item_name{
+  width: 45px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
 </style>

flowable-engine-web/src/views/common/process/nodes/Node.vue

@@ -11,8 +11,10 @@
         <div class="node-body-content">
           <i :class="leftIcon" v-if="leftIcon"></i>
           <template v-if="viewer && selectUser.show">
-            <el-button type="primary" icon="el-icon-plus" circle @click="$refs.userPicker.showUserPicker()"/>
-            <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
+            <div class="avatar_button">
+              <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
+              <el-button type="primary" icon="el-icon-plus" circle @click="$refs.userPicker.showUserPicker()"/>
+            </div>
           </template>
           <template v-else-if="showAvatar">
             <span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
@@ -77,7 +79,7 @@ export default {
     //节点内容区域文字
     userInfo: {
       type: Array,
-      default(){
+      default() {
         return []
       }
     },
@@ -129,7 +131,7 @@ export default {
     },
   },
   data() {
-    return{}
+    return {}
   },
   computed: {
     viewer() {
@@ -148,7 +150,7 @@ export default {
         userInfoList.push(userInfo)
       }
       this.userInfo = userInfoList
-      this.$store.state.selectUserMap.set(this.$store.state.selectedNode.id,userInfoList)
+      this.$store.state.selectUserMap.set(this.$store.state.selectedNode.id, userInfoList)
     },
   }
 }
@@ -229,6 +231,16 @@ export default {
       color: #656363;
       font-size: 14px;
 
+      .avatar_button {
+        display: flex;
+
+        button {
+          height: 40px;
+          flex-shrink: 0;
+          flex-grow: 0;
+        }
+      }
+
       i {
         position: absolute;
         top: 55%;