一、功能说明

示例及使用功能说明

起始节点：新增表单，在起始节点绑定需要控制是数据表单。
任务节点：可以选择关联表单（主数据表相同的表单都可以选择控制，在拖拽表单设置中，主表-数据表名一致的），可以设置任务节点审批表单隐藏和显示的字段，此处的字段key多选。
image.png
image.png

分析修改后的Bpmn.xml

1、绑定activit:formkey-即帮的节点数据表id。
2、新增拓展节点参数，activiti:extensionElements->activti:field
writeFieldKey：可写可编辑的字段集合，此处存储的为数据字段。
hideFieldKey：隐藏的字段集合，此处存储的为数据字段。
image.png

二、bpmnjs表单属性改造

主要代码实现在ElementForm.vue组件中。
image.png

修改PropertiesPanel

image.png
image.png

页面属性改造

新增关联表单选择，编辑字段和隐藏字段。

  1. <div class="panel-tab__content">
  2.     <el-form size="mini" label-width="80px" @submit.native.prevent>
  3.       <el-form-item label="关联表单">
  4.         <el-select v-model="formKey" @change="updateElementFormKey">
  5.           <el-option
  6.             v-for="item in formList"
  7.             :key="item.id"
  8.             :value="item.id"
  9.             :label="item.table_comment"
  10.           />
  11.           <!-- <el-option label="无" value="" /> -->
  12.         </el-select>
  13.       </el-form-item>
  15.       <el-form-item label="编辑字段" v-if="elementType == 'UserTask'">
  16.         <el-select
  17.           multiple
  18.           placeholder="请选择"
  19.           v-model="writeFieldKey"
  20.           @change="updateElementwriteFieldKey"
  21.         >
  22.           <el-option-group
  23.             v-for="group in fieldList"
  24.             :key="group.id"
  25.             :label="group.table_comment+'('+group.flag+')'"
  26.           >
  27.             <el-option
  28.               v-for="item in group.vfields"
  29.               :key="item.id"
  30.               :label="item.field_comment"
  31.               :value="item.field_name"
  32.             >
  33.             </el-option>
  34.           </el-option-group>
  35.         </el-select>
  36.       </el-form-item>
  37.       <el-form-item label="隐藏字段" v-if="elementType == 'UserTask'">
  38.         <el-select
  39.           multiple
  40.           placeholder="请选择"
  41.           v-model="hideFieldKey"
  42.           @change="updateElementHideFieldKey"
  43.         >
  44.           <el-option-group
  45.             v-for="group in fieldList"
  46.             :key="group.id"
  47.             :label="group.table_comment"
  48.           >
  49.             <el-option
  50.               v-for="item in group.vfields"
  51.               :key="item.id"
  52.               :label="item.field_comment"
  53.               :value="item.field_name"
  54.             >
  55.             </el-option>
  56.           </el-option-group>
  57.         </el-select>
  58.       </el-form-item>
  59.     </el-form>
  60.   </div>

点击节点-执行方法

通过获取当前节点的信息查询已经设置的内容进行初始化。

  1.  resetFormList() {
  2.       this.bpmnELement = window.bpmnInstances.bpmnElement;
  3.       this.elementType = this.bpmnELement.type.split(":")[1];
  4.       if (this.elementType == "UserTask") {
  5.         let formKey =
  6.           this.bpmnELement.parent.businessObject.flowElements[0].formKey;
  7.         if (formKey == undefined || formKey == null) {
  8.           this.formList = [];
  9.           this.fieldList = [];
  10.         } else {
  11.           this.initData({ table_id: formKey });
  12.         }
  13.       } else if (this.elementType == "StartEvent") {
  14.         this.initData({});
  15.       }
  17.       this.formKey = this.bpmnELement.businessObject.formKey;
  18.       if (this.formKey != undefined) {
  19.         this.getFieldList({ table_id: this.formKey });
  20.       }
  22.       // 获取元素扩展属性 或者 创建扩展属性
  23.       this.elExtensionElements =
  24.         this.bpmnELement.businessObject.get("extensionElements");
  26.       this.writeFieldKey = [];
  27.       this.hideFieldKey = [];
  28.       if (this.elExtensionElements.values.length > 0) {
  29.         let writeFieldKey =
  30.           this.elExtensionElements.values[0].$attrs.writeFieldKey;
  31.         let hideFieldKey =
  32.           this.elExtensionElements.values[0].$attrs.hideFieldKey;
  33.         if (writeFieldKey != undefined && writeFieldKey != "") {
  34.           this.writeFieldKey = writeFieldKey.toString().split(",");
  35.         }
  36.         if (hideFieldKey != undefined && hideFieldKey != "") {
  37.           this.hideFieldKey = hideFieldKey.toString().split(",");
  38.         }
  39.       }
  41.       // 复制原始值，填充表格
  42.       this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
  44.       // 更新元素扩展属性，避免后续报错
  45.       this.updateElementExtensions();
  46.     },

