bpmn camunda版转为activiti版

比眉伴天荒 2023-06-22 13:47 42阅读 0赞

下载[https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel][https_github.com_bpmn-io_bpmn-js-examples_tree_master_properties-panel]模板，将app里的html文件和js文件修改为如下：

html:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>bpmn-js modeler demo</title>
    
      <link rel="stylesheet" href="css/diagram-js.css" />
      <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
      <link rel="stylesheet" href="css/app.css" />
    </head>
    <body>
      <div class="content with-diagram" id="js-drop-zone">
    
        <div class="message intro">
          <div class="note">
            Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
          </div>
        </div>
    
        <div class="message error">
          <div class="note">
            <p>Ooops, we could not display the BPMN 2.0 diagram.</p>
    
            <div class="details">
              <span>Import Error Details</span>
              <pre></pre>
            </div>
          </div>
        </div>
    
        <div class="canvas" id="js-canvas"></div>
        <div class="properties-panel-parent" id="js-properties-panel"></div>
      </div>
    
      <ul class="buttons">
        <li>
          download
        </li>
        <li>
          <a id="js-download-diagram" href title="download BPMN diagram">
            BPMN diagram
          </a>
        </li>
        <li>
          <a id="js-download-svg" href title="download as SVG image">
            SVG image
          </a>
        </li>
        <li>
          <input type="file" id="file"  οnchange="uploadfile();" />
        </li>
      </ul>
    
      <script src="index.js"></script>
    </html>

js:

