添加usertask节点绑定执行用户或角色的字段

ruoyi-ui/src/main.js

@@ -69,6 +69,9 @@ import DictData from '@/components/DictData'
 
 import JsonExcel from 'vue-json-excel'
 
+// 自定义指令
+import Directives from '@/utils/directives'
+
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -98,6 +101,10 @@ DictData.install()
 useAntd(Vue)
 Vue.use(KFormDesign)
 
+Object.keys(Directives).forEach(item => {
+  Vue.directive(item, Directives[item])
+})
+
 
 /**
  * If you don't want to use mock-server

ruoyi-ui/src/utils/directives.js

@@ -0,0 +1,13 @@
+export default {
+  scroll: {
+    bind(el, binding) {
+      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
+      SELECTWRAP_DOM.addEventListener('scroll', function () {
+        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
+        if (CONDITION) {
+          binding.value()
+        }
+      })
+    }
+  }
+}

ruoyi-ui/src/views/system/bpmnPro/components/Panel/components/ElementExecuteForm.vue

@@ -50,7 +50,7 @@ export default {
 
   mounted() {
     this.initFormData();
-
+    this.getFormList();
     EventEmitter.on("element-update", () => {
       this.initFormData();
     });
@@ -58,8 +58,13 @@ export default {
   methods: {
     async initFormData() {
       this.formKey = getFormKey(getActive());
+    },
+    updateFormKey(value) {
+      setFormKey(getActive(), value);
+    },
+    async getFormList() {
       try {
-        let res = await listForm();
+        let res = await listForm({ isEnablePaging: false });
         if (res.code == 200) {
           this.formList = res.rows;
         }
@@ -67,9 +72,6 @@ export default {
         console.log(error);
       }
     },
-    updateFormKey(value) {
-      setFormKey(getActive(), value);
-    },
   },
 };
 </script>

ruoyi-ui/src/views/system/bpmnPro/components/Panel/components/ElementExecuteUser.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="execute_wrapper">
+    <el-collapse-item name="element-execute-user">
+      <template #title>
+        <collapse-title title="执行用户">
+          <lucide-icon name="User" />
+        </collapse-title>
+      </template>
+      <div class="element-execute-user">
+        <edit-item label="用户类型" :label-width="100">
+          <!-- <el-input
+          v-model="formKey"
+          maxlength="32"
+          @change="setExternalTaskPriority"
+        /> -->
+          <el-select
+            v-model="exeUserType"
+            placeholder="请选择执行人类型"
+            clearable
+            filterable
+            @change="updateExeUserType"
+          >
+            <el-option
+              v-for="item in userTypeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </edit-item>
+        <edit-item
+          v-show="exeUserTypeLabel"
+          :label="exeUserTypeLabel"
+          :label-width="100"
+        >
+          <div class="exe_user_type_input">
+            <el-select
+              v-scroll="scrollHandler"
+              v-model="exeUserValue"
+              placeholder="请选择执行人类型"
+              :multiple="exeUserType == 2"
+              clearable
+              filterable
+              @change="updateExeUserValue"
+            >
+              <el-option
+                v-for="item in exeUserValueList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <!-- <el-button
+              type="info"
+              size="mini"
+              icon="el-icon-user"
+              @click="() => {}"
+            >
+            </el-button> -->
+          </div>
+        </edit-item>
+      </div>
+    </el-collapse-item>
+  </div>
+</template>
+
+<script>
+import EventEmitter from "@utils/EventEmitter";
+import {
+  setExecuteUser,
+  getExecuteUser,
+  setExecuteUserType,
+  getExecuteUserType,
+  setExecuteUserDesc,
+  getExecuteUserDesc,
+} from "@packages/bo-utils/myFieldUtil";
+import { getActive } from "@packages/bpmn-utils/BpmnDesignerUtils";
+import { listUser, deptTreeSelect } from "@/api/system/user";
+import { listRole } from "@/api/system/role";
+
+export default {
+  name: "ElementExecuteUser",
+  data() {
+    return {
+      userTypeList: [
+        {
+          value: 1,
+          label: "指定处理人",
+        },
+        {
+          value: 2,
+          label: "批量处理人",
+        },
+        {
+          value: 3,
+          label: "角色处理",
+        },
+      ],
+      exeUserType: "",
+      // exeUserTypeLabel: "",
+      exeUserValue: "",
+      exeUserValueList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        tenantName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined,
+      },
+      isArriveBoottom: false,
+    };
+  },
+
+  mounted() {
+    this.initFormData();
+    EventEmitter.on("element-update", () => {
+      this.initFormData();
+    });
+  },
+  computed: {
+    exeUserTypeLabel() {
+      let label =
+        this.userTypeList.find((item) => item.value === this.exeUserType)
+          ?.label || "";
+      return label;
+    },
+  },
+  methods: {
+    initFormData() {
+      this.exeUserValue = getExecuteUser(getActive()) || "";
+      this.exeUserType = getExecuteUserType(getActive()) || "";
+      Object.assign(this.queryParams, {
+        pageNum: 1,
+        pageSize: 10,
+      });
+      this.isArriveBoottom = false;
+    },
+    updateExeUserType(value) {
+      setExecuteUserType(getActive(), value);
+      value == 2
+        ? setExecuteUser(getActive(), [])
+        : setExecuteUser(getActive(), "");
+      this.exeUserValueList = [];
+      this.exeUserValue = "";
+      if (!value) return;
+      if (value == 3) {
+        this.exeRoleListHandler();
+      } else {
+        this.exeUserListHandler();
+      }
+    },
+    async exeUserListHandler() {
+      try {
+        let res = await listUser(this.queryParams);
+        if (res.code == 200) {
+          if (
+            res.rows.length == 0 ||
+            res.rows.length < this.queryParams.pageSize
+          ) {
+            this.isArriveBoottom = true; //到底了
+          }
+          res.rows.forEach((item) => {
+            this.exeUserValueList.push({
+              value: item.userName,
+              label: item.nickName,
+            });
+          });
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async exeRoleListHandler() {
+      try {
+        let res = await listRole(this.queryParams);
+        if (res.code == 200) {
+          if (
+            res.rows.length == 0 ||
+            res.rows.length < this.queryParams.pageSize
+          ) {
+            this.isArriveBoottom = true; //到底了
+          }
+          res.rows.forEach((item) => {
+            this.exeUserValueList.push({
+              value: item.roleKey,
+              label: item.roleName,
+            });
+          });
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    updateExeUserValue(value) {
+      setExecuteUser(getActive(), value);
+    },
+    scrollHandler() {
+      if (this.isArriveBoottom) return;
+      this.queryParams.pageNum++;
+      this.loadListHandler();
+    },
+    loadListHandler() {
+      if (!this.exeUserType) return;
+      if (this.exeUserType == 3) {
+        this.exeRoleListHandler();
+      } else {
+        this.exeUserListHandler();
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.exe_user_type_input {
+  display: flex;
+  padding-right: 25px;
+}
+</style>

ruoyi-ui/src/views/system/bpmnPro/components/Panel/index.vue

@@ -26,7 +26,7 @@ import { isExecutable } from "@packages/bo-utils/executionListenersUtil";
 import { isAsynchronous } from "@packages/bo-utils/asynchronousContinuationsUtil";
 import { isStartInitializable } from "@packages/bo-utils/initiatorUtil";
 import { getModeler } from "@packages/bpmn-utils/BpmnDesignerUtils";
-import { isTaskOrUserTask } from "@packages/bo-utils/myFieldUtil";
+import { isTaskOrUserTask, isUserTask } from "@packages/bo-utils/myFieldUtil";
 import ElementGenerations from "@packages/Panel/components/ElementGenerations";
 import ElementDocumentations from "@packages/Panel/components/ElementDocumentations";
 import ElementConditional from "@packages/Panel/components/ElementConditional";
@@ -37,6 +37,7 @@ import ElementAsyncContinuations from "@packages/Panel/components/ElementAsyncCo
 import ElementStartInitiator from "@packages/Panel/components/ElementStartInitiator";
 import ElementExtensionField from "@packages/Panel/components/ElementExtensionField";
 import ElementExecuteForm from "@packages/Panel/components/ElementExecuteForm";
+import ElementExecuteUser from "@packages/Panel/components/ElementExecuteUser";
 
 export default {
   name: "BpmnPanel",
@@ -52,6 +53,7 @@ export default {
     ElementStartInitiator,
     ElementExtensionField,
     ElementExecuteForm,
+    ElementExecuteUser,
   },
   data() {
     return {
@@ -148,6 +150,7 @@ export default {
       // 添加执行表单
       isTaskOrUserTask(element) &&
         this.renderComponents.push(ElementExecuteForm);
+      isUserTask(element) && this.renderComponents.push(ElementExecuteUser);
     },
   },
 };

ruoyi-ui/src/views/system/bpmnPro/components/bo-utils/myFieldUtil.js

@@ -85,3 +85,56 @@ export function getFormKey(element) {
   return businessObject.get(`${prefix}:formKey`);
 }
 
+// 执行用户
+export function isUserTask(element) {
+  return is(element, 'bpmn:UserTask');
+}
+
+export function setExecuteUser(element, value) {
+  const prefix = getProcessEngine();
+  const modeling = getModeler.getModeling();
+  const businessObject = getBusinessObject(element);
+  modeling.updateModdleProperties(element, businessObject, {
+    [`${prefix}:executeUser`]: value
+  });
+}
+
+
+export function getExecuteUser(element) {
+  const prefix = getProcessEngine();
+  const businessObject = getBusinessObject(element);
+  return businessObject.get(`${prefix}:executeUser`);
+}
+
+export function setExecuteUserType(element, value) {
+  const prefix = getProcessEngine();
+  const modeling = getModeler.getModeling();
+  const businessObject = getBusinessObject(element);
+  modeling.updateModdleProperties(element, businessObject, {
+    [`${prefix}:executeUserType`]: value
+  });
+}
+
+
+export function getExecuteUserType(element) {
+  const prefix = getProcessEngine();
+  const businessObject = getBusinessObject(element);
+  return businessObject.get(`${prefix}:executeUserType`);
+}
+
+export function setExecuteUserDesc(element, value) {
+  const prefix = getProcessEngine();
+  const modeling = getModeler.getModeling();
+  const businessObject = getBusinessObject(element);
+  modeling.updateModdleProperties(element, businessObject, {
+    [`${prefix}:executeUserDesc`]: value
+  });
+}
+
+
+export function getExecuteUserDesc(element) {
+  const prefix = getProcessEngine();
+  const businessObject = getBusinessObject(element);
+  return businessObject.get(`${prefix}:executeUserDesc`);
+}
+