AI 助理
文档备案控制台
开发者社区 云计算 文章 正文

基于若依的ruoyi-nbcio流程管理系统支持支持定时边界事件和定时捕获事件

2024-05-11 221
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 基于若依的ruoyi-nbcio流程管理系统支持支持定时边界事件和定时捕获事件

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统

1、定时边界事件

<template>
  <div class="panel-tab__content">
    <!--目前只处理定时边界事件 -->
    <el-form size="mini" label-width="90px" @submit.native.prevent v-if="this.businessObject.eventDefinitions[0].$type.indexOf('TimerEventDefinition') !== -1">
      <el-form-item label="事件类型">
        <el-select v-model="timeDefinitionType" @change="changeTimerType">
          <!--bpmn:TimerEventDefinition-->
          <el-option label="指定时间" value="timeDate" />
          <el-option label="持续时间" value="timeDuration" />
          <el-option label="周期执行" value="timeCycle" />
        </el-select>
      </el-form-item>
      <template v-if="timeDefinitionType != ''">
        <el-form-item label="时间设置" required>
            <el-tooltip>
              <div slot="content">
                事件类型配置说明<br>
                1.指定时间(timeDate):触发事件的时间,如:2022-12-16T11:12:16 <br>
                2.持续时间(timeDuration):指定时器之前需等待多长时间,使用ISO 8601规定的格式<br>
                 (由BPMN 2.0规定),如PT5M(等待5分钟),也支持表达式${duration},<br>
                 这样你就可以通过流程变量来影响定时器定义<br>
                3.周期执行(timeCycle):指定重复执行的间隔,可以用来定期启动流程实例,<br>
                或为超时时间发送多个提醒。timeCycle元素可以使用两种格式。<br>
                第一种是 ISO 8601 标准的格式。示例值(R3/PT5M)(重复3次,<br>
                每次间隔5分钟),或也可以用cron表达式指定timeCycle,如从整点开始,<br>
                每10分钟执行一次(0 0/10 * * * ?)<br>
              </div>
              <el-input size="mini" type="string" v-model="FormalExpression" @change="updateTimeValue"></el-input>
            </el-tooltip>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "BoundaryEvent",
  props: {
    businessObject: Object,
    type: String
  },
  inject: {
    prefix: "prefix"
  },
  data() {
    return {
      timeDefinitionType: "",
      FormalExpression:'',
    }; 
  },
  watch: {
    businessObject: {
      immediate: true,
      handler(val) {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.getElementLoop(val);
      }
    }
  },
  methods: {
    getElementLoop(businessObject) {//获取定时边界事件原有值
      console.log("getElementLoop businessObject=",businessObject)
      console.log("window.bpmnInstances.bpmnElement.businessObject=",window.bpmnInstances.bpmnElement.businessObject);
      if(businessObject.hasOwnProperty('eventDefinitions') && businessObject.eventDefinitions.length>0){
        if(businessObject.eventDefinitions[0].$type == 'bpmn:TimerEventDefinition') {
          if(businessObject.eventDefinitions[0].hasOwnProperty('timeDuration')) {
            this.timeDefinitionType = "timeDuration"
            this.FormalExpression = businessObject.eventDefinitions[0].timeDuration.body
          }
          else if(businessObject.eventDefinitions[0].hasOwnProperty('timeDate')) {
            this.timeDefinitionType = "timeDate"
            this.FormalExpression = businessObject.eventDefinitions[0].timeDate.body
          }
          else if(businessObject.eventDefinitions[0].hasOwnProperty('timeCycle')) {
            this.timeDefinitionType = "timeCycle"
            this.FormalExpression = businessObject.eventDefinitions[0].timeCycle.body
            
          }
        }
      }
    },
    changeTimerType(type) {
      this.timeDefinitionType = type
    },
    updateTimeValue(value) {
      console.log("updateTimeValue value=",value);
      this.updateTime(this.timeDefinitionType,value);
      console.log("updateTimeValue this.bpmnElement=",this.bpmnElement);
    },
    //时间事件定义类型修改
    updateTime(type,value){
      //获取节点的子节点 timerEventDefinition
      console.log("updatetime type=",type)
      let timerEventDef = this.bpmnElement.businessObject.eventDefinitions[0]
      const timeCycle = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body:value });
      const timeDate = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body:value });
      const timeDuration = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body:value });
      if (type == 'timeCycle') {
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeDate:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeDuration:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeCycle })
      }
      else if (type == 'timeDate') {
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeCycle:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeDuration:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{ timeDate })
      }
      else if (type == 'timeDuration') {
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeDate:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeCycle:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{ timeDuration })
      }  
      
    },
    beforeDestroy() {
      this.bpmnElement = null;
    },
  }  
};
</script>

