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

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

2024-05-11 17
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 基于若依的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、效果图如下：

宁波阿成.
目录
相关文章
宁波阿成.
|
20天前
|
XML 中间件 数据库
基于jeecgboot的flowable流程支持定时捕获事件
基于jeecgboot的flowable流程支持定时捕获事件
宁波阿成.
18 0
宁波阿成.
|
20天前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统修复自定义业务表单的取消终止功能
基于若依的ruoyi-nbcio流程管理系统修复自定义业务表单的取消终止功能
宁波阿成.
17 3
宁波阿成.
|
20天前
|
XML 中间件 数据库
基于jeecgboot的flowable流程支持定时边界事件
基于jeecgboot的flowable流程支持定时边界事件
宁波阿成.
21 0
宁波阿成.
|
20天前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法（一）
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法（一）
宁波阿成.
17 1
宁波阿成.
|
20天前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法（二）
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法（二）
宁波阿成.
18 2
宁波阿成.
|
20天前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统自定义业务撤回功能的修复
基于若依的ruoyi-nbcio流程管理系统自定义业务撤回功能的修复
宁波阿成.
24 0
梦回故国楼台梦
|
20天前
|
监控 安全 持续交付
【专栏】Webhook是服务器主动发送事件通知的机制，打破传统客户端轮询模式，实现数据实时高效传递。
【4月更文挑战第29天】Webhook是服务器主动发送事件通知的机制，打破传统客户端轮询模式，实现数据实时高效传递。常用于持续集成部署、第三方服务集成、实时数据同步和监控告警。具有实时性、高效性和灵活性优势，但也面临安全风险和调试挑战。理解并善用Webhook能提升系统性能，广泛应用于现代软件开发和集成。
梦回故国楼台梦
37 0
爱吃辣椒炒肉
|
12月前
|
监控 关系型数据库 MySQL
第⼆章 可靠性⼯程世界中得监控
第⼆章 可靠性⼯程世界中得监控
爱吃辣椒炒肉
38 0
尼德兰的喵
【异步电路碎碎念5】 —— 跨异步处理的几个注意事项
【异步电路碎碎念5】 —— 跨异步处理的几个注意事项
尼德兰的喵
107 0
尼德兰的喵
【异步电路碎碎念4】 —— 跨异步的处理方法
【异步电路碎碎念4】 —— 跨异步的处理方法
尼德兰的喵
68 0
【异步电路碎碎念4】 —— 跨异步的处理方法

热门文章

最新文章

  • 1
    DataV，让拖拖拽拽就可以打造可视化应用
  • 2
    什么才是这个时代最需要的BI人员？ —— 阿里云MVP赵玮主题分享【1】
  • 3
    MongoDB World 2016参会全记录
  • 4
    Apache 2.XX中prefork.c模块和worker.c模块的比较
  • 5
    7的1000次方
  • 6
    CIO关注：数字化转型带来的IT版图巨变正在成为新的挑战
  • 7
    Java反射机制的作用
  • 8
    ActiveMQ笔记(3)：基于Networks of Brokers的HA方案
  • 9
    JavaScript 中对内存的一些了解
  • 10
    javaScript JSP HTML Java CSS 注释
  • 1
    使用 Docker 和 Docker Compose 部署 Vue
    27
  • 2
    【JAVA基础】 学生管理系统的简单实现
    21
  • 3
    浅谈容器逃逸
    23
  • 4
    “论软件的可靠性评价”必过范文，突击2024软考高项论文
    31
  • 5
    C++中的注释作用
    14
  • 6
    使用Apache Kafka进行流数据管理的深度探索
    19
  • 7
    深入 Kubernetes 网络：实战K8s网络故障排查与诊断策略
    50160
  • 8
    探索深度学习在医疗影像分析中的前沿应用
    11
  • 9
    使用D3.js进行数据可视化的探索与实践
    16
  • 10
    构建一个基于机器学习的交易算法
    16

    • 相关课程

    更多
  • 如何使用Kubernetes监控定位慢调用

    • 相关电子书

    更多
  • Android内存泄漏自动化链路分析组件--Probe
  • Android内存泄漏自动化链路分析组件Probe
  • 动态、高效，蚂蚁动态卡片的内核逻辑

    • 相关实验场景

    更多
  • 配置流程编排实现根据天气情况播放歌曲
  • 流密码与线性反馈移位寄存器LFSR
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考