From 12458177beca5e17d68d74935751bf7add47f31b Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期一, 18 三月 2024 13:56:16 +0800
Subject: [PATCH] update 更新开始面板和泳道面板样式

---
 src/components/BpmnDesign/panel/ParticipantPanel.vue |   48 ++++++++++++++++++-----
 src/components/BpmnDesign/panel/StartEndPanel.vue    |   48 ++++++++++++++++++-----
 2 files changed, 74 insertions(+), 22 deletions(-)

diff --git a/src/components/BpmnDesign/panel/ParticipantPanel.vue b/src/components/BpmnDesign/panel/ParticipantPanel.vue
index 7dd5474..cf32fc6 100644
--- a/src/components/BpmnDesign/panel/ParticipantPanel.vue
+++ b/src/components/BpmnDesign/panel/ParticipantPanel.vue
@@ -1,15 +1,41 @@
 <template>
   <div>
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
-      <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-item label="鎵ц鐩戝惉鍣�" style="margin-bottom: 0"> </el-form-item>
-      <ExecutionListener :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="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">
@@ -30,7 +56,7 @@
 });
 
 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' }]
diff --git a/src/components/BpmnDesign/panel/StartEndPanel.vue b/src/components/BpmnDesign/panel/StartEndPanel.vue
index 9cd0efc..d245017 100644
--- a/src/components/BpmnDesign/panel/StartEndPanel.vue
+++ b/src/components/BpmnDesign/panel/StartEndPanel.vue
@@ -1,15 +1,41 @@
 <template>
   <div>
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
-      <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-item label="鎵ц鐩戝惉鍣�" style="margin-bottom: 0"> </el-form-item>
-      <ExecutionListener :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="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">
@@ -30,7 +56,7 @@
 });
 
 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' }]

--
Gitblit v1.9.3