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

6. 所以我们整一个直接通过单击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: '第一个情况不掉时加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 });
      }
    }));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

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

源代码在Gitee仓库