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

@@ -6,12 +6,16 @@
           <div style="padding: 5px 8px;">
             <el-input v-model="filterText" style="width: 100%;" size="small"
                       clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search" />
+            <div style="margin-top: 5px">
+              <el-button size="mini" type="primary" plain  style="padding:4px 6px;">人员</el-button>
+              <el-button size="mini" type="primary"  plain  style="padding:4px 6px;">部门</el-button>
             </div>
-          <!-- 部门 -->
+          </div>
+          <!-- 人员选择 -->
           <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
           <el-scrollbar style="height:350px">
-            <el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="deptId" default-expand-all
+            <el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="value" default-expand-all
-                     :show-checkbox="showCheckbox" check-strictly highlight-current
+                     :show-checkbox="showCheckbox" highlight-current :check-strictly="multiple===false"
                      @check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"
                      :filter-node-method="filterNode">
               <div class="custom-tree-node" slot-scope="{ node }" style="width: 100%">
@@ -20,7 +24,6 @@
             </el-tree>
           </el-scrollbar>
         </div>
-
         <div class="selected">
           <div class="count">
             <span>已选 {{ selectList.length }} 项</span>
@@ -102,7 +105,7 @@ export default {
         // const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
         // const jsonc = jsonb.replace(/"label"/g, '"deptName"')
         this.deptList = res.data
-        console.log("获取部门信息===========", this.deptList);
+        // console.log("获取部门信息===========", this.deptList);
       });
     },
     //通过关键字过滤树节点
@@ -111,7 +114,7 @@ export default {
       return data.deptName.indexOf(value) !== -1;
     },
     //用于弹开部门选择
-    showDeptPicker() {
+    showUserPicker() {
       this.visible = true;
     },
     /**
@@ -132,7 +135,9 @@ export default {
             }
           }
           if (checked) {
+            if(data.children === undefined){
               this.selectList.push(data);
+            }
           } else if (data === '1') {
             this.$refs.tree.setCheckedKeys([]);
             this.selectList = [];
@@ -147,10 +152,11 @@ export default {
           }
           if (checked) {
             this.$refs.tree.setCheckedNodes([data]);
+            // this.$refs.tree.setCheckedKeys([]);
             this.selectList = [data];
           } else if (data === '1') {
-            this.$refs.tree.setCheckedKeys([]);
             this.selectList = [];
+            this.$refs.tree.setCheckedKeys([]);
           }
         }
       }
@@ -164,6 +170,7 @@ export default {
      * @param check checked(checkbox选择框)是否选中
      */
     handle(node, check) {
+      if (check.isLeaf !== false) {
         if (this.multiple) {
           //不添加重复的数据到右边
           for (let i = 0; i < this.selectList.length; i++) {
@@ -178,6 +185,7 @@ export default {
           check.checked = true
           this.selectList = [node];
         }
+      }
       this._value = this.selectList
     },
     //左侧无选择框时,右侧显示×
@@ -203,9 +211,10 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.handleCheckChange("1");
         if (!this.showCheckbox) {
           this.selectList = []
+        }else {
+          this.handleCheckChange("1");
         }
       });
     },
@@ -221,15 +230,15 @@ export default {
 <style lang="less" scoped>
 @containWidth: 278px;
 
-/deep/ .el-tree-node {
+///deep/ .el-tree-node {
-  .is-leaf + .el-checkbox .el-checkbox__inner {
+//  .is-leaf + .el-checkbox .el-checkbox__inner {
-    display: inline-block;
+//    display: inline-block;
-  }
+//  }
-
+//
-  .el-checkbox .el-checkbox__inner {
+//  .el-checkbox .el-checkbox__inner {
-    display: none;
+//    display: none;
-  }
+//  }
-}
+//}
 
 /deep/ .el-dialog__body {
   padding: 10px 20px;

flowable-engine-web/src/views/common/form/components/UserPicker.vue

@@ -6,15 +6,17 @@
     </template>
     <template v-else>
       <template v-if="perm === 'E'">
-        <el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.orgPicker.show()">选择人员</el-button>
+        <el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.userPicker.showUserPicker()">选择人员</el-button>
-        <org-picker type="user" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected"/>
+        <org-picker type="user" :multiple="multiple" ref="userPicker" :selected="_value" @ok="selected"/>
         <span class="placeholder"> {{placeholder}}</span>
         <div style="margin-top: 5px">
-          <el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.name}}</el-tag>
+          <el-tag size="mini" style="margin: 5px" closable v-for="(user, i) in _value" :key="i" @close="delDept(i)">{{user.label}}</el-tag>
         </div>
       </template>
       <template v-else-if="perm === 'R'">
-        {{ _value }}
+        <div v-for="(user, i) in _value" :key="i">
+          {{user.label}}
+        </div>
       </template>
     </template>
   </div>
