工作流项目 - 流程图绘图插件：jc-server-bpmn-js-properties-panel-activiti.js

v 1.0.7

• 扩展属性配置

v 1.0.6

1. 版本说明
   • 连接器添加connectorName属性

v 1.0.5

1. 版本说明
   • 开始节点添加设置抄送人配置项

v 1.0.4

Release Notes

1. 版本说明

   • 表单多选修改显示tag代码；表单key添加documentation元素；资源配置fields修改返参；
   • 设置经办者时，选择关系数据不单独设置属性，放在userinfo里面，判断是否只设置了部门没有设置角色（岗位），改变节点属性；
   • 修改办理人配置为资源配置；隐藏是否自动选人配置；
   • 修改连接器相关；
   • 修改serviceTask节点，实现方式activiti-implementation-select属性，只保留连接器，其余方式删除；
   • 办理类型选择非并行多实例时隐藏完成条件配置；修改完成条件为下拉选择框；
   • 当勾选了服务组件时，把办理设置、是否自动选人、办理类型设置隐藏，如果没勾选服务组件，把这三个显示；
   • 调整办理类型设置的顺序，放在是否自动选人下面，把服务组件放在办理设置上面；把办理类型f放在userGroup里面；
   • 修改排序组代码；添加是否自动选人组；
   • 将人员组放在基本信息中，修改排序、权限按钮、微流程标题样式；
   • factory下js文件的button元素删除data-disable=isDisabled属性【解决火狐浏览器无法点击按钮问题】；
   • 已发布的流程设计，多实例的完成条件可以修改；多实例类型添加bpmn:SubProcess子流程节点可以设置；
   • 多实例类型添加“多人并行异步“；
   • 用户节点添加超期设置；

2. 示例图

v 0.0.2

Release Notes

1. 版本说明
   • 连接线 右侧属性面板隐藏 监听、扩展 面板

v 0.0.1

Release Notes

1. 版本说明

   • 用户任务 右侧属性面板添加 人员 面板
     点击 设置 按钮根据弹框内所选人员信息反显
     

   • 服务任务 右侧属性面板实现方式添加 消息通知 选项
     

   • 服务任务 右侧属性面板 连接器 面板
     点击 设置 按钮根据弹框内所选服务反显连接器信息及对应输入/输出参数
     

代码示例

以修改用户任务右侧面板为例：
/* 
* ./lib/factory/UserTextInputEntryFactory.js 
*/
...
// 点击设置按钮，暴露 userTaskSelectCallBack 函数，输出 1.右侧属性面板input框id；2.右侧属性面板input框dom元素上的属性；3.xml源文件中对应的dom节点id；
var defaultButtonAction = function(element, inputNode) {
    var input = domQuery('textarea[name="' + options.modelProperty + '"]', inputNode);
    outputs.userTaskSelectCallBack(options.element.id, 'activiti-' + resource.id, input.getAttribute('data-user-value'))
    return true;
};
...
// 通过index.js文件触发 get方法，获取到人员选择弹框返回的数据
resource.get = function(element, node) {
    var bo = getBusinessObject(element);
    var usertask =  (getElements(bo, 'activiti:Userproperties') || [])[0];
    var value = usertask && usertask.get('alias');
    return { alias: value};
}
// 通过触发 set方法，给xml源文件设置dom节点
resource.set = function(element, values, node) {
    businessObject = businessObject || getBusinessObject(element);
    var userinfos = node.querySelector('#activiti-' + resource.id).getAttribute('data-user-value')
    values.userinfos = userinfos
    ...
    var field = elementHelper.createElement('activiti:Userproperties', values, extensionElements, options.bpmnFactory);
    var usertaskElements = getElements(bo, 'activiti:Userproperties') || [];
    if (usertaskElements.length == 0) {
      commands.push(cmdHelper.addElementsTolist(element, extensionElements, 'values', [ field ]));
    } else {
      commands.push(cmdHelper.updateBusinessObject(element, extensionElements, {
        values: [ field ]
      }));
    }
    ...
}

/*
* ./lib/provider/activiti/parts/UserProps.js
*/
...
module.exports = function(group, element, bpmnFactory, translate) {
  if (is(element, 'bpmn:UserTask')) { // 可以在这里做类型判断
    group.entries.push(entryFactory.userTextField({
      id : 'userproperties',
      description : '', // 面板描述
      label : '节点维护信息', // 面板名称
      modelProperty : 'alias', // xml源文件dom节点的value属性名称
      prefix: 'userproperties', 
      element,
      bpmnFactory,
      disabled: function(){ // 是否禁用
        return true
      },
    }));
  }
}
...

/*
* ./lib/index.js
*/
module.exports = {
  ...
  // 用户选择
  userTaskSelectCallBack: () => {},
  setUserTask: (id, value, str) => {
    document.getElementById(id).value = str // 给右侧属性面板的input赋值
    document.getElementById(id).setAttribute('data-user-value',value) // 给右侧属性面板的dom元素input设置属性value
    var changeEvent = document.createEvent ("HTMLEvents"); 
    changeEvent.initEvent ("change", true, true);
    document.getElementById(id).dispatchEvent (changeEvent); // 刷新页面dom渲染数据
  },
  ...
}

其他说明

任务说明