From b6415c21be85643f05fc01425f6cc37800d8a1f4 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Mon, 18 Mar 2024 13:55:57 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=96=B0=E5=A2=9E=E5=AD=90=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BpmnDesign/panel/SubProcessPanel.vue      | 66 +++++++++++++++++++
 src/components/BpmnDesign/panel/index.vue     |  2 +
 2 files changed, 68 insertions(+)
 create mode 100644 src/components/BpmnDesign/panel/SubProcessPanel.vue

diff --git a/src/components/BpmnDesign/panel/SubProcessPanel.vue b/src/components/BpmnDesign/panel/SubProcessPanel.vue
new file mode 100644
index 0000000..cf32fc6
--- /dev/null
+++ b/src/components/BpmnDesign/panel/SubProcessPanel.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <el-collapse v-model="currentCollapseItem">
+      <el-collapse-item name="1">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <InfoFilled />
+            </el-icon>
+            常规
+          </div>
+        </template>
+        <div>
+          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
+            <el-form-item prop="id" label="节点 ID">
+              <el-input v-model="formData.id" @change="idChange"> </el-input>
+            </el-form-item>
+            <el-form-item prop="name" label="节点名称">
+              <el-input v-model="formData.name" @change="nameChange"> </el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item name="2">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <BellFilled />
+            </el-icon>
+            执行监听器
+          </div>
+        </template>
+        <div>
+          <ExecutionListener :element="element"></ExecutionListener>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script setup lang="ts">
+import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
+import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import { ModdleElement } from 'bpmn';
+import { StartEndPanel } from 'bpmnDesign';
+
+interface PropType {
+  element: ModdleElement;
+}
+const props = withDefaults(defineProps<PropType>(), {});
+const { nameChange, idChange } = usePanel({
+  element: toRaw(props.element)
+});
+const { parseData } = useParseElement({
+  element: toRaw(props.element)
+});
+
+const formData = ref(parseData<StartEndPanel>());
+const currentCollapseItem = ref(['1', '2']);
+const formRules = ref<ElFormRules>({
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/BpmnDesign/panel/index.vue b/src/components/BpmnDesign/panel/index.vue
index 6ba7fee..c282723 100644
--- a/src/components/BpmnDesign/panel/index.vue
+++ b/src/components/BpmnDesign/panel/index.vue
@@ -12,6 +12,7 @@ import StartEndPanel from './StartEndPanel.vue';
 import GatewayPanel from './GatewayPanel.vue';
 import SequenceFlowPanel from './SequenceFlowPanel.vue';
 import ParticipantPanel from './ParticipantPanel.vue';
+import SubProcessPanel from './SubProcessPanel.vue';
 import { Modeler, ModdleElement } from 'bpmn';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 interface propsType {
@@ -47,6 +48,7 @@ const component = computed(() => {
   if (gatewayType.includes(type)) return GatewayPanel;
   if (processType.includes(type)) return ProcessPanel;
   if (type === 'bpmn:Participant') return ParticipantPanel;
+  if (type === 'bpmn:SubProcess') return SubProcessPanel;
   //return proxy?.$modal.msgWarning('面板开发中....');
 });