ruoyi-nbcio-plus基于vue3的flowable任务切换的主文件ElementTask.vue的升级修改

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

gitee源代码地址

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

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

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

gitee源代码地址

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

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

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

1、原先vue2的代码如下：

<template>
  <div class="panel-tab__content">
    <el-form size="small" label-width="96px" @submit.native.prevent>
<!--      <el-form-item label="异步延续">-->
<!--        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
<!--        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
<!--        <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
<!--      </el-form-item>-->
      <component :is="witchTaskComponent" v-bind="$props" />
    </el-form>
  </div>
</template>

<script>
import UserTask from "./task-components/UserTask";
import ServiceTask from "./task-components/ServiceTask";
import ScriptTask from "./task-components/ScriptTask";
import ReceiveTask from "./task-components/ReceiveTask";

export default {
  name: "ElementTaskConfig",
  components: { UserTask, ServiceTask, ScriptTask, ReceiveTask },
  props: {
    id: String,
    type: String
  },
  data() {
    return {
      taskConfigForm: {
        asyncAfter: false,
        asyncBefore: false,
        exclusive: false
      },
      witchTaskComponent: "",
      installedComponent: {
        // 手工任务与普通任务一致，不需要其他配置
        // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
        // 发送任务、服务任务、业务规则任务共用一个相同配置
        UserTask: "UserTask", // 用户任务配置
        ServiceTask: "ServiceTask", // 服务任务配置
        ScriptTask: "ScriptTask", // 脚本任务配置
        ReceiveTask: "ReceiveTask" // 消息接收任务
      }
    };
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
        this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
        this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
      }
    },
    type: {
      immediate: true,
      handler() {
        this.witchTaskComponent = this.installedComponent[this.type];
      }
    }
  },
  methods: {
    changeTaskAsync() {
      if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
        this.taskConfigForm.exclusive = false;
      }
      window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
        ...this.taskConfigForm
      });
    }
  }
};
</script>

2、修改成vue3代码如下：

<template>
  <div class="panel-tab__content">
    <el-form size="small" label-width="96px" >
<!--      <el-form-item label="异步延续">-->
<!--        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
<!--        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
<!--        <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
<!--      </el-form-item>-->
      <component :is="witchTaskComponent" v-bind="$props" />
    </el-form>
  </div>
</template>

<script lang="ts" setup>
  import UserTask from "./task-components/UserTask";
  import ServiceTask from "./task-components/ServiceTask";
  import ScriptTask from "./task-components/ScriptTask";
  import ReceiveTask from "./task-components/ReceiveTask";

  defineOptions({ name: 'ElementTaskConfig' })
  const props = defineProps({
    id: String,
    type: String
  })
  const taskConfigForm = ref({
    asyncAfter: false,
    asyncBefore: false,
    exclusive: false
  })
  const witchTaskComponent = ref()
  const installedComponent = ref({
    // 手工任务与普通任务一致，不需要其他配置
    // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
    // 发送任务、服务任务、业务规则任务共用一个相同配置
    UserTask: 'UserTask', // 用户任务配置
    ServiceTask: 'ServiceTask', //服务任务配置
    ScriptTask: 'ScriptTask', // 脚本任务配置
    ReceiveTask: 'ReceiveTask' // 消息接收任务
  })
  const bpmnElement = ref()

  const bpmnInstances = () => (window as any).bpmnInstances
  const changeTaskAsync = () => {
    if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
      taskConfigForm.value.exclusive = false
    }
    bpmnInstances().modeling.updateProperties(bpmnInstances().bpmnElement, {
      ...taskConfigForm.value
    })
  }

  watch(
    () => props.id,
    () => {
      bpmnElement.value = bpmnInstances().bpmnElement
      taskConfigForm.value.asyncBefore = bpmnElement.value?.businessObject?.asyncBefore
      taskConfigForm.value.asyncAfter = bpmnElement.value?.businessObject?.asyncAfter
      taskConfigForm.value.exclusive = bpmnElement.value?.businessObject?.exclusive
    },
    { immediate: true }
  )
  watch(
    () => props.type,
    () => {
      // witchTaskComponent.value = installedComponent.value[props.type]
      if (props.type == installedComponent.value.UserTask) {
        witchTaskComponent.value = UserTask
      }
      if (props.type == installedComponent.value.ScriptTask) {
        witchTaskComponent.value = ScriptTask
      }
      if (props.type == installedComponent.value.ReceiveTask) {
        witchTaskComponent.value = ReceiveTask
      }
      if (props.type == installedComponent.value.ServiceTask) {
        witchTaskComponent.value = ServiceTask
      }
    },
    { immediate: true }
  )
</script>

3、效果图：

目前只做了4种任务的支持，需要可以增加其它