import $ from 'jquery';
    import BpmnModeler from 'bpmn-js/lib/Modeler';
    
    import propertiesPanelModule from 'bpmn-js-properties-panel';
    import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
    import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
    import x2js from 'x2js'
    import {
      debounce
    } from 'min-dash';
    
    import diagramXML from '../resources/newDiagram.bpmn';
    
    
    var container = $('#js-drop-zone');
    
    var canvas = $('#js-canvas');
    
    var bpmnModeler = new BpmnModeler({
      container: canvas,
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    });
    container.removeClass('with-diagram');
    
    function createNewDiagram() {
      openDiagram(diagramXML);
    }
    
    function openDiagram(xml) {
    
      bpmnModeler.importXML(xml, function(err) {
    
        if (err) {
          container
            .removeClass('with-diagram')
            .addClass('with-error');
    
          container.find('.error pre').text(err.message);
    
          console.error(err);
        } else {
          container
            .removeClass('with-error')
            .addClass('with-diagram');
        }
    
    
      });
    }
    
    function saveSVG(done) {
      bpmnModeler.saveSVG(done);
    }
    
    function saveDiagram(done) {
    
      bpmnModeler.saveXML({ format: true }, function(err, xml) {
        done(err, xml);
      });
    }
    
    function registerFileDrop(container, callback) {
    
      function handleFileSelect(e) {
        e.stopPropagation();
        e.preventDefault();
    
        var files = e.dataTransfer.files;
    
        var file = files[0];
    
        var reader = new FileReader();
    
        reader.onload = function(e) {
    
          var xml = e.target.result;
    
          callback(xml);
        };
    
        reader.readAsText(file);
      }
    
      function handleDragOver(e) {
        e.stopPropagation();
        e.preventDefault();
    
        e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
      }
    
      container.get(0).addEventListener('dragover', handleDragOver, false);
      container.get(0).addEventListener('drop', handleFileSelect, false);
    }
    // 下载bpmn去除formData，修改camunda为activiti
    function getFormProperty(json){
      for(let e in json){
        if(e=='extensionElements'&&json.extensionElements.formData&&json.extensionElements.formData.formField){
          json.extensionElements._businessKey=json.extensionElements.formData._businessKey
          let formProperty = JSON.parse(JSON.stringify(json.extensionElements.formData.formField))
          if(isArrayFn(formProperty)){
            formProperty.forEach(x=>{
              x.__prefix='activiti'
            })
          } else {
            formProperty.__prefix='activiti'
          }
          json.extensionElements.formProperty = formProperty
          delete json.extensionElements.formData
        } else if(e.includes('camunda')){
          let str = e.replace('camunda','activiti')
          json[str] = json[e]
          delete json[e]
        } else if(typeof json[e] == 'object'){
          getFormProperty(json[e])
        }
      }
    }
    // 导入bpmn加上formData，修改activiti为camunda
    function returnFormProperty(json){
      for(let e in json){
        if(e=='extensionElements'&&json.extensionElements.formProperty){
          let formField = JSON.parse(JSON.stringify(json.extensionElements.formProperty))
          if(isArrayFn(formField)){
            formField.forEach(x=>{
              x.__prefix='camunda'
            })
          } else {
            formField.__prefix='camunda'
          }
          json.extensionElements.formData = {
            formField,
            _businessKey:json.extensionElements._businessKey,
            __prefix:"camunda"
          }
          delete json.extensionElements.formProperty
        } else if(typeof json[e] == 'object'){
          returnFormProperty(json[e])
        }
      }
    }
    //判断是否为数组
    function isArrayFn(value){ 
      if (typeof Array.isArray === "function") { 
          return Array.isArray(value); 
      }else{ 
          return Object.prototype.toString.call(value) === "[object Array]"; 
      } 
    } 
    // file drag / drop ///
    
    // check file api availability
    if (!window.FileList || !window.FileReader) {
      window.alert(
        'Looks like you use an older browser that does not support drag and drop. ' +
        'Try using Chrome, Firefox or the Internet Explorer > 10.');
    } else {
      registerFileDrop(container, openDiagram);
    }
    
    // bootstrap diagram functions
    
    $(function() {
      var $x2js = new x2js()
      //导入文件，将activiti版转为camunda版
      $('#file').change(function(e){
        let reads = new FileReader();
        let file = e.target.files[0];
        reads.readAsText(file, 'utf-8');
        reads.onload = function (e) {
          console.log(e.target.result)
          var jsonObj = $x2js.xml2js(e.target.result)
          returnFormProperty(jsonObj)
          let newXml = $x2js.js2xml(jsonObj)
          console.log(newXml)
          bpmnModeler.importXML(newXml, function (err) {
            if (err) {
              console.error(err)
            }
          })
        };
      })
      $('#js-create-diagram').click(function(e) {
        e.stopPropagation();
        e.preventDefault();
    
        createNewDiagram();
      });
    
      var downloadLink = $('#js-download-diagram');
      var downloadSvgLink = $('#js-download-svg');
    
      $('.buttons a').click(function(e) {
        if (!$(this).is('.active')) {
          e.preventDefault();
          e.stopPropagation();
        }
      });
    
      function setEncoded(link, name, data) {
        var encodedData = encodeURIComponent(data);
    
        if (data) {
          link.addClass('active').attr({
            'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
            'download': name
          });
        } else {
          link.removeClass('active');
        }
      }
    
      var exportArtifacts = debounce(function() {
    
        saveSVG(function(err, svg) {
          setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
        });
        //下载为bpmn将camunda版转为activiti版
        saveDiagram(function(err, xml) {
          var jsonObj = $x2js.xml2js(xml)
          getFormProperty(jsonObj)
          let newXml = $x2js.js2xml(jsonObj)
          console.log(jsonObj)
          setEncoded(downloadLink, 'diagram.bpmn', err ? null : newXml);
        });
      }, 500);
    
      bpmnModeler.on('commandStack.changed', exportArtifacts);
    });

项目表单需要name属性：修改node\_modules\\bpmn-js-properties-panel\\lib\\provider\\camunda\\parts\\FormProps.js文件，在module.exports 的方法内加入如下代码：

group.entries.push(formFieldTextField(\{

id: 'form-field-name',

label: translate('Name'),

modelProperty: 'name'

\}, getSelectedFormField));

再修改node\_modules\\camunda-bpmn-moddle\\resources\\camunda.json文件，在types里找到FormField的properties加入

"name": "name",

"type": "String",

"isAttr": true

\},

[https_github.com_bpmn-io_bpmn-js-examples_tree_master_properties-panel]: https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel