1. 环境
Vue 2.6.12+ElementUI 2.15.0 +@riophae/vue-treeselect 0.4.0+bpmnjs8.8.1+bpmn-js-properties-panel0.46.0+activiti7.1.0.M4
2. 问题描述
使用bpmn-js作为activiti工作流引擎的流程设计器时,对于用户任务(UserTask),新增表单字段,会出现名称和默认值输入后不显示问题,同时在activiti引擎中使用FormProperty查询表单字段信息,也获取不到名称和默认值信息。
3. 解决办法
通过对bpmn-js集成后的页面进行排查,表单字段中名称对应的input元素name="label",默认值对应的input元素name="defaultValue",为彻底解决输入不显示问题和activiti中获取名称和默认值获取不到问题,对bpmn-js-properties-panel的FormProps.js进行修改,原内容如下:
// [FormData] form field label text input field
group.entries.push(formFieldTextField({
id: 'form-field-label',
label: translate('Label'),
modelProperty: 'label'
}, getSelectedFormField));
// [FormData] form field defaultValue text input field
group.entries.push(formFieldTextField({
id: 'form-field-defaultValue',
label: translate('Default Value'),
modelProperty: 'defaultValue'
}, getSelectedFormField));
将modelProperty改成与activit引擎中FormProperty对应的字段名,具体修改如下:
// [FormData] form field label text input field
group.entries.push(formFieldTextField({
id: 'form-field-label',
label: translate('Label'),
modelProperty: 'name'
}, getSelectedFormField));
// [FormData] form field defaultValue text input field
group.entries.push(formFieldTextField({
id: 'form-field-defaultValue',
label: translate('Default Value'),
modelProperty: 'default'
}, getSelectedFormField));