BPMNJS节点实现扩展flowable标签--

注：此文主要是自用，能帮到大家更好

第一：创建flowable.json文件。如下配置

{
  "name": "Flowable",
  "uri": "http://flowable.org/bpmn",
  "prefix": "flowable",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
 {
      "name": "TypeString",
      "superClass": [
        "Element"
      ],
      "properties": [
        {
          "name": "body",
          "isBody": true,//改属性表示是否为文字，要属性的话删了即可
          "type": "String"
        }
      ]
    },
  {
      "name": "Field",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
         "*"
        ]
      },
      "properties": [
        
        {
          "name": "values",
          "type": "TypeString",//此属性要获取到你对应的name标签 
          "isMany": true
        }
      ]
    },
],
 "emumerations": []
}

二、导入创建的flowable.json 文件。创建bpmn对象

   import flowableModdleDescriptor from "./flowable";

 this.bpmnModeler = new Modeler({
        container: "#canvas",
        additionalModules: [
          propertiesPanelModule,
          propertiesProviderModule,
          this.customTranslate,
        ],
        moddleExtensions: {
          flowable: flowableModdleDescriptor,
        },
      });

三、创建标签

  const modeling = this.bpmnModeler.get("modeling");
    const elementRegistry = this.bpmnModeler.get("elementRegistry");
      const moddle = this.bpmnModeler.get("moddle");

      let body = moddle.create("flowable:TypeString", { body: "1213" });
      let Field = moddle.create("flowable:Field", {
        values: [body],
        name: "type",
      });
      const extensionElements = moddle.create("bpmn:ExtensionElements", {
        values: [Field],
      });
      modeling.updateProperties(
        elementRegistry._elements[elementId].element,
        { extensionElements }
      );