fix -- 重写前端选择审批用户模块，添加候选组功能（目前支持"角色"和"部门"）。流程图不兼容之前版本！

2022-04-24 16:01:03 +08:00
parent 9295c85421
commit 6ad21a9c40
11 changed files with 668 additions and 310 deletions
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/constant/ProcessConstants.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/constant/ProcessConstants.java
@@ -60,11 +60,6 @@ public class ProcessConstants {
     */
    public static final String PROCESS_CUSTOM_USER_TYPE = "userType";

-    /**
-     * 初始化人员
-     */
-    public static final String PROCESS_INITIATOR = "INITIATOR";
-

    /**
     * 流程跳过
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/constant/TaskConstants.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/common/constant/TaskConstants.java
@@ -0,0 +1,23 @@
+package com.ruoyi.flowable.common.constant;
+
+/**
+ * @author konbai
+ * @createTime 2022/4/24 13:24
+ */
+public class TaskConstants {
+
+    /**
+     * 流程发起人
+     */
+    public static final String PROCESS_INITIATOR = "initiator";
+
+    /**
+     * 角色候选组前缀
+     */
+    public static final String ROLE_GROUP_PREFIX = "ROLE";
+
+    /**
+     * 部门候选组前缀
+     */
+    public static final String DEPT_GROUP_PREFIX = "DEPT";
+}
--- a/ruoyi-flowable/src/main/java/com/ruoyi/flowable/utils/TaskUtils.java
+++ b/ruoyi-flowable/src/main/java/com/ruoyi/flowable/utils/TaskUtils.java
@@ -0,0 +1,41 @@
+package com.ruoyi.flowable.utils;
+
+import cn.hutool.core.util.ObjectUtil;
+import com.ruoyi.common.core.domain.model.LoginUser;
+import com.ruoyi.common.helper.LoginHelper;
+import com.ruoyi.flowable.common.constant.TaskConstants;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * 工作流任务工具类
+ *
+ * @author konbai
+ * @createTime 2022/4/24 12:42
+ */
+public class TaskUtils {
+
+    public static String getUserId() {
+        return String.valueOf(LoginHelper.getUserId());
+    }
+
+    /**
+     * 获取用户组信息
+     *
+     * @return candidateGroup
+     */
+    public static List<String> getCandidateGroup() {
+        List<String> list = new ArrayList<>();
+        LoginUser user = LoginHelper.getLoginUser();
+        if (ObjectUtil.isNotNull(user)) {
+            if (ObjectUtil.isNotEmpty(user.getRoles())) {
+                user.getRoles().forEach(role -> list.add(TaskConstants.ROLE_GROUP_PREFIX + role.getRoleId()));
+            }
+            if (ObjectUtil.isNotNull(user.getDeptId())) {
+                list.add(TaskConstants.DEPT_GROUP_PREFIX + user.getDeptId());
+            }
+        }
+        return list;
+    }
+}
--- a/ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfInstanceServiceImpl.java
+++ b/ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfInstanceServiceImpl.java
@@ -5,12 +5,15 @@ import cn.hutool.core.collection.CollUtil;
 import cn.hutool.core.date.BetweenFormatter;
 import cn.hutool.core.date.DateUtil;
 import cn.hutool.core.util.ObjectUtil;
+import com.ruoyi.common.core.domain.entity.SysDept;
 import com.ruoyi.common.core.domain.entity.SysRole;
 import com.ruoyi.common.core.domain.entity.SysUser;
 import com.ruoyi.common.exception.ServiceException;
 import com.ruoyi.common.utils.JsonUtils;
 import com.ruoyi.common.utils.StringUtils;
+import com.ruoyi.flowable.common.constant.TaskConstants;
 import com.ruoyi.flowable.factory.FlowServiceFactory;
+import com.ruoyi.system.service.ISysDeptService;
 import com.ruoyi.system.service.ISysRoleService;
 import com.ruoyi.system.service.ISysUserService;
 import com.ruoyi.workflow.domain.bo.WfTaskBo;
@@ -44,6 +47,7 @@ public class WfInstanceServiceImpl extends FlowServiceFactory implements IWfInst
    private final IWfDeployFormService deployFormService;
    private final ISysUserService userService;
    private final ISysRoleService roleService;
+    private final ISysDeptService deptService;

    /**
     * 结束流程实例
@@ -153,8 +157,15 @@ public class WfInstanceServiceImpl extends FlowServiceFactory implements IWfInst
                            stringBuilder.append(user.getNickName()).append(",");
                        }
                        if (StringUtils.isNotBlank(identityLink.getGroupId())) {
-                            SysRole role = roleService.selectRoleById(Long.parseLong(identityLink.getGroupId()));
-                            stringBuilder.append(role.getRoleName()).append(",");
+                            if (identityLink.getGroupId().startsWith(TaskConstants.ROLE_GROUP_PREFIX)) {
+                                Long roleId = Long.parseLong(StringUtils.stripStart(identityLink.getGroupId(), TaskConstants.ROLE_GROUP_PREFIX));
+                                SysRole role = roleService.selectRoleById(roleId);
+                                stringBuilder.append(role.getRoleName()).append(",");
+                            } else if (identityLink.getGroupId().startsWith(TaskConstants.DEPT_GROUP_PREFIX)) {
+                                Long deptId = Long.parseLong(StringUtils.stripStart(identityLink.getGroupId(), TaskConstants.DEPT_GROUP_PREFIX));
+                                SysDept dept = deptService.selectDeptById(deptId);
+                                stringBuilder.append(dept.getDeptName()).append(",");
+                            }
                        }
                    }
                }
--- a/ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfProcessServiceImpl.java
+++ b/ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfProcessServiceImpl.java
@@ -12,8 +12,9 @@ import com.ruoyi.common.exception.ServiceException;
 import com.ruoyi.common.helper.LoginHelper;
 import com.ruoyi.common.utils.DateUtils;
 import com.ruoyi.common.utils.StringUtils;
-import com.ruoyi.flowable.common.constant.ProcessConstants;
+import com.ruoyi.flowable.common.constant.TaskConstants;
 import com.ruoyi.flowable.factory.FlowServiceFactory;
+import com.ruoyi.flowable.utils.TaskUtils;
 import com.ruoyi.system.service.ISysUserService;
 import com.ruoyi.workflow.domain.vo.WfDefinitionVo;
 import com.ruoyi.workflow.domain.vo.WfTaskVo;
@@ -201,6 +202,7 @@ public class WfProcessServiceImpl extends FlowServiceFactory implements IWfProce
            .active()
            .includeProcessVariables()
            .taskCandidateOrAssigned(userId.toString())
+            .taskCandidateGroupIn(TaskUtils.getCandidateGroup())
            .orderByTaskCreateTime().desc();
        page.setTotal(taskQuery.count());
        int offset = pageQuery.getPageSize() * (pageQuery.getPageNum() - 1);
@@ -305,7 +307,7 @@ public class WfProcessServiceImpl extends FlowServiceFactory implements IWfProce
    private void buildProcessVariables(Map<String, Object> variables) {
        String userIdStr = LoginHelper.getUserId().toString();
        identityService.setAuthenticatedUserId(userIdStr);
-        variables.put(ProcessConstants.PROCESS_INITIATOR, userIdStr);
+        variables.put(TaskConstants.PROCESS_INITIATOR, userIdStr);
    }


--- a/ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfTaskServiceImpl.java
+++ b/ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfTaskServiceImpl.java
@@ -14,6 +14,7 @@ import com.ruoyi.common.exception.ServiceException;
 import com.ruoyi.common.helper.LoginHelper;
 import com.ruoyi.common.utils.StringUtils;
 import com.ruoyi.flowable.common.constant.ProcessConstants;
+import com.ruoyi.flowable.common.constant.TaskConstants;
 import com.ruoyi.flowable.common.enums.FlowComment;
 import com.ruoyi.flowable.factory.FlowServiceFactory;
 import com.ruoyi.flowable.flow.CustomProcessDiagramGenerator;
@@ -840,7 +841,7 @@ public class WfTaskServiceImpl extends FlowServiceFactory implements IWfTaskServ
        // 给第一步申请人节点设置任务执行人和意见 todo:第一个节点不设置为申请人节点有点问题？
        Task task = taskService.createTaskQuery().processInstanceId(processInstance.getProcessInstanceId()).singleResult();
        if (Objects.nonNull(task)) {
-            String userIdStr = (String) variables.get(ProcessConstants.PROCESS_INITIATOR);
+            String userIdStr = (String) variables.get(TaskConstants.PROCESS_INITIATOR);
            if (!StrUtil.equalsAny(task.getAssignee(), userIdStr)) {
                throw new ServiceException("数据验证失败，该工作流第一个用户任务的指派人并非当前用户，不能执行该操作！");
            }
--- a/ruoyi-ui/src/components/TreeSelect/index.vue
+++ b/ruoyi-ui/src/components/TreeSelect/index.vue
@@ -0,0 +1,306 @@
+<template>
+  <div>
+    <div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div>
+    <el-popover placement="bottom-start" :width="width" trigger="manual" v-model="isShowSelect" @hide="popoverHide">
+      <el-select
+        slot="reference"
+        ref="select"
+        :size="size"
+        v-model="selectedData"
+        :multiple="multiple"
+        :clearable="clearable"
+        :collapse-tags="collapseTags"
+        @click.native="isShowSelect = !isShowSelect"
+        @remove-tag="removeSelectedNodes"
+        @clear="removeSelectedNode"
+        @change="changeSelectedNodes"
+        class="tree-select"
+      >
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-tree
+        class="common-tree"
+        ref="tree"
+        :style="`width: 100%; ${height}px`"
+        :data="data"
+        :props="defaultProps"
+        :show-checkbox="multiple"
+        :node-key="nodeKey"
+        :check-strictly="checkStrictly"
+        default-expand-all
+        :expand-on-click-node="false"
+        :check-on-click-node="multiple"
+        :highlight-current="true"
+        @node-click="handleNodeClick"
+        @check-change="handleCheckChange"
+      />
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tree-select',
+  props: {
+    // 树结构数据
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    defaultProps: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    // 配置是否可多选
+    multiple: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    // 配置是否可清空选择
+    clearable: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    // 配置多选时是否将选中值按文字的形式展示
+    collapseTags: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    nodeKey: {
+      type: String,
+      default() {
+        return 'id';
+      }
+    },
+    // 显示复选框情况下，是否严格遵循父子不互相关联
+    checkStrictly: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    // 默认选中的节点key数组
+    checkedKeys: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    size: {
+      type: String,
+      default() {
+        return 'small';
+      }
+    },
+    width: {
+      type: Number,
+      default() {
+        return 250;
+      }
+    },
+    height: {
+      type: Number,
+      default() {
+        return 300;
+      }
+    }
+  },
+  data() {
+    return {
+      isShowSelect: false, // 是否显示树状选择器
+      options: [],
+      selectedData: [], // 选中的节点
+      style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;',
+      selectStyle: 'width:' + (this.width + 24) + 'px;',
+      checkedIds: [],
+      checkedData: []
+    };
+  },
+  mounted() {
+    this.initCheckedData();
+  },
+  methods: {
+    // 单选时点击tree节点，设置select选项
+    setSelectOption(node) {
+      let tmpMap = {};
+      tmpMap.value = node.key;
+      tmpMap.label = node.label;
+      this.options = [];
+      this.options.push(tmpMap);
+      this.selectedData = node.key;
+    },
+    // 单选，选中传进来的节点
+    checkSelectedNode(checkedKeys) {
+      var item = checkedKeys[0];
+      this.$refs.tree.setCurrentKey(item);
+      var node = this.$refs.tree.getNode(item);
+      this.setSelectOption(node);
+    },
+    // 多选，勾选上传进来的节点
+    checkSelectedNodes(checkedKeys) {
+      this.$refs.tree.setCheckedKeys(checkedKeys);
+    },
+    // 单选，清空选中
+    clearSelectedNode() {
+      this.$refs.tree.setCurrentKey(null);
+    },
+    // 多选，清空所有勾选
+    clearSelectedNodes() {
+      var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
+      for (let i = 0; i < checkedKeys.length; i++) {
+        this.$refs.tree.setChecked(checkedKeys[i], false);
+      }
+    },
+    initCheckedData() {
+      if (this.multiple) {
+        // 多选
+        if (this.checkedKeys.length > 0) {
+          this.selectedData = this.checkedKeys;
+          this.checkSelectedNodes(this.checkedKeys);
+        } else {
+          this.selectedData = '';
+          this.clearSelectedNodes();
+        }
+      } else {
+        // 单选
+        if (this.checkedKeys.length > 0) {
+          this.selectedData = this.checkedKeys[0];
+          this.checkSelectedNode(this.checkedKeys);
+        } else {
+          this.selectedData = '';
+          this.clearSelectedNode();
+        }
+      }
+    },
+    a2b(ls) {
+      return ls.map(obj => {
+        let result = { id: '', text: '' };
+        if (obj.children && obj.children.length > 0) {
+          result.id = obj.value;
+          result.text = obj.label;
+          result.arr = a2b(obj.children);
+          return result;
+        } else {
+          result.id = obj.value;
+          result.text = obj.label;
+          return result;
+        }
+      });
+    },
+    popoverHide() {
+      if (this.multiple) {
+        this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
+        this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被选中的节点所组成的数组数据
+      } else {
+        this.checkedIds = this.$refs.tree.getCurrentKey();
+        this.checkedData = this.$refs.tree.getCurrentNode();
+      }
+      this.$emit('checked-change', this.checkedIds, this.checkedData);
+    },
+    // 单选，节点被点击时的回调,返回被点击的节点数据
+    handleNodeClick(data, node) {
+      if (!this.multiple) {
+        this.setSelectOption(node);
+        this.isShowSelect = !this.isShowSelect;
+        this.$emit('change', this.selectedData);
+      }
+    },
+    // 多选，节点勾选状态发生变化时的回调
+    handleCheckChange() {
+      var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
+      this.options = checkedKeys.map((item) => {
+        var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
+        let tmpMap = {};
+        tmpMap.value = node.key;
+        tmpMap.label = node.label;
+        return tmpMap;
+      });
+      this.selectedData = this.options.map((item) => {
+        return item.value;
+      });
+      this.$emit('change', this.selectedData);
+    },
+    // 多选,删除任一select选项的回调
+    removeSelectedNodes(val) {
+      this.$refs.tree.setChecked(val, false);
+      var node = this.$refs.tree.getNode(val);
+      if (!this.checkStrictly && node.childNodes.length > 0) {
+        this.treeToList(node).map(item => {
+          if (item.childNodes.length <= 0) {
+            this.$refs.tree.setChecked(item, false);
+          }
+        });
+        this.handleCheckChange();
+      }
+      this.$emit('change', this.selectedData);
+    },
+    treeToList(tree) {
+      var queen = [];
+      var out = [];
+      queen = queen.concat(tree);
+      while (queen.length) {
+        var first = queen.shift();
+        if (first.childNodes) {
+          queen = queen.concat(first.childNodes);
+        }
+        out.push(first);
+      }
+      return out;
+    },
+    // 单选,清空select输入框的回调
+    removeSelectedNode() {
+      this.clearSelectedNode();
+      this.$emit('change', this.selectedData);
+    },
+    // 选中的select选项改变的回调
+    changeSelectedNodes(selectedData) {
+      // 多选,清空select输入框时，清除树勾选
+      if (this.multiple && selectedData.length <= 0) {
+        this.clearSelectedNodes();
+      }
+      this.$emit('change', this.selectedData);
+    }
+  },
+  watch: {
+    isShowSelect(val) {
+      // 隐藏select自带的下拉框
+      this.$refs.select.blur();
+    },
+    checkedKeys(val) {
+      if (!val) return;
+      this.checkedKeys = val;
+      this.initCheckedData();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 11;
+}
+
+.common-tree {
+  overflow: auto;
+}
+
+.tree-select {
+  z-index: 111;
+}
+</style>
--- a/ruoyi-ui/src/plugins/package/designer/plugins/descriptor/flowableDescriptor.json
+++ b/ruoyi-ui/src/plugins/package/designer/plugins/descriptor/flowableDescriptor.json
@@ -344,6 +344,11 @@
      "name": "Assignable",
      "extends": [ "bpmn:UserTask" ],
      "properties": [
+        {
+          "name": "dataType",
+          "isAttr": true,
+          "type": "String"
+        },
        {
          "name": "assignee",
          "isAttr": true,
@@ -364,6 +369,11 @@
          "isAttr": true,
          "type": "String"
        },
+        {
+          "name": "text",
+          "isAttr": true,
+          "type": "String"
+        },
        {
          "name": "dueDate",
          "isAttr": true,
--- a/ruoyi-ui/src/plugins/package/penal/task/ElementTask.vue
+++ b/ruoyi-ui/src/plugins/package/penal/task/ElementTask.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="panel-tab__content">
    <el-form size="mini" label-width="90px" @submit.native.prevent>
-      <el-form-item label="异步延续">
-        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />
-        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />
-        <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />
-      </el-form-item>
+<!--      <el-form-item label="异步延续">-->
+<!--        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
+<!--        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
+<!--        <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
+<!--      </el-form-item>-->
      <component :is="witchTaskComponent" v-bind="$props" />
    </el-form>
  </div>
--- a/ruoyi-ui/src/plugins/package/penal/task/task-components/TagSelect.vue
+++ b/ruoyi-ui/src/plugins/package/penal/task/task-components/TagSelect.vue
@@ -1,73 +0,0 @@
-<template>
-  <div class="tag-select">
-    <div class="tag-box">
-      <el-tag v-for="item in selectValues" :key="item.userId" effect="dark"
-        style="margin-right: 5px;" type="primary" size="mini" closable
-        @close="onDeleteTag(item)"
-      >
-        {{item.nickName}}
-      </el-tag>
-    </div>
-    <slot name="append" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TagSelect',
-  props: {
-    value: {
-      type: [Object, Array, String]
-    }
-  },
-  data () {
-    return {
-      selectValues: []
-    }
-  },
-  methods: {
-    onDeleteTag (tag) {
-      let temp = this.selectValues.filter(item => {
-        return item !== tag;
-      });
-      if (Array.isArray(this.value)) {
-        this.$emit('input', temp);
-      } else {
-        this.$emit('input', temp.map(item => item.id).join(','));
-      }
-    }
-  },
-  watch: {
-    value: {
-      handler (newValue) {
-        if (newValue == null || newValue === '') {
-          this.selectValues = [];
-        } else {
-          if (Array.isArray(newValue)) {
-            this.selectValues = [...newValue];
-          } else {
-            this.selectValues = [{
-              userId: newValue.userId,
-              /* eslint-disable-next-line */
-              nickName: newValue.nickName === '${startUserName}' ? '流程发起人' : newValue.nickName
-            }]
-          }
-        }
-      },
-      immediate: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .tag-select {
-    border: 1px solid #DCDFE6;
-    border-radius: 4px;
-    display: flex;
-  }
-  .tag-box {
-    flex-grow: 1;
-    padding: 0px 5px;
-  }
-</style>
--- a/ruoyi-ui/src/plugins/package/penal/task/task-components/UserTask.vue
+++ b/ruoyi-ui/src/plugins/package/penal/task/task-components/UserTask.vue
@@ -1,54 +1,58 @@
 <template>
  <div style="margin-top: 16px">
