工作流process-designer图 未执行的用户示例出线高亮显示bug

最新推荐文章于 2023-11-24 09:55:40 发布
最新推荐文章于 2023-11-24 09:55:40 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25851237/article/details/124128134
版权

当用排他网关未执行时(撤回或驳回)情况下，流程图仍高亮显示bug

1.修改前：

在这里插入图片描述

2.修改后：

在这里插入图片描述

3.修改文件ProcessViewer.vue：

bpm-process-designer插件：
src/components/bpm-process-designer/package/process-designer/ProcessViewer.vue
在这里插入图片描述

<template>
  <div class="custom-process-designer">
    <div class="custom-process-designer__container">
      <div class="custom-process-designer__canvas" ref="bpmn-canvas"></div>
    </div>
  </div>
</template>

<script>
import "@/components/bpm-process-designer/package/theme/process-designer.css";
import BpmnViewer from "bpmn-js/lib/Viewer";
import DefaultEmptyXML from "./plugins/defaultEmpty";
import {parseTime} from '@/utils/dateUtils'
import {DICT_TYPE, getDataMap} from '@/utils/dict'

export default {
  name: "ProcessViewer",
  componentName: "ProcessViewer",
  props: {
    value: {  // BPMN XML 字符串
      type: String,
    },
    prefix: { // 使用哪个引擎
      type: String,
      default: "camunda",
    },
    activityData: { // 活动的数据。传递时，可高亮流程
      type: Array,
      default: () => [],
    },
    processInstanceData: { // 流程实例的数据。传递时，可展示流程发起人等信息
      type: Object,
    },
    taskData: { // 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      xml: '',
      activityList: [],
      processInstance: undefined,
      taskList: [],
      // 字典数据
      processInstanceResultDataMap: null
    };
  },
  async created() {
    this.processInstanceResultDataMap = await getDataMap(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT);
  },
  mounted() {
    this.xml = this.value;
    this.activityList = this.activityData;
    // 初始化
    this.initBpmnModeler();
    this.createNewDiagram(this.xml);
    this.$once("hook:beforeDestroy", () => {
      if (this.bpmnModeler) this.bpmnModeler.destroy();
      this.$emit("destroy", this.bpmnModeler);
      this.bpmnModeler = null;
    });
    // 初始模型的监听器
    this.initModelListeners();
  },
  watch: {
    value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图
      this.xml = newValue;
      this.createNewDiagram(this.xml);
    },
    activityData: function (newActivityData) {
      this.activityList = newActivityData;
      this.createNewDiagram(this.xml);
    },
    processInstanceData: function (newProcessInstanceData) {
      this.processInstance = newProcessInstanceData;
      this.createNewDiagram(this.xml);
    },
    taskData: function (newTaskListData) {
      this.taskList = newTaskListData;
      this.createNewDiagram(this.xml);
    }
  },
  methods: {
    initBpmnModeler() {
      if (this.bpmnModeler) return;
      this.bpmnModeler = new BpmnViewer({
        container: this.$refs["bpmn-canvas"],
        bpmnRenderer: {}
      })
    },
    // 创建新的流程图
    async createNewDiagram(xml) {
      // 将字符串转换成图显示出来
      let newId = `Process_${new Date().getTime()}`;
      let newName = `业务流程_${new Date().getTime()}`;
      let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
      try {
        let {warnings} = await this.bpmnModeler.importXML(xmlString);
        if (warnings && warnings.length) {
          warnings.forEach(warn => console.warn(warn));
        }
        // 根据流程图视图居中
        this.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
        // 高亮流程图
        await this.highlightDiagram();
      } catch (e) {
        console.error(`[Process Designer Warn]: ${e?.message || e}`);
      }
    },
    /* 高亮流程图 */
    // 如果多个 endActivity 的话，目前的逻辑可能有一定的问题。
    async highlightDiagram() {
      const activityList = this.activityList;
      if (activityList.length === 0) {
        return;
      }
      // 再次基础上，增加不同审批结果的颜色等等
      let canvas = this.bpmnModeler.get('canvas');
      let todoActivity = activityList.find(m => !m.endTime) // 找到待办的任务
      let endActivity = activityList[activityList.length - 1] // 获得最后一个任务
      // debugger
      this.bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach(n => {
        let activity = activityList.find(m => m.key === n.id) // 找到对应的活动
        if (n.$type === 'bpmn:UserTask') { // 用户任务
          if (!activity) {
            return;
          }
          // 处理用户任务的高亮
          const task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
          if (task) {
            canvas.addMarker(n.id, this.getResultCss(task.result));
            // 如果非通过，就不走后面的线条了
            if (task.result !== 2) {
              return;
            }
            // 处理 outgoing 出线
            const outgoing = this.getActivityOutgoing(activity);
            outgoing?.forEach(nn => {
              // debugger
              let targetActivity = activityList.find(m => m.key === nn.targetRef.id)
              // 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
              if (targetActivity) {
                canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo');
              } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') { // 这个流程，暂时没走到过
                canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo');
                canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo');
              } else if (nn.targetRef.$type === 'bpmn:EndEvent') { // 这个流程，暂时没走到过
                if (!todoActivity && endActivity.key === n.id) {
                  canvas.addMarker(nn.id, 'highlight');
                  canvas.addMarker(nn.targetRef.id, 'highlight');
                }
                if (!activity.endTime) {
                  canvas.addMarker(nn.id, 'highlight-todo');
                  canvas.addMarker(nn.targetRef.id, 'highlight-todo');
                }
              }
            });
          }


        } else if (n.$type === 'bpmn:ExclusiveGateway') { // 排它网关
          if (!activity) {
            return
          }
          // 设置【bpmn:ExclusiveGateway】排它网关的高亮
          canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
          // 查找需要高亮的连线
          let matchNN = undefined;
          let matchActivity = undefined;
          n.outgoing?.forEach(nn => {
            let targetActivity = activityList.find(m => m.key === nn.targetRef.id);
            if (!targetActivity) {
              return;
            }
            // 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
            //  1. 一个是 UserTask => EndEvent
            //  2. 一个是 EndEvent
            // 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
            // 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
            if (!matchActivity || matchActivity.type === 'endEvent') {
              matchNN = nn;
              matchActivity = targetActivity;
            }
          })
          if (matchNN && matchActivity) {
            canvas.addMarker(matchNN.id, this.getActivityHighlightCss(matchActivity));
          }
        } else if (n.$type === 'bpmn:ParallelGateway') { // 并行网关
          if (!activity) {
            return
          }
          // 设置【bpmn:ParallelGateway】并行网关的高亮
          canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
          n.outgoing?.forEach(nn => {
            // 获得连线是否有指向目标。如果有，则进行高亮
            const targetActivity = activityList.find(m => m.key === nn.targetRef.id)
            if (targetActivity) {
              canvas.addMarker(nn.id, this.getActivityHighlightCss(targetActivity)); // 高亮【bpmn:SequenceFlow】连线
              // 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
              canvas.addMarker(nn.targetRef.id, this.getActivityHighlightCss(targetActivity));
            }
          })
        } else if (n.$type === 'bpmn:StartEvent') { // 开始节点
          n.outgoing?.forEach(nn => { // outgoing 例如说【bpmn:SequenceFlow】连线
            // 获得连线是否有指向目标。如果有，则进行高亮
            let targetActivity = activityList.find(m => m.key === nn.targetRef.id);
            if (targetActivity) {
              canvas.addMarker(nn.id, 'highlight'); // 高亮【bpmn:SequenceFlow】连线
              canvas.addMarker(n.id, 'highlight'); // 高亮【bpmn:StartEvent】开始节点（自己）
            }
          });
        } else if (n.$type === 'bpmn:EndEvent') { // 结束节点
          if (!this.processInstance || this.processInstance.result === 1) {
            return;
          }
          canvas.addMarker(n.id, this.getResultCss(this.processInstance.result));
        }
      })
    },
    getActivityHighlightCss(activity) {
      return activity.endTime ? 'highlight' : 'highlight-todo';
    },
    getResultCss(result) {
      if (result === "1") {
        return 'highlight-todo';
      } else if (result === "2") {
        return 'highlight';
      } else if (result === "3") {
        return 'highlight-reject';
      } else if (result === "4") {
        return 'highlight-cancel';
      }
      return '';
    },
    getActivityOutgoing(activity) {
      // 如果有 outgoing，则直接使用它
      if (activity.outgoing && activity.outgoing.length > 0) {
        return activity.outgoing;
      }
      // 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
      const flowElements = this.bpmnModeler.getDefinitions().rootElements[0].flowElements;
      const outgoing = [];
      flowElements.forEach(item => {
        if (item.$type !== 'bpmn:SequenceFlow') {
          return;
        }
        if (item.sourceRef.id === activity.key) {
          outgoing.push(item);
        }
      });
      return outgoing;
    },
    initModelListeners() {
      const EventBus = this.bpmnModeler.get("eventBus");
      const that = this;
      // 注册需要的监听事件
      EventBus.on('element.hover', function (eventObj) {
        let element = eventObj ? eventObj.element : null;
        that.elementHover(element);
      });
      EventBus.on('element.out', function (eventObj) {
        let element = eventObj ? eventObj.element : null;
        that.elementOut(element);
      });
    },
    // 流程图的元素被 hover
    elementHover(element) {
      this.element = element;
      !this.elementOverlayIds && (this.elementOverlayIds = {});
      !this.overlays && (this.overlays = this.bpmnModeler.get("overlays"));
      // 展示信息
      if (!this.elementOverlayIds[element.id] && element.type !== "bpmn:Process") {
        let html = `<div class="element-overlays">
            <p>Elemet id: ${element.id}</p>
            <p>Elemet type: ${element.type}</p>
          </div>`; // 默认值
        if (element.type === 'bpmn:StartEvent' && this.processInstance) {
          html = `<p>发起人：${this.processInstance.startUser.nickname}</p>
                  <p>部门：${this.processInstance.startUser.deptName}</p>
                  <p>创建时间：${parseTime(this.processInstance.createTime)}`;
        } else if (element.type === 'bpmn:UserTask') {
          // debugger
          const activity = this.activityList.find(m => m.key === element.id);
          if (!activity) {
            return;
          }
          let task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
          if (!task) {
            return;
          }
          html = `<p>审批人：${task.assigneeUser.nickname}</p>
                  <p>部门：${task.assigneeUser.deptName}</p>
                  <p>结果：${this.processInstanceResultDataMap.get(task.result).dictLabel}</p>
                  <p>创建时间：${parseTime(task.createTime)}</p>`;
          if (task.endTime) {
            html += `<p>结束时间：${parseTime(task.endTime)}</p>`
          }
          if (task.comment) {
            html += `<p>审批建议：${task.comment}</p>`
          }
        } else if (element.type === 'bpmn:EndEvent' && this.processInstance) {
          html = `<p>结果：${this.processInstanceResultDataMap.get(this.processInstance.result).dictLabel}</p>`;
          if (this.processInstance.endTime) {
            html += `<p>结束时间：${parseTime(this.processInstance.endTime)}</p>`
          }
        }
        this.elementOverlayIds[element.id] = this.overlays.add(element, {
          position: {left: 0, bottom: 0},
          html: `<div class="element-overlays">${html}</div>`
        });
      }
    },
    // 流程图的元素被 out
    elementOut(element) {
      this.overlays.remove({element});
      this.elementOverlayIds[element.id] = null;
    },
  }
};
</script>

