基于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-designerv-model="xmlString"v-bind="controlForm"keyboardsimulationref="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-optionv-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);//隐藏父组件的指定用户

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

基于jeecgboot的flowable流程支持退回到发起人节点表单修改功能
因为目前系统不支持用户退回到第一个用户任务节点的表单修改功能,这样有些需求需要能修改功能,所以这次支持这种功能. 1.后端代码主要是判断是否是开始节点的第一个用户任务节点,要是就进行标志传送代码如 ...
基于jeecgboot的flowable流程支持定时捕获事件
Flowable事件事件(event)通常用于为流程生命周期中发生的事情建模.事件总是图形化为圆圈.在BPMN 2.0中,有两种主要的事件分类:*捕获(catching)与抛出(throwing ...
基于WF4的新平台-流程模式-(9)表单路由启动传入
平台所支持的流程模式-(9)表单路由启动传入目录表单路由启动传入 2 流程图例 2 流程设计 3 流程信息 5 流程测试 6 查看运行信息 7 表单路由启动传入 ...
基于springboot+element ui+vue的java快速开发平台，集成html5工作流设计器，flowable， element ui 表单设计器
前后端分离.maven多模块开发,方便多人协同开发后端选型:springboot2 + mybatis + shiro + jwt token + flowable 前端选型:vue + eleme ...
Flowable 6.6.0表单 - 1.配置 - 1.4 数据库配置（Database configuration）
培训视频推荐 CSDN上提供了Flowable 6.6.0的系列培训视频课程,欢迎有兴趣的朋友前往学习. <Flowable流程入门课程> <Flowable流程高级课程> & ...
基于spring自动注入及AOP的表单二次提交验证
2019独角兽企业重金招聘Python工程师标准>>> 这几天在网上闲逛,看到了几个关于spring的token二次提交问题,受到不少启发,于是自己动手根据自己公司的项目框架结构,制 ...
activiti表单设计器_基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址: http://tools.xiaoyaoji.cn/form Gi ...
基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址:http://form.making.link GitHub地址:h ...
基于Ant Design和jQuery UI的表单设计器
基于Ant Design 和jQuery UI 的表单设计器 GitHub 地址概念 Comonent 组件 Layout 布局,一种特殊的Component Component Editor 组件 ...
html怎么校验用户名重复,layui的表单验证支持ajax判断用户名是否重复的实例
如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. ht ...

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

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

最新文章

热门文章