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

news2024/11/7 10:38:15

最终代码：

     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 方法中进行检查。以下是一个示例代码，展示了如何实现这一功能：

获取所有元素：使用 modeling 服务获取当前画布上的所有元素。
过滤开始节点：从所有元素中过滤出开始节点。
校验数量：检查开始节点的数量是否为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>

解释

初始化 BpmnModeler：
- 在 mounted 生命周期钩子中初始化 BpmnModeler，并加载 BPMN 文件。
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 服务。

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

确保 bpmnModeler 已经初始化完成。
正确获取 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>

解释

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