<style>

/** 处理中 */
.highlight-todo.djs-connection > .djs-visual > path {
  stroke: #1890ff !important;
  stroke-dasharray: 4px !important;
  fill-opacity: 0.2 !important;
}

.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
  fill: #1890ff !important;
  stroke: #1890ff !important;
  stroke-dasharray: 4px !important;
  fill-opacity: 0.2 !important;
}

/deep/ .highlight-todo.djs-connection > .djs-visual > path {
  stroke: #1890ff !important;
  stroke-dasharray: 4px !important;
  fill-opacity: 0.2 !important;
  marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
}

/deep/ .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
  fill: #1890ff !important;
  stroke: #1890ff !important;
  stroke-dasharray: 4px !important;
  fill-opacity: 0.2 !important;
}

/** 通过 */
.highlight.djs-shape .djs-visual > :nth-child(1) {
  fill: green !important;
  stroke: green !important;
  fill-opacity: 0.2 !important;
}

.highlight.djs-shape .djs-visual > :nth-child(2) {
  fill: green !important;
}

.highlight.djs-shape .djs-visual > path {
  fill: green !important;
  fill-opacity: 0.2 !important;
  stroke: green !important;
}

.highlight.djs-connection > .djs-visual > path {
  stroke: green !important;
}

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: green !important; /* color elements as green */
}

