用通义灵码帮助实现校验bpmn.js当前画布上只能有一个开始节点的功能

最终代码：

     const elementRegistry = this.bpmnModeler.get('elementRegistry');

      // 获取所有元素
      const allElements = elementRegistry.getAll();

      // 过滤出开始节点
      const startEvents = allElements.filter(element => element.type === 'bpmn:StartEvent');

      // 校验开始节点的数量
      if (startEvents.length !== 1) {
        alert('画布上必须且只能有一个开始节点');
        return;
      }

实现过程：

我：bpmn.js如何实现校验当前画布上只能有一个开始节点

通义灵码：

要在 bpmn.js 中实现校验当前画布上只能有一个开始节点，可以在 saveFlow 方法中进行检查。以下是一个示例代码，展示了如何实现这一功能：

1. 获取所有元素：使用 modeling 服务获取当前画布上的所有元素。
2. 过滤开始节点：从所有元素中过滤出开始节点。
3. 校验数量：检查开始节点的数量是否为1。

<template>
  <div id="app">
    <!-- 你的 BPMN 画布和其他组件 -->
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';

export default {
  data() {
    return {
      bpmnModeler: null,
    };
  },
  mounted() {
    this.initBpmnModeler();
  },
  methods: {
    initBpmnModeler() {
      this.bpmnModeler = new BpmnModeler({
        container: '#app',
        additionalModules: [
          propertiesPanelModule,
          propertiesProviderModule
        ]
      });

      // 加载你的 BPMN 文件
      this.bpmnModeler.importXML(yourBpmnXml, (err) => {
        if (err) {
          console.error('Failed to load BPMN file', err);
        } else {
          console.log('BPMN file loaded successfully');
        }
      });
    },
    saveFlow() {
      const { modeling, elementRegistry } = this.bpmnModeler.get('modeling');

      // 获取所有元素
      const allElements = elementRegistry.getAll();

      // 过滤出开始节点
      const startEvents = allElements.filter(element => element.type === 'bpmn:StartEvent');

      // 校验开始节点的数量
      if (startEvents.length !== 1) {
        alert('画布上必须且只能有一个开始节点');
        return;
      }

      // 如果校验通过，继续保存流程
      this.bpmnModeler.saveXML({ format: true }, (err, { xml }) => {
        if (err) {
          console.error('Failed to save BPMN file', err);
        } else {
          console.log('BPMN file saved successfully', xml);
          // 你可以在这里将 XML 发送到服务器
        }
      });
    }
  }
};
</script>

<style>
/* 你的样式 */
</style>

解释

1. 初始化 BpmnModeler：
   • 在 mounted 生命周期钩子中初始化 BpmnModeler，并加载 BPMN 文件。
2. saveFlow 方法：
   • 获取 modeling 和 elementRegistry 服务。
   • 使用 elementRegistry.getAll() 获取画布上的所有元素。
   • 使用 filter 方法过滤出类型为 bpmn:StartEvent 的元素。
   • 检查过滤后的数组长度是否为1，如果不是，则弹出提示并返回。
   • 如果校验通过，调用 saveXML 方法保存 BPMN 文件。

这样，你就可以确保在保存流程之前，画布上只有一个开始节点。

我：报错：TypeError: Cannot read properties of undefined (reading 'getAll')

通义灵码：

报错 TypeError: Cannot read properties of undefined (reading 'getAll') 表明 elementRegistry 未正确获取到。这通常是因为 get 方法没有正确地从 bpmnModeler 中获取到 elementRegistry 服务。

我们可以通过以下步骤来解决这个问题：

1. 确保 bpmnModeler 已经初始化完成。
2. 正确获取 elementRegistry 服务。

以下是修正后的代码：

<template>
  <div id="app">
    <!-- 你的 BPMN 画布和其他组件 -->
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';

export default {
  data() {
    return {
      bpmnModeler: null,
    };
  },
  mounted() {
    this.initBpmnModeler();
  },
  methods: {
    initBpmnModeler() {
      this.bpmnModeler = new BpmnModeler({
        container: '#app',
        additionalModules: [
          propertiesPanelModule,
          propertiesProviderModule
        ]
      });

      // 加载你的 BPMN 文件
      this.bpmnModeler.importXML(yourBpmnXml, (err) => {
        if (err) {
          console.error('Failed to load BPMN file', err);
        } else {
          console.log('BPMN file loaded successfully');
        }
      });
    },
    saveFlow() {
      // 确保 bpmnModeler 已经初始化
      if (!this.bpmnModeler) {
        console.error('BPMN Modeler is not initialized');
        return;
      }

      const elementRegistry = this.bpmnModeler.get('elementRegistry');

      // 获取所有元素
      const allElements = elementRegistry.getAll();

      // 过滤出开始节点
      const startEvents = allElements.filter(element => element.type === 'bpmn:StartEvent');

      // 校验开始节点的数量
      if (startEvents.length !== 1) {
        alert('画布上必须且只能有一个开始节点');
        return;
      }

      // 如果校验通过，继续保存流程
      this.bpmnModeler.saveXML({ format: true }, (err, { xml }) => {
        if (err) {
          console.error('Failed to save BPMN file', err);
        } else {
          console.log('BPMN file saved successfully', xml);
          // 你可以在这里将 XML 发送到服务器
        }
      });
    }
  }
};
</script>

<style>
/* 你的样式 */
</style>

解释

1. 确保 bpmnModeler 已经初始化：
   • 在 saveFlow 方法中，首先检查 bpmnModeler 是否已经初始化。如果没有初始化，输出错误信息并返回。
2. 正确获取 elementRegistry 服务：
   • 使用 this.bpmnModeler.get('elementRegistry') 获取 elementRegistry 服务。
3. 获取所有元素：
   • 使用 elementRegistry.getAll() 获取画布上的所有元素。
4. 过滤开始节点：
   • 使用 filter 方法过滤出类型为 bpmn:StartEvent 的元素。
5. 校验开始节点的数量：
   • 检查过滤后的数组长度是否为1，如果不是，则弹出提示并返回。
6. 保存流程：
   • 如果校验通过，调用 saveXML 方法保存 BPMN 文件。

这样可以确保 elementRegistry 服务正确获取，并且在 bpmnModeler 未初始化时不会尝试访问其属性。

修正后的代码是可用的。至此，问题解决。

原文地址：https://blog.csdn.net/wannianchuan/article/details/143572874

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！