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

一、效果

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

2. 可以多选
   

3. xml保存
   

二、思路

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

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

3. 找到一个用选择器的元素（确定中的，get和set方法）,cmdHelper的update...方法就是让我们保存xml时，会添加activiti:candidateUsers
   

4. 修改我们的UserTaskProps，先获取业务元素，然后像原来input输入框一样保存candidateUsers用逗号分割的字符串
   

5. 最后就是回显的多选的问题了，元素改成多选需要加multiple（其配合size属性），使选择器一次可以看到多个（直接设置multiple是让我们用ctrl+click多选，但是这对应我们工作流并不生效）

   所以我们整一个直接通过单击click 实现的多选

   原理是

   元素中的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: '第一个情况不掉时加ctrl',
   
         get: function(element, node) {
           for (const j in users) {
             document.getElementById('activiti-candidateUsers-select').options[j].selected = false
           }
   
           var bo = getBusinessObject(element);
           var candidateUsers = bo.get('activiti:candidateUsers');
           console.log('get', candidateUsers);
           if(candidateUsers) {
             if(candidateUsers.indexOf(',') > -1) {
               var arr = candidateUsers.split(',');
               arr.forEach(e => {
                 for (const i in users) {
                   if(users[i].value === e) {
                     document.getElementById('activiti-candidateUsers-select').options[i].selected = true
                   }
                 }
               });
             }else {
               for (const i in users) {
                 if(users[i].value === candidateUsers) {
                   document.getElementById('activiti-candidateUsers-select').options[i].selected = true
                 }
               }
             }
           }
   
           return true
         },
         set: function(element, values, node) {
           var bo = getBusinessObject(element);
           if(bo.candidateUsers && (bo.candidateUsers !== values.candidateUsers)) {
             if(bo.candidateUsers.indexOf(values.candidateUsers) === -1) {
               values.candidateUsers = values.candidateUsers + ',' + bo.candidateUsers
             }else {
               var bc = bo.candidateUsers
               var us = ''
               if(bo.candidateUsers.indexOf(',' + values.candidateUsers) > -1 && bo.candidateUsers.indexOf(values.candidateUsers + ',') === -1) {
                 var rp = ',' + values.candidateUsers
                 us = bc.replace(rp, '')
               }
               if(bo.candidateUsers.indexOf(values.candidateUsers + ',') > -1) {
                 var rp1 = values.candidateUsers + ','
                 us = bc.replace(rp1, '')
               }
               // var len = values.candidateUsers.length
               // var index = bo.candidateUsers.indexOf(values.candidateUsers)
   
               values.candidateUsers = us
             }
   
           }
           var candidateUsers = values.candidateUsers || '';
           bo.candidateUsers = candidateUsers
           return cmdHelper.updateBusinessObject(element, bo, { 'activiti:candidateUsers': candidateUsers });
         }
       }));
   

   那么，就到这里了O(∩_∩)O哈哈~（最后还有一个bug,选项的第一个选了无法直接单击取消，【可以通过+ctrl取消】（原生的元素还是太麻烦了┭┮﹏┭┮ ） ）。闲着的时候看到了个vue+bpmn+el的项目（看到后更难受，在这用原生ui写，简直悔不当初。项目地址：bpmn.js流程设计器组件vue-bpmn-element）

   源代码在Gitee仓库