refactor: 重构 bpmnProcessDesigner 组件 ele => antd

apps/web-antd/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -1,150 +1,22 @@
-<template>
-  <div
-    class="process-panel__container"
-    :style="{ width: `${width}px`, maxHeight: '600px' }"
-  >
-    <Collapse v-model:activeKey="activeTab" v-if="isReady">
-      <CollapsePanel key="base" header="常规">
-        <template #title>
-          <Icon icon="ant-design:info-circle-filled" />
-          常规
-        </template>
-        <ElementBaseInfo
-          :id-edit-disabled="idEditDisabled"
-          :business-object="elementBusinessObject"
-          :type="elementType"
-          :model="model"
-        />
-      </CollapsePanel>
-      <CollapsePanel
-        key="message"
-        v-if="elementType === 'Process'"
-      >
-        <template #title>
-          <Icon icon="ant-design:message-filled" />
-          消息与信号
-        </template>
-        <signal-and-massage />
-      </CollapsePanel>
-      <CollapsePanel
-        key="condition"
-        v-if="conditionFormVisible"
-      >
-        <template #title>
-          <Icon icon="ant-design:swap-right" />
-          流转条件
-        </template>
-        <flow-condition
-          :business-object="elementBusinessObject"
-          :type="elementType"
-        />
-      </CollapsePanel>
-      <CollapsePanel key="form" v-if="formVisible">
-        <template #title>
-          <Icon icon="ant-design:unordered-list-outlined" />
-          表单
-        </template>
-        <element-form :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel
-        key="task"
-        v-if="isTaskCollapseItemShow(elementType)"
-      >
-        <template #title>
-          <Icon icon="ant-design:check-circle-filled" />
-          {{ getTaskCollapseItemName(elementType) }}
-        </template>
-        <element-task :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel
-        key="multiInstance"
-        v-if="elementType.indexOf('Task') !== -1"
-      >
-        <template #title>
-          <Icon icon="ant-design:question-circle-filled" />
-          多人审批方式
-        </template>
-        <element-multi-instance
-          :id="elementId"
-          :business-object="elementBusinessObject"
-          :type="elementType"
-        />
-      </CollapsePanel>
-      <CollapsePanel key="listeners">
-        <template #title>
-          <Icon icon="ant-design:bell-filled" />
-          执行监听器
-        </template>
-        <element-listeners :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel
-        key="taskListeners"
-        v-if="elementType === 'UserTask'"
-      >
-        <template #title>
-          <Icon icon="ant-design:bell-filled" />
-          任务监听器
-        </template>
-        <user-task-listeners :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel key="extensions">
-        <template #title>
-          <Icon icon="ant-design:plus-circle-filled" />
-          扩展属性
-        </template>
-        <element-properties :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel key="other">
-        <template #title>
-          <Icon icon="ant-design:swap-right" />
-          其他
-        </template>
-        <element-other-config :id="elementId" />
-      </CollapsePanel>
-      <CollapsePanel key="customConfig">
-        <template #title>
-          <Icon icon="ant-design:tool-filled" />
-          自定义配置
-        </template>
-        <element-custom-config
-          :id="elementId"
-          :type="elementType"
-          :business-object="elementBusinessObject"
-        />
-      </CollapsePanel>
-      <!-- 新增的时间事件配置项 -->
-      <CollapsePanel
-        key="timeEvent"
-        v-if="elementType === 'IntermediateCatchEvent'"
-      >
-        <template #title>
-          <Icon icon="ant-design:clock-circle-filled" />
-          时间事件
-        </template>
-        <TimeEventConfig
-          :businessObject="bpmnElement.value?.businessObject"
-          :key="elementId"
-        />
-      </CollapsePanel>
-    </Collapse>
-  </div>
-</template>
 <script lang="ts" setup>
