任务配置

src/plugins/package/penal/task/ElementTask.vue

@@ -6,7 +6,7 @@
       <!--        <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" />
+      <component :is="witchTaskComponent" :key="id" v-bind="$props" />
     </el-form>
   </div>
 </template>
@@ -14,7 +14,7 @@
 import UserTask from "./task-components/UserTask";
 import ScriptTask from "./task-components/ScriptTask";
 import ReceiveTask from "./task-components/ReceiveTask";
-import { toRefs, ref } from "vue";
+import { toRefs, ref, shallowRef } from "vue";
 const props = defineProps({
   id: String,
   type: String,
@@ -26,17 +26,26 @@ const data = reactive({
     asyncBefore: false,
     exclusive: false,
   },
-  installedComponent: {
-    // 手工任务与普通任务一致，不需要其他配置
-    // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
-    // 发送任务、服务任务、业务规则任务共用一个相同配置
-    UserTask: "UserTask", // 用户任务配置
-    ScriptTask: "ScriptTask", // 脚本任务配置
-    ReceiveTask: "ReceiveTask", // 消息接收任务
-  },
+  // installedComponent: {
+  //   // 手工任务与普通任务一致，不需要其他配置
+  //   // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
+  //   // 发送任务、服务任务、业务规则任务共用一个相同配置
+  //   UserTask: UserTask, // 用户任务配置
+  //   ScriptTask: ScriptTask, // 脚本任务配置
+  //   ReceiveTask: ReceiveTask, // 消息接收任务
+  // },
 });
-const { taskConfigForm, installedComponent } = toRefs(data);
-const witchTaskComponent = ref("");
+
+const installedComponent = {
+  // 手工任务与普通任务一致，不需要其他配置
+  // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
+  // 发送任务、服务任务、业务规则任务共用一个相同配置
+  UserTask: shallowRef(UserTask), // 用户任务配置
+  ScriptTask: shallowRef(ScriptTask), // 脚本任务配置
+  ReceiveTask: shallowRef(ReceiveTask), // 消息接收任务
+};
+const { taskConfigForm } = toRefs(data);
+const witchTaskComponent = shallowRef();
 let bpmnElement;
 watch(
   id,
@@ -51,7 +60,7 @@ watch(
 watch(
   type,
   (val) => {
-    witchTaskComponent.value = installedComponent.value[type.value];
+    witchTaskComponent.value = installedComponent[type.value].value;
   },
   { immediate: true }
 );

src/plugins/package/penal/task/task-components/UserTask.vue

@@ -169,6 +169,11 @@ const userTaskForm = {
   candidateGroups: "",
   text: "",
 };
+const props = defineProps({
+  id: String,
+  type: String,
+});
+const { id, type } = toRefs(props);
 const loading = ref(false);
 const dataType = ref("USERS");
 const userOpen = ref(false);