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>
@@ -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()"/>
+            <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>
@@ -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%;