update 完善流程线

src/components/BpmnDesign/panel/SequenceFlowPanel.vue

@@ -1,6 +1,17 @@
 <template>
   <div>
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+    <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>
@@ -13,19 +24,34 @@
             <el-form-item prop="skipExpression" label="跳过表达式">
               <el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
             </el-form-item>
-      <el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
-      <ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
           </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 { Modeler, Element } from 'bpmn';
 import { SequenceFlowPanel } from 'bpmnDesign';
+import useModelerStore from '@/store/modules/modeler';
 
 interface PropType {
-  modeler: Modeler;
   element: Element;
 }
 const props = withDefaults(defineProps<PropType>(), {});
@@ -35,7 +61,8 @@ const { nameChange, idChange, updateProperties } = usePanel({
 const { parseData } = useParseElement({
   element: toRaw(props.element)
 });
-
+const moddle = useModelerStore().getModdle();
+const currentCollapseItem = ref(['1', '2']);
 const formData = ref(parseData<SequenceFlowPanel>());
 
 const formRules = ref<ElFormRules>({
@@ -46,7 +73,7 @@ const formRules = ref<ElFormRules>({
 
 const conditionExpressionChange = (val: string) => {
   if (val) {
-    const newCondition = props.modeler.get('moddle').create('bpmn:FormalExpression', { body: val });
+    const newCondition = moddle.create('bpmn:FormalExpression', { body: val });
     updateProperties({ conditionExpression: newCondition });
   } else {
     updateProperties({ conditionExpression: null });