首页 > 编程语言> 文章详细

javascript – 对servdown下的委托条目的更改bpmn属性面板上的任务未在UI上更新

2019-07-01 20:33:05 阅读：568 来源： 互联网

标签：javascript workflow camunda bpmn-io

我正在尝试修改“服务任务”类型下“常规”选项卡的“详细信息”部分.

我想要的是？

我试图实现这一点,当用户选择实现类型为JavaClass时,我会显示委托字段的下拉列表,而不是文本框,除了JavaClass之外的任何其他选择,它应该是文本框.

后来我想将动态数据加载到下拉列表中.

我尝试了什么？

我尝试了以下两种方法

1：编辑文件camunda\parts\implementation\Delegate.js以获取一个存储entryFactory.selectBox的var,并在type == class上返回module.exports中新创建的选择框,否则返回默认文本框.

module.exports = function(element, bpmnFactory, options) {

  var getImplementationType = options.getImplementationType,
      getBusinessObject     = options.getBusinessObject;

  var delegateEntrySelect = entryFactory.selectBox({
    id: 'delegate',
     label: 'Value',
    selectOptions: [
      {value:"one",name:"one"},{value:"two",name:"two"}
    ],
    modelProperty: 'delegate',
    emptyParameter: false,

    get: function(element, node) {
      var bo = getBusinessObject(element);
      var type = getImplementationType(element);
      var attr = getAttribute(type);
      var label = getDelegationLabel(type);
      return {
        delegate: bo.get(attr),
        delegationLabel: label
      };
    },

    set: function(element, values, node) {
      var bo = getBusinessObject(element);
      var prop = {};
      prop[attr] = values.delegate || '';
      return cmdHelper.updateBusinessObject(element, bo, prop);
    },

    validate: function(element, values, node) {
      return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
    }
  });   

  var delegateEntry = entryFactory.textField({
    id: 'delegate',
    label: 'Value',
    dataValueLabel: 'delegationLabel',
    modelProperty: 'delegate',

    get: function(element, node) {
      var bo = getBusinessObject(element);
      var type = getImplementationType(element);
      var attr = getAttribute(type);
      var label = getDelegationLabel(type);
      return {
        delegate: bo.get(attr),
        delegationLabel: label
      };
    },

    set: function(element, values, node) {
      var bo = getBusinessObject(element);
      var type = getImplementationType(element);
      var attr = getAttribute(type);
      var prop = {};
      prop[attr] = values.delegate || '';
      return cmdHelper.updateBusinessObject(element, bo, prop);
    },

    validate: function(element, values, node) {
      return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
    }
  });

  var eleTOReturn = (getImplementationType(element) && getImplementationType(element) == "class") ? delegateEntrySelect : delegateEntry
  console.log("returning ele",eleTOReturn)
  return [ eleTOReturn ];
};

我得到的输出是：

2：传递了selectBox和默认文本框,但是通过条件将它们区分为禁用
a：selectBox(！isDelegate(getImplementationType(element))||(isDelegate(getImplementationType(element))&& type！==“class”))

b：textBox(！isDelegate(getImplementationType(element))||(isDelegate(getImplementationType(element))&& type ===“class”))

在这两种情况下,JS代码执行良好,并且在camunda\parts\serviceTaskDelegateProps.js行#60内的group.entries变量下可以看到相同但它们不会在UI上反映出来.

Delegate.js代码如下

module.exports = function(element, bpmnFactory, options) {

var getImplementationType = options.getImplementationType,
  getBusinessObject     = options.getBusinessObject;

var delegateEntrySelect = entryFactory.selectBox({
id: 'delegate',
 label: 'Value',
selectOptions: [
  {value:"one",name:"one"},{value:"two",name:"two"}
],
modelProperty: 'delegate',
emptyParameter: false,

get: function(element, node) {
  var bo = getBusinessObject(element);
  var type = getImplementationType(element);
  var attr = getAttribute(type);
  var label = getDelegationLabel(type);
  return {
    delegate: bo.get(attr),
    delegationLabel: label
  };
},

set: function(element, values, node) {
  var bo = getBusinessObject(element);
  var prop = {};
  prop[attr] = values.delegate || '';
  return cmdHelper.updateBusinessObject(element, bo, prop);
},

validate: function(element, values, node) {
  return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
},

disabled: function(element, node) {
  var type = getImplementationType(element);
  console.log("SELECT DISABLE",(!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type !== "class")))
  return (!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type !== "class"));
}
});   

var delegateEntry = entryFactory.textField({
id: 'delegate',
label: 'Value',
dataValueLabel: 'delegationLabel',
modelProperty: 'delegate',

get: function(element, node) {
  var bo = getBusinessObject(element);
  var type = getImplementationType(element);
  var attr = getAttribute(type);
  var label = getDelegationLabel(type);
  return {
    delegate: bo.get(attr),
    delegationLabel: label
  };
},

set: function(element, values, node) {
  var bo = getBusinessObject(element);
  var type = getImplementationType(element);
  var attr = getAttribute(type);
  var prop = {};
  prop[attr] = values.delegate || '';
  return cmdHelper.updateBusinessObject(element, bo, prop);
},

validate: function(element, values, node) {
  return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
},

disabled: function(element, node) {
  var type = getImplementationType(element);
  console.log("TEXT DISABLE",(!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type === "class")))
  return (!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type === "class")); 
}  
});

 return [ delegateEntrySelect, delegateEntry ];
};

我得到的输出是

有人可以帮帮我吗

谢谢

解决方法:

解决方法是为Select Box添加一个不同的文件,作为delegate.js附近的delegateSelect.js,然后在serviceTaskDelegateProps.js中注册为

group.entries = group.entries.concat(delegateSelect(element, bpmnFactory, {
    getBusinessObject: getBusinessObject,
    getImplementationType: getImplementationType,
    hideDelegateSelect: function(element, node) {
      console.log(getImplementationType(element) !== 'class',"SELECT")
      return getImplementationType(element) !== 'class';
    }
   }));

  group.entries = group.entries.concat(delegate(element, bpmnFactory, {
    getBusinessObject: getBusinessObject,
    getImplementationType: getImplementationType,
    hideDelegateText: function(element, node) {
      console.log(getImplementationType(element) === 'class',"TEXT")
      return getImplementationType(element) === 'class';
    }
  }));

并在各自的代表和委托选举中处理了残疾人

 disabled: function(element, node) {
      if (typeof hideDelegateText === 'function') {
        return hideDelegateText.apply(delegateEntry, arguments);
      }
    }

disabled: function(element, node) {
      if (typeof hideDelegateSelect === 'function') {
        return hideDelegateSelect.apply(delegateEntrySelect, arguments);
      }
    }

我提到了ResultVariable.js文件来达到这个解决方案

详细视图到Camunda-blog
谢谢

标签：javascript,workflow,camunda,bpmn-io
来源： https://codeday.me/bug/20190701/1350675.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 对servdown下的委托条目的更改bpmn属性面板上的任务未在UI上更新