Merge pull request 'clay : 触发器节点和用户边界事件处理完成' (#36) from master into pro

Reviewed-on: http://git.hchyun.com/clay/workflow-engine-web/pulls/36

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>
@@ -65,7 +66,7 @@ export default {
         this.$set(user, "color", "#0bbd87")
       }
       //审批通过
-      if (state === 'AGREE') {
+      if (state === 'AGREE' || state === 'AUTO_PASS') {
         this.$set(user, "icon", "el-icon-check")
         this.$set(user, "color", "#0bbd87")
       }
@@ -75,7 +76,7 @@ export default {
         this.$set(user, "color", "#f78f5f")
       }
       //拒绝后评论
-      if (state === 'REFUSE') {
+      if (state === 'REFUSE' || state === 'AUTO_REFUSE') {
         this.$set(user, "icon", "el-icon-close")
         this.$set(user, "color", "#f56c6c")
       }
@@ -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>

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 {

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"
@@ -30,12 +30,12 @@
               <div style="font-size: 14px; font-weight: bold;">{{ operation.remark }}</div>
             </div>
           </div>
-          <template v-if="operation.operation === 'comment' || operation.operation === 'refuse'">
+          <template v-if="operation.comment">
             <div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
               <div>
                 {{ operation.comment.context }}
               </div>
-              <div style="margin-top: 10px;" v-if="operation.comment.attachments.length > 0">
+              <div style="margin-top: 10px;" v-if="operation.comment.attachments && operation.comment.attachments.length > 0">
                 <template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
                   <el-image
                       style="width: 100px; height: 100px"
@@ -125,11 +125,13 @@ export default {
       for (let i = 0;i<this.operationList.length;i++) {
         let operationNew = this.initOperationFun(this.operationList[i])
         let userList = []
-        for (let user of operationNew.userInfo) {
-          let userNew = this.initUser(user)
-          userList.push(userNew)
+        if (operationNew.userInfo){
+          for (let user of operationNew.userInfo) {
+            let userNew = this.initUser(user)
+            userList.push(userNew)
+          }
+          operationNew.userInfo = userList
         }
-        operationNew.userInfo = userList
         // operationListNew.push(operationNew)
         // this.operationList.push(operationNew)
         this.operationList[i] = operationNew
@@ -138,9 +140,12 @@ export default {
     //获取到对应附件的地址
     getAttachmentList(attachments, image) {
       let result = [];
-      for (let attachment of attachments) {
-        if (attachment.isImage === image) {
-          result.push(attachment)
+      console.log(attachments)
+      if (attachments){
+        for (let attachment of attachments) {
+          if (attachment.isImage === image) {
+            result.push(attachment)
+          }
         }
       }
       return result;
@@ -153,7 +158,7 @@ export default {
         this.$set(user, "color", "#0bbd87")
       }
       //审批通过
-      if (state === 'AGREE') {
+      if (state === 'AGREE' || state === 'AUTO_PASS') {
         this.$set(user, "icon", "el-icon-check")
         this.$set(user, "color", "#0bbd87")
       }
@@ -180,13 +185,12 @@ export default {
       if (state === 'CREATE') {
         this.$set(operation, "icon", "el-icon-check")
         this.$set(operation, "color", "#0bbd87")
-        this.$set(operation, "remark", operation.userInfo.name)
       }
       //审批通过
-      if (state === 'AGREE') {
+      if (state === 'AGREE' || state === 'AUTO_PASS') {
         this.$set(operation, "icon", "el-icon-check")
         this.$set(operation, "color", "#0bbd87")
-        this.$set(operation, "remark", operation.userInfo.name + '  (已同意)')
+        this.$set(operation, "remark", '  (已同意)')
       }
       if (state === 'PASS'){
         this.$set(operation, "icon", "el-icon-more")
@@ -196,31 +200,37 @@ export default {
       if (state === 'RUNNING') {
         this.$set(operation, "icon", "el-icon-loading")
         this.$set(operation, "color", "#f78f5f")
-        this.$set(operation, "remark", operation.userInfo.name + '  (处理中)')
+        this.$set(operation, "remark",'  (处理中)')
+      }
+      //回退
+      if (state === 'ROLLBACK') {
+        this.$set(operation, "icon", "el-icon-refresh")
+        this.$set(operation, "color", "#f78f5f")
+        this.$set(operation, "remark", '  (回退成功)')
       }
       //抄送
       if (type === 'CC') {
         this.$set(operation, "icon", "el-icon-s-promotion")
         this.$set(operation, "color", "#3395f8")
-        this.$set(operation, "remark", operation.userInfo.name + '  (抄送成功)')
+        this.$set(operation, "remark", '  (抄送成功)')
       }
       //评论
       if (state === 'COMMENT') {
         this.$set(operation, "icon", "el-icon-chat-dot-round")
         this.$set(operation, "color", "#0bbd87")
-        this.$set(operation, "remark", operation.userInfo.name + '  (添加了评论)')
+        this.$set(operation, "remark", '  (添加了评论)')
       }
       //拒绝后评论
       if (state === 'REFUSE' && type === 'COMMENT') {
         this.$set(operation, "icon", "el-icon-chat-dot-round")
         this.$set(operation, "color", "#f56c6c")
-        this.$set(operation, "remark", operation.userInfo.name + '  (填写拒绝理由)')
+        this.$set(operation, "remark", '  (填写拒绝理由)')
       }
       //拒绝操作
-      if (state === 'REFUSE' && type === 'OPINION') {
+      if ((state === 'REFUSE' || state === 'AUTO_REFUSE')&& type === 'OPINION') {
         this.$set(operation, "icon", "el-icon-close")
         this.$set(operation, "color", "#f56c6c")
-        this.$set(operation, "remark", operation.userInfo.name + '  (拒绝)')
+        this.$set(operation, "remark", '  (拒绝)')
       }
       return operation;
     },
@@ -241,10 +251,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;

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;
         }
       }
 

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>