jc-server-bpmn-js-properties-panel-activiti

1.0.0 • Public • Published

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

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. 示例图 示例1 示例2 示例3

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渲染数据
  },
  ...
}

其他说明

任务说明

Package Sidebar

Install

npm i jc-server-bpmn-js-properties-panel-activiti

Weekly Downloads

7

Version

1.0.0

License

MIT

Unpacked Size

1.55 MB

Total Files

259

Last publish

Collaborators

  • lizhiqiang0372