/deep/ .highlight.djs-shape .djs-visual > :nth-child(1) {
  fill: green !important;
  stroke: green !important;
  fill-opacity: 0.2 !important;
}

/deep/ .highlight.djs-shape .djs-visual > :nth-child(2) {
  fill: green !important;
}

/deep/ .highlight.djs-shape .djs-visual > path {
  fill: green !important;
  fill-opacity: 0.2 !important;
  stroke: green !important;
}

/deep/ .highlight.djs-connection > .djs-visual > path {
  stroke: green !important;
}

/** 不通过 */
.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
  fill: red !important;
  stroke: red !important;
  fill-opacity: 0.2 !important;
}

.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
  fill: red !important;
}

.highlight-reject.djs-shape .djs-visual > path {
  fill: red !important;
  fill-opacity: 0.2 !important;
  stroke: red !important;
}

.highlight-reject.djs-connection > .djs-visual > path {
  stroke: red !important;
}

.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: red !important; /* color elements as green */
}

/deep/ .highlight-reject.djs-shape .djs-visual > :nth-child(1) {
  fill: red !important;
  stroke: red !important;
  fill-opacity: 0.2 !important;
}

/deep/ .highlight-reject.djs-shape .djs-visual > :nth-child(2) {
  fill: red !important;
}

