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

ruoyi-nbcio-plus基于vue3的flowable的流程条件的升级修改

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

<template>
  <div class="panel-tab__content">
    <el-form :model="flowConditionForm" label-width="90px" size="small" @submit.prevent>
      <el-form-item label="流转类型">
        <el-select v-model="flowConditionForm.type" @change="updateFlowType">
          <el-option label="普通流转路径" value="normal" />
          <el-option label="默认流转路径" value="default" />
          <el-option label="条件流转路径" value="condition" />
        </el-select>
      </el-form-item>
      <el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
        <el-select v-model="flowConditionForm.conditionType">
          <el-option label="表达式" value="expression" />
          <el-option label="脚本" value="script" />
        </el-select>
      </el-form-item>
      <el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
        <el-input v-model="flowConditionForm.body" clearable @change="updateFlowCondition" />
      </el-form-item>
      <template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
        <el-form-item label="脚本语言" key="language">
          <el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
        </el-form-item>
        <el-form-item label="脚本类型" key="scriptType">
          <el-select v-model="flowConditionForm.scriptType">
            <el-option label="内联脚本" value="inlineScript" />
            <el-option label="外部脚本" value="externalScript" />
          </el-select>
        </el-form-item>
        <el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
          <el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
        </el-form-item>
        <el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
          <el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'FlowCondition',
  props: {
    businessObject: Object,
    type: String
  },
  data() {
    return {
      flowConditionForm: {}
    };
  },
  watch: {
    businessObject: {
      immediate: true,
      handler() {
        this.$nextTick(() => this.resetFlowCondition());
      }
    }
  },
  methods: {
    resetFlowCondition() {
      this.bpmnElement = window.bpmnInstances.bpmnElement;
      this.bpmnElementSource = this.bpmnElement.source;
      this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef;
      if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
        // 默认
        this.flowConditionForm = { type: 'default' };
      } else if (!this.bpmnElement.businessObject.conditionExpression) {
        // 普通
        this.flowConditionForm = { type: 'normal' };
      } else {
        // 带条件
        const conditionExpression = this.bpmnElement.businessObject.conditionExpression;
        this.flowConditionForm = { ...conditionExpression, type: 'condition' };
        // resource 可直接标识 是否是外部资源脚本
        if (this.flowConditionForm.resource) {
          this.flowConditionForm['conditionType'] = 'script'
          this.flowConditionForm['scriptType'] = 'externalScript'
          return;
        }
        if (conditionExpression.language) {
          this.flowConditionForm['conditionType'] = 'script'
          this.flowConditionForm['scriptType'] = 'inlineScript'
          return;
        }
        this.flowConditionForm['conditionType'] = 'expression'
      }
    },
    updateFlowType(flowType) {
      // 正常条件类
      if (flowType === 'condition') {
        this.flowConditionRef = window.bpmnInstances.moddle.create('bpmn:FormalExpression');
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
          conditionExpression: this.flowConditionRef
        });
        return;
      }
      // 默认路径
      if (flowType === 'default') {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
          conditionExpression: null
        });
        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
          default: this.bpmnElement
        });
        return;
      }
      // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
      if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
          default: null
        });
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        conditionExpression: null
      });
    },
    updateFlowCondition() {
      const { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
      let condition;
      if (conditionType === 'expression') {
        condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { body });
      } else {
        if (scriptType === 'inlineScript') {
          condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { body, language });
          this.flowConditionForm['resource'] = ''
        } else {
          this.flowConditionForm['body'] = ''
          condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { resource, language });
        }
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition });
    }
  },
  beforeUnmount() {
    this.bpmnElement = null;
    this.bpmnElementSource = null;
    this.bpmnElementSourceRef = null;
  }
};
</script>

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

