From 2c8b9978e8f3c7376348c4d86b778713f6569626 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Tue, 21 Mar 2023 22:59:31 +0800
Subject: [PATCH] =?UTF-8?q?dengjie=20:=20=E4=BF=AE=E6=94=B9=E4=BA=BA?=
 =?UTF-8?q?=E5=91=98=E9=80=89=E6=8B=A9bug=E5=8F=8A=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/AvatarEllipsis.vue  | 12 ++-
 .../src/components/common/UserPicker.vue      | 76 ++++++++++++-------
 .../common/operation/OperationRender.vue      | 14 ++--
 .../src/views/common/process/nodes/Node.vue   | 13 ++--
 .../src/views/workspace/InitiatedInstance.vue |  2 +-
 5 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/flowable-engine-web/src/components/common/AvatarEllipsis.vue b/flowable-engine-web/src/components/common/AvatarEllipsis.vue
index ea36a66..43e74e3 100644
--- a/flowable-engine-web/src/components/common/AvatarEllipsis.vue
+++ b/flowable-engine-web/src/components/common/AvatarEllipsis.vue
@@ -3,7 +3,7 @@
        :title="hoverTip ? content: null"
        :style="{'--row':row}">
     <slot name="pre"></slot>
-    <div style="display: flex;">
+    <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>
@@ -20,6 +20,7 @@
             <span class="item_name">{{ user.name }}</span>
           </el-tooltip>
       </div>
+<!--      <el-button type="primary" icon="el-icon-plus" circle @click="$refs.userPicker.showUserPicker()"/>-->
     </div>
   </div>
 </template>