解析：bpmnElement

通过window.bpmnInstances.bpmnElement查看当前节点信息，分享如下：
属性节点都存在businessObject下面，详细内容如下：
image.png

  1.  // 获取元素扩展属性 或者 创建扩展属性
  2.       this.elExtensionElements =
  3.         this.bpmnELement.businessObject.get("extensionElements");
  4.      let writeFieldKey =
  5.           this.elExtensionElements.values[0].$attrs.writeFieldKey;
  6.      let hideFieldKey =
  7.           this.elExtensionElements.values[0].$attrs.hideFieldKey;

看到此处-大家可能会有个疑问？
当前的任务节点，怎么获取开始节点绑定的formkey呢？因为此处需要根据起始节点绑定的formkey进行获取当前节点的内容信息。
咱们继续往下看：
在最下面发现有个parent节点，找到父级节点就好办了，根据父级节点，我们可以找到下面的第一个节点-就是其实节点，然后获取绑定的formkey。
image.png

  1.  let formKey =
  2.           this.bpmnELement.parent.businessObject.flowElements[0].formKey;

查询数据表字段

此处我们使用了分组下拉多选，因为除了有主表之外还要从表。

  1.  getFieldList(params) {
  2.       findFieldList(params).then((response) => {
  3.         this.fieldList = [];
  4.         let object = response.data.object;
  5.         object.flag = "主表";
  6.         let data = response.data.data;
  7.         this.fieldList.push(object);
  8.         data.forEach((element) => {
  9.           element.flag = "从表";
  10.           this.fieldList.push(element);
  11.         });
  12.       });
  13.     },
  1. <el-select
  2.           multiple
  3.           placeholder="请选择"
  4.           v-model="writeFieldKey"
  5.           @change="updateElementwriteFieldKey"
  6.         >
  7.           <el-option-group
  8.             v-for="group in fieldList"
  9.             :key="group.id"
  10.             :label="group.table_comment+'('+group.flag+')'"
  11.           >
  12.             <el-option
  13.               v-for="item in group.vfields"
  14.               :key="item.id"
  15.               :label="item.field_comment"
  16.               :value="item.field_name"
  17.             >
  18.             </el-option>
  19.           </el-option-group>
  20.         </el-select>

image.png

更新formkey属性

window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey, });

  1.  updateElementFormKey() {
  2.       window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
  3.         formKey: this.formKey,
  4.       });
  5.       //查询字段信息
  6.       this.getFieldList({ table_id: this.formKey });
  7.     },

更新写/隐藏字段属性

  1. updateElementwriteFieldKey() {
  2.       // window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
  3.       //   writeFieldKey: this.writeFieldKey,
  4.       // });
  5.       this.otherExtensions = [];
  6.       const Field = window.bpmnInstances.moddle.create(
  7.         `${this.prefix}:Field`,
  8.         { writeFieldKey: this.writeFieldKey, hideFieldKey: this.hideFieldKey }
  9.       );
  10.       this.otherExtensions.push(Field);
  11.       this.updateElementExtensions();
  12.     },
  13.     updateElementHideFieldKey() {
  14.       // window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
  15.       //   hideFieldKey: this.hideFieldKey,
  16.       // });
  17.       this.otherExtensions = [];
  18.       const Field = window.bpmnInstances.moddle.create(
  19.         `${this.prefix}:Field`,
  20.         { writeFieldKey: this.writeFieldKey, hideFieldKey: this.hideFieldKey }
  21.       );
  22.       this.otherExtensions.push(Field);
  23.       this.updateElementExtensions();
  24.     },
  25.     updateElementBusinessKey() {
  26.       window.bpmnInstances.modeling.updateModdleProperties(
  27.         this.bpmnELement,
  28.         this.formData,
  29.         { businessKey: this.businessKey }
  30.       );
  31.     },
  32.     updateElementExtensions() {
  33.       // 更新回扩展元素,生成ExtensionElements的代码
  34.       const newElExtensionElements = window.bpmnInstances.moddle.create(
  35.         `bpmn:ExtensionElements`,
  36.         {
  37.           values: this.otherExtensions,
  38.         }
  39.       );
  40.       // 更新到元素上
  41.       //此处直接放到扩展节点的根节点是，配合后台查询，可以自定义，但后台代码需要自己编写
  42.       window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
  43.         extensionElements: newElExtensionElements,
  44.       });
  45.     },