flowable-engine-web/src/store/index.js

@@ -8,6 +8,7 @@ export default new Vuex.Store({
   state: {
     nodeMap: new Map(),
     parentMap: new Map(),
+    selectUserMap: new Map(),
     isEdit: null,
     selectedNode: {},
     selectFormItem: null,
@@ -29,7 +30,11 @@ export default new Vuex.Store({
       state.isEdit = val
     }
   },
-  getters: {},
+  getters: {
+    selectedNode(){
+      return state.selectedNode
+    }
+  },
   actions: {},
   modules: {}
 })

flowable-engine-web/src/views/admin/layout/ProcessDesign.vue

@@ -30,7 +30,6 @@
 
 <script>
 import ProcessTree from './process/ProcessTree.vue'
-// import ProcessTree from './process/ProcessTreeBack.vue'
 import NodeConfig from '../../common/process/config/NodeConfig'
 //流程设计器
 export default {

flowable-engine-web/src/views/admin/layout/ProcessDiagramViewer.vue

@@ -9,7 +9,7 @@
     </div>
     <el-main>
       <div class="design" :style="'transform: scale('+ scale / 100 +');'">
-        <process-tree ref="process-tree-view"/>
+        <process-tree ref="process-tree"/>
       </div>
     </el-main>
   </div>
@@ -34,6 +34,21 @@ export default {
   },
   beforeDestroy() {
     this.$store.state.diagramMode = "design";
+  },
+  methods:{
+    //校验数据配置的合法性
+    validate() {
+      return this.$refs["process-tree"].validateProcess()
+    },
+    validate_ASSIGN_USER(err) {
+      if (this.config.props.assignedUser.length > 0) {
+        return true;
+      } else {
+        this.errorInfo = '请指定审批人员'
+        err.push(`${this.config.name} 未指定审批人员`)
+        return false
+      }
+    },
   }
 };
 </script>

flowable-engine-web/src/views/admin/layout/form/FormDesignRender.vue

@@ -1,6 +1,6 @@
 <template>
   <!--todo 预览时渲染的component-->
-  <component ref="form" :is="config.name" :mode="mode" :perm="perm" v-model="_value" v-bind="config.props"/>
+  <component ref="form" :is="config.name" :config="config" :mode="mode" :perm="perm" v-model="_value" v-bind="config.props"/>
 </template>
 <script>
 

flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue

@@ -261,6 +261,7 @@ export default {
     },
     //选中一个节点
     selectNode(node) {
+      console.log(node)
       this.$store.commit('selectedNode', node)
       console.log(node, "node")
       if (!this.isConcurrentNode(node)) {

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

@@ -22,7 +22,7 @@
         </div>
       </template>
       <template v-else-if="perm === 'R'">
-        <div  style="display: flex;">
+        <div style="display: flex;">
           <div v-for="(user, i) in _value" :key="i" class="view_user">
             <el-avatar :src="user.avatar"/>
             <el-tooltip effect="dark" :content="user.name" placement="bottom-start">
@@ -59,6 +59,12 @@ export default {
       type: String,
       default: '请选择人员'
     },
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
     multiple: {
       type: Boolean,
       default: false
@@ -116,6 +122,7 @@ export default {
   display: flex;
   flex-direction: column;
   margin-right: 10px;
+
   span {
     text-align: center;
     text-overflow: ellipsis;

flowable-engine-web/src/views/common/process/config/ApprovalNodeConfig.vue

@@ -7,7 +7,7 @@
         </el-radio-group>
         <div v-if="nodeProps.assignedType === 'ASSIGN_USER'">
           <el-button size="mini" icon="el-icon-plus" type="primary" @click="selectUser" round>选择人员</el-button>
-          <org-items v-model="nodeProps.assignedUser"/>
+          <avatar-ellipsis :row="3" :user-info="nodeProps.assignedUser"/>
         </div>
         <div v-else-if="nodeProps.assignedType === 'SELF_SELECT'">
           <el-radio-group size="mini" v-model="nodeProps.selfSelect.multiple">
@@ -118,8 +118,8 @@
       </el-form-item>
       <el-form-item label="🙅‍ 如果审批被驳回 👇">
         <el-radio-group v-model="nodeProps.refuse.type">
-          <el-radio label="TO_END">直接结束流程</el-radio>
+          <el-radio label="TO_INITIAL">直接结束流程</el-radio>
-          <!--          <el-radio label="TO_BEFORE">驳回到上级审批节点</el-radio>-->
+          <el-radio label="TO_BEFORE">驳回到上级审批节点</el-radio>
           <!--          <el-radio label="TO_NODE">驳回到指定节点</el-radio>-->
         </el-radio-group>
         <div v-if="nodeProps.refuse.type === 'TO_NODE'">
@@ -133,19 +133,22 @@
       </el-form-item>
     </el-form>
 
-    <role-picker :title="pickerTitle" multiple ref="rolePicker" :v-model="select" @ok="selectedRole"/>
+    <role-picker title="请选择人员" multiple ref="rolePicker" :v-model="roleList" @ok="selectedRole"/>
+    <user-picker title="请选择系统角色" multiple ref="userPicker" :v-model="assignedUser" @ok="selectedUser"/>
 
   </div>
 </template>
 
 <script>
 import RolePicker from "@/components/common/RolePicker";
+import UserPicker from "@/components/common/UserPicker";
 import RoleItems from "../RoleItems";
 import OrgItems from "../OrgItems";
 
+
 export default {
   name: "ApprovalNodeConfig",
-  components: {RoleItems, OrgItems, RolePicker},
+  components: {RoleItems, OrgItems, RolePicker, UserPicker},
   props: {
     config: {
       type: Object,
@@ -158,7 +161,6 @@ export default {
     return {
       showOrgSelect: false,
       orgPickerSelected: [],
-      orgPickerType: "user",
       approvalTypes: [
         {name: "指定人员", type: "ASSIGN_USER"},
         {name: "发起人自选", type: "SELF_SELECT"},
@@ -174,27 +176,27 @@ export default {
     nodeProps() {
       return this.$store.state.selectedNode.props;
     },
-    select() {
+    assignedUser: {
-      return this.config.assignedUser || [];
+      get() {
+        return this.config.assignedUser || [];
+      },
+      set(val) {
+        this.config.assignedUser = val
+      }
     },
-    roleList() {
+    roleList:{
-      return this.config.roleList || [];
+      get() {
+        return this.config.roleList || [];
+      },
+      set(val) {
+        this.config.roleList = val
+      }
     },
     forms() {
       return this.$store.state.design.formItems.filter(f => {
         return f.name === "UserPicker";
       });
     },
-    pickerTitle() {
-      switch (this.orgPickerType) {
-        case "user":
-          return "请选择人员";
-        case "role":
-          return "请选择系统角色";
-        default:
-          return null;
-      }
-    },
     nodeOptions() {
       let values = [];
       const excType = ["ROOT", "EMPTY", "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"];
@@ -224,34 +226,30 @@ export default {
   },
   methods: {
     selectUser() {
-      this.orgPickerSelected = this.select;
+      this.$refs.userPicker.showUserPicker()
-      this.orgPickerType = "user";
-      this.$refs.orgPicker.show();
     },
     selectNoSetUser() {
-      this.orgPickerSelected = this.config.nobody.assignedUser;
+
-      this.orgPickerType = "user";
-      this.$refs.orgPicker.show();
     },
     //弹出角色选择器,选择系统角色
     selectRole() {
-      this.orgPickerType = "role";
       this.$refs.rolePicker.showRolePicker();
     },
     selectedRole(select) {
-      select.forEach(val => {
+      this.roleList = select
-        for (let i = 0; i < this.roleList.length; i++) {
+    },
-          if (this.roleList[i].roleId === val.roleId) {
+    selectedUser(select) {
-            this.roleList.splice(i, 1);
+      let userInfoList = []
-            break;
+      for (let val of select) {
-          }
+        let userInfo = {
-        }
+          id: val.id,
-        this.roleList.push(val);
+          name: val.name,
-      });
+          avatar: val.avatar,
+        }
+        userInfoList.push(userInfo)
+      }
+      this.assignedUser = userInfoList
     },
-    removeOrgItem(index) {
-      this.select.splice(index, 1);
-    }
   }
 };
 </script>

flowable-engine-web/src/views/common/process/config/CcNodeConfig.vue

@@ -1,21 +1,21 @@
 <template>
   <div>
-    <el-button size="mini" icon="el-icon-plus" type="primary" @click="selectOrg" round>选择抄送人</el-button>
+    <el-button size="mini" icon="el-icon-plus" type="primary" @click="selectUser" round>选择抄送人</el-button>
     <div class="option">
-      <el-checkbox label="允许发起人添加抄送人" v-model="config.shouldAdd"></el-checkbox>
+      <el-checkbox label="允许发起人添加抄送人" v-model="shouldAdd"></el-checkbox>
     </div>
-    <org-items v-model="select"/>
+<!--    <org-items v-model="select"/>-->
-    <org-picker multiple ref="orgPicker" :selected="select" @ok="selected"/>
+    <avatar-ellipsis :row="3" :user-info="assignedUser"/>
+    <user-picker title="请选择系统角色" multiple ref="userPicker" :v-model="assignedUser" @ok="selectedUser"/>
   </div>
 </template>
 
 <script>
-import OrgPicker from "@/components/common/Test";
+import UserPicker from "@/components/common/UserPicker";
-import OrgItems from "../OrgItems";
 
 export default {
   name: "CcNodeConfig.vue",
-  components: {OrgPicker, OrgItems},
+  components: {UserPicker},
   props:{
     config:{
       type: Object,
@@ -25,7 +25,16 @@ export default {
     }
   },
   computed:{
-    select: {
+    shouldAdd:{
+      get(){
+        return this.config.shouldAdd || false
+      },
+      set(val){
+        console.log("asdjhajdhasjdhasdhasjdad")
+        this.config.shouldAdd = val
+      }
+    },
+    assignedUser: {
       get(){
         return this.config.assignedUser || []
       },
@@ -38,16 +47,21 @@ export default {
     return {}
   },
   methods: {
-    selectOrg() {
+    selectUser() {
-      this.$refs.orgPicker.show()
+      this.$refs.userPicker.showUserPicker()
     },
-    selected(select) {
+    selectedUser(select) {
-      console.log(select)
+      let userInfoList = []
-      this.select = Object.assign([], select)
+      for (let val of select) {
+        let userInfo = {
+          id: val.id,
+          name: val.name,
+          avatar: val.avatar,
+        }
+        userInfoList.push(userInfo)
+      }
+      this.assignedUser = userInfoList
     },
-    removeOrgItem(index){
-      this.select.splice(index, 1)
-    }
   }
 }
 </script>

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

@@ -1,8 +1,10 @@
 <template>
-  <node :title="config.name" :show-error="showError" :content="content" :user-info="config.props.assignedUser" :error-info="errorInfo"
+  <node :title="config.name" :show-error="showError" :content="content"
+        :show-avatar="config.props.assignedType === 'ASSIGN_USER'" :user-info="assignedUser"
+        :error-info="errorInfo"
+        :select-user="selectUser"
         @selected="$emit('selected')" @delNode="$emit('delNode')" @insertNode="type => $emit('insertNode', type)"
         placeholder="请设置审批人" :header-bgc="headerBgc" header-icon="el-icon-s-check"/>
-
 </template>
 
 <script>
@@ -10,8 +12,8 @@ import Node from './Node'
 
 export default {
   name: "ApprovalNode",
-  props:{
+  props: {
-    config:{
+    config: {
       type: Object,
       default: () => {
         return {}
@@ -25,120 +27,136 @@ export default {
       errorInfo: '',
     }
   },
-  computed:{
+  computed: {
-    viewer(){
+    selectUser() {
+      return {
+        show: this.config.props.assignedType === 'SELF_SELECT',
+        multiple: this.config.props.selfSelect.multiple
+      };
+    },
+    assignedUser() {
+      if (this.config.props.assignedType === 'SELF_SELECT') {
+        this.config.props.assignedUser = []
+      }
+      return this.config.props.assignedUser;
+    },
+    viewer() {
       return this.$store.state.diagramMode === 'viewer'
     },
-    preview(){
+    preview() {
       return this.$store.state.preview;
     },
     headerBgc() {
-      if (this.preview || !this.viewer){
+      if (this.preview || !this.viewer) {
         return '#ff943e'
-      }else {
+      } else {
         return this.config.props.headerBgc
       }
     },
-    content(){
+    content() {
       const config = this.config.props
-      switch (config.assignedType){
+      switch (config.assignedType) {
         case "ASSIGN_USER":
-          if (config.assignedUser.length > 0){
+          if (config.assignedUser.length > 0) {
             let texts = []
             config.assignedUser.forEach(org => texts.push(org.name))
             return String(texts).replaceAll(',', '、')
-          }else {
+          } else {
             return '请指定审批人'
           }
         case "SELF":
           return '发起人自己'
         case "SELF_SELECT":
-          return config.selfSelect.multiple ? '发起人自选多人':'发起人自选一人'
+          return config.selfSelect.multiple ? '发起人自选多人' : '发起人自选一人'
         case "LEADER_TOP":
           return '多级主管依次审批'
         case "LEADER":
           return config.leader.level > 1 ? '发起人的第 ' + config.leader.level + ' 级主管' : '发起人的直接主管'
         case "FORM_USER":
-          if (!config.formUser || config.formUser === ''){
+          if (!config.formUser || config.formUser === '') {
             return '表单内联系人（未选择）'
-          }else {
+          } else {
             let text = this.getFormItemById(config.formUser)
-            if (text && text.title){
+            if (text && text.title) {
               return `表单（${text.title}）内的人员`
-            }else {
+            } else {
               return '该表单已被移除😥'
             }
           }
         case "ROLE":
-          if (config.roleList.length > 0){
+          if (config.roleList.length > 0) {
-            return config.roleList.map(role=>{
+            return config.roleList.map(role => {
               return role.roleName;
             }).join("、")
-          }else {
+          } else {
             return '指定角色（未设置）'
           }
-        default: return '未知设置项😥'
+        default:
+          return '未知设置项😥'
       }
     }
+
   },
   methods: {
-    getFormItemById(id){
+    getFormItemById(id) {
       return this.$store.state.design.formItems.find(item => item.id === id)
     },
     //校验数据配置的合法性
-    validate(err){
+    validate(err) {
       try {
         this.showError = !this[`validate_${this.config.props.assignedType}`](err)
-
         if (this.config.props.nobody.handler === 'TO_USER' && this.config.props.nobody.assignedUser.length === 0) {
           this.errorInfo = '审批人为空时， 转交给指定人员：【请指定一个具体的人】'
           err.push('审批人为空时， 转交给指定人员：【请指定一个具体的人】')
           this.showError = true
+        } else if (this.viewer) {
+          this.showError = !this.validate_ASSIGN_USER(err)
+          console.log(this.showError)
         }
-
         return this.showError
       } catch (e) {
+        console.log(e)
         return true;
       }
     },
-    validate_ASSIGN_USER(err){
+    validate_ASSIGN_USER(err) {
-      if(this.config.props.assignedUser.length > 0){
+      if (this.config.props.assignedUser.length > 0) {
         return true;
-      }else {
+      } else {
         this.errorInfo = '请指定审批人员'
         err.push(`${this.config.name} 未指定审批人员`)
         return false
       }
     },
-    validate_SELF_SELECT(err){
+    validate_SELF_SELECT(err) {
       return true;
     },
-    validate_LEADER_TOP(err){
+    validate_LEADER_TOP(err) {
       return true;
     },
-    validate_LEADER(err){
+    validate_LEADER(err) {
       return true;
     },
-    validate_ROLE(err){
+    validate_ROLE(err) {
-      if (this.config.props.roleList.length <= 0){
+      if (this.config.props.roleList.length <= 0) {
         this.errorInfo = '请指定负责审批的系统角色'
         err.push(`${this.config.name} 未指定审批角色`)
         return false
       }
       return true;
     },
-    validate_SELF(err){
+    validate_SELF(err) {
       return true;
     },
-    validate_FORM_USER(err){
+    validate_FORM_USER(err) {
-      if (this.config.props.formUser === ''){
+      if (this.config.props.formUser === '') {
         this.errorInfo = '请指定表单中的人员组件'
         err.push(`${this.config.name} 审批人为表单中人员，但未指定`)
         return false
       }
       return true;
     },
-    validate_REFUSE(err){
+    validate_REFUSE(err) {
       return true;
     },
   }

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"  :user-info="config.props.assignedUser"
+  <node :title="config.name" :show-error="showError" :select-user="selectUser" :content="content" :error-info="errorInfo" :show-avatar="true" :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>
@@ -25,6 +25,12 @@ export default {
     }
   },
   computed:{
+    selectUser(){
+      return {
+        show: this.config.props.shouldAdd,
+        multiple: true
+      };
+    },
     viewer(){
       return this.$store.state.diagramMode === 'viewer'
     },

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

@@ -1,27 +1,26 @@
 <template>
   <div :class="{'node': true, 'root': isRoot || !show, 'node-error-state': showError}">
-    <div v-if="show" @click="$emit('selected')" :class="{'node-body': true, 'error': showError}" >
+    <div v-if="show" @click="$emit('selected')" :class="{'node-body': true, 'error': showError}">
       <div>
         <div class="node-body-header" :style="{'background-color': headerBgc}">
           <i :class="headerIcon" style="margin-right: 5px" v-if="(headerIcon || '') !== ''"></i>
           <ellipsis class="name" hover-tip :content="title"/>
-          <i class="el-icon-close" v-if="!isRoot && $store.state.diagramMode !== 'viewer'" style="float:right;" @click="$emit('delNode')"></i>
+          <i class="el-icon-close" v-if="!isRoot && $store.state.diagramMode !== 'viewer'" style="float:right;"
+             @click="$emit('delNode')"></i>
         </div>
         <div class="node-body-content">
           <i :class="leftIcon" v-if="leftIcon"></i>
-          <template v-if="$store.state.diagramMode !== 'viewer'">
+          <template v-if="viewer && selectUser.show">
-            <span class="placeholder" v-if="(content || '').trim() === ''">{{placeholder}}</span>
+            <el-button type="primary" icon="el-icon-plus" circle @click="$refs.userPicker.showUserPicker()"/>
-            <ellipsis :row="3" :content="content" v-else/>
+            <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
-            <i class="el-icon-arrow-right"></i>
+          </template>
+          <template v-else-if="showAvatar">
+            <span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
+            <avatar-ellipsis :row="3" :user-info="userInfo" v-else/>
           </template>
           <template v-else>
-            <template v-if="userInfo.length > 0">
+            <span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
-              <avatar-ellipsis :row="3" :user-info="userInfo"/>
+            <ellipsis :row="3" :content="content" v-else/>
-            </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">
@@ -32,21 +31,29 @@
       </div>
     </div>
     <div class="node-footer">
-      <div v-if="merge" class="branch-merge"><img data-v-1e7b1da5="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABXlJREFUeF7tmm2IVGUUx3/nLkQUqxmkpAVhSPUllZX8EEGhvVgZQWCU6wcpsqi2mXtnoaBwoqLCufeO9oJYUJQiFZWlZPQCfYiIXkylstTyS1oWWeYWCe6cuLsz7t3r3Ll3du6907oz35bnPM9z/r895zznmWeECf6RCa6fDoBOBExwAp0UmOAB0CmCnRTopECbCZi2nivK1CMD7FpXlH+ydqctKZBz9QyjwkqFG4HzfKK/0gpvl/ulmBWIzAHkVmlRDFY2EihwwLFkRhYQxgzAtHW2CpcBc4CpOsg26eK7yVPYVFwu/9ZzPufq2VLhQBxhAk85lvSF2Y5l/3prjQlAvqR3IjwJTKqz6DeGssQuyLfBsbyjz6PcFgeAZyOwzLFk/QnrjHH/RACYtj6ncHuUCDWYXs7Lz367XEn3inB+1NzauMLGsiW3+u1b2b9lAH22LuiCD2IJED5yTbmiZpt3dAbKT7Hmjhjtdi25oPZnK/uH7dtUCpi2vqVwQ1wRWuHhWkW3StpTEb6IO3fIThhwTemuzWll/0QA5G39FTgrtghhs2vKELA7inra6d38HXvusOEnriWXHo+iFvZvGUDfap3VdYzdzQgIHmd5W7cBc2Ovoax1C3KXZ5/E/i3VgCQciNMD+J1Ug55yXjxo7QfgOdFKCvjyeL/C9MgoEBa5przrt0ti/+C+mRVB/8amrWsU7m2Ql/c5lqwJjre9CDZ1DMFnriXzw0SatvZW4FqBW6o2vwGvCGxyLPmw3rym9g8cwy0XQV8Ix2qEgH0C1ziWNCyceVu1uvZrriVLGqVGsainHO7mRyDynlCvEWupCI7Kxcat6BFg+OwW9ohyfSMIcQF44v/sZovAlRH1I7QVTwyAt1Cjy8hfh9hYvepGQogDoI74HYbSXzHwusTYl7FEAURVcdPWN+NAiAJQTzzCda4p+6N8iDPe1CkQZ8FAtY+E0AhA2uKHszTlT1QkhAHIQnwmAKr1IjQS6gHISnxmABpBCALIUnymAMIgKHxf6wMmH6E3cNTtSLLgZXoKNOgAR6UDyqyq7esKk3znfOriM48AXzc5AmGE1EFgWvXPTMS3DcAJ6TA6XDIT31YAoRCEc5JqcuKc8Kn3AVFO+E4BryvJVHzbI8BzwAdgi2vJ4ihgSY//nyIg8jqctPi2RYBp61wV5qsyR2BFVdhBhBe0wtdisNU15VAagoNrZh4BOVsfFcVCODVUoLBn6E2hIBvShpApgLyt3nvhRXFFCWxwLOmNaz8Wu8wA5G31ntQWNOukwD2OJc80Oy+ufSYAciVdJsJLcZ0K2nV1MbuUk51jnd9oXuoACmW9eHCQj49/T+j3RtiJslPgFxXmoVxe11nhPdeUq8clANPWPoXVQef9D6e1saEHVINHUBYF7Q1lnl2QL5OGkHoE5G19GRhVyBQ+L1tyST0xoa/Iygq3IOvGI4BdwIWjHBeecE15IExM3tYfgJmBOetcU2o9Q2IcsoiAw8Gf0qhyU7kgb4QCcPRTlNGvSspmtzD81J7kJ30AJX0fYeHo2seLjiXLG0TA78CZ/nGFB8uWPJakeG+t9AE4+jjK/XGLWtgTusBix5It4w5ArqRLRTjhl14IW40KD/kre66ki0R4p57IrgozS/2yb9wByDvqhbKX07Xv/oIavMfOP6pFb0pdgcqrbkFuTlp8JingbRIaBfEUHUOYltbtMPUaUNNo2rpeYWk8zSNWqvSmeSvMDIAnybT1boWnY0I4aigL7YJ4bXRqn0wBeCqG7gYVVqFcFapKWXt0gP5nizKQmvLqwpkDqAkaanmhB4MelOkI27XCDjHY7pqyN23htfXbBiArgVH7dABEETrZxzsRcLL/h6P0/Qc1qphfvB2K3wAAAABJRU5ErkJggg==" alt=""></div>
+      <div v-if="merge" class="branch-merge">
+        <img data-v-1e7b1da5=""
+             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABXlJREFUeF7tmm2IVGUUx3/nLkQUqxmkpAVhSPUllZX8EEGhvVgZQWCU6wcpsqi2mXtnoaBwoqLCufeO9oJYUJQiFZWlZPQCfYiIXkylstTyS1oWWeYWCe6cuLsz7t3r3Ll3du6907oz35bnPM9z/r895zznmWeECf6RCa6fDoBOBExwAp0UmOAB0CmCnRTopECbCZi2nivK1CMD7FpXlH+ydqctKZBz9QyjwkqFG4HzfKK/0gpvl/ulmBWIzAHkVmlRDFY2EihwwLFkRhYQxgzAtHW2CpcBc4CpOsg26eK7yVPYVFwu/9ZzPufq2VLhQBxhAk85lvSF2Y5l/3prjQlAvqR3IjwJTKqz6DeGssQuyLfBsbyjz6PcFgeAZyOwzLFk/QnrjHH/RACYtj6ncHuUCDWYXs7Lz367XEn3inB+1NzauMLGsiW3+u1b2b9lAH22LuiCD2IJED5yTbmiZpt3dAbKT7Hmjhjtdi25oPZnK/uH7dtUCpi2vqVwQ1wRWuHhWkW3StpTEb6IO3fIThhwTemuzWll/0QA5G39FTgrtghhs2vKELA7inra6d38HXvusOEnriWXHo+iFvZvGUDfap3VdYzdzQgIHmd5W7cBc2Ovoax1C3KXZ5/E/i3VgCQciNMD+J1Ug55yXjxo7QfgOdFKCvjyeL/C9MgoEBa5przrt0ti/+C+mRVB/8amrWsU7m2Ql/c5lqwJjre9CDZ1DMFnriXzw0SatvZW4FqBW6o2vwGvCGxyLPmw3rym9g8cwy0XQV8Ix2qEgH0C1ziWNCyceVu1uvZrriVLGqVGsainHO7mRyDynlCvEWupCI7Kxcat6BFg+OwW9ohyfSMIcQF44v/sZovAlRH1I7QVTwyAt1Cjy8hfh9hYvepGQogDoI74HYbSXzHwusTYl7FEAURVcdPWN+NAiAJQTzzCda4p+6N8iDPe1CkQZ8FAtY+E0AhA2uKHszTlT1QkhAHIQnwmAKr1IjQS6gHISnxmABpBCALIUnymAMIgKHxf6wMmH6E3cNTtSLLgZXoKNOgAR6UDyqyq7esKk3znfOriM48AXzc5AmGE1EFgWvXPTMS3DcAJ6TA6XDIT31YAoRCEc5JqcuKc8Kn3AVFO+E4BryvJVHzbI8BzwAdgi2vJ4ihgSY//nyIg8jqctPi2RYBp61wV5qsyR2BFVdhBhBe0wtdisNU15VAagoNrZh4BOVsfFcVCODVUoLBn6E2hIBvShpApgLyt3nvhRXFFCWxwLOmNaz8Wu8wA5G31ntQWNOukwD2OJc80Oy+ufSYAciVdJsJLcZ0K2nV1MbuUk51jnd9oXuoACmW9eHCQj49/T+j3RtiJslPgFxXmoVxe11nhPdeUq8clANPWPoXVQef9D6e1saEHVINHUBYF7Q1lnl2QL5OGkHoE5G19GRhVyBQ+L1tyST0xoa/Iygq3IOvGI4BdwIWjHBeecE15IExM3tYfgJmBOetcU2o9Q2IcsoiAw8Gf0qhyU7kgb4QCcPRTlNGvSspmtzD81J7kJ30AJX0fYeHo2seLjiXLG0TA78CZ/nGFB8uWPJakeG+t9AE4+jjK/XGLWtgTusBix5It4w5ArqRLRTjhl14IW40KD/kre66ki0R4p57IrgozS/2yb9wByDvqhbKX07Xv/oIavMfOP6pFb0pdgcqrbkFuTlp8JingbRIaBfEUHUOYltbtMPUaUNNo2rpeYWk8zSNWqvSmeSvMDIAnybT1boWnY0I4aigL7YJ4bXRqn0wBeCqG7gYVVqFcFapKWXt0gP5nizKQmvLqwpkDqAkaanmhB4MelOkI27XCDjHY7pqyN23htfXbBiArgVH7dABEETrZxzsRcLL/h6P0/Qc1qphfvB2K3wAAAABJRU5ErkJggg=="
+             alt=""></div>
       <div class="btn">
-        <insert-button v-show="$store.state.diagramMode !== 'viewer'" @insertNode="type => $emit('insertNode', type)"></insert-button>
+        <insert-button v-show="$store.state.diagramMode !== 'viewer'"
+                       @insertNode="type => $emit('insertNode', type)"></insert-button>
       </div>
     </div>
+    <user-picker v-if="selectUser.show" title="请选择系统角色" :multiple="selectUser.multiple" ref="userPicker"
+                 :v-model="userInfo"
+                 @ok="selectedUser"/>
   </div>
 </template>
 
 <script>
+import UserPicker from "@/components/common/UserPicker";
 import InsertButton from '@/views/common/InsertButton.vue'
 
 export default {
   name: "Node",
-  components: {InsertButton},
+  components: {InsertButton, UserPicker},
-  props:{
+  props: {
     //是否为根节点
     isRoot: {
       type: Boolean,
@@ -70,13 +77,29 @@ export default {
     //节点内容区域文字
     userInfo: {
       type: Array,
-      default: []
+      default(){
+        return []
+      }
     },
-    title:{
+    //节点内容区域文字
+    showAvatar: {
+      type: Boolean,
+      default: false
+    },
+    selectUser: {
+      type: Object,
+      default() {
+        return {
+          show: false,
+          multiple: false,
+        }
+      }
+    },
+    title: {
       type: String,
       default: "标题"
     },
-    placeholder:{
+    placeholder: {
       type: String,
       default: "请设置"
     },
@@ -86,49 +109,71 @@ export default {
       default: undefined
     },
     //头部图标
-    headerIcon:{
+    headerIcon: {
       type: String,
       default: ''
     },
     //头部背景色
-    headerBgc:{
+    headerBgc: {
       type: String,
       default: '#576a95'
     },
     //是否显示错误状态
-    showError:{
+    showError: {
       type: Boolean,
       default: false
     },
-    errorInfo:{
+    errorInfo: {
       type: String,
       default: '无信息'
     },
   },
   data() {
-    return {}
+    return{}
   },
-  methods: {}
+  computed: {
+    viewer() {
+      return this.$store.state.diagramMode === 'viewer'
+    },
+  },
+  methods: {
+    selectedUser(select) {
+      let userInfoList = []
+      for (let val of select) {
+        let userInfo = {
+          id: val.id,
+          name: val.name,
+          avatar: val.avatar,
+        }
+        userInfoList.push(userInfo)
+      }
+      this.userInfo = userInfoList
+      this.$store.state.selectUserMap.set(this.$store.state.selectedNode.id,userInfoList)
+    },
+  }
 }
 </script>
 
 <style lang="less" scoped>
 
-.root{
+.root {
-  &:before{
+  &:before {
     display: none !important;
   }
 }
-.node-error-state{
+
-  .node-body{
+.node-error-state {
+  .node-body {
     box-shadow: 0px 0px 5px 0px #F56C6C !important;
   }
 }
-.node{
+
+.node {
   padding: 0 50px;
   width: 220px;
   position: relative;
-  &:before{
+
+  &:before {
     content: '';
     position: absolute;
     top: -12px;
@@ -141,15 +186,18 @@ export default {
     border-color: #CACACA transparent transparent;
     background: #F5F5F7;
   }
-  .node-body{
+
+  .node-body {
     cursor: pointer;
     max-height: 120px;
     position: relative;
     border-radius: 5px;
     background-color: white;
     box-shadow: 0px 0px 5px 0px #d8d8d8;
-    &:hover{
+
+    &:hover {
       box-shadow: 0px 0px 3px 0px @theme-primary;
+
       .node-body-header {
         .el-icon-close {
           display: inline;
@@ -157,36 +205,43 @@ export default {
         }
       }
     }
-    .node-body-header{
+
+    .node-body-header {
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
       padding: 5px 15px;
       color: white;
       font-size: xx-small;
-      .el-icon-close{
+
+      .el-icon-close {
         display: none;
       }
-      .name{
+
+      .name {
         height: 14px;
         width: 150px;
         display: inline-block
       }
     }
-    .node-body-content{
+
+    .node-body-content {
       padding: 18px;
       color: #656363;
       font-size: 14px;
-      i{
+
+      i {
         position: absolute;
         top: 55%;
         right: 5px;
         font-size: medium;
       }
-      .placeholder{
+
+      .placeholder {
         color: #8c8c8c;
       }
     }
-    .node-error{
+
+    .node-error {
       position: absolute;
       right: -40px;
       top: 20px;
@@ -195,9 +250,10 @@ export default {
     }
   }
 
-  .node-footer{
+  .node-footer {
     position: relative;
-    .branch-merge{
+
+    .branch-merge {
       font-size: 12px;
       display: flex;
       width: 38px;
@@ -210,17 +266,20 @@ export default {
       flex-direction: column;
       box-shadow: 0 0 5px 0 #d8d8d8;
     }
-    .btn{
+
+    .btn {
       width: 100%;
       display: flex;
       padding: 20px 0 32px;
       justify-content: center;
       z-index: 10;
     }
-    /deep/ .el-button{
+
+    /deep/ .el-button {
       height: 32px;
     }
-    &::before{
+
+    &::before {
       content: "";
       position: absolute;
       top: 0;

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

@@ -1,5 +1,5 @@
 <template>
-  <node title="发起人" :is-root="true" :content="content" :user-info="config.props.assignedUser"
+  <node title="发起人" :is-root="true" :content="content" show-avatar :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>

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

@@ -6,7 +6,7 @@
     </div>
     <div style="display: flex;justify-content: center;flex-direction: column;min-width: 1036px;">
         <span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
-      <process-diagram-viewer/>
+      <process-diagram-viewer ref="processDiagramViewer"/>
       <!--渲染流程执行过程-->
       <el-timeline :reverse="false">
         <!--        <el-timeline-item v-for="(activity, index) in activities" :key="index">-->
@@ -75,6 +75,7 @@ export default {
     },
     validate(call) {
       this.$refs.initiateForm.validate(call);
+      this.$refs.processDiagramViewer.validate(call);
     }
   }
 };

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

@@ -122,7 +122,8 @@ export default {
       let processInstance = this.$refs.processInstance;
       let paramsData = {
         processDefinitionId: this.selectForm.processDefinitionId,
-        formData: JSON.stringify(processInstance.formData)
+        formData: JSON.stringify(processInstance.formData),
+        selectUserMap: this.$store.state.selectUserMap
       }
       processInstance.validate(valid => {
         if (valid) {