-    <el-form-item label="候选类型">
-      <el-select v-model="formData.groupType" placeholder="请选择分组类型" @change="onGroupTypeChange">
-        <el-option label="固定用户" value="ASSIGNEE" />
-        <el-option label="候选用户" value="USERS" />
-<!--        <el-option label="候选组" value="ROLE" />-->
-      </el-select>
-    </el-form-item>
-    <el-form-item label="指定方式" v-if="formData.groupType === 'ASSIGNEE'">
-      <el-radio-group v-model="formData.assignType" @change="onAssignTypeChange">
-        <el-radio :label="'fixed' || '1'">固定</el-radio>
-        <el-radio :label="'dynamic' || '2'">动态</el-radio>
+    <el-row>
+      <el-radio-group v-model="dataType" @change="changeDataType">
+        <el-radio label="USERS">指定用户</el-radio>
+        <el-radio label="ROLES">角色</el-radio>
+        <el-radio label="DEPTS">部门</el-radio>
+        <el-radio label="INITIATOR">发起人</el-radio>
      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="处理用户" v-if="formData.groupType === 'ASSIGNEE'">
-      <tag-select v-if="formData.assignType === ('fixed' || '1')" v-model="userTaskForm.assignee">
-        <el-button slot="append" class="append-add" type="default" icon="el-icon-plus" @click="onSelectAssignee()" />
-      </tag-select>
-      <el-select v-if="formData.assignType === ('dynamic' || '2')" v-model="userTaskForm.assignee" collapse-tags @change="updateElementTask('assignee')">
-        <el-option v-for="item in variableData" :key="item.value" :label="item.label" :value="item">
-          <span style="float: left">{{ item.label }}</span>
-          <span style="float: right; color: #8492a6;">{{ item.value }}</span>
-        </el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="候选用户" v-if="formData.groupType === 'USERS'">
-      <tag-select v-model="userTaskForm.candidateUsers">
-        <el-button slot="append" class="append-add" type="default" icon="el-icon-plus" @click="onSelectAssignee()" />
-      </tag-select>
-    </el-form-item>
-<!--    <el-form-item label="候选分组">-->
-<!--      <el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">-->
-<!--        <el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />-->
-<!--      </el-select>-->
-<!--    </el-form-item>-->
-    <el-form-item label="到期时间">
-      <el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
-    </el-form-item>
-    <el-form-item label="跟踪时间">
-      <el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
-    </el-form-item>
-    <el-form-item label="优先级">
-      <el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
-    </el-form-item>
+    </el-row>
+    <el-row>
+      <div v-if="dataType === 'USERS'">
+        <el-tag v-for="userText in selectedUser.text" :key="userText" effect="plain">
+          {{userText}}
+        </el-tag>
+        <div class="element-drawer__button">
+          <el-button size="mini" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
+        </div>
+      </div>
+      <div v-if="dataType === 'ROLES'">
+        <el-select v-model="roleIds" multiple size="mini" placeholder="请选择 角色">
+          <el-option
+            v-for="item in roleOptions"
+            :key="item.roleId"
+            :label="item.roleName"
+            :value="`ROLE${item.roleId}`"
+            :disabled="item.status === 1">
+          </el-option>
+        </el-select>
+        <div class="element-drawer__button">
+          <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleSaveRoles()">保 存</el-button>
+        </div>
+      </div>
+      <div v-if="dataType === 'DEPTS'">
+        <tree-select
+          :width="320"
+          :height="400"
+          size="mini"
+          :data="deptTreeData"
+          :defaultProps="deptProps"
+          multiple
+          clearable
+          checkStrictly
+          nodeKey="id"
+          :checkedKeys="deptIds"
+          @checked-change="checkedDeptChange">
+        </tree-select>
+      </div>
+    </el-row>

    <!-- 候选用户弹窗 -->