2、定时捕获事件

<template>
  <div class="panel-tab__content">
    <!--目前只处理定时捕获事件 -->
    <el-form size="mini" label-width="90px" @submit.native.prevent v-if="this.businessObject.eventDefinitions[0].$type.indexOf('TimerEventDefinition') !== -1">
      <el-form-item label="事件类型">
        <el-select v-model="timeDefinitionType" @change="changeTimerType">
          <!--bpmn:TimerEventDefinition-->
          <el-option label="指定时间" value="timeDate" />
          <el-option label="持续时间" value="timeDuration" />
          <el-option label="周期执行" value="timeCycle" />
        </el-select>
      </el-form-item>
      <template v-if="timeDefinitionType != ''">
        <el-form-item label="时间设置" required>
            <el-tooltip>
              <div slot="content">
                事件类型配置说明<br>
                1.指定时间(timeDate):触发事件的时间,如:2022-12-16T11:12:16 <br>
                2.持续时间(timeDuration):指定时器之前需等待多长时间,使用ISO 8601规定的格式<br>
                 (由BPMN 2.0规定),如PT5M(等待5分钟),也支持表达式${duration},<br>
                 这样你就可以通过流程变量来影响定时器定义<br>
                3.周期执行(timeCycle):指定重复执行的间隔,可以用来定期启动流程实例,<br>
                或为超时时间发送多个提醒。timeCycle元素可以使用两种格式。<br>
                第一种是 ISO 8601 标准的格式。示例值(R3/PT5M)(重复3次,<br>
                每次间隔5分钟),或也可以用cron表达式指定timeCycle,如从整点开始,<br>
                每10分钟执行一次(0 0/10 * * * ?)<br>
              </div>
              <el-input size="mini" type="string" v-model="FormalExpression" @change="updateTimeValue"></el-input>
            </el-tooltip>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "CatchEvent",
  props: {
    businessObject: Object,
    type: String
  },
  inject: {
    prefix: "prefix"
  },
  data() {
    return {
      timeDefinitionType: "",
      FormalExpression:'',
    }; 
  },
  watch: {
    businessObject: {
      immediate: true,
      handler(val) {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.getElementLoop(val);
      }
    }
  },
  methods: {
    getElementLoop(businessObject) {//获取定时捕获事件原有值
      console.log("getElementLoop businessObject=",businessObject)
      console.log("window.bpmnInstances.bpmnElement.businessObject=",window.bpmnInstances.bpmnElement.businessObject);
      if(businessObject.hasOwnProperty('eventDefinitions') && businessObject.eventDefinitions.length>0){
        if(businessObject.eventDefinitions[0].$type == 'bpmn:TimerEventDefinition') {
          if(businessObject.eventDefinitions[0].hasOwnProperty('timeDuration')) {
            this.timeDefinitionType = "timeDuration"
            this.FormalExpression = businessObject.eventDefinitions[0].timeDuration.body
          }
          else if(businessObject.eventDefinitions[0].hasOwnProperty('timeDate')) {
            this.timeDefinitionType = "timeDate"
            this.FormalExpression = businessObject.eventDefinitions[0].timeDate.body
          }
          else if(businessObject.eventDefinitions[0].hasOwnProperty('timeCycle')) {
            this.timeDefinitionType = "timeCycle"
            this.FormalExpression = businessObject.eventDefinitions[0].timeCycle.body
            
          }
        }
      }
    },
    changeTimerType(type) {
      this.timeDefinitionType = type
    },
    //
    updateTimeValue(value) {
      console.log("updateTimeValue value=",value);
      this.updateTime(this.timeDefinitionType,value);
      console.log("updateTimeValue this.bpmnElement=",this.bpmnElement);
    },
    //时间事件定义类型修改
    updateTime(type,value){
      //获取节点的子节点 timerEventDefinition
      console.log("updatetime type=",type)
      let timerEventDef = this.bpmnElement.businessObject.eventDefinitions[0]
      const timeCycle = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body:value });
      const timeDate = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body:value });
      const timeDuration = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body:value });
      if (type == 'timeCycle') {
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeDate:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeDuration:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeCycle })
      }
      else if (type == 'timeDate') {
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeCycle:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeDuration:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{ timeDate })
      }
      else if (type == 'timeDuration') {
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeDate:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{timeCycle:null})
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement,timerEventDef,{ timeDuration })
      }  
      
    },
    beforeDestroy() {
      this.bpmnElement = null;
    },
  }  
};
</script>

3、PropertiesPanel.vue 增加下面部分

