首页 文章

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

提问于
浏览
4

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

What I want ?

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

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

What I tried ?

我尝试了以下两种方法

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

我得到的输出是:

enter image description here

2:传递了selectBox和默认文本框但是通过条件区分它们,例如: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 ];
};

我得到的输出是

enter image description here

有人可以帮帮我吗

谢谢

1 回答

  • 2

    解决方法是为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谢谢

相关问题