-    <el-dialog title="候选用户" :visible.sync="candidateVisible" width="60%" append-to-body>
+    <el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body>
      <el-row type="flex" :gutter="20">
        <!--部门数据-->
-        <el-col :span="5">
+        <el-col :span="7">
          <el-card shadow="never" style="height: 100%">
            <div slot="header">
              <span>部门列表</span>
@@ -74,40 +78,23 @@
            </div>
          </el-card>
        </el-col>
-        <el-col :span="14">
-          <el-table ref="multipleTable" height="600" :data="userList" border @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="50" align="center" :selectable="selectEnable" />
+        <el-col :span="17">
+          <el-table ref="multipleTable" height="600" :data="userTableList" border @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="用户名" align="center" prop="nickName" />
            <el-table-column label="部门" align="center" prop="dept.deptName" />
          </el-table>
          <pagination
-            :total="total"
+            :total="userTotal"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
-            @pagination="getList"
+            @pagination="getUserList"
          />
        </el-col>
-        <el-col :span="5">
-          <el-card shadow="never" style="height: 100%">
-            <div slot="header">
-              <span>已选人员</span>
-            </div>
-            <el-tag
-              v-for="tag in selectedUserDate"
-              :key="tag.nickName"
-              closable
-              @close="handleClose(tag)">
-              {{tag.nickName}} {{tag.dept.deptName}}
-            </el-tag>
-          </el-card>
-        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="handleTaskComplete">确 定</el-button>
-<!--          <el-input style="width: 50%;margin-right: 34%" type="textarea" v-model="taskForm.comment"-->
-<!--                    placeholder="请输入处理意见"-->
-<!--          />-->
-<!--          <el-button @click="completeOpen = false">取 消</el-button>-->
+        <el-button type="primary" @click="handleTaskUserComplete">确 定</el-button>
+        <el-button @click="userOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
@@ -115,9 +102,21 @@
 </template>

 <script>
