AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ruoyi-nbcio-plus基于vue3的flowable多实例审批单元的升级修改

2024-05-11 68
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ruoyi-nbcio-plus基于vue3的flowable多实例审批单元的升级修改

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

gitee源代码地址

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

演示地址：RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

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

gitee源代码地址

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

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://218.75.87.38:9888

1、ElementMultiInstance.vue原先vue2代码如下：

<template>
  <div class="panel-tab__content">
    <el-form size="small" label-width="90px" @submit.prevent>
      <el-form-item label="回路特性">
        <el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
          <!--bpmn:MultiInstanceLoopCharacteristics-->
          <el-option label="并行多重事件" value="ParallelMultiInstance" />
          <el-option label="时序多重事件" value="SequentialMultiInstance" />
          <!--bpmn:StandardLoopCharacteristics-->
          <el-option label="循环事件" value="StandardLoop" />
          <el-option label="无" value="Null" />
        </el-select>
      </el-form-item>
      <template v-if="loopCharacteristics === 'ParallelMultiInstance' || loopCharacteristics === 'SequentialMultiInstance'">
        <el-form-item label="循环基数" key="loopCardinality">
          <el-input v-model="loopInstanceForm.loopCardinality" clearable @change="updateLoopCardinality" />
        </el-form-item>
        <el-form-item label="集合" key="collection">
          <el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
        </el-form-item>
        <el-form-item label="元素变量" key="elementVariable">
          <el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
        </el-form-item>
        <el-form-item label="完成条件" key="completionCondition">
          <el-input v-model="loopInstanceForm.completionCondition" clearable @change="updateLoopCondition" />
        </el-form-item>
        <el-form-item label="异步状态" key="async">
          <el-checkbox v-model="loopInstanceForm.asyncBefore" label="异步前" @change="updateLoopAsync('asyncBefore')" />
          <el-checkbox v-model="loopInstanceForm.asyncAfter" label="异步后" @change="updateLoopAsync('asyncAfter')" />
          <el-checkbox
            v-model="loopInstanceForm.exclusive"
            v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
            label="排除"
            @change="updateLoopAsync('exclusive')"
          />
        </el-form-item>
        <el-form-item label="重试周期" prop="timeCycle" v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore" key="timeCycle">
          <el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "ElementMultiInstance",
  props: {
    businessObject: Object,
    type: String
  },
  inject: {
    prefix: "prefix"
  },
  data() {
    return {
      loopCharacteristics: "",
      //默认配置，用来覆盖原始不存在的选项，避免报错
      defaultLoopInstanceForm: {
        completionCondition: "",
        loopCardinality: "",
        extensionElements: [],
        asyncAfter: false,
        asyncBefore: false,
        exclusive: false
      },
      loopInstanceForm: {}
    };
  },
  watch: {
    businessObject: {
      immediate: true,
      handler(val) {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.getElementLoop(val);
      }
    }
  },
  methods: {
    getElementLoop(businessObject) {
      if (!businessObject.loopCharacteristics) {
        this.loopCharacteristics = "Null";
        this.loopInstanceForm = {};
        return;
      }
      if (businessObject.loopCharacteristics.$type === "bpmn:StandardLoopCharacteristics") {
        this.loopCharacteristics = "StandardLoop";
        this.loopInstanceForm = {};
        return;
      }
      if (businessObject.loopCharacteristics.isSequential) {
        this.loopCharacteristics = "SequentialMultiInstance";
      } else {
        this.loopCharacteristics = "ParallelMultiInstance";
      }
      // 合并配置
      this.loopInstanceForm = {
        ...this.defaultLoopInstanceForm,
        ...businessObject.loopCharacteristics,
        completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? "",
        loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ""
      };
      // 保留当前元素 businessObject 上的 loopCharacteristics 实例
      this.multiLoopInstance = window.bpmnInstances.bpmnElement.businessObject.loopCharacteristics;
      // 更新表单
      if (
        businessObject.loopCharacteristics.extensionElements &&
        businessObject.loopCharacteristics.extensionElements.values &&
        businessObject.loopCharacteristics.extensionElements.values.length
      ) {
        this.loopInstanceForm["timeCycle"] = businessObject.loopCharacteristics.extensionElements.values[0].body
      }
    },
    changeLoopCharacteristicsType(type) {
      // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
      // 取消多实例配置
      if (type === "Null") {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null });
        return;
      }
      // 配置循环
      if (type === "StandardLoop") {
        const loopCharacteristicsObject = window.bpmnInstances.moddle.create("bpmn:StandardLoopCharacteristics");
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
          loopCharacteristics: loopCharacteristicsObject
        });
        this.multiLoopInstance = null;
        return;
      }
      // 时序
      if (type === "SequentialMultiInstance") {
        this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", {
          isSequential: true
        });
      } else {
        this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics");
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        loopCharacteristics: this.multiLoopInstance
      });
    },
    // 循环基数
    updateLoopCardinality(cardinality) {
      let loopCardinality = null;
      if (cardinality && cardinality.length) {
        loopCardinality = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: cardinality });
      }
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
        loopCardinality
      });
    },
    // 完成条件
    updateLoopCondition(condition) {
      let completionCondition = null;
      if (condition && condition.length) {
        completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: condition });
      }
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
        completionCondition
      });
    },
    // 重试周期
    updateLoopTimeCycle(timeCycle) {
      const extensionElements = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
        values: [
          window.bpmnInstances.moddle.create(`${this.prefix}:FailedJobRetryTimeCycle`, {
            body: timeCycle
          })
        ]
      });
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
        extensionElements
      });
    },
    // 直接更新的基础信息
    updateLoopBase() {
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
        collection: this.loopInstanceForm.collection || null,
        elementVariable: this.loopInstanceForm.elementVariable || null
      });
    },
    // 各异步状态
    updateLoopAsync(key) {
      const { asyncBefore, asyncAfter } = this.loopInstanceForm;
      let asyncAttr = Object.create(null);
      if (!asyncBefore && !asyncAfter) {
        this.loopInstanceForm["exclusive"] = false
        asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null };
      } else {
        asyncAttr[key] = this.loopInstanceForm[key];
      }
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, asyncAttr);
    }
  },
  beforeUnmount() {
    this.multiLoopInstance = null;
    this.bpmnElement = null;
  }
};
</script>

