ruoyi-nbcio-plus基于vue3的flowable服务任务的升级修改

{
      "name": "Field",
      "superClass": ["Element"],
      "meta": {
        "allowedIn": [
          "flowable:ServiceTaskLike",
          "flowable:ExecutionListener",
          "flowable:TaskListener",
          "bpmn:ServiceTask"
        ]
      },

<template>
  <div>
    <el-form-item label="执行类型" key="executeType">
      <el-select v-model="serviceTaskForm.executeType">
        <el-option label="Java类" value="class" />
        <el-option label="表达式" value="expression" />
        <el-option label="代理表达式" value="delegateExpression" />
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="serviceTaskForm.executeType === 'class'"
      label="Java类"
      prop="class"
      key="execute-class"
    >
      <el-input v-model="serviceTaskForm.class" clearable @change="updateElementTask" />
    </el-form-item>
    <el-form-item
      v-if="serviceTaskForm.executeType === 'expression'"
      label="表达式"
      prop="expression"
      key="execute-expression"
    >
      <el-input v-model="serviceTaskForm.expression" clearable @change="updateElementTask" />
    </el-form-item>
    <el-form-item v-if="serviceTaskForm.executeType === 'expression'" label="结果变量">
      <el-input v-model="serviceTaskForm.resultVariable" clearable @change="updateInfo('resultVariable')" />
    </el-form-item>
    <el-form-item
      v-if="serviceTaskForm.executeType === 'delegateExpression'"
      label="代理表达式"
      prop="delegateExpression"
      key="execute-delegate"
    >
      <el-input v-model="serviceTaskForm.delegateExpression" clearable @change="updateElementTask" />
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: "ServiceTask",
  props: {
    id: String,
    type: String
  },
  data() {
    return {
      defaultTaskForm: {
        executeType: "",
        class: "",
        expression: "",
        resultVariable: "",
        delegateExpression: ""
      },
      serviceTaskForm: {}
    };
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.$nextTick(() => this.resetTaskForm());
      }
    }
  },
  methods: {
    resetTaskForm() {
      for (let key in this.defaultTaskForm) {
        let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
        if (value) this.$set(this.serviceTaskForm, "executeType", key);
        this.$set(this.serviceTaskForm, key, value);
      }
    },
    updateElementTask() {
      let taskAttr = Object.create(null);
      const type = this.serviceTaskForm.executeType;
      for (let key in this.serviceTaskForm) {
        if (key !== 'executeType' && key !== type) taskAttr[key] = null;
      }
      taskAttr[type] = this.serviceTaskForm[type] || "";
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
    }
  },
  beforeDestroy() {
    this.bpmnElement = null;
  }
};
</script>

<<template>
  <div>
    <el-form-item label="执行类型" key="executeType">
      <el-select v-model="serviceTaskForm.executeType">
        <el-option label="Java类" value="class" />
        <el-option label="表达式" value="expression" />
        <el-option label="代理表达式" value="delegateExpression" />
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="serviceTaskForm.executeType === 'class'"
      label="Java类"
      prop="class"
      key="execute-class"
    >
      <el-input v-model="serviceTaskForm.class" clearable @change="updateElementTask" />
    </el-form-item>
    <el-form-item
      v-if="serviceTaskForm.executeType === 'expression'"
      label="表达式"
      prop="expression"
      key="execute-expression"
    >
      <el-input v-model="serviceTaskForm.expression" clearable @change="updateElementTask" />
    </el-form-item>
    <el-form-item v-if="serviceTaskForm.executeType === 'expression'" label="结果变量">
      <el-input v-model="serviceTaskForm.resultVariable" clearable @change="updateInfo('resultVariable')" />
    </el-form-item>
    <el-form-item
      v-if="serviceTaskForm.executeType === 'delegateExpression'"
      label="代理表达式"
      prop="delegateExpression"
      key="execute-delegate"
    >
      <el-input v-model="serviceTaskForm.delegateExpression" clearable @change="updateElementTask" />
    </el-form-item>
  </div>
</template>
<script lang="ts" setup>
  defineOptions({ name: 'ServiceTask' })
  const props = defineProps({
    id: String,
    type: String
  })
  const defaultTaskForm = ref({
    executeType: "",
    class: "",
    expression: "",
    resultVariable: "",
    delegateExpression: ""
  })
  const serviceTaskForm = ref<any>({})
  const bpmnElement = ref()
  const bpmnInstances = () => (window as any)?.bpmnInstances
  watch(
    () => props.id,
    () => {
      bpmnElement.value = bpmnInstances().bpmnElement
      nextTick(() => {
        resetTaskForm()
      })
    },
    { immediate: true }
  )
  const resetTaskForm = () => {
    for (let key in defaultTaskForm.value) {
      let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
      if (value) serviceTaskForm.value["executeType"] = key
      serviceTaskForm.value[key] = value;
    }
  }
  const updateElementTask = () => {
    let taskAttr = Object.create(null)
    const type = serviceTaskForm.value["executeType"];
    for (let key in serviceTaskForm.value) {
      if (key !== 'executeType' && key !== type) taskAttr[key] = null;
    }
    taskAttr[type] = serviceTaskForm.value[type] || "";
    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr);
  }
  onBeforeUnmount(() => {
    bpmnElement.value = null
  })
</script>