-import { listUser, getUser } from "@/api/system/user";
+import { listUser } from "@/api/system/user";
+import { listRole } from "@/api/system/role";
 import { treeselect } from '@/api/system/dept'
-import TagSelect from "./TagSelect";
+import TreeSelect from "@/components/TreeSelect";
+
+const userTaskForm = {
+  dataType: '',
+  assignee: '',
+  candidateUsers: '',
+  candidateGroups: '',
+  text: '',
+  // dueDate: '',
+  // followUpDate: '',
+  // priority: ''
+}

 export default {
  name: "UserTask",
@@ -125,43 +124,34 @@ export default {
    id: String,
    type: String
  },
-  components: {
-    TagSelect
-  },
+  components: { TreeSelect },
  data() {
    return {
-      defaultTaskForm: {
-        assignee: "",
-        candidateUsers: [],
-        candidateGroups: [],
-        dueDate: "",
-        followUpDate: "",
-        priority: ""
+      loading: false,
+      dataType: 'USERS',
+      selectedUser: {
+        ids: [],
+        text: []
      },
-      formData: {
-        groupType: 'ASSIGNEE',
-        assignType: 'fixed'
-      },
-      userTaskForm: {},
-      candidateVisible: false,
+      userOpen: false,
      deptName: undefined,
      deptOptions: [],
      deptProps: {
        children: "children",
        label: "label"
      },
+      deptTempOptions: [],
+      userTableList: [],
+      userTotal: 0,
+      selectedUserDate: [],
+      roleOptions: [],
+      roleIds: [],
+      deptTreeData: [],
+      deptIds: [],
      // 查询参数
      queryParams: {
        deptId: undefined
-      },
-      userList: [],
-      total: 0,
-      selectedUserDate: [],
-      variableData: [{
-        label: "流程发起人",
-        value: "${INITIATOR}"
-      }],
-      mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+      }
    };
  },
  watch: {
@@ -171,113 +161,101 @@ export default {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.$nextTick(() => this.resetTaskForm());
      }
-    },
-    // 'userTaskForm.assignee': {
-    //   handler () {
-    //     this.updateElementTask('assignee');
-    //   }
-    // },
-    // 'userTaskForm.candidateUsers': {
-    //   handler () {
-    //     this.updateElementTask('candidateUsers');
-    //   }
-    // },
+    }
  },