<el-collapse-item name="catchEvent" v-if="elementType.indexOf('IntermediateCatchEvent') !== -1" key="catchEvent">
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>定时捕获事件</div>
        <catch-event :business-object="elementBusinessObject" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item name="boundaryEvent" v-if="elementType.indexOf('BoundaryEvent') !== -1" key="boundaryEvent">
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>定时边界事件</div>
        <boundary-event :business-object="elementBusinessObject" :type="elementType" />
      </el-collapse-item>

4、效果图如下：

宁波阿成.
目录
相关文章
hhzz
|
存储 XML Java
Flowable工作流-高级篇
Flowable工作流-高级篇
hhzz
8404 1
宁波阿成.
|
前端开发
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单（二）
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单（二）
宁波阿成.
1044 1
别惹CC
|
前端开发 Java API
SpringBoot整合Flowable【06】- 查询历史数据
本文介绍了Flowable工作流引擎中历史数据的查询与管理。首先回顾了流程变量的应用场景及其局限性，引出表单在灵活定制流程中的重要性。接着详细讲解了如何通过Flowable的历史服务API查询用户的历史绩效数据，包括启动流程、执行任务和查询历史记录的具体步骤，并展示了如何将查询结果封装为更易理解的对象返回。最后总结了Flowable提供的丰富API及其灵活性，为后续学习驳回功能做了铺垫。
别惹CC
1083 0
SpringBoot整合Flowable【06】- 查询历史数据
宁波阿成.
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单（三）
基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单（三）
宁波阿成.
735 1
宁波阿成.
|
前端开发
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒，并提供右上角的红字数字提醒（六）
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒，并提供右上角的红字数字提醒（六）
宁波阿成.
891 0
宁波阿成.
|
移动开发 JavaScript 前端开发
ruoyi-nbcio-plus基于vue3的flowable定时边界事件代码升级修改（二）
ruoyi-nbcio-plus基于vue3的flowable定时边界事件代码升级修改（二）
宁波阿成.
258 0
宁波阿成.
|
移动开发 前端开发 Java
基于jeecg-boot的flowable流程提供一种动态设置发起人部门负责人的方式
基于jeecg-boot的flowable流程提供一种动态设置发起人部门负责人的方式
宁波阿成.
516 0
宁波阿成.
|
移动开发 前端开发
基于Jeecg-boot的flowable流程支持拒绝同意流程操作
基于Jeecg-boot的flowable流程支持拒绝同意流程操作
宁波阿成.
488 0
宁波阿成.
|
前端开发 数据库 JavaScript
基于Flowable的流程挂接自定义业务表单的设计与实践
文章讨论了如何在Flowable流程引擎中挂接自定义业务表单，以及相关设计和实践的步骤。文章中包含了一些前后端代码示例，如Vue组件的模板和脚本部分，这些代码用于实现与Flowable流程引擎交互的界面。例如，有一个按钮组件用于提交申请，点击后会触发applySubmit方法，该方法会与后端API进行交互，处理流程启动、查询关联流程等逻辑。
宁波阿成.
54037 11
宁波阿成.
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法（二）
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法（二）
宁波阿成.
235 2

热门文章

最新文章

  • 1
    【密码学】一文读懂ChaCha20
  • 2
    如何接入公安实名认证接口
  • 3
    PyCharm与Anaconda超详细安装配置教程
  • 4
    决策树模型算法研究与案例分析
  • 5
    iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角)
  • 6
    开源智能家居系统及项目整理
  • 7
    RxJava/RxAndroid's operator : just
  • 8
    Twitter或能预测飓风破坏情况并成为危机救助平台
  • 9
    Xbox Live会员身份：银会员和金会员
  • 10
    10、如何自学Struts2之Struts2发送邮件[视频]
  • 1
    2026阿里云轻量应用服务器全解析：轻量特性、费用价格、功能优势及问题解答FAQ
    56
  • 2
    PicGo:为高效创作者而生的终极图片上传工具
    48
  • 3
    Violit: Streamlit杀手，无需全局刷新，构建AI快捷面板
    48
  • 4
    玄晶引擎：基于阿里云生态的全流程AI自动化方案，赋能中小微企业低成本数字化转型
    55
  • 5
    烦透了AI焦虑？读懂智源2026报告，抓住3个真机会
    42
  • 6
    AI算力选择终极指南：如何像配电脑一样，配好你的大模型“发动机”
    47
  • 7
    别再分不清显存和内存了！一文讲透AI算力的核心秘密
    57
  • 8
    阿里云中小企业扶持权益中心内容说明及节省上云操作手册参考
    31
  • 9
    # 别让大模型“通用”下去！微调+推理，让你的AI真正“为你所用”
    55
  • 10
    阿里云服务器地域节点选择教程及常见问题解答
    41

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    附部署代码｜云数据库RDS 全托管 Supabase服务：小白轻松搞定开发AI应用