/deep/ .highlight-reject.djs-shape .djs-visual > path {
  fill: red !important;
  fill-opacity: 0.2 !important;
  stroke: red !important;
}

/deep/ .highlight-reject.djs-connection > .djs-visual > path {
  stroke: red !important;
}

/** 已取消 */
.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
  fill: grey !important;
  stroke: grey !important;
  fill-opacity: 0.2 !important;
}

.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
  fill: grey !important;
}

.highlight-cancel.djs-shape .djs-visual > path {
  fill: grey !important;
  fill-opacity: 0.2 !important;
  stroke: grey !important;
}

.highlight-cancel.djs-connection > .djs-visual > path {
  stroke: grey !important;
}

.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: grey !important; /* color elements as green */
}

/deep/ .highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
  fill: grey !important;
  stroke: grey !important;
  fill-opacity: 0.2 !important;
}

/deep/ .highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
  fill: grey !important;
}

/deep/ .highlight-cancel.djs-shape .djs-visual > path {
  fill: grey !important;
  fill-opacity: 0.2 !important;
  stroke: grey !important;
}

/deep/ .highlight-cancel.djs-connection > .djs-visual > path {
  stroke: grey !important;
}

.custom-process-designer .djs-container {
  position: absolute;
  min-height: 350px;
}

.custom-process-designer .djs-overlay-container {
  z-index: 1;
}

.custom-process-designer .element-overlays {
  position: relative;
  box-sizing: border-box;
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  color: #fafafa;
  width: 220px;
}

.custom-process-designer .element-overlays p {
  margin: 0;
  padding: 0;
}