-  created() {
-    listUser().then(response => {
-      this.userList = response.rows;
-    })
+  beforeDestroy() {
+    this.bpmnElement = null;
  },
  methods: {
    resetTaskForm() {
-      for (let key in this.defaultTaskForm) {
-        if (key === "candidateUsers") {
-          const val = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") : [];
-          if (val && val.length > 0) {
-            this.formData.groupType = 'USERS';
-            let users = [];
-            // TODO 2022/01/28 优化用户信息获取方式
-            val.forEach(k => {
-              getUser(k).then(response => {
-                let user = response.data.user
-                users.push(user)
-              })
-            })
-            this.$set(this.userTaskForm, key, users);
-          }
-        } else if (key === "candidateGroups") {
-          // TODO 2022/01/28 添加候选组的设值 this.$set(this.userTaskForm, key, value);
-        } else if (key === "assignee") {
-          this.formData.groupType = 'ASSIGNEE';
-          let val = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
-          // TODO 2022/03/20 根据type判断是否为动态用户
-          // 判断是否为动态用户
-          if (val && val.startsWith('${') && val.endsWith('}')) {
-            this.formData.assignType = 'dynamic';
-            this.$set(this.userTaskForm, key, val);
-          } else {
-            this.formData.assignType = 'fixed';
-            getUser(val).then(response => {
-              let user = response.data.user
-              this.$set(this.userTaskForm, key, user);
-            })
-          }
+      const bpmnElementObj = this.bpmnElement?.businessObject;
+      if (!bpmnElementObj) {
+        return;
+      }
+      this.dataType = bpmnElementObj['dataType'];
+      if (this.dataType === 'USERS') {
+        let userIdData = bpmnElementObj['assignee'] || bpmnElementObj['candidateUsers'];
+        let userText = bpmnElementObj['text'] || [];
+        this.selectedUser.ids = userIdData?.toString().split(',');
+        this.selectedUser.text = userText?.split(',');
+      } else if (this.dataType === 'ROLES') {
+        this.getRoleOptions();
+        let roleIdData = bpmnElementObj['candidateGroups'] || [];
+        if (roleIdData && roleIdData.length > 0) {
+          this.roleIds = roleIdData.split(',')
        }
+      } else if (this.dataType === 'DEPTS') {
+        this.getDeptTreeData().then(() => {
+          let deptIdData = bpmnElementObj['candidateGroups'] || [];
+          if (deptIdData && deptIdData.length > 0) {
+            this.deptIds = deptIdData.split(',');
+          }
+        });
      }
    },
-    updateElementTask(key) {
+    updateElementTask() {
      const taskAttr = Object.create(null);
-      taskAttr['flowable:assignType'] = this.formData.assignType;
-      // 修复切换候选类型XML仍保留assignee的问题
-      if ((key === 'candidateUsers' || key === 'assignee') && !this.userTaskForm[key]) {
-        taskAttr[key] = null
-      }
-
-      if (key === "candidateUsers" || key === "candidateGroups") {
-        if (this.userTaskForm[key] && this.userTaskForm[key].length > 0) {
-          taskAttr[key] = this.userTaskForm[key].map(k => k.userId) || null
-        }
-        // TODO 2022/01/10 添加候选组的设值
-        // taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
-      } else {
-        if (this.userTaskForm[key]) {
-          if (this.formData.assignType === ('fixed' || '1')) {
-            taskAttr['flowable:text'] = this.userTaskForm[key].nickName
-            taskAttr[key] = this.userTaskForm[key].userId || null;
-          } else if (this.formData.assignType === ('dynamic' || '2')) {
-            taskAttr['flowable:text'] = this.userTaskForm[key].label
-            taskAttr[key] = this.userTaskForm[key].value || null;
-          }
-        }
+      for (let key in userTaskForm) {
+          taskAttr[key] = userTaskForm[key];
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
    },
    /**
     * 查询部门下拉树结构
     */
-    getDeptTreeSelect() {
-      treeselect().then(response => {
-        this.deptOptions = response.data;
+    getDeptOptions() {
+      return new Promise((resolve, reject) => {
+        if (!this.deptOptions || this.deptOptions.length <= 0) {
+          treeselect().then(response => {
+            this.deptTempOptions = response.data;
+            this.deptOptions = response.data;
+            resolve()
+          })
+        } else {
+          reject()
+        }
      });
    },
-    /** 查询用户列表 */
-    getList() {
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows;
-          this.total = response.total;
-        }
-      );
-    },
-    selectEnable(row, index) {
-      if (this.formData.groupType === 'ASSIGNEE') {
-        if (this.selectedUserDate.length > 0) {
-          return this.selectedUserDate[0].userId === row.userId;
-        } else {
-          return true;
-        }
-      } else {
-        return true;
+    /**
+     * 查询部门下拉树结构（含部门前缀）
+     */
+    getDeptTreeData() {
+      function refactorTree(data) {
+        return data.map(node => {
+          let treeData = { id: `DEPT${node.id}`, label: node.label, parentId: node.parentId, weight: node.weight };
+          if (node.children && node.children.length > 0) {
+            treeData.children = refactorTree(node.children);
+          }
+          return treeData;
+        });
      }
+      return new Promise((resolve, reject) => {
+        if (!this.deptTreeData || this.deptTreeData.length <= 0) {
+          this.getDeptOptions().then(() => {
+            this.deptTreeData = refactorTree(this.deptOptions);
+            resolve()
+          }).catch(() => {
+            reject()
+          })
+        } else {
+          resolve()
+        }
+      })
+    },
+    /**
+     * 查询部门下拉树结构
+     */
+    getRoleOptions() {
+      if (!this.roleOptions || this.roleOptions.length <= 0) {
+        listRole().then(response => this.roleOptions = response.rows);
+      }
+    },
+    /** 查询用户列表 */
+    getUserList() {
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.userTableList = response.rows;
+        this.userTotal = response.total;
+      });
    },
    // 筛选节点
    filterNode(value, data) {
@@ -287,7 +265,7 @@ export default {
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
-      this.getList();
+      this.getUserList();
    },
    // 关闭标签
    handleClose(tag) {
@@ -298,48 +276,112 @@ export default {
    handleSelectionChange(selection) {
      this.selectedUserDate = selection;
    },
-    handleTaskComplete() {
-      if (!this.selectedUserDate) {
-        this.userTaskForm.assignee = null;
-        this.userTaskForm.candidateUsers = null;
+    onSelectUsers() {
+      this.selectedUserDate = []
+      this.$refs.multipleTable?.clearSelection();
+      this.getDeptOptions();
+      this.userOpen = true;
+    },
+    handleTaskUserComplete() {
+      if (!this.selectedUserDate || this.selectedUserDate.length <= 0) {
+        this.$modal.msgError('请选择用户');
+        return;
+      }
+      this.selectedUser.text = this.selectedUserDate.map(k => k.nickName) || [];
+      if (this.selectedUserDate.length === 1) {
+        let data = this.selectedUserDate[0];
+        userTaskForm.assignee = data.userId;
+        userTaskForm.text = data.nickName;
      } else {
-        let val = null;
-        if (this.formData.groupType === 'ASSIGNEE') {
-          val = this.selectedUserDate[0];
-          this.userTaskForm.assignee = val;
-        } else {
-          val = this.selectedUserDate;
-          this.userTaskForm.candidateUsers = val;
+        userTaskForm.candidateUsers = this.selectedUserDate.map(k => k.userId).join() || null;
+        userTaskForm.text = this.selectedUserDate.map(k => k.nickName).join() || null;
+      }
+      this.updateElementTask()
+      this.userOpen = false;
+    },
+    handleSaveRoles() {
+      if (!this.roleIds || this.roleIds.length <= 0) {
+        this.$modal.msgError('请选择角色');
+        return;
+      }
+      userTaskForm.candidateGroups = this.roleIds.join() || null;
+      let textArr = this.roleOptions.filter(k => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0);
+      userTaskForm.text = textArr?.map(k => k.roleName).join() || null;
+      this.updateElementTask();
+    },
+    checkedDeptChange(checkedIds, checkedData) {
+      if (checkedIds && checkedIds.length > 0) {
+        this.deptIds = checkedIds;
+      }
+      if (checkedData && checkedData.length > 0) {
+        userTaskForm.candidateGroups = checkedData.map(k => k.id).join() || null
+        userTaskForm.text = checkedData.map(k => k.label).join() || null
+        this.updateElementTask();
+      }
+    },
+    changeDataType(val) {
+      // 清空 userTaskForm 所有属性值
+      Object.keys(userTaskForm).forEach(key => userTaskForm[key] = null);
+      userTaskForm.dataType = val;
+      if (val === 'USERS') {
+        if (this.selectedUser && this.selectedUser.ids && this.selectedUser.ids.length > 0) {
+          if (this.selectedUser.ids.length === 1) {
+            userTaskForm.assignee = this.selectedUser.ids[0];
+          } else {
+            userTaskForm.candidateUsers = this.selectedUser.ids.join()
+          }
+          userTaskForm.text = this.selectedUser.text?.join() || null
        }
-        this.updateElementTask('assignee')
-        this.updateElementTask('candidateUsers')
+      } else if (val === 'ROLES') {
+        this.getRoleOptions();
+        if (this.roleIds && this.roleIds.length > 0) {
+          userTaskForm.candidateGroups = this.roleIds.join() || null;
+          let textArr = this.roleOptions.filter(k => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0);
+          userTaskForm.text = textArr?.map(k => k.roleName).join() || null;
+        }
+      } else if (val === 'DEPTS') {
+        this.getDeptTreeData();
+        if (this.deptIds && this.deptIds.length > 0) {
+          userTaskForm.candidateGroups = this.deptIds.join() || null;
+          let textArr = []
+          let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
+          this.deptIds.forEach(id => {
+            let stark = []
+            stark = stark.concat(treeStarkData);
+            while(stark.length) {
+              let temp = stark.shift();
+              if(temp.children) {
+                stark = temp.children.concat(stark);
+              }
+              if(id === temp.id) {
+                textArr.push(temp);
+              }
+            }
+          })
+          userTaskForm.text = textArr?.map(k => k.label).join() || null;
+        }
+      } else if (val === 'INITIATOR') {
+        userTaskForm.assignee = "${initiator}";
+        userTaskForm.text = "流程发起人";
      }
-      this.candidateVisible = false;
-    },
-    onGroupTypeChange(val) {
-      this.userTaskForm = {}
-      // 清空已选候选人数据
-      if (val === 'ASSIGNEE') {
-        this.formData.assignType = 'fixed'
-      }
-      this.selectedUserDate = []
-      this.$refs.multipleTable?.clearSelection();
-    },
-    onAssignTypeChange() {
-      this.userTaskForm.assignee = null
-    },
-    onSelectAssignee() {
-      this.selectedUserDate = []
-      this.$refs.multipleTable?.clearSelection();
-      this.getDeptTreeSelect();
-      this.candidateVisible = true;
+      this.updateElementTask();
    }
-  },
-  beforeDestroy() {
-    this.bpmnElement = null;
  }
 };
 </script>

-<style scoped>
+<style scoped lang="scss">
+.el-row .el-radio-group {
+  margin-bottom: 15px;
+  .el-radio {
+    line-height: 28px;
+  }
+}
+.el-tag {
+  margin-bottom: 10px;
+  + .el-tag {
+    margin-left: 10px;
+  }
+}
+
 </style>