2、修改成vue3的代码如下：

<template>
  <div class="panel-tab__content">
    <el-form size="small" label-width="90px" >
      <el-form-item label="回路特性">
        <el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
          <!--bpmn:MultiInstanceLoopCharacteristics-->
          <el-option label="并行多重事件" value="ParallelMultiInstance" />
          <el-option label="时序多重事件" value="SequentialMultiInstance" />
          <!--bpmn:StandardLoopCharacteristics-->
          <el-option label="循环事件" value="StandardLoop" />
          <el-option label="无" value="Null" />
        </el-select>
      </el-form-item>
      <template v-if="loopCharacteristics === 'ParallelMultiInstance' || loopCharacteristics === 'SequentialMultiInstance'">
        <el-form-item label="循环基数" key="loopCardinality">
          <el-input v-model="loopInstanceForm.loopCardinality" clearable @change="updateLoopCardinality" />
        </el-form-item>
        <el-form-item label="集合" key="collection">
          <el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
        </el-form-item>
        <el-form-item label="元素变量" key="elementVariable">
          <el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
        </el-form-item>
        <el-form-item label="完成条件" key="completionCondition">
          <el-input v-model="loopInstanceForm.completionCondition" clearable @change="updateLoopCondition" />
        </el-form-item>
        <el-form-item label="异步状态" key="async">
          <el-checkbox v-model="loopInstanceForm.asyncBefore" label="异步前" @change="updateLoopAsync('asyncBefore')" />
          <el-checkbox v-model="loopInstanceForm.asyncAfter" label="异步后" @change="updateLoopAsync('asyncAfter')" />
          <el-checkbox
            v-model="loopInstanceForm.exclusive"
            v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
            label="排除"
            @change="updateLoopAsync('exclusive')"
          />
        </el-form-item>
        <el-form-item label="重试周期" prop="timeCycle" v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore" key="timeCycle">
          <el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
  defineOptions({ name: 'ElementMultiInstance' })
  const props = defineProps({
    businessObject: Object,
    type: String
  })
  const prefix = inject('prefix')
  const loopCharacteristics = ref('')
  //默认配置，用来覆盖原始不存在的选项，避免报错
  const defaultLoopInstanceForm = ref({
    completionCondition: '',
    loopCardinality: '',
    extensionElements: [],
    asyncAfter: false,
    asyncBefore: false,
    exclusive: false
  })
  const loopInstanceForm = ref<any>({})
  const bpmnElement = ref(null)
  const multiLoopInstance = ref(null)
  const bpmnInstances = () => (window as any)?.bpmnInstances
  watch(
    () => props.businessObject,
    (val) => {
      bpmnElement.value = bpmnInstances().bpmnElement
      getElementLoop(val)
    },
    { immediate: true }
  )
  const getElementLoop = (businessObject) => {
    if (!businessObject.loopCharacteristics) {
      loopCharacteristics.value = 'Null'
      loopInstanceForm.value = {}
      return
    }
    if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
      loopCharacteristics.value = 'StandardLoop'
      loopInstanceForm.value = {}
      return
    }
    if (businessObject.loopCharacteristics.isSequential) {
      loopCharacteristics.value = 'SequentialMultiInstance'
    } else {
      loopCharacteristics.value = 'ParallelMultiInstance'
    }
    // 合并配置
    loopInstanceForm.value = {
      ...defaultLoopInstanceForm.value,
      ...businessObject.loopCharacteristics,
      completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
      loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
    }
    // 保留当前元素 businessObject 上的 loopCharacteristics 实例
    multiLoopInstance.value = bpmnInstances().bpmnElement.businessObject.loopCharacteristics
    // 更新表单
    if (
      businessObject.loopCharacteristics.extensionElements &&
      businessObject.loopCharacteristics.extensionElements.values &&
      businessObject.loopCharacteristics.extensionElements.values.length
    ) {
      loopInstanceForm.value['timeCycle'] =
        businessObject.loopCharacteristics.extensionElements.values[0].body
    }
  }
  const changeLoopCharacteristicsType = (type) => {
    // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
    // 取消多实例配置
    if (type === 'Null') {
      bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
        loopCharacteristics: null
      })
      return
    }
    // 配置循环
    if (type === 'StandardLoop') {
      const loopCharacteristicsObject = bpmnInstances().moddle.create(
        'bpmn:StandardLoopCharacteristics'
      )
      bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
        loopCharacteristics: loopCharacteristicsObject
      })
      multiLoopInstance.value = null
      return
    }
    // 时序
    if (type === 'SequentialMultiInstance') {
      multiLoopInstance.value = bpmnInstances().moddle.create(
        'bpmn:MultiInstanceLoopCharacteristics',
        { isSequential: true }
      )
    } else {
      multiLoopInstance.value = bpmnInstances().moddle.create(
        'bpmn:MultiInstanceLoopCharacteristics')
    }
    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
      loopCharacteristics: toRaw(multiLoopInstance.value)
    })
  }
  // 循环基数
  const updateLoopCardinality = (cardinality) => {
    let loopCardinality = null
    if (cardinality && cardinality.length) {
      loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
        body: cardinality
      })
    }
    bpmnInstances().modeling.updateModdleProperties(
      toRaw(bpmnElement.value),
      multiLoopInstance.value,
      {
        loopCardinality
      }
    )
  }
  // 完成条件
  const updateLoopCondition = (condition) => {
    let completionCondition = null
    if (condition && condition.length) {
      completionCondition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
        body: condition
      })
    }
    bpmnInstances().modeling.updateModdleProperties(
      toRaw(bpmnElement.value),
      multiLoopInstance.value,
      {
        completionCondition
      }
    )
  }
  // 重试周期
  const updateLoopTimeCycle = (timeCycle) => {
    const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
      values: [
        bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
          body: timeCycle
        })
      ]
    })
    bpmnInstances().modeling.updateModdleProperties(
      toRaw(bpmnElement.value),
      multiLoopInstance.value,
      {
        extensionElements
      }
    )
  }
  // 直接更新的基础信息
  const updateLoopBase = () => {
    bpmnInstances().modeling.updateModdleProperties(
      toRaw(bpmnElement.value),
      multiLoopInstance.value,
      {
        collection: loopInstanceForm.value.collection || null,
        elementVariable: loopInstanceForm.value.elementVariable || null
      }
    )
  }
  // 各异步状态
  const updateLoopAsync = (key) => {
    const { asyncBefore, asyncAfter } = loopInstanceForm.value
    let asyncAttr = Object.create(null)
    if (!asyncBefore && !asyncAfter) {
      // this.$set(this.loopInstanceForm, "exclusive", false);
      loopInstanceForm.value['exclusive'] = false
      asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
    } else {
      asyncAttr[key] = loopInstanceForm.value[key]
    }
    bpmnInstances().modeling.updateModdleProperties(
      toRaw(bpmnElement.value),
      multiLoopInstance.value,
      asyncAttr
    )
  }
  onBeforeUnmount(() => {
    multiLoopInstance.value = null
    bpmnElement.value = null
  })
