Activiti工作流绘制框架npmn-js个性化调整

首先看展示

注意：由于我没有设置用户机构数据访问接口的IP地址，导致我用户信息获取失败！

实现以下个性化功能

npmn-js框架英文汉化。

候选人与候选组可以通过 用户、机构（角色）选择。

npmn-js框架英文汉化实现

通过代码追踪，最后发现node_modules/bpmn-js-properties-panel/lib/provider/camunda/CamundaPropertiesProvider.js的CamundaPropertiesProvider文件有个translate方法，因此我们知道bpmn-js-properties-panel组建设计的时候已经考虑到语言国际化问题，只是没有实现而已。

通过追踪translate方法的实现类，我们发现改方法的实现在node_modules/diagram-js/lib/i18n/translate/translate.js中，代码如下：

export default function translate(template, replacements) {

  replacements = replacements || {};

  return template.replace(/{([^}]+)}/g, function(_, key) {
    return replacements[key] || '{' + key + '}';
  });
}

将改代码修改成一下内容：

import zhCH from '../zh-CH';

export default function translate(template, replacements) {

  replacements = replacements || zhCH;

  if(replacements[template]){
    return replacements[template];
  }

  return template.replace(/{([^}]+)}/g, function(_, key) {
    return replacements[key] || '{' + key + '}';
  });
}

其中zh-CH.js文件内容如下：

/**
 * Create by pengweikang on 2019/4/11.
 */

module.exports = {
    'Assignee':'代理人',
    'Candidate Groups':'候选组',
    'Candidate Users':'候选人',
    'Due Date':'到期日',
    'Follow Up Date':'跟踪日期',
    'Priority':'优先',
    'General':'一般信息',
    'Listeners':'监听',
    'Extensions':'扩展',
    'Name':'名称',
    'Version Tag':'版本标签',
    'Executable':'可执行文件',
    'External Task Configuration':'外部任务配置',
    'Task Priority':'任务优先级',
    'Job Configuration':'作业配置',
    'Job Priority':'工作优先级',
    'Documentation':'文档',
    'Element Documentation':'元素文献',
    'History Configuration':'历史配置',
    'History Time To Live':'历史生存时间',
    'Details':'详情',
    'Initiator':'发起者',
    'Asynchronous Continuations':'异步连续',
    'Asynchronous Before':'异步之前',
    'Asynchronous After':'异步之后',
    'Forms':'表单',
    'Input/Output':'输入/输出',
    'Properties':'属性',
    'Add Property':'添加属性',
    'value':'值',
    'Parameters':'参数',
    'Input Parameters':'输入参数',
    'Output Parameters':'输出参数',
    'Execution Listener':'执行监听',
    'Task Listener':'任务监听',
};

候选人与候选组可以通过 用户、机构（角色）选择

通过关键字查询，发现候选人与候选组输入框生成的代码在，node_modules/bpmn-js-properties-panel/lib/factory/TextInputEntryFactory.js中，部分代码如下：

resource.html =
    ''+ label +'' +
    '
' +
      '' +
      '' +
        '' + buttonLabel + '' +
      '' +
    '
';

将改代码修改成以下内容：

//源码内容
resource.html =
    ''+ label +'' +
    '
' +
      '' +
      '' +
        '' + buttonLabel + '' +
      '' +
    '
';

  if(resource.id == 'candidateUsers'){ //如果为候选人

      resource.html =
          ''+ label +'' +
          '
' +
          '
' +
          '' +

          '' +
          '' + buttonLabel + '' +
          '' +
          '
' +
          '' +  //点击方法
          '
';

  }else if(resource.id == 'candidateGroups'){ //如果为候选人
      resource.html =
          ''+ label +'' +
          '
' +
          '
' +
          '' +

          '' +
          '' + buttonLabel + '' +
          '' +
          '
' +
          '' + //点击方法
          '
';

  }

实现点击事件方法：

window.showUserInfo =  function(e) {

        window.layer.alert('你好');

        var input = $(e).prev().children().eq(0);
        $(input).val('12345');


         //以下代码必须添加，不然文本框内容填充无效。
        var changeEvent = document.createEvent ("HTMLEvents"); //创建输入框修改事件
        changeEvent.initEvent ("change", true, true);
        $(input)[0].dispatchEvent (changeEvent); //触发修改事件
    }

效果如下：

弹出框插件使用了layui-layer框架，但是该框架是通过ES5语法编写的，而且依赖Jquery，所以进行了部分修改，修改内容如下：

在layer.js开头加上以下代码

//在layer.js开头加上以下代码
import $ from 'jquery';

window.$ = $;
window.jQuery = $;

 

index.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';
import layer from 'layui-layer';



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);
}


// 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() {

  // $('#js-create-diagram').click(function(e) {
  //   e.stopPropagation();
  //   e.preventDefault();
  //
  //   createNewDiagram();
  // });

    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);
    });

    saveDiagram(function(err, xml) {
      setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml);
    });
  }, 500);

  bpmnModeler.on('commandStack.changed', exportArtifacts);



    window.showUserInfo =  function(e) {

        window.layer.alert('你好');

        var input = $(e).prev().children().eq(0);
        $(input).val('12345');
        var changeEvent = document.createEvent ("HTMLEvents");
        changeEvent.initEvent ("change", true, true);
        $(input)[0].dispatchEvent (changeEvent);
    }


});