Merge pull request 'clay : 任意节点退回完成' (#34) from master into pro

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

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

@@ -4,9 +4,8 @@
        :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"
+      <div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
+          <el-avatar size="large"
                      :src="user.avatar"></el-avatar>
           <div v-if="user.icon"
                class="el-timeline-item__node" :style="{
@@ -17,8 +16,9 @@
                :class="user.icon"
             ></i>
           </div>
-        </div>
-        <div>{{user.name}}</div>
+          <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
+            <span class="item_name">{{ user.name }}</span>
+          </el-tooltip>
       </div>
     </div>
   </div>
@@ -27,20 +27,20 @@
 <script>
 export default {
   name: "AvatarEllipsis",
-  install(Vue){
+  install(Vue) {
     Vue.component('avatarEllipsis', this)
   },
   components: {},
-  props:{
+  props: {
     row: {
       type: Number,
       default: 1
     },
-    hoverTip:{
+    hoverTip: {
       type: Boolean,
       default: false
     },
-    userInfo:{
+    userInfo: {
       type: Array,
       default: []
     }
@@ -52,7 +52,7 @@ export default {
     return {}
   },
   methods: {
-    init(){
+    init() {
       for (let user of this.userInfo) {
         this.initUser(user)
       }
@@ -60,26 +60,26 @@ export default {
     initUser(user) {
       let state = user.state
       //创建节点
-      if (state === 'create') {
+      if (state === 'CREATE') {
         this.$set(user, "icon", "el-icon-check")
         this.$set(user, "color", "#0bbd87")
       }
       //审批通过
-      if (state === 'agree') {
+      if (state === 'AGREE') {
         this.$set(user, "icon", "el-icon-check")
         this.$set(user, "color", "#0bbd87")
       }
       //审批处理中
-      if (state === 'running') {
+      if (state === 'RUNNING') {
         this.$set(user, "icon", "el-icon-loading")
         this.$set(user, "color", "#f78f5f")
       }
       //拒绝后评论
-      if (state === 'refuse') {
+      if (state === 'REFUSE') {
         this.$set(user, "icon", "el-icon-close")
         this.$set(user, "color", "#f56c6c")
       }
-      if (state === 'pass'){
+      if (state === 'PASS') {
         this.$set(user, "icon", "el-icon-more")
         this.$set(user, "color", "#c0c4cc")
       }
@@ -90,5 +90,18 @@ export default {
 </script>
 
 <style scoped>
-
+.avatar_name {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 5px;
+  /*width: 45px;*/
+}
+.item_name{
+  width: 45px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
 </style>

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

@@ -19,7 +19,6 @@
             <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
                      :default-expanded-keys="expandedKeys"
                      @node-click="handleChange"
-                     :filter-node-method="filterNode"
             >
               <div class="tree-node" slot-scope="{  node,data }">
                 <div v-if="data.type === 0" style="display: flex;align-items: center">
@@ -70,6 +69,12 @@ export default {
         return [];
       }
     },
+    selected: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
     multiple: { //是否多选
       default: true,
       type: Boolean
@@ -127,33 +132,43 @@ export default {
     },
     getList() {
       getUserTree(this.radio, this.chooseId).then(res => {
-        if (res.data) {
+        console.log('人员', res.data)
+        // if (res.data) {
           if (this.selectItem.type === -1 || this.selectItem.type === -2) {
-            this.dataList = this.setData(res.data)
-          } else if (this.selectItem.type === 1) {
+            this.dataList = res.data
+          }
+          else if (this.selectItem.type === 1) {
             this.selectItem.children = res.data
           } else if (this.selectItem.type === 2) {
-            this.selectItem.children = this.setData(res.data)
-          }
+            this.selectItem.children = res.data
           }
+        // }
       });
     },
     setData(source) {
-      for (let item of source) {
-        this.$set(item, "value", this.selectItem.value + "-" + item.id)
-        this.$set(item, "children", [])
-      }
+      // for (let item of source) {
+      //   this.$set(item, "value", this.selectItem.value + "-" + item.id)
+      // }
       return source;
     },
     //通过关键字过滤树节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
-    },
+    // filterNode(value, data) {
+    //   if (!value) return true;
+    //   return data.name.indexOf(value) !== -1;
+    // },
     //用于用户选择
     showUserPicker() {
-      this.getList();
+      this.selectItem = {
+        type: -1,
+        value: '0',
+      }
+      this.dataList = []
+      // this.selectList = []
+      this.chooseId = 0
+      this.radio = 0
       this.visible = true;
+      this.getList();
+
     },
     //渲染子节点用户或部门及用户数据
     handleChange(item, check) {
@@ -162,8 +177,8 @@ export default {
       if (item.type !== 0) {
         this.chooseId = item.id
         this.getList()
+        return
       }
-      if (!item.children) {
       if (this.multiple) {
         //不添加重复的数据到右边
         for (let i = 0; i < this.selectList.length; i++) {
@@ -176,7 +191,6 @@ export default {
       } else {
         this.selectList = [item];
       }
-      }
       // this._value = this.selectList
     },
     //右侧的×
@@ -202,6 +216,7 @@ export default {
     //确定按钮
     selectConfirm() {
       this.$emit("ok", this.selectList);
+      // this.dataList = []
       this.visible = false;
     }
   }

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

@@ -9,7 +9,7 @@
         <el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.userPicker.showUserPicker()">
           选择人员
         </el-button>
-        <user-select type="user" :multiple="multiple" ref="userPicker" :selected="_value" @ok="selected"/>
+        <user-select :multiple="multiple" ref="userPicker"  title="请选择系统用户" :v-mode="_value" @ok="selected"/>
         <span class="placeholder"> {{ placeholder }}</span>
         <div style="display: flex;">
           <div class="userStyle" v-for="(user, i) in _value" :key="i">

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

@@ -9,11 +9,11 @@
                         placement="top">
         <el-card>
           <div style="display: flex;">
-            <div v-for="(user,index) in operation.userInfo" :key="index">
-              <el-avatar style="margin-right: 5px;" size="large"
+            <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" :style="{
+                     class="el-timeline-item__node avatar_icon" :style="{
                       backgroundColor: user.color
                     }">
                   <i v-if="user.icon"
@@ -21,6 +21,9 @@
                      :class="user.icon"
                   ></i>
                 </div>
+              <el-tooltip  effect="dark" :content="user.name" placement="bottom-start">
+                <span class="username">{{ user.name }}</span>
+              </el-tooltip>
             </div>
             <div style="margin-left: 10px;">
               <div style="color: #c0bebe">{{ operation.operationName }}</div>
@@ -145,26 +148,26 @@ export default {
     initUser(user) {
       let state = user.state
       //创建节点
-      if (state === 'create') {
+      if (state === 'CREATE') {
         this.$set(user, "icon", "el-icon-check")
         this.$set(user, "color", "#0bbd87")
       }
       //审批通过
-      if (state === 'agree') {
+      if (state === 'AGREE') {
         this.$set(user, "icon", "el-icon-check")
         this.$set(user, "color", "#0bbd87")
       }
       //审批处理中
-      if (state === 'running') {
+      if (state === 'RUNNING') {
         this.$set(user, "icon", "el-icon-loading")
         this.$set(user, "color", "#f78f5f")
       }
       //拒绝后评论
-      if (state === 'refuse') {
+      if (state === 'REFUSE') {
         this.$set(user, "icon", "el-icon-close")
         this.$set(user, "color", "#f56c6c")
       }
-      if (state === 'pass'){
+      if (state === 'PASS'){
         this.$set(user, "icon", "el-icon-more")
         this.$set(user, "color", "#c0c4cc")
       }
@@ -174,47 +177,47 @@ export default {
       let state = operation.state
       let type = operation.operation
       //创建节点
-      if (state === 'create') {
+      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') {
         this.$set(operation, "icon", "el-icon-check")
         this.$set(operation, "color", "#0bbd87")
         this.$set(operation, "remark", operation.userInfo.name + '  (已同意)')
       }
-      if (state === 'pass'){
+      if (state === 'PASS'){
         this.$set(operation, "icon", "el-icon-more")
         this.$set(operation, "color", "#c0c4cc")
       }
       //审批处理中
-      if (state === 'running') {
+      if (state === 'RUNNING') {
         this.$set(operation, "icon", "el-icon-loading")
         this.$set(operation, "color", "#f78f5f")
         this.$set(operation, "remark", operation.userInfo.name + '  (处理中)')
       }
       //抄送
-      if (type === 'cc') {
+      if (type === 'CC') {
         this.$set(operation, "icon", "el-icon-s-promotion")
         this.$set(operation, "color", "#3395f8")
         this.$set(operation, "remark", operation.userInfo.name + '  (抄送成功)')
       }
       //评论
-      if (state === 'comment') {
+      if (state === 'COMMENT') {
         this.$set(operation, "icon", "el-icon-chat-dot-round")
         this.$set(operation, "color", "#0bbd87")
         this.$set(operation, "remark", operation.userInfo.name + '  (添加了评论)')
       }
       //拒绝后评论
-      if (state === 'refuse' && type === 'comment') {
+      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 + '  (填写拒绝理由)')
       }
       //拒绝操作
-      if (state === 'refuse' && type === 'opinion') {
+      if (state === 'REFUSE' && type === 'OPINION') {
         this.$set(operation, "icon", "el-icon-close")
         this.$set(operation, "color", "#f56c6c")
         this.$set(operation, "remark", operation.userInfo.name + '  (拒绝)')
@@ -230,5 +233,25 @@ export default {
 /deep/ .el-card__body, .el-main {
   padding: 10px;
 }
-
+.avatar_name{
+  width: 45px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  margin-right: 5px;
+}
+.avatar_icon{
+  position: absolute;
+  bottom: 16px;
+  right: -2px;
+}
+.username{
+  width: 45px;
+  padding-top: 2px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
 </style>

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

@@ -27,7 +27,7 @@ export default {
   computed:{
     selectUser(){
       return {
-        show: this.config.props.shouldAdd,
+        show: this.config.props.assignedType !== 'ASSIGN_USER',
         multiple: true
       };
     },

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

@@ -11,8 +11,10 @@
         <div class="node-body-content">
           <i :class="leftIcon" v-if="leftIcon"></i>
           <template v-if="viewer && selectUser.show">
-            <el-button type="primary" icon="el-icon-plus" circle @click="$refs.userPicker.showUserPicker()"/>
+            <div class="avatar_button">
               <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
+              <el-button type="primary" icon="el-icon-plus" circle @click="$refs.userPicker.showUserPicker()"/>
+            </div>
           </template>
           <template v-else-if="showAvatar">
             <span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
@@ -40,8 +42,8 @@
                        @insertNode="type => $emit('insertNode', type)"></insert-button>
       </div>
     </div>
-    <user-picker v-if="selectUser.show" title="请选择系统角色" :multiple="selectUser.multiple" ref="userPicker"
-                 :v-model="userInfo"
+    <user-picker v-if="selectUser.show" title="请选择系统用户" :multiple="selectUser.multiple" ref="userPicker"
+                 :selected="_userInfo"
                  @ok="selectedUser"/>
   </div>
 </template>
@@ -77,7 +79,7 @@ export default {
     //节点内容区域文字
     userInfo: {
       type: Array,
-      default(){
+      default() {
         return []
       }
     },
@@ -129,12 +131,20 @@ export default {
     },
   },
   data() {
-    return{}
+    return {}
   },
   computed: {
     viewer() {
       return this.$store.state.diagramMode === 'viewer'
     },
+    _userInfo: {
+      get() {
+        return this.userInfo
+      },
+      set(val) {
+        this.userInfo = val
+      }
+    },
   },
   methods: {
     selectedUser(select) {
@@ -147,8 +157,9 @@ export default {
         }
         userInfoList.push(userInfo)
       }
-      this.userInfo = userInfoList
-      this.$store.state.selectUserMap.set(this.$store.state.selectedNode.id,userInfoList)
+      //todo 确认是会包错,邓洁处理
+      this._userInfo = userInfoList
+      this.$store.state.selectUserMap.set(this.$store.state.selectedNode.id, userInfoList)
     },
   }
 }
@@ -229,6 +240,16 @@ export default {
       color: #656363;
       font-size: 14px;
 
+      .avatar_button {
+        display: flex;
+
+        button {
+          height: 40px;
+          flex-shrink: 0;
+          flex-grow: 0;
+        }
+      }
+
       i {
         position: absolute;
         top: 55%;

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

@@ -120,10 +120,12 @@ export default {
     // todo 提交流程测试
     submitForm(){
       let processInstance = this.$refs.processInstance;
+      let selectUserMap = {}
+      this.$store.state.selectUserMap.forEach(((value, key) => {selectUserMap[key]=value}))
       let paramsData = {
         processDefinitionId: this.selectForm.processDefinitionId,
         formData: JSON.stringify(processInstance.formData),
-        selectUserMap: this.$store.state.selectUserMap
+        optionalUser: selectUserMap
       }
       processInstance.validate(valid => {
         if (valid) {