基于jeecgboot的flowable流程增加节点表单的支持（二）

2、进入流程编辑页面如下，其中传入相应的数据，结构如下

designerData: {
           loading: false,
           bpmnXml: '',
           deploymentId: null,
           form: {
             users: [],
             groups: [],
             categorys: [],
             processName: null,
             processKey: null
           }
         },

其中users和groups是用户与角色，categorys是流程分类，

<!--用bpmn-process-designer 流程图 -->
    <el-dialog :z-index="1000" :title="designerData.title" :visible.sync="designerOpen" append-to-body fullscreen>
      <process-designer
        :key="designerOpen"
        style="border:1px solid rgba(0, 0, 0, 0.1);"
        ref="modelDesigner"
        v-loading="designerData.loading"
        :bpmnXml="designerData.bpmnXml"
        :designerForm="designerData.form"
        @save="save"
      />
    </el-dialog>

//其中，上面的组件如下
<template>
  <div class="process-design" :style="'display: flex; height:' + height">
    <bpmn-process-designer
      v-model="xmlString"
      v-bind="controlForm"
      keyboard
      simulation
      ref="processDesigner"
      :events="[
        'element.click',
        'connection.added',
        'connection.removed',
        'connection.changed'
      ]"
      @element-click="elementClick"
      @init-finished="initModeler"
      @event="handlerEvent"
      @save="onSaveProcess"
    />
    <bmpn-process-penal :bpmn-modeler="modeler" :prefix="controlForm.prefix" 
      :users="controlForm.users" :groups="controlForm.groups" :categorys="controlForm.categorys" class="process-panel" />
  </div>
</template>

      主要是两个部分，一个是bpmn-process-designer，是流程设计相关的内容，另外一个是bmpn-process-penal右边流程属性相关的页面内容

     3、其中，表单选择这块主要修改ElementForm.vue  ，注释掉大部分不用的内容，取出需要选择的form表单内容

<el-form size="mini" label-width="80px" @submit.native.prevent>
    <el-form-item label="表单" prop="formKey">
        <el-select v-model="formKey" placeholder="请选择表单" @change="updateElementFormKey" clearable>
          <el-option v-for="item in formList" :key="item.id" :label="item.formName" :value="`${item.id}`" />
        </el-select>
    </el-form-item>


/** 查询表单列表 */
    getFormList() {
      listForm().then(response => this.formList = response.result.records)
    },

4、流程的基础属性里增加流程分类

<template v-if="elementBaseInfo.$type === 'bpmn:Process'">
        <el-form-item label="流程分类">
         <el-select v-model="elementBaseInfo.processCategory" 
            clearable @change="updateBaseInfo('processCategory')"  placeholder="请选择">
            <el-option
               v-for="item in categorys"
               :key="item.id"
               :label="item.name"
               :value="item.id">
             </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本标签">
          <el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
        </el-form-item>
        <el-form-item label="可执行">
          <el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
        </el-form-item>
      </template>

5、同时增加流程分类的信息写入

if (key === "processCategory") {//写入流程分类信息
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
          'flowable:processCategory': this.elementBaseInfo[key] //兼容老系统
        });
        this.bpmnElement.processCategory = this.elementBaseInfo[key]
        return;
      }

6、UserTask.vue里修改任务相关内容，主要是用户选择以及控制多实例相关内容

<el-row>
      <h4><b>设置用户类型</b></h4>
      <el-radio-group v-model="defaultTaskForm.dataType" @change="changeDataType">
        <div v-if="bDisplayUser">
          <el-radio label="ASSIGNEE">指定用户</el-radio>
          </div>
        <el-radio label="USERS">候选用户</el-radio>
        <el-radio label="ROLES">候选角色</el-radio>
      </el-radio-group>
    </el-row>
    <el-row>
      <div v-if="defaultTaskForm.dataType === 'ASSIGNEE'">
        <el-select v-model="userTaskForm.assignee" filterable allow-create clearable @change="updateElementTask('assignee')">
          <el-option v-for="ak in users" :key="ak.id" :label="ak.name" :value="ak.id" />
        </el-select>
      </div>   
    </el-row>
    <el-row>
      <div v-if="defaultTaskForm.dataType === 'USERS'">
        <el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">
          <el-option v-for="uk in users" :key="uk.id" :label="uk.name" :value="uk.id" />
        </el-select>
      </div>   
    </el-row>
    <el-row>
      <div v-if="defaultTaskForm.dataType === 'ROLES'">
        <el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">
          <el-option v-for="gk in groups" :key="gk.name" :label="gk.name" :value="gk.name" />
        </el-select>
      </div>  
    </el-row>
    <el-row v-if="defaultTaskForm.dataType === 'USERS' || defaultTaskForm.dataType === 'ROLES'">
      <h4><b>多实例</b></h4>
      <div>
        <element-multi-instance :business-object="bpmnElement.businessObject" @multiInsEvent="multiIns"/>
      </div>  
    </el-row>

7、ElementMultiInstance.vue多实例文件修改，主要修改部分如下

window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        assignee: "${assignee}"  //对多实例，指定用户固定为${assignee}
      });
      //对多实例，目前相关参数给出默认值，用户也可以修改，但相应后端软件也要做调整
      this.loopInstanceForm.collection = "${multiInstanceHandler.getUserName(execution)}";
      this.loopInstanceForm.elementVariable = "assignee";
      this.loopInstanceForm.completionCondition = "${nrOfCompletedInstances>=nrOfInstances}";
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
        collection: "${multiInstanceHandler.getUserName(execution)}",
        elementVariable: "assignee"
      });
      let completionCondition = null;
      completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances>=nrOfInstances}" });
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
        completionCondition
      });
      this.$emit('multiInsEvent',false);//隐藏父组件的指定用户