<template>
  <div class="panel-tab__content">
    <el-form :model="flowConditionForm" label-width="90px" size="small" @submit.prevent>
      <el-form-item label="流转类型">
        <el-select v-model="flowConditionForm.type" @change="updateFlowType">
          <el-option label="普通流转路径" value="normal" />
          <el-option label="默认流转路径" value="default" />
          <el-option label="条件流转路径" value="condition" />
        </el-select>
      </el-form-item>
      <el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
        <el-select v-model="flowConditionForm.conditionType">
          <el-option label="表达式" value="expression" />
          <el-option label="脚本" value="script" />
        </el-select>
      </el-form-item>
      <el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
        <el-input v-model="flowConditionForm.body" clearable @change="updateFlowCondition" />
      </el-form-item>
      <template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
        <el-form-item label="脚本语言" key="language">
          <el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
        </el-form-item>
        <el-form-item label="脚本类型" key="scriptType">
          <el-select v-model="flowConditionForm.scriptType">
            <el-option label="内联脚本" value="inlineScript" />
            <el-option label="外部脚本" value="externalScript" />
          </el-select>
        </el-form-item>
        <el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
          <el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
        </el-form-item>
        <el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
          <el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
  defineOptions({ name: 'FlowCondition' })
  const props = defineProps({
    businessObject: Object,
    type: String
  })
  const flowConditionForm = ref<any>({})
  const bpmnElement = ref()
  const bpmnElementSource = ref()
  const bpmnElementSourceRef = ref()
  const flowConditionRef = ref()
  const bpmnInstances = () => (window as any)?.bpmnInstances
  watch(
    () => props.businessObject,
    (val) => {
      nextTick(() => {
        resetFlowCondition()
      })
    },
    {
      immediate: true
    }
  )
  const resetFlowCondition = () => {
    bpmnElement.value = bpmnInstances().bpmnElement
    bpmnElementSource.value = bpmnElement.value.source
    bpmnElementSourceRef.value = bpmnElement.value.businessObject.sourceRef
    if (
      bpmnElementSourceRef.value &&
      bpmnElementSourceRef.value.default &&
      bpmnElementSourceRef.value.default.id === bpmnElement.value.id &&
      flowConditionForm.value.type == 'default'
    ) {
      // 默认
      flowConditionForm.value = { type: 'default' }
    } else if (!bpmnElement.value.businessObject.conditionExpression) {
      // 普通
      flowConditionForm.value = { type: 'normal' }
    } else {
      // 带条件
      const conditionExpression = bpmnElement.value.businessObject.conditionExpression
      flowConditionForm.value = { ...conditionExpression, type: 'condition' }
      // resource 可直接标识 是否是外部资源脚本
      if (flowConditionForm.value.resource) {
        flowConditionForm.value['conditionType'] = 'script'
        flowConditionForm.value['scriptType'] = 'externalScript'
        return
      }
      if (conditionExpression.language) {
        flowConditionForm.value['conditionType'] = 'script'
        flowConditionForm.value['scriptType'] = 'inlineScript'
        return
      }
      flowConditionForm.value['conditionType'] = 'expression'
    }
  }
  const updateFlowType = (flowType) => {
    // 正常条件类
    if (flowType === 'condition') {
      flowConditionRef.value = bpmnInstances().moddle.create('bpmn:FormalExpression')
      bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
        conditionExpression: flowConditionRef.value
      })
      return
    }
    // 默认路径
    if (flowType === 'default') {
      bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
        conditionExpression: null
      })
      bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
        default: bpmnElement.value
      })
      return
    }
    // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
    if (
      bpmnElementSourceRef.value.default &&
      bpmnElementSourceRef.value.default.id === bpmnElement.value.id
    ) {
      bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
        default: null
      })
    }
    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
      conditionExpression: null
    })
  }
  const updateFlowCondition = () => {
    let { conditionType, scriptType, body, resource, language } = flowConditionForm.value
    let condition
    if (conditionType === 'expression') {
      condition = bpmnInstances().moddle.create('bpmn:FormalExpression', { body })
    } else {
      if (scriptType === 'inlineScript') {
        condition = bpmnInstances().moddle.create('bpmn:FormalExpression', { body, language })
        // this.$set(this.flowConditionForm, "resource", "");
        flowConditionForm.value['resource'] = ''
      } else {
        // this.$set(this.flowConditionForm, "body", "");
        flowConditionForm.value['body'] = ''
        condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
          resource,
          language
        })
      }
    }
    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
      conditionExpression: condition
    })
  }
  onBeforeUnmount(() => {
    bpmnElement.value = null
    bpmnElementSource.value = null
    bpmnElementSourceRef.value = null
  })
</script>

3、效果图如下：

文章标签：
前端开发
移动开发
关键词：
vue3升级VUE.js
vue3 flowable VUE.js
flowable升级VUE.js
flowable VUE.js
流程VUE.js
宁波阿成.
目录
相关文章
朝阳39
|
1天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
朝阳39
7 2
朝阳39
|
1天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
朝阳39
7 2
朝阳39
|
1天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发（工具库 @vueuse/core + 新增的组件库 @vueuse/components）
vue3【提效】使用 VueUse 高效开发（工具库 @vueuse/core + 新增的组件库 @vueuse/components）
朝阳39
8 1
朝阳39
|
1天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate，异步Action，storeToRefs()，修改State的 $patch，$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate，异步Action，storeToRefs()，修改State的 $patch，$reset
朝阳39
9 1
朝阳39
|
1天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
朝阳39
5 1
朝阳39
|
1天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
朝阳39
4 0
朝阳39
|
1天前
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
朝阳39
6 0
Star时光
|
1天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架：组件化开发利于重用与扩展，响应式数据绑定简化状态管理；学习曲线平缓，生态系统丰富，集成便捷，且具性能优化手段。缺点包括社区规模相对小，类型支持不足（Vue 3.x改善），路由和状态管理需额外配置，SEO支持有限。随着发展，部分缺点正被克服。
Star时光
7 1
爱你三千遍斯塔克
|
1天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
爱你三千遍斯塔克
10 1
爱你三千遍斯塔克
|
1天前
|
JavaScript
青戈大佬安装Vue，无Eslint安装版，vue2安装，vue2无eslint，最简单配置Vue安装资料
青戈大佬安装Vue，无Eslint安装版，vue2安装，vue2无eslint，最简单配置Vue安装资料
爱你三千遍斯塔克
9 1

热门文章

最新文章

  • 1
    vue项目中引入字体库（icon）（详细步骤）
  • 2
    Vue3：elementplus输入框去掉边框及缩放
  • 3
    (踩坑篇)vue element-ui resetForm()表单重置失效的问题
  • 4
    VUE的ajax拦截器
  • 5
    vue echarts图表自适应屏幕变化
  • 6
    Vue系列教程（03）- Vue开发利器（VsCode）
  • 7
    开心档-软件开发入门之​​Vue.js Ajax(vue-resource)
  • 8
    Vue——多页面不共用token进行拦截
  • 9
    vue 半场动画进入状态
  • 10
    vue如何使用Mixin混入
  • 1
    使用Vue.js构建交互式前端的技术探索
    41
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    89
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    69
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    59
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    48
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    52
  • 7
    vue3中使用动态组件
    54
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    67
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    36
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    52

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）