@@ -29,7 +31,7 @@ import OrgPicker from "@/components/common/Test";
 
 export default {
   mixins: [componentMinxins],
-  name: "DeptPicker",
+  name: "UserPicker",
   components: {OrgPicker},
   props: {
     value:{

flowable-engine-web/src/views/common/operation/operationRender.vue

@@ -0,0 +1,106 @@
+<template>
+  <div style="margin: 10px">
+    <el-timeline>
+      <el-timeline-item v-for="(operation,index) in operationList"
+                        :key="index" :timestamp="operation.startTime"
+                        :icon="operation.icon"
+                        :color="operation.color"
+                        size="large"
+                        placement="top">
+        <el-card>
+          <div style="display: flex;">
+            <div>
+              <el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
+            </div>
+            <div style="margin-left: 10px;">
+              <div style="color: #c0bebe">{{ operation.userInfo.name }}</div>
+              <div style="font-size: 16px; font-weight: bold;">{{ operation.operationName }}</div>
+            </div>
+          </div>
+          <!--                <template v-if="operation.operation == 'opinion'">-->
+          <!--                  <h4>{{operation.operationName}}</h4>-->
+          <!--                  <p>王小虎 提交于 2018/4/12 20:46</p>-->
+          <!--                </template>-->
+          <template v-if="operation.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">
+                <template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
+                    <el-image
+                        style="width: 100px; height: 100px"
+                        :src="item.url"
+                        :preview-src-list="[item.url]">
+                    </el-image>
+                </template>
+                <div  v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
+                  <el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document" >{{file.name}}</el-link>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item icon="el-icon-more">
+        <h2>审批进行中</h2>
+      </el-timeline-item>
+
+
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:{
+    operationList:{
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  name: "operationRender",
+  created() {
+    for (let operation of this.operationList) {
+      switch (operation.state) {
+        case 'agree' :
+          this.$set(operation, "icon", "el-icon-check")
+          this.$set(operation, "color", "#0bbd87")
+          break;
+        case 'process' :
+          this.$set(operation, "icon", "el-icon-loading")
+          this.$set(operation, "color", "#f78f5f")
+          break;
+        case 'comment' :
+          this.$set(operation, "icon", "el-icon-chat-dot-round")
+          this.$set(operation, "color", "#0bbd87")
+          break;
+        default:
+          break;
+      }
+    }
+  },
+  methods: {
+    getAttachmentList(attachments,image){
+      let result = [];
+      for (let attachment of attachments) {
+        if (attachment.isImage === image){
+          result.push(attachment)
+        }
+      }
+      return result;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+/deep/ .el-card__body, .el-main {
+  padding: 10px;
+}
+
+</style>

flowable-engine-web/src/views/workspace/DisposalTask.vue

@@ -62,37 +62,8 @@
           <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
                        v-model="taskData.formData"/>
         </div>
-        <div style="margin: 10px">
+        <div style="height: 15px;background:#f5f5f5;"></div>
-          <el-timeline>
+        <operation-render v-if="!loading" :operation-list="taskData.operationList"/>
-            <el-timeline-item  v-for="(operation,index) in taskData.operationList"
-                               :key="index" :timestamp="operation.startTime"
-                               :icon="operation.icon"
-                               :color="operation.color"
-                               size="large"
-                               placement="top">
-              <el-card>
-                <el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
-                <p>{{operation.userInfo.name}}</p>
-                <template v-if="operation.operation == 'opinion'">
-                  <h4>{{operation.operationName}}</h4>
-                  <p>王小虎 提交于 2018/4/12 20:46</p>
-                </template>
-                <template v-if="operation.operation == 'comment'">
-                  {{operation.comment}}
-                </template>
-
-
-
-
-              </el-card>
-            </el-timeline-item>
-            <el-timeline-item icon="el-icon-more">
-              <h2>审批进行中</h2>
-            </el-timeline-item>
-
-
-          </el-timeline>
-        </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
         <el-footer class="footer">
           <div class="footer_comment" @click="showCommentBox">
@@ -133,10 +104,11 @@ import Comment from "../../components/common/Comment";
 import FormRender from "@/views/common/form/FormRender";
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
 import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask, rollBackTask} from "@/api/task";
+import OperationRender from "@/views/common/operation/operationRender";
 
 export default {
   name: "DisposalTask",
-  components: {Comment, FormRender, ProcessDiagramViewer},
+  components: {OperationRender, Comment, FormRender, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -198,34 +170,11 @@ export default {
           return item
         })
         that.taskData = res.data;
-        for (let operation of that.taskData.operationList) {
-          switch (operation.state) {
-            case 'agree' :
-              this.$set(operation,"icon","el-icon-check")
-              this.$set(operation,"color","#0bbd87")
-              break;
-            case 'process' :
-              this.$set(operation,"icon","el-icon-loading")
-              this.$set(operation,"color","#f78f5f")
-              break;
-            case 'comment' :
-              this.$set(operation,"icon","el-icon-chat-dot-round")
-              this.$set(operation,"color","#0bbd87")
-              break;
-
-            default: break;
-          }
-        }
         that.$store.state.design = that.taskData;
         that.$store.state.userTaskOption = that.taskData.userTaskOption;
         this.loading = false;
       });
     },
-    getTimeLineIcon(operation){
-      switch (operation.state) {
-        case 'agree' : return 'el-icon-check'
-      }
-    },
     submitTask() {
       let params = {
         taskId: this.selectTask.taskId,