</script>

3、目前虽然改造了，但实际上面目前没有用到它

文章标签：
前端开发
移动开发
关键词：
vue3实例VUE.js
vue3 flowable VUE.js
flowable升级VUE.js
flowable VUE.js
宁波阿成.
目录
相关文章
游客62mqllx53nctc
|
18天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
游客62mqllx53nctc
45 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
CamilleKing
|
15天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
36 7
小宋1021
|
17天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
39 3
CamilleKing
|
15天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
36 1
CamilleKing
|
15天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
37 1
游客zi3qmblbcdexu
|
18天前
|
前端开发 JavaScript
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
游客zi3qmblbcdexu
35 1
大树营养快线
|
18天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念，掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索，你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
大树营养快线
23 2
沐橙~
|
JavaScript
vue 踩坑 01 ->两种创建vue实例的区别
第一个例子 {{msg}} var app = new Vue({ el: '#app', data: { m...
沐橙~
967 0
我是快乐的嘟嘟
|
6天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
73 26
html的七十二变
|
6天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
25 8

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    自制简单的range（Vue）
  • 4
    vite原理之解析.vue文件
  • 5
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 6
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 7
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 8
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 9
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 10
    Vue+ElementUI 搭建后台管理系统（实战系列八）
  • 1
    vue代码优化方案
    54
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 3
    在Vue中，子组件向父组件传递数据
    77
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    98
  • 5
    【vue3】vue3中路由hash与History的设置
    214
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1151
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    478
  • 8
    【vue】 vue2 监听滚动条滚动事件
    144
  • 9
    【天地图】vue 天地图 T is not defined
    177
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    621

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Springboot项目云开发快速迁移
  • 使用Spring Data Redis+zTree实现授权模型的设计与思考
  • SpringBoot快速掌握 - 高级应用

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • ui-model，跨框架复用
    • 下一篇
    阿里云OSS设置跨域访问