flowable-engine-web/src/api/request.js

@@ -10,8 +10,8 @@ Vue.prototype.$axios = axios;
 // 字体图标
 
 export function getBaseUrl(){
-	return "http://gateway.mytwins.top"
-	// return "http://localhost:8000"
+	// return "http://gateway.mytwins.top"
+	return "http://localhost:8000"
 }
 
 const service = axios.create({

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

@@ -0,0 +1,94 @@
+<template>
+  <div :class="{'line': row === 1, 'lines': row > 1}"
+       :title="hoverTip ? content: null"
+       :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"
+                     :src="user.avatar"></el-avatar>
+          <div v-if="user.icon"
+               class="el-timeline-item__node" :style="{
+                      backgroundColor: user.color
+                    }">
+            <i v-if="user.icon"
+               class="el-timeline-item__icon"
+               :class="user.icon"
+            ></i>
+          </div>
+        </div>
+        <div>{{user.name}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AvatarEllipsis",
+  install(Vue){
+    Vue.component('avatarEllipsis', this)
+  },
+  components: {},
+  props:{
+    row: {
+      type: Number,
+      default: 1
+    },
+    hoverTip:{
+      type: Boolean,
+      default: false
+    },
+    userInfo:{
+      type: Array,
+      default: []
+    }
+  },
+  created() {
+    this.init()
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    init(){
+      for (let user of this.userInfo) {
+        this.initUser(user)
+      }
+    },
+    initUser(user) {
+      let state = user.state
+      //创建节点
+      if (state === 'create') {
+        this.$set(user, "icon", "el-icon-check")
+        this.$set(user, "color", "#0bbd87")
+      }
+      //审批通过
+      if (state === 'agree') {
+        this.$set(user, "icon", "el-icon-check")
+        this.$set(user, "color", "#0bbd87")
+      }
+      //审批处理中
+      if (state === 'process') {
+        this.$set(user, "icon", "el-icon-loading")
+        this.$set(user, "color", "#f78f5f")
+      }
+      //拒绝后评论
+      if (state === 'refuse') {
+        this.$set(user, "icon", "el-icon-close")
+        this.$set(user, "color", "#f56c6c")
+      }
+      if (state === 'pass'){
+        this.$set(user, "icon", "el-icon-more")
+        this.$set(user, "color", "#c0c4cc")
+      }
+      return user;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

flowable-engine-web/src/main.js

@@ -12,13 +12,13 @@ import "@/assets/theme.less";
 import "@/assets/global.css";
 import "@/assets/iconfont/iconfont.css"
 
+import AvatarEllipsis from '@/components/common/AvatarEllipsis'
 import Ellipsis from '@/components/common/Ellipsis'
 import WDialog from '@/components/common/WDialog'
 import Tip from '@/components/common/Tip'
-import axios from "axios";
-import {getBaseUrl} from "./api/request";
 
 Vue.use(ElementUI);
+Vue.use(AvatarEllipsis);
 Vue.use(Ellipsis);
 Vue.use(WDialog);
 Vue.use(Tip);

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

@@ -74,6 +74,8 @@ export default {
 </script>
 
 <style scoped>
-
+p{
+  background-color: #fff;
+}
 
 </style>

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

@@ -9,8 +9,18 @@
                         placement="top">
         <el-card>
           <div style="display: flex;">
-            <div>
-              <el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
+            <div v-for="(user,index) in operation.userInfo" :key="index">
+              <el-avatar style="margin-right: 5px;" size="large"
+                         :src="user.avatar"></el-avatar>
+              <div v-if="!$slots.dot && operation.userInfo.length > 1"
+                   class="el-timeline-item__node" :style="{
+                      backgroundColor: user.color
+                    }">
+                <i v-if="user.icon"
+                   class="el-timeline-item__icon"
+                   :class="user.icon"
+                ></i>
+              </div>
             </div>
             <div style="margin-left: 10px;">
               <div style="color: #c0bebe">{{ operation.operationName }}</div>
@@ -67,46 +77,106 @@ export default {
   },
   data() {
     return {
-      timeline: {}
+      timeline: {},
+
     }
   },
   created() {
-
-
-    switch (this.state) {
-      case '1':
-        this.timeline = {
-          color: '#f78f5f',
-          icon: 'el-icon-more',
-          context: '审批进行中'
+    console.log(this.operationList)
+    this.init()
+  },
+  methods: {
+    init() {
+      switch (this.state) {
+        case '1':
+          this.timeline = {
+            color: '#f78f5f',
+            icon: 'el-icon-more',
+            context: '审批进行中'
+          }
+          break
+        case '2':
+          this.timeline = {
+            color: '#0bbd87',
+            icon: 'el-icon-check',
+            context: '审批通过'
+          }
+          break
+        case '3':
+          this.timeline = {
+            color: '#f56c6c',
+            icon: 'el-icon-close',
+            context: '审核已驳回'
+          }
+          break
+        case '4':
+          this.timeline = {
+            color: '#0bbd87',
+            icon: 'el-icon-check',
+            context: '审批通过'
+          }
+          break
+        default:
+          break
+      }
+      // let operationListNew = []
+      console.log(this.operationList.length, "sdjshjdhasjds")
+      for (let i = 0;i<this.operationList.length;i++) {
+        let operationNew = this.initOperationFun(this.operationList[i])
+        console.log(operationNew, "sdjshjdhasjds")
+        let userList = []
+        for (let user of operationNew.userInfo) {
+          let userNew = this.initUser(user)
+          userList.push(userNew)
         }
-        break
-      case '2':
-        this.timeline = {
-          color: '#0bbd87',
-          icon: 'el-icon-check',
-          context: '审批通过'
+        console.log(userList, "userList")
+        operationNew.userInfo = userList
+        // operationListNew.push(operationNew)
+        // this.operationList.push(operationNew)
+        this.operationList[i] = operationNew
+      }
+      console.log(this.operationList, "operationListNew")
+    },
+    //获取到对应附件的地址
+    getAttachmentList(attachments, image) {
+      let result = [];
+      for (let attachment of attachments) {
+        if (attachment.isImage === image) {
+          result.push(attachment)
         }
-        break
-      case '3':
-        this.timeline = {
-          color: '#f56c6c',
-          icon: 'el-icon-close',
-          context: '审核已驳回'
-        }
-        break
-      case '4':
-        this.timeline = {
-          color: '#0bbd87',
-          icon: 'el-icon-check',
-          context: '审批通过'
-        }
-        break
-      default:
-        break
-    }
-
-    for (let operation of this.operationList) {
+      }
+      return result;
+    },
+    initUser(user) {
+      let state = user.state
+      //创建节点
+      if (state === 'create') {
+        this.$set(user, "icon", "el-icon-check")
+        this.$set(user, "color", "#0bbd87")
+      }
+      //审批通过
+      if (state === 'agree') {
+        this.$set(user, "icon", "el-icon-check")
+        this.$set(user, "color", "#0bbd87")
+      }
+      //审批处理中
+      if (state === 'process') {
+        this.$set(user, "icon", "el-icon-loading")
+        this.$set(user, "color", "#f78f5f")
+      }
+      //拒绝后评论
+      if (state === 'refuse') {
+        this.$set(user, "icon", "el-icon-close")
+        this.$set(user, "color", "#f56c6c")
+      }
+      if (state === 'pass'){
+        this.$set(user, "icon", "el-icon-more")
+        this.$set(user, "color", "#c0c4cc")
+      }
+      return user;
+    },
+    initOperationFun(operation) {
+      console.log("开始处理内容了")
       let state = operation.state
       let type = operation.operation
       //创建节点
@@ -121,6 +191,10 @@ export default {
         this.$set(operation, "color", "#0bbd87")
         this.$set(operation, "remark", operation.userInfo.name + '  (已同意)')
       }
+      if (state === 'pass'){
+        this.$set(operation, "icon", "el-icon-more")
+        this.$set(operation, "color", "#c0c4cc")
+      }
       //审批处理中
       if (state === 'process') {
         this.$set(operation, "icon", "el-icon-loading")
@@ -151,18 +225,7 @@ export default {
         this.$set(operation, "color", "#f56c6c")
         this.$set(operation, "remark", operation.userInfo.name + '  (拒绝)')
       }
-    }
-  },
-  methods: {
-    //获取到对应附件的地址
-    getAttachmentList(attachments, image) {
-      let result = [];
-      for (let attachment of attachments) {
-        if (attachment.isImage === image) {
-          result.push(attachment)
-        }
-      }
-      return result;
+      return operation;
     },
   }
 }

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

@@ -1,7 +1,8 @@
 <template>
-  <node :title="config.name" :show-error="showError" :content="content" :error-info="errorInfo"
+  <node :title="config.name" :show-error="showError" :content="content" :user-info="config.props.assignedUser" :error-info="errorInfo"
         @selected="$emit('selected')" @delNode="$emit('delNode')" @insertNode="type => $emit('insertNode', type)"
         placeholder="请设置审批人" :header-bgc="headerBgc" header-icon="el-icon-s-check"/>
+
 </template>
 
 <script>

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

@@ -1,5 +1,5 @@
 <template>
-  <node :title="config.name" :show-error="showError" :content="content" :error-info="errorInfo"
+  <node :title="config.name" :show-error="showError" :content="content" :error-info="errorInfo"  :user-info="config.props.assignedUser"
         @selected="$emit('selected')" @delNode="$emit('delNode')" @insertNode="type => $emit('insertNode', type)"
         placeholder="请设置抄送人" :header-bgc="headerBgc" header-icon="el-icon-s-promotion"/>
 </template>

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

@@ -9,9 +9,20 @@
         </div>
         <div class="node-body-content">
           <i :class="leftIcon" v-if="leftIcon"></i>
-          <span class="placeholder" v-if="(content || '').trim() === ''">{{placeholder}}</span>
-          <ellipsis :row="3" :content="content" v-else/>
-          <i class="el-icon-arrow-right" v-if="$store.state.diagramMode !== 'viewer'" ></i>
+          <template v-if="$store.state.diagramMode !== 'viewer'">
+            <span class="placeholder" v-if="(content || '').trim() === ''">{{placeholder}}</span>
+            <ellipsis :row="3" :content="content" v-else/>
+            <i class="el-icon-arrow-right"></i>
+          </template>
+          <template v-else>
+            <template v-if="userInfo.length > 0">
+              <avatar-ellipsis :row="3" :user-info="userInfo"/>
+            </template>
+            <template v-else>
+              <span class="placeholder" v-if="(content || '').trim() === ''">{{placeholder}}</span>
+              <ellipsis :row="3" :content="content" v-else/>
+            </template>
+          </template>
         </div>
         <div class="node-error" v-if="showError">
           <el-tooltip effect="dark" :content="errorInfo" placement="top-start">
@@ -56,6 +67,11 @@ export default {
       type: String,
       default: ""
     },
+    //节点内容区域文字
+    userInfo: {
+      type: Array,
+      default: []
+    },
     title:{
       type: String,
       default: "标题"

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

@@ -1,5 +1,5 @@
 <template>
-  <node title="发起人" :is-root="true" :content="content"
+  <node title="发起人" :is-root="true" :content="content" :user-info="config.props.assignedUser"
         @selected="$emit('selected')" @insertNode="type => $emit('insertNode', type)"
         placeholder="所有人" :header-bgc="config.props.headerBgc" header-icon="el-icon-user-solid"/>
 </template>