update 优化面板工具

src/components/BpmnDesign/PropertyPanel.vue

@@ -9,6 +9,9 @@
 import { NodeName } from './assets/lang/zh';
 import TaskPanel from './panel/TaskPanel.vue';
 import ProcessPanel from './panel/ProcessPanel.vue';
+import StartEndPanel from './panel/StartEndPanel.vue';
+import GatewayPanel from './panel/GatewayPanel.vue';
+import SequenceFlowPanel from './panel/SequenceFlowPanel.vue';
 interface propsType {
   users: Array<any>;
   groups: Array<any>;
@@ -49,10 +52,10 @@ const processType = ['bpmn:Process'];
 const component = computed(() => {
   if (!element.value) return null;
   const type = element.value.type;
-  if (startEndType.includes(type)) return 'startEndPanel';
+  if (startEndType.includes(type)) return StartEndPanel;
   if (taskType.includes(type)) return TaskPanel;
-  if (sequenceType.includes(type)) return 'sequenceFlowPanel';
+  if (sequenceType.includes(type)) return SequenceFlowPanel;
-  if (gatewayType.includes(type)) return 'gatewayPanel';
+  if (gatewayType.includes(type)) return GatewayPanel;
   if (processType.includes(type)) return ProcessPanel;
   return console.error('no ' + type + ' type panel');
 });

src/components/BpmnDesign/hooks/usePanel.ts

@@ -36,9 +36,7 @@ export default (ops: Options) => {
       const documentationElement = modeler.get('moddle').create('bpmn:Documentation', { text: newVal });
       updateProperties({ documentation: [documentationElement] });
     } else {
-      const elements = element.businessObject;
+      updateProperties({ documentation: null });
-      delete elements.documentation;
-      updateProperties({ process: elements });
     }
   };
 

src/components/BpmnDesign/index.vue

@@ -50,9 +50,11 @@
           <el-main style="padding: 0">
             <div ref="canvas" class="canvas" />
           </el-main>
+          <el-scrollbar height="650px">
             <el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
               <PropertyPanel v-if="bpmnModeler" :modeler="bpmnModeler" :users="users" :groups="groups" :categorys="categorys" />
             </el-aside>
+          </el-scrollbar>
         </el-container>
       </el-container>
     </div>

src/components/BpmnDesign/panel/GatewayPanel.vue

@@ -0,0 +1,47 @@
+<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 prop="documentation" label="节点描述">
+        <el-input v-model="formData.documentation" @change="documentationChange"> </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>
+</template>
+<script setup lang="ts">
+import { GatewayPanel } from 'bpmnDesign';
+import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
+import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+
+interface PropType {
+  modeler: any;
+  element: any;
+  categorys?: any[];
+}
+const props = withDefaults(defineProps<PropType>(), {
+  categorys: () => []
+});
+const { documentationChange, nameChange, idChange } = usePanel({
+  modeler: props.modeler,
+  element: toRaw(props.element)
+});
+const { parse, formData } = useParseElement<GatewayPanel>({
+  modeler: props.modeler,
+  element: toRaw(props.element)
+});
+
+const formRules = ref<ElFormRules>({
+  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/BpmnDesign/panel/SequenceFlowPanel.vue

@@ -0,0 +1,66 @@
+<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 prop="documentation" label="节点描述">
+        <el-input v-model="formData.documentation" @change="documentationChange"> </el-input>
+      </el-form-item>
+      <el-form-item prop="conditionExpression" label="跳过条件">
+        <el-input v-model="formData.conditionExpression" @change="conditionExpressionChange"> </el-input>
+      </el-form-item>
+      <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>
+</template>
+<script setup lang="ts">
+import { SequenceFlowPanel } from 'bpmnDesign';
+import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
+import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+
+interface PropType {
+  modeler: any;
+  element: any;
+  categorys?: any[];
+}
+const props = withDefaults(defineProps<PropType>(), {
+  categorys: () => []
+});
+const { documentationChange, nameChange, idChange, updateProperties } = usePanel({
+  modeler: props.modeler,
+  element: toRaw(props.element)
+});
+const { parse, formData } = useParseElement<SequenceFlowPanel>({
+  modeler: props.modeler,
+  element: toRaw(props.element)
+});
+
+const formRules = ref<ElFormRules>({
+  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+
+const conditionExpressionChange = (val: string) => {
+  if (val) {
+    const newCondition = props.modeler.get('moddle').create('bpmn:FormalExpression', { body: val });
+    updateProperties({ conditionExpression: newCondition });
+  } else {
+    updateProperties({ conditionExpression: null });
+  }
+};
+
+const skipExpressionChange = (val: string) => {
+  updateProperties({ 'flowable:skipExpression': val });
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/BpmnDesign/panel/StartEndPanel.vue

@@ -0,0 +1,47 @@
+<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 prop="documentation" label="节点描述">
+        <el-input v-model="formData.documentation" @change="documentationChange"> </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>
+</template>
+<script setup lang="ts">
+import { StartEndPanel } from 'bpmnDesign';
+import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
+import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+
+interface PropType {
+  modeler: any;
+  element: any;
+  categorys?: any[];
+}
+const props = withDefaults(defineProps<PropType>(), {
+  categorys: () => []
+});
+const { documentationChange, nameChange, idChange } = usePanel({
+  modeler: props.modeler,
+  element: toRaw(props.element)
+});
+const { parse, formData } = useParseElement<StartEndPanel>({
+  modeler: props.modeler,
+  element: toRaw(props.element)
+});
+
+const formRules = ref<ElFormRules>({
+  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form ref="formRef" v-model="formData" label-width="80px">
+    <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>
@@ -41,6 +41,12 @@ const { parse, formData } = useParseElement<TaskPanel>({
   modeler: props.modeler,
   element: toRaw(props.element)
 });
+
+const formRules = ref<ElFormRules>({
+  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
 </script>
 
 <style lang="scss" scoped></style>

src/components/BpmnDesign/panel/property/TaskListener.vue

@@ -286,7 +286,6 @@ const initTableData = () => {
 
 onMounted(() => {
   initTableData();
-  console.log(2222);
 });
 </script>
 

src/types/bpmn.d.ts

@@ -20,21 +20,27 @@ declare module 'bpmnDesign' {
     params: ParamVO[];
   }
 
-  export interface ProcessPanel {
+  interface BasePanel {
-    processCategory: string;
     id: string;
     name: string;
     documentation?: string;
   }
-
+  export interface ProcessPanel extends BasePanel {
-  export interface TaskPanel {
+    processCategory: string;
+  }
+
+  export interface TaskPanel extends BasePanel {
     processCategory: string;
-    id: string;
-    name: string;
-    documentation: string;
     userType: string;
     assignee: string;
     candidateUsers: string;
     candidateGroups: string;
   }
+
+  export interface StartEndPanel extends BasePanel {}
+  export interface GatewayPanel extends BasePanel {}
+  export interface SequenceFlowPanel extends BasePanel {
+    conditionExpression: string;
+    skipExpression: string;
+  }
 }