bpmn-js-properties-panel改造尝试，思路代码（候选人、候选组改为可选【多选】）

原创

已于 2022-08-19 08:49:56 修改 · 6.2k 阅读

标签

#javascript #开发语言 #ecmascript

收录于

于 2021-12-24 14:38:20 首次发布

一、效果

初始时与这个一样，通过输入框通过,分割，（但是事实的业务不可能让用户来自己输入）
可以多选
xml保存

二、思路

先找到我们要改造的节点
比如候选人candidateUsers

看看文件结构，在parts下【其中放了基本是创建元素的操作】
简单看看怎么创建元素的

找到一个用选择器的元素（确定中的，get和set方法）,cmdHelper的update...方法就是让我们保存xml时，会添加activiti:candidateUsers
修改我们的UserTaskProps，先获取业务元素，然后像原来input输入框一样保存candidateUsers用逗号分割的字符串
最后就是回显的多选的问题了，<select>元素改成多选需要加multiple（其配合size属性），使选择器一次可以看到多个（直接设置multiple是让我们用ctrl+click多选，但是这对应我们工作流并不生效）
所以我们整一个直接通过单击click 实现的多选

原理是<select>元素中的option可以通过selected实现选中
所以我们可以在get方法中遍历当前的candidateUsers ，然后将其定义为选中达成回显的效果。【document.getElementById('activiti-candidateUsers-select').options[i].selected = true】

三、最后的代码实现

// Candidate Users
    group.entries.push(entryFactory.selectBox({
   
   
      id : 'candidateUsers',
      label : translate('Candidate Users'),
      selectOptions: users,
      modelProperty : 'candidateUsers',
      description