</style>
leo7moon
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bpmn-js自定义Palette元素
飞云先生
02-07 216
接下来我们就开始自定义一个Palette小工具，可以帮助我们业务快速识别需要的组件是哪个，当前组件使用已有类型shape图片绘制。
process-designer:基于 Web 的流程编辑器
05-31
基于web和jBPM的流程设计器
vue2.X项目中集成bpmn-process-designer 流程设计器
最新发布
qq_35170037的博客
11-24 2170
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue手写一个自定义操作的工作流（前端流程图）
y_yinkedada的博客
06-15 5011
前端开发流程图功能（适用场景：用户想要有个走流程的功能，每一项操作都能根据自定义的流程一步步往下走，符合条件往下走，不符合条件的停留在当前不继续）
BPMN在线流程设计器
wcyzhengzhou的专栏
01-17 3480
jeeagile-process-designer 基于BPMN、VUE、ELEMENT-UI定制的个性化在线流程编辑器 在线体验地址： http://process.jeeagile.vip 更新日志 2022-01-06 优化自定义属性配置支持自定义实现 2021-12-31 自定义节点属性设置完成 2021-11-29 基于BPMN、VUE、ELEMENT-UI定制的个性化在线流程编辑器 使用说明 使用方法 <template> <div id="app"
bpmn-process-designer基础上进行自定义样式（工具、元素、菜单）
weixin_46037781的博客
07-29 2303
处理思路可以看到工具区就是基本样式，所以在此基础上加一个class就ok了找到自定义工具，red是我们自己添加的可以用于左边工具区palette和下拉菜单popup-menu在index.scss添加colorred!important;}//gatewaydisplaynone!important;}效果通过使用自定义渲染我们可以看到初始样式的设置//设置初始样式配置（stroke线条、fill填充内部、label就是图形内部那个文本）constconfig={...
如何在项目中集成bpmn-process-designer
weixin_43550766的博客
11-12 7074
文章目录一、bpmn-process-designer是什么？二、使用步骤1.将下面地址的代码下载到本地2.替换dependencies和devDependencies3.拷贝package目录4.在main.js引入代码5.拷贝src5.拷贝App.vue代码注意事项 一、bpmn-process-designer是什么？ bpmn-process-designer是一个基于 bpmn.js，Vue 2.x 和 ElementUI 开发的流程设计器（前端部分），支持监听器，扩展属性，表单等配置，可自由扩展
开源项目bpmn-process-designer跑通与引入记录
weixin_46037781的博客
06-16 3303
先克隆项目跑跑 推荐用yarn（并行下依赖，快许多【几十秒就搞定了，想起之前的痛苦时光，还中途各种异常下不到┭┮﹏┭┮】） 记得配置环境变量（要重启电脑）
安装BPMN设计器
羽毛的博客
05-28 1884
BPMN设计器的安装
Web工作流（流程图）设计器的方案研究及功能实现之bpmn-js简易教程
热门推荐
云帆的博客
05-17 1万+
前言 本文以2020年10月为时间节点，功能早就做了，但文章一直没有写 研究过程 根据项目需求，需要实现一个工作流/流程图设计器，并且可配置流转、活动节点、流程的各项属性，也是研究了多个方案 自研方案 使用svg方案（使用 svg.js库）来实现流程图的绘制，图形的拖拽、旋转、缩放、属性面板基本都实现了，但是无法解决连接线绘制的功能，后面尝试使用d3和jsplumb库来解决连接线的绘制，效果不是很好，研发时间给的不够、人手也不够，最后就放弃了 svg.js+d3.js svg.js+jsplumb.js
如何使用vue写出工作流
weixin_42604188的博客
02-17 668
Vue给了我们一个强大的框架来编写工作流应用程序，它可以帮助我们实现功能强大、易于使用和可扩展的应用程序。在开始实现工作流程之前，我们需要了解Vue的基本概念，包括组件，模板，指令，绑定和状态管理等。然后，我们需要按照工作流程的逻辑设计应用程序，定义各个组件之间的关系，并按照定义的关系编写Vue代码。最后，需要对应用程序进行测试，确保它能够按照预期工作。 ...
RuoYi-process多模块activity工作流项目代码.rar
11-02
RuoYi-process多模块activity工作流项目代码；
compileflow-idea-designer:阿里巴巴Compileflow引擎的好主意插件
04-08
大量显示Java源代码：该过程最终将被编译成Java代码以执行，并且设计者支持XML到Java代码的预览效果 XML语法错误提示：如果打开的XML源文件中存在语法错误，则会在Java源代码预览区域中提示该错误。 可扩展性：...
process-exporter-0.7.10.linux-amd64.tar.gzprocess-exporter
10-08
process-exporter-0.7.10.linux-amd64.tar.gz process-exporter
full-process-designer:关于全流程设计师一词的一些想法
05-20
全流程设计师关于全流程设计师一词的一些想法
流程编辑器bpmnjs的改造3：加一个审批人的设置
仅次于狼的博客
01-11 1205
自定义bpmnjs，加一个带按钮的【审批人】属性
bpmn-js 改造（三）给节点添加颜色，给边线加上滚动功能
飞天代码的博客
01-17 3464
给节点添加颜色，其实给节点加颜色的方式比较多。我使用的比较粗暴的方式，直接使用jquery，加样式的方式 $("g[data-element-id='"+nodeId+"']").find(".djs-visual rect").css("fill",colors["not-pass-node"]["bgColor"]); 其实就是根据节点id找到相应显示rect 设置其中的颜色样式。 效果图： 给红色边框加上滚动效果； 第一步：添加样式信息 @-webkit-keyframes test {
学习Process DEsigner记录 一
qq_42720057的博客
06-05 1477
Process Designer的基本CRUD操作： 就像写JS一样，定义function函数进行调用，button按钮也是一样的道理。 Java代码打包成Jar包导入并使用；通过LIbraries导入，使用 Class 类名的全路径：方法名（“参数”）=>>class java.lang.Thread::currentThread().getName(). 一些常量或者公用的方法放在Subroutines中，通过 improtSubroutine("包名")引入。直接使用其中的方法和常量
在jeecgboot中集成bpmn-process-designer流程设计器
宁波阿成的博客
10-10 1673
在jeecgboot中集成bpmn-process-designer流程设计器
process插件_玩转camunda工作流引擎插件:自定义用户体系实现-附源码
08-01
Camunda是一个开源的工作流引擎，它提供了丰富的功能和扩展性。Process插件是一个在Camunda工作流引擎中使用的插件，它允许我们根据自己的需求定制用户体系。 使用Process插件能够实现自定义用户体系的目的是因为Camunda默认使用了一套自己的用户管理系统，这可能不适用于所有的应用场景。通过使用Process插件，我们可以根据自己的业务需求来定制用户的认证和授权。 我们可以通过以下几个步骤来使用Process插件来实现自定义的用户体系。 首先，我们需要在Camunda引擎的配置文件中添加Process插件的依赖。可以在pom.xml中添加Process插件的依赖信息，并且在配置文件中指定使用自己的用户管理系统。 然后，我们需要编写自定义的用户管理类。这个类需要实现Camunda提供的UserManager接口，并且重写其中的方法来实现自己的用户认证和授权逻辑。可以根据自己的需求，连接数据库或者其他用户管理系统来实现用户的管理。 接下来，我们需要将自定义的用户管理类注册到Camunda引擎中。可以通过在Camunda配置文件中配置自定义的用户管理类的bean来完成注册。 最后，我们可以在Camunda的流程定义中使用自定义的用户管理系统。在流程定义中，我们可以使用用户任务节点来指定用户任务的执行者，并且在代码中使用自定义的用户管理类来进行用户的认证和授权。 通过上述步骤，我们可以使用Process插件来实现自定义的用户体系。这样，我们可以根据自己的需求来进行用户的管理，并且实现更加灵活和定制化的用户管理流程。 附上源码链接： [https://github.com/camunda/camunda-bpm-custom-identity]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值