From aadc43d5dc33cab0f3a1b23dd1a4880d967ebaf4 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Sun, 21 Jan 2024 22:35:34 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BC=98=E5=8C=96=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BpmnDesign/PropertyPanel.vue   |  9 ++-
 src/components/BpmnDesign/hooks/usePanel.ts   |  4 +-
 src/components/BpmnDesign/index.vue           |  8 ++-
 .../BpmnDesign/panel/GatewayPanel.vue         | 47 +++++++++++++
 .../BpmnDesign/panel/SequenceFlowPanel.vue    | 66 +++++++++++++++++++
 .../BpmnDesign/panel/StartEndPanel.vue        | 47 +++++++++++++
 src/components/BpmnDesign/panel/TaskPanel.vue |  8 ++-
 .../panel/property/TaskListener.vue           |  1 -
 src/types/bpmn.d.ts                           | 20 ++++--
 9 files changed, 192 insertions(+), 18 deletions(-)
 create mode 100644 src/components/BpmnDesign/panel/GatewayPanel.vue
 create mode 100644 src/components/BpmnDesign/panel/SequenceFlowPanel.vue
 create mode 100644 src/components/BpmnDesign/panel/StartEndPanel.vue

diff --git a/src/components/BpmnDesign/PropertyPanel.vue b/src/components/BpmnDesign/PropertyPanel.vue
index f0da6c7..81a1e04 100644
--- a/src/components/BpmnDesign/PropertyPanel.vue
+++ b/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 (gatewayType.includes(type)) return 'gatewayPanel';
+  if (sequenceType.includes(type)) return SequenceFlowPanel;
+  if (gatewayType.includes(type)) return GatewayPanel;
   if (processType.includes(type)) return ProcessPanel;
   return console.error('no ' + type + ' type panel');
 });
diff --git a/src/components/BpmnDesign/hooks/usePanel.ts b/src/components/BpmnDesign/hooks/usePanel.ts
index 7a600ea..8f92c53 100644
--- a/src/components/BpmnDesign/hooks/usePanel.ts
+++ b/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;
-      delete elements.documentation;
-      updateProperties({ process: elements });
+      updateProperties({ documentation: null });
     }
   };
 
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index 1e0c418..2e5cb4b 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -50,9 +50,11 @@
           <el-main style="padding: 0">
             <div ref="canvas" class="canvas" />
           </el-main>
-          <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 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>
diff --git a/src/components/BpmnDesign/panel/GatewayPanel.vue b/src/components/BpmnDesign/panel/GatewayPanel.vue
new file mode 100644
index 0000000..0877aa6
--- /dev/null
+++ b/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>
diff --git a/src/components/BpmnDesign/panel/SequenceFlowPanel.vue b/src/components/BpmnDesign/panel/SequenceFlowPanel.vue
new file mode 100644
index 0000000..90337d3
--- /dev/null
+++ b/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>
diff --git a/src/components/BpmnDesign/panel/StartEndPanel.vue b/src/components/BpmnDesign/panel/StartEndPanel.vue
new file mode 100644
index 0000000..2332f6c
--- /dev/null
+++ b/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>
diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue
index 2f249bd..e064c74 100644
--- a/src/components/BpmnDesign/panel/TaskPanel.vue
+++ b/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>
diff --git a/src/components/BpmnDesign/panel/property/TaskListener.vue b/src/components/BpmnDesign/panel/property/TaskListener.vue
index 52bfa0c..9a9fbd6 100644
--- a/src/components/BpmnDesign/panel/property/TaskListener.vue
+++ b/src/components/BpmnDesign/panel/property/TaskListener.vue
@@ -286,7 +286,6 @@ const initTableData = () => {
 
 onMounted(() => {
   initTableData();
-  console.log(2222);
 });
 </script>
 
diff --git a/src/types/bpmn.d.ts b/src/types/bpmn.d.ts
index b7fd9b5..27e0b33 100644
--- a/src/types/bpmn.d.ts
+++ b/src/types/bpmn.d.ts
@@ -20,21 +20,27 @@ declare module 'bpmnDesign' {
     params: ParamVO[];
   }
 
-  export interface ProcessPanel {
-    processCategory: string;
+  interface BasePanel {
     id: string;
     name: string;
     documentation?: string;
   }
-
-  export interface TaskPanel {
+  export interface ProcessPanel extends BasePanel {
+    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;
+  }
 }