refactor: 优化任务折叠面板处理逻辑

Author: LesanOuO

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="process-panel__container" :style="{ width: `${width}px`,maxHeight: '700px' }">
+  <div class="process-panel__container" :style="{ width: `${width}px`, maxHeight: '700px' }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
         <!-- class="panel-tab__title" -->
@@ -26,13 +26,13 @@
         <template #title><Icon icon="ep:list" />表单</template>
         <element-form :id="elementId" :type="elementType" />
       </el-collapse-item>
-      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
-        <template #title><Icon icon="ep:checked" />任务</template>
+      <el-collapse-item name="task" v-if="isTaskCollapseItemShow(elementType)" key="task">
+        <template #title><Icon icon="ep:checked" />{{ getTaskCollapseItemName(elementType) }}</template>
         <element-task :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item
         name="multiInstance"
-        v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'"
+        v-if="elementType.indexOf('Task') !== -1"
         key="multiInstance"
       >
         <template #title><Icon icon="ep:help-filled" />多实例（会签配置）</template>
@@ -72,6 +72,7 @@ import ElementListeners from './listeners/ElementListeners.vue'
 import ElementProperties from './properties/ElementProperties.vue'
 // import ElementForm from './form/ElementForm.vue'
 import UserTaskListeners from './listeners/UserTaskListeners.vue'
+import { getTaskCollapseItemName,isTaskCollapseItemShow } from './task/data'
 
 defineOptions({ name: 'MyPropertiesPanel' })
 

src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue

@@ -29,10 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import UserTask from './task-components/UserTask.vue'
-import ServiceTask from './task-components/ServiceTask.vue'
-import ScriptTask from './task-components/ScriptTask.vue'
-import ReceiveTask from './task-components/ReceiveTask.vue'
+import { installedComponent } from './data'
 
 defineOptions({ name: 'ElementTaskConfig' })
 
@@ -46,15 +43,7 @@ const taskConfigForm = ref({
   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
@@ -80,18 +69,8 @@ watch(
 watch(
   () => props.type,
   () => {
-    // witchTaskComponent.value = installedComponent.value[props.type]
-    if (props.type == installedComponent.value.UserTask) {
-      witchTaskComponent.value = UserTask
-    }
-    if (props.type == installedComponent.value.ServiceTask) {
-      witchTaskComponent.value = ServiceTask
-    }
-    if (props.type == installedComponent.value.ScriptTask) {
-      witchTaskComponent.value = ScriptTask
-    }
-    if (props.type == installedComponent.value.ReceiveTask) {
-      witchTaskComponent.value = ReceiveTask
+    if (props.type) {
+      witchTaskComponent.value = installedComponent[props.type].componet
     }
   },
   { immediate: true }

src/components/bpmnProcessDesigner/package/penal/task/data.ts

@@ -0,0 +1,31 @@
+import UserTask from './task-components/UserTask.vue'
+import ServiceTask from './task-components/ServiceTask.vue'
+import ScriptTask from './task-components/ScriptTask.vue'
+import ReceiveTask from './task-components/ReceiveTask.vue'
+
+export const installedComponent = {
+  UserTask: {
+    name: '用户任务',
+    componet: UserTask
+  },
+  ServiceTask: {
+    name: '服务任务',
+    componet: ServiceTask
+  },
+  ScriptTask: {
+    name: '脚本任务',
+    componet: ScriptTask
+  },
+  ReceiveTask: {
+    name: '接收任务',
+    componet: ReceiveTask
+  }
+}
+
+export const getTaskCollapseItemName = (elementType) => {
+  return installedComponent[elementType].name
+}
+
+export const isTaskCollapseItemShow = (elementType) => {
+  return installedComponent[elementType]
+}