From 4934bb3a17f25e7a3139aa4c55f4243258d8a6da Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Thu, 1 Feb 2024 15:17:35 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=AE=8C=E5=96=84=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BpmnDesign/panel/ProcessPanel.vue         | 55 +++++++++++++------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/components/BpmnDesign/panel/ProcessPanel.vue b/src/components/BpmnDesign/panel/ProcessPanel.vue
index 2a25f35..6ed1159 100644
--- a/src/components/BpmnDesign/panel/ProcessPanel.vue
+++ b/src/components/BpmnDesign/panel/ProcessPanel.vue
@@ -1,15 +1,41 @@
 <template>
   <div>
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
-      <el-form-item label="流程标识" prop="id">
-        <el-input v-model="formData.id" @change="idChange"></el-input>
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input v-model="formData.name" @change="nameChange"></el-input>
-      </el-form-item>
-      <el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
-      <ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
-    </el-form>
+    <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="80px">
+            <el-form-item label="流程标识" prop="id">
+              <el-input v-model="formData.id" @change="idChange"></el-input>
+            </el-form-item>
+            <el-form-item label="流程名称" prop="name">
+              <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>
 
@@ -23,7 +49,6 @@ import { ProcessPanel } from 'bpmnDesign';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
-  modeler: Modeler;
   element: Element;
 }
 const props = withDefaults(defineProps<PropType>(), {});
@@ -34,17 +59,13 @@ const { parseData } = useParseElement({
 const { idChange, nameChange } = usePanel({
   element: toRaw(props.element)
 });
-
-const formData = ref<ProcessPanel>();
+const currentCollapseItem = ref(['1', '2']);
+const formData = ref<ProcessPanel>(parseData<ProcessPanel>());
 
 const formRules = ref<ElFormRules>({
   id: [{ required: true, message: '请输入', trigger: 'blur' }],
   name: [{ required: true, message: '请输入', trigger: 'blur' }]
 });
-
-onBeforeMount(() => {
-  formData.value = parseData<ProcessPanel>();
-});
 </script>
 
 <style scoped lang="scss"></style>