@@ -96,12 +97,19 @@ export default {
   align-items: center;
   margin-right: 5px;
   /*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
+  overflow: hidden;
+  padding-top: 3px;
 }
 </style>
diff --git a/flowable-engine-web/src/components/common/UserPicker.vue b/flowable-engine-web/src/components/common/UserPicker.vue
index 159d8e7..552f760 100644
--- a/flowable-engine-web/src/components/common/UserPicker.vue
+++ b/flowable-engine-web/src/components/common/UserPicker.vue
@@ -17,11 +17,12 @@
           <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
           <el-scrollbar style="height:317px">
             <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
-                     :default-expanded-keys="expandedKeys"
+                     :default-expanded-keys="expandedKeys" lazy accordion
                      @node-click="handleChange"
             >
+              <!-- :style="data.avatar!==null ? {'height':'50px'}:''"-->
               <div class="tree-node" slot-scope="{  node,data }">
-                <div v-if="data.type === 0" style="display: flex;align-items: center">
+                <div v-if="data.type === 0" style="display: flex;align-items: center;">
                   <el-avatar :src="data.avatar"></el-avatar>
                   {{ node.label }}
                 </div>
@@ -104,8 +105,11 @@ export default {
         value: 'value',
         label: 'name',
         children: 'children',
+        isLeaf: function (data, node) {
+          return !!data.avatar
+        }
       }
-    };
+    }
   },
   watch: {
     filterText(val) {
@@ -134,14 +138,13 @@ export default {
       getUserTree(this.radio, this.chooseId).then(res => {
         console.log('人员', res.data)
         // if (res.data) {
-          if (this.selectItem.type === -1 || this.selectItem.type === -2) {
-            this.dataList = res.data
-          }
-          else if (this.selectItem.type === 1) {
-            this.selectItem.children = res.data
-          } else if (this.selectItem.type === 2) {
-            this.selectItem.children = res.data
-          }
+        if (this.selectItem.type === -1 || this.selectItem.type === -2) {
+          this.dataList = res.data
+        } else if (this.selectItem.type === 1) {
+          this.selectItem.children = res.data
+        } else if (this.selectItem.type === 2) {
+          this.selectItem.children = res.data
+        }
         // }
       });
     },
@@ -171,25 +174,31 @@ export default {
 
     },
     //渲染子节点用户或部门及用户数据
-    handleChange(item, check) {
+    handleChange(item, data, node) {
       this.selectItem = item
       this.expandedKeys.push(item.value)
-      if (item.type !== 0) {
-        this.chooseId = item.id
-        this.getList()
-        return
-      }
-      if (this.multiple) {
-        //不添加重复的数据到右边
-        for (let i = 0; i < this.selectList.length; i++) {
-          if (this.selectList[i].id === item.id) {
-            this.selectList.splice(i, 1);
-            break;
-          }
+      //不重复发送请求getList()
+      if (node.expanded === false) {
+        if (item.type !== 0) {
+          this.chooseId = item.id
+          this.getList()
+          return
+        }
+      }
+      //仅选择用户
+      if (item.avatar !== null) {
+        if (this.multiple) {
+          //不添加重复的数据到右边
+          for (let i = 0; i < this.selectList.length; i++) {
+            if (this.selectList[i].id === item.id) {
+              this.selectList.splice(i, 1);
+              break;
+            }
+          }
+          this.selectList.push(item);
+        } else {
+          this.selectList = [item];
         }
-        this.selectList.push(item);
-      } else {
-        this.selectList = [item];
       }
       // this._value = this.selectList
     },
@@ -227,12 +236,21 @@ export default {
 @containWidth: 278px;
 /deep/ .el-tree-node {
   .el-tree-node__children {
-    .el-tree-node__content {
-      height: 42px;
+    .el-tree-node {
+      .el-tree-node__content {
+        height: 42px;
+      }
     }
   }
 }
 
+///deep/.el-tree-node__children{
+//  .is-current{
+//    .el-tree-node__content{
+//      height: 42px;
+//    }
+//  }
+//}
 .tree-node {
   div {
     .el-avatar {
diff --git a/flowable-engine-web/src/views/common/operation/OperationRender.vue b/flowable-engine-web/src/views/common/operation/OperationRender.vue
index fe7ffe6..de8d04e 100644
--- a/flowable-engine-web/src/views/common/operation/OperationRender.vue
+++ b/flowable-engine-web/src/views/common/operation/OperationRender.vue
@@ -10,10 +10,10 @@
         <el-card>
           <div style="display: flex;">
             <div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
-                <el-avatar  size="large"
-                           :src="user.avatar"></el-avatar>
-                <div v-if="!$slots.dot && operation.userInfo.length > 1"
-                     class="el-timeline-item__node avatar_icon" :style="{
+                <el-avatar size="large" :src="user.avatar"></el-avatar>
+                <!--v-if="!$slots.dot && operation.userInfo.length > 1" -->
+                <div v-if="user.icon"
+                     class="el-timeline-item__node" :style="{
                       backgroundColor: user.color
                     }">
                   <i v-if="user.icon"
@@ -241,10 +241,10 @@ export default {
   position: relative;
   margin-right: 5px;
 }
-.avatar_icon{
+.el-timeline-item__node{
   position: absolute;
-  bottom: 16px;
-  right: -2px;
+  bottom: 20px;
+  right: 1px;
 }
 .username{
   width: 45px;
diff --git a/flowable-engine-web/src/views/common/process/nodes/Node.vue b/flowable-engine-web/src/views/common/process/nodes/Node.vue
index 937c85d..7dd279b 100644
--- a/flowable-engine-web/src/views/common/process/nodes/Node.vue
+++ b/flowable-engine-web/src/views/common/process/nodes/Node.vue
@@ -200,7 +200,7 @@ export default {
 
   .node-body {
     cursor: pointer;
-    max-height: 120px;
+    min-height: 63px;
     position: relative;
     border-radius: 5px;
     background-color: white;
@@ -236,17 +236,20 @@ export default {
     }
 
     .node-body-content {
-      padding: 18px;
+      padding: 10px;
       color: #656363;
       font-size: 14px;
 
       .avatar_button {
+        //float: left;
         display: flex;
-
+        //flex: 1;
+        flex-wrap: wrap;
         button {
+          margin-top: 3px;
           height: 40px;
-          flex-shrink: 0;
-          flex-grow: 0;
+          //flex-shrink: 0;
+          //flex-grow: 0;
         }
       }
 
diff --git a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
index de1b103..c07d4bd 100644
--- a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
+++ b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
@@ -56,7 +56,7 @@
           </div>
           <div class="top_right">
             <div style="margin-bottom: 12px">
-              <span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
+              <span style="font-size: 15px;margin-right: 15px">{{ selectProcessInstance.deploymentName }}</span>
               <el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag>
               <el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag>
               <el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>