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);//隐藏父组件的指定用户