-import { Collapse, CollapsePanel } from 'ant-design-vue';
+import { nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
+
 import { Icon } from '@vben/icons';
+
+import { Collapse, CollapsePanel } from 'ant-design-vue';
+
 import ElementBaseInfo from './base/ElementBaseInfo.vue';
-import ElementOtherConfig from './other/ElementOtherConfig.vue';
-import ElementTask from './task/ElementTask.vue';
-import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue';
 import FlowCondition from './flow-condition/FlowCondition.vue';
-import SignalAndMassage from './signal-message/SignalAndMessage.vue';
 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 ElementMultiInstance from './multi-instance/ElementMultiInstance.vue';
+import ElementOtherConfig from './other/ElementOtherConfig.vue';
+import ElementProperties from './properties/ElementProperties.vue';
+import SignalAndMassage from './signal-message/SignalAndMessage.vue';
 import { getTaskCollapseItemName, isTaskCollapseItemShow } from './task/data';
+import ElementTask from './task/ElementTask.vue';
 import TimeEventConfig from './time-event-config/TimeEventConfig.vue';
-import { ref, watch, onMounted, onBeforeUnmount, provide, nextTick } from 'vue';
 
 defineOptions({ name: 'MyPropertiesPanel' });
 
@@ -206,7 +78,7 @@ const initBpmnInstances = () => {
 
     // 检查所有实例是否都存在
     const allInstancesExist = Object.values(instances).every(
-      (instance) => instance,
+      Boolean,
     );
     if (allInstancesExist) {
       const w = window as any;
@@ -296,7 +168,7 @@ const initFormOnChanged = (element) => {
                 type:  ${activatedElement.businessObject.$type}
                 ----------
                 `);
-    console.log('businessObject: ', activatedElement.businessObject);
+    console.log('businessObject:', activatedElement.businessObject);
     bpmnInstances().bpmnElement = activatedElement;
     bpmnElement.value = activatedElement;
     elementId.value = activatedElement.id;
@@ -307,7 +179,7 @@ const initFormOnChanged = (element) => {
     conditionFormVisible.value = !!(
       elementType.value === 'SequenceFlow' &&
       activatedElement.source &&
-      activatedElement.source.type.indexOf('StartEvent') === -1
+      !activatedElement.source.type.indexOf('StartEvent') === -1
     );
     formVisible.value =
       elementType.value === 'UserTask' || elementType.value === 'StartEvent';
@@ -338,19 +210,30 @@ function updateNode() {
   const element = elementRegistry.get(props.businessObject.id);
   if (!element) return;
 
-  let timerDef = moddle.create('bpmn:TimerEventDefinition', {});
-  if (type.value === 'time') {
-    timerDef.timeDate = moddle.create('bpmn:FormalExpression', {
-      body: condition.value,
-    });
-  } else if (type.value === 'duration') {
-    timerDef.timeDuration = moddle.create('bpmn:FormalExpression', {
-      body: condition.value,
-    });
-  } else if (type.value === 'cycle') {
+  const timerDef = moddle.create('bpmn:TimerEventDefinition', {});
+  switch (type.value) {
+  case 'cycle': {
     timerDef.timeCycle = moddle.create('bpmn:FormalExpression', {
       body: condition.value,
     });
+
+  break;
+  }
+  case 'duration': {
+    timerDef.timeDuration = moddle.create('bpmn:FormalExpression', {
+      body: condition.value,
+    });
+
+  break;
+  }
+  case 'time': {
+    timerDef.timeDate = moddle.create('bpmn:FormalExpression', {
+      body: condition.value,
+    });
+
+  break;
+  }
+  // No default
   }
 
   modeling.updateModdleProperties(element, element.businessObject, {
@@ -379,3 +262,335 @@ function syncFromBusinessObject() {
 onMounted(syncFromBusinessObject);
 watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
 </script>
+<template>
+  <div
+    class="process-panel__container"
+    :style="{ width: `${width}px`, maxHeight: '600px' }"
+  >
+    <Collapse v-model:active-key="activeTab" v-if="isReady">
+      <CollapsePanel key="base" header="常规">
+        <template #title>
+          <Icon icon="ant-design:info-circle-filled" />
+          常规
+        </template>
+        <ElementBaseInfo
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+          :model="model"
+        />
+      </CollapsePanel>
+      <CollapsePanel
+        key="message"
+        v-if="elementType === 'Process'"
+      >
+        <template #title>
+          <Icon icon="ant-design:message-filled" />
+          消息与信号
+        </template>
+        <SignalAndMassage />
+      </CollapsePanel>
+      <CollapsePanel
+        key="condition"
+        v-if="conditionFormVisible"
+      >
+        <template #title>
+          <Icon icon="ant-design:swap-right" />
+          流转条件
+        </template>
+        <FlowCondition
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </CollapsePanel>
+      <CollapsePanel key="form" v-if="formVisible">
+        <template #title>
+          <Icon icon="ant-design:unordered-list-outlined" />
+          表单
+        </template>
+        <element-form :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel
+        key="task"
+        v-if="isTaskCollapseItemShow(elementType)"
+      >
+        <template #title>
+          <Icon icon="ant-design:check-circle-filled" />
+          {{ getTaskCollapseItemName(elementType) }}
+        </template>
+        <ElementTask :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel
+        key="multiInstance"
+        v-if="elementType.includes('Task')"
+      >
+        <template #title>
+          <Icon icon="ant-design:question-circle-filled" />
+          多人审批方式
+        </template>
+        <ElementMultiInstance
+          :id="elementId"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </CollapsePanel>
+      <CollapsePanel key="listeners">
+        <template #title>
+          <Icon icon="ant-design:bell-filled" />
+          执行监听器
+        </template>
+        <ElementListeners :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel
+        key="taskListeners"
+        v-if="elementType === 'UserTask'"
+      >
+        <template #title>
+          <Icon icon="ant-design:bell-filled" />
+          任务监听器
+        </template>
+        <UserTaskListeners :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel key="extensions">
+        <template #title>
+          <Icon icon="ant-design:plus-circle-filled" />
+          扩展属性
+        </template>
+        <ElementProperties :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel key="other">
+        <template #title>
+          <Icon icon="ant-design:swap-right" />
+          其他
+        </template>
+        <ElementOtherConfig :id="elementId" />
+      </CollapsePanel>
+      <CollapsePanel key="customConfig">
+        <template #title>
+          <Icon icon="ant-design:tool-filled" />
+          自定义配置
+        </template>
+        <element-custom-config
+          :id="elementId"
+          :type="elementType"
+          :business-object="elementBusinessObject"
+        />
+      </CollapsePanel>
+      <!-- 新增的时间事件配置项 -->
+      <CollapsePanel
+        key="timeEvent"
+        v-if="elementType === 'IntermediateCatchEvent'"
+      >
+        <template #title>
+          <Icon icon="ant-design:clock-circle-filled" />
+          时间事件
+        </template>
+        <TimeEventConfig
+          :business-object="bpmnElement.value?.businessObject"
+          :key="elementId"
+        />
+      </CollapsePanel>
+    </Collapse>
+  </div>
+</template>.includes('StartEvent')
+    );
+    formVisible.value =
+      elementType.value === 'UserTask' || elementType.value === 'StartEvent';
+  } catch (error) {
+    console.error('初始化表单数据失败:', error);
+  }
+};
+
+onBeforeUnmount(() => {
+  const w = window as any;
+  w.bpmnInstances = null;
+  isReady.value = false;
+});
+
+watch(
+  () => elementId.value,
+  () => {
+    activeTab.value = 'base';
+  },
+);
+
+function updateNode() {
+  const moddle = window.bpmnInstances?.moddle;
+  const modeling = window.bpmnInstances?.modeling;
+  const elementRegistry = window.bpmnInstances?.elementRegistry;
+  if (!moddle || !modeling || !elementRegistry) return;
+
+  const element = elementRegistry.get(props.businessObject.id);
+  if (!element) return;
+
+  const timerDef = moddle.create('bpmn:TimerEventDefinition', {});
+  switch (type.value) {
+  case 'time': {
+    timerDef.timeDate = moddle.create('bpmn:FormalExpression', {
+      body: condition.value,
+    });
+
+  break;
+  }
+  case 'duration': {
+    timerDef.timeDuration = moddle.create('bpmn:FormalExpression', {
+      body: condition.value,
+    });
+
+  break;
+  }
+  case 'cycle': {
+    timerDef.timeCycle = moddle.create('bpmn:FormalExpression', {
+      body: condition.value,
+    });
+
+  break;
+  }
+  // No default
+  }
+
+  modeling.updateModdleProperties(element, element.businessObject, {
+    eventDefinitions: [timerDef],
+  });
+}
+
+// 初始化和监听
+function syncFromBusinessObject() {
+  if (props.businessObject) {
+    const timerDef = (props.businessObject.eventDefinitions || [])[0];
+    if (timerDef) {
+      if (timerDef.timeDate) {
+        type.value = 'time';
+        condition.value = timerDef.timeDate.body;
+      } else if (timerDef.timeDuration) {
+        type.value = 'duration';
+        condition.value = timerDef.timeDuration.body;
+      } else if (timerDef.timeCycle) {
+        type.value = 'cycle';
+        condition.value = timerDef.timeCycle.body;
+      }
+    }
+  }
+}
+onMounted(syncFromBusinessObject);
+watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
+</script>
+<template>
+  <div
+    class="process-panel__container"
+    :style="{ width: `${width}px`, maxHeight: '600px' }"
+  >
+    <Collapse v-model:active-key="activeTab" v-if="isReady">
+      <CollapsePanel key="base" header="常规">
+        <template #title>
+          <Icon icon="ant-design:info-circle-filled" />
+          常规
+        </template>
+        <ElementBaseInfo
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+          :model="model"
+        />
+      </CollapsePanel>
+      <CollapsePanel key="message" v-if="elementType === 'Process'">
+        <template #title>
+          <Icon icon="ant-design:message-filled" />
+          消息与信号
+        </template>
+        <SignalAndMassage />
+      </CollapsePanel>
+      <CollapsePanel key="condition" v-if="conditionFormVisible">
+        <template #title>
+          <Icon icon="ant-design:swap-right" />
+          流转条件
+        </template>
+        <FlowCondition
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </CollapsePanel>
+      <CollapsePanel key="form" v-if="formVisible">
+        <template #title>
+          <Icon icon="ant-design:unordered-list-outlined" />
+          表单
+        </template>
+        <element-form :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel key="task" v-if="isTaskCollapseItemShow(elementType)">
+        <template #title>
+          <Icon icon="ant-design:check-circle-filled" />
+          {{ getTaskCollapseItemName(elementType) }}
+        </template>
+        <ElementTask :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel
+        key="multiInstance"
+        v-if="elementType.includes('Task')"
+      >
+        <template #title>
+          <Icon icon="ant-design:question-circle-filled" />
+          多人审批方式
+        </template>
+        <ElementMultiInstance
+          :id="elementId"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </CollapsePanel>
+      <CollapsePanel key="listeners">
+        <template #title>
+          <Icon icon="ant-design:bell-filled" />
+          执行监听器
+        </template>
+        <ElementListeners :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel key="taskListeners" v-if="elementType === 'UserTask'">
+        <template #title>
+          <Icon icon="ant-design:bell-filled" />
+          任务监听器
+        </template>
+        <UserTaskListeners :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel key="extensions">
+        <template #title>
+          <Icon icon="ant-design:plus-circle-filled" />
+          扩展属性
+        </template>
+        <ElementProperties :id="elementId" :type="elementType" />
+      </CollapsePanel>
+      <CollapsePanel key="other">
+        <template #title>
+          <Icon icon="ant-design:swap-right" />
+          其他
+        </template>
+        <ElementOtherConfig :id="elementId" />
+      </CollapsePanel>
+      <CollapsePanel key="customConfig">
+        <template #title>
+          <Icon icon="ant-design:tool-filled" />
+          自定义配置
+        </template>
+        <element-custom-config
+          :id="elementId"
+          :type="elementType"
+          :business-object="elementBusinessObject"
+        />
+      </CollapsePanel>
+      <!-- 新增的时间事件配置项 -->
+      <CollapsePanel
+        key="timeEvent"
+        v-if="elementType === 'IntermediateCatchEvent'"
+      >
+        <template #title>
+          <Icon icon="ant-design:clock-circle-filled" />
+          时间事件
+        </template>
+        <TimeEventConfig
+          :business-object="bpmnElement.value?.businessObject"
+          :key="elementId"
+        />
+      </CollapsePanel>
+    </Collapse>
+  </div>
+</template>