From 9443218e8669c71d1ddcdb058bc45816b70f633c Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Mon, 22 Jan 2024 14:50:58 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=A2=9E=E5=8A=A0=20Element=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BpmnDesign/PropertyPanel.vue   | 27 +++++++------------
 src/components/BpmnDesign/hooks/usePanel.ts   |  4 +--
 .../BpmnDesign/hooks/useParseElement.ts       |  5 ++--
 src/components/BpmnDesign/index.vue           | 26 +++++-------------
 .../BpmnDesign/panel/GatewayPanel.vue         |  4 +--
 .../BpmnDesign/panel/ProcessPanel.vue         |  4 +--
 .../BpmnDesign/panel/SequenceFlowPanel.vue    |  4 +--
 .../BpmnDesign/panel/StartEndPanel.vue        |  4 +--
 src/components/BpmnDesign/panel/TaskPanel.vue |  4 +--
 .../panel/property/ExecutionListener.vue      |  4 +--
 .../panel/property/TaskListener.vue           |  4 +--
 src/types/bpmn/index.d.ts                     |  2 ++
 12 files changed, 36 insertions(+), 56 deletions(-)

diff --git a/src/components/BpmnDesign/PropertyPanel.vue b/src/components/BpmnDesign/PropertyPanel.vue
index 35da069..f5c9ca3 100644
--- a/src/components/BpmnDesign/PropertyPanel.vue
+++ b/src/components/BpmnDesign/PropertyPanel.vue
@@ -12,27 +12,16 @@ import ProcessPanel from './panel/ProcessPanel.vue';
 import StartEndPanel from './panel/StartEndPanel.vue';
 import GatewayPanel from './panel/GatewayPanel.vue';
 import SequenceFlowPanel from './panel/SequenceFlowPanel.vue';
+import { Modeler, Modeling, Element } from 'bpmn';
 interface propsType {
   users: Array<any>;
   groups: Array<any>;
   categorys: Array<any>;
-  modeler: any;
+  modeler: Modeler;
 }
 const props = withDefaults(defineProps<propsType>(), {});
 
-const element = ref<any>();
-
-const form = reactive({
-  id: '',
-  name: '',
-  color: null
-});
-
-const roles = ref([
-  { value: 'manager', label: '经理' },
-  { value: 'personnel', label: '人事' },
-  { value: 'charge', label: '主管' }
-]);
+const element = ref<Element>();
 
 const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'];
 const taskType = [
@@ -69,20 +58,24 @@ const nodeName = computed(() => {
 });
 
 const handleModeler = () => {
-  props.modeler.on('root.added', (e) => {
+  props.modeler.on('root.added', (e: any) => {
     if (e.element.type === 'bpmn:Process') {
       element.value = null;
       nextTick(() => {
         element.value = e.element;
+        // const modeling = props.modeler.get<Modeling>('modeling');
+        // modeling.setColor(e.element.children, {
+        //   fill: 'green'
+        // });
       });
     }
   });
-  props.modeler.on('element.click', (e) => {
+  props.modeler.on('element.click', (e: any) => {
     if (e.element.type === 'bpmn:Process') {
       element.value = e.element;
     }
   });
-  props.modeler.on('selection.changed', (e) => {
+  props.modeler.on('selection.changed', (e: any) => {
     // 先给null为了让vue刷新
     element.value = null;
     const newElement = e.newSelection[0];
diff --git a/src/components/BpmnDesign/hooks/usePanel.ts b/src/components/BpmnDesign/hooks/usePanel.ts
index 35e5ff5..10ac813 100644
--- a/src/components/BpmnDesign/hooks/usePanel.ts
+++ b/src/components/BpmnDesign/hooks/usePanel.ts
@@ -1,8 +1,8 @@
 import showConfig from '@/components/BpmnDesign/assets/showConfig';
-import { Moddle, Modeler, Modeling } from 'bpmn';
+import { Moddle, Modeler, Modeling, Element } from 'bpmn';
 interface Options {
   modeler: Modeler;
-  element: any;
+  element: Element;
 }
 
 export default (ops: Options) => {
diff --git a/src/components/BpmnDesign/hooks/useParseElement.ts b/src/components/BpmnDesign/hooks/useParseElement.ts
index 7945d61..3a67ca6 100644
--- a/src/components/BpmnDesign/hooks/useParseElement.ts
+++ b/src/components/BpmnDesign/hooks/useParseElement.ts
@@ -1,10 +1,9 @@
 import { Ref } from 'vue';
-import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler } from 'bpmn';
+import { Element, Modeler } from 'bpmn';
 
 interface Options {
   modeler: Modeler;
-  element: any;
+  element: Element;
 }
 
 interface Data {
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index 4044a06..82c538f 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -63,13 +63,14 @@
 </template>
 
 <script lang="ts" setup name="BpmnDesign">
+import { Canvas, ElementRegistry, Modeler } from 'bpmn';
 import PropertyPanel from './PropertyPanel.vue';
 import BpmnModeler from 'bpmn-js/lib/Modeler.js';
 import diagramXML from '@/components/BpmnDesign/assets/defaultXML';
 import flowableModdle from '@/components/BpmnDesign/assets/moddle/flowable';
 import Modules from './assets/module/index';
 import useModelerStore from '@/store/modules/modeler';
-import { Canvas, Modeler } from 'bpmn';
+const modelerStore = useModelerStore();
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -146,13 +147,12 @@ const initCanvas = () => {
  * 初始化Model
  */
 const initModel = () => {
-  let store = useModelerStore();
-  if (store.getModeler()) {
+  if (modelerStore.getModeler()) {
     // 清除旧 modeler
-    store.getModeler().destroy();
-    store.setModeler(undefined);
+    modelerStore.getModeler().destroy();
+    modelerStore.setModeler(undefined);
   }
-  store.setModeler(bpmnModeler.value);
+  modelerStore.setModeler(bpmnModeler.value);
 };
 
 /**
@@ -325,20 +325,6 @@ const getProcessElement = () => {
 @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
 @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
 
-.view-mode {
-  .el-header,
-  .el-aside,
-  .djs-palette,
-  .bjs-powered-by {
-    display: none;
-  }
-  .el-loading-mask {
-    background-color: initial;
-  }
-  .el-loading-spinner {
-    display: none;
-  }
-}
 .app-containers {
   width: 100%;
   height: 100%;
diff --git a/src/components/BpmnDesign/panel/GatewayPanel.vue b/src/components/BpmnDesign/panel/GatewayPanel.vue
index 53c55bb..f9c6a2f 100644
--- a/src/components/BpmnDesign/panel/GatewayPanel.vue
+++ b/src/components/BpmnDesign/panel/GatewayPanel.vue
@@ -18,12 +18,12 @@
 <script setup lang="ts">
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler } from 'bpmn';
+import { Modeler, Element } from 'bpmn';
 import { GatewayPanel } from 'bpmnDesign';
 
 interface PropType {
   modeler: Modeler;
-  element: any;
+  element: Element;
   categorys?: any[];
 }
 const props = withDefaults(defineProps<PropType>(), {
diff --git a/src/components/BpmnDesign/panel/ProcessPanel.vue b/src/components/BpmnDesign/panel/ProcessPanel.vue
index 3a9b197..952a042 100644
--- a/src/components/BpmnDesign/panel/ProcessPanel.vue
+++ b/src/components/BpmnDesign/panel/ProcessPanel.vue
@@ -25,14 +25,14 @@
 import ExecutionListener from './property/ExecutionListener.vue';
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler } from 'bpmn';
+import { Modeler, Element } from 'bpmn';
 import { ProcessPanel } from 'bpmnDesign';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
   modeler: Modeler;
-  element: any;
+  element: Element;
   categorys?: any[];
 }
 const props = withDefaults(defineProps<PropType>(), {
diff --git a/src/components/BpmnDesign/panel/SequenceFlowPanel.vue b/src/components/BpmnDesign/panel/SequenceFlowPanel.vue
index 5666eda..2bc9f40 100644
--- a/src/components/BpmnDesign/panel/SequenceFlowPanel.vue
+++ b/src/components/BpmnDesign/panel/SequenceFlowPanel.vue
@@ -24,12 +24,12 @@
 <script setup lang="ts">
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler } from 'bpmn';
+import { Modeler, Element } from 'bpmn';
 import { SequenceFlowPanel } from 'bpmnDesign';
 
 interface PropType {
   modeler: Modeler;
-  element: any;
+  element: Element;
   categorys?: any[];
 }
 const props = withDefaults(defineProps<PropType>(), {
diff --git a/src/components/BpmnDesign/panel/StartEndPanel.vue b/src/components/BpmnDesign/panel/StartEndPanel.vue
index df3af7e..2c8d4df 100644
--- a/src/components/BpmnDesign/panel/StartEndPanel.vue
+++ b/src/components/BpmnDesign/panel/StartEndPanel.vue
@@ -18,12 +18,12 @@
 <script setup lang="ts">
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler } from 'bpmn';
+import { Modeler, Element } from 'bpmn';
 import { StartEndPanel } from 'bpmnDesign';
 
 interface PropType {
   modeler: Modeler;
-  element: any;
+  element: Element;
   categorys?: any[];
 }
 const props = withDefaults(defineProps<PropType>(), {
diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue
index 7d1d63a..c47f461 100644
--- a/src/components/BpmnDesign/panel/TaskPanel.vue
+++ b/src/components/BpmnDesign/panel/TaskPanel.vue
@@ -23,12 +23,12 @@
 <script setup lang="ts">
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler } from 'bpmn';
+import { Element, Modeler } from 'bpmn';
 import { TaskPanel } from 'bpmnDesign';
 
 interface PropType {
   modeler: Modeler;
-  element: any;
+  element: Element;
   categorys?: any[];
 }
 const props = withDefaults(defineProps<PropType>(), {
diff --git a/src/components/BpmnDesign/panel/property/ExecutionListener.vue b/src/components/BpmnDesign/panel/property/ExecutionListener.vue
index 79375a8..e4282f0 100644
--- a/src/components/BpmnDesign/panel/property/ExecutionListener.vue
+++ b/src/components/BpmnDesign/panel/property/ExecutionListener.vue
@@ -75,7 +75,7 @@
 import ListenerParam from './ListenerParam.vue';
 import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
 import { ExecutionListenerVO } from 'bpmnDesign';
-import { Moddle, Modeler } from 'bpmn';
+import { Moddle, Modeler, Element } from 'bpmn';
 
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import useDialog from '@/hooks/useDialog';
@@ -83,7 +83,7 @@ import useDialog from '@/hooks/useDialog';
 const emit = defineEmits(['close']);
 interface PropType {
   modeler: Modeler;
-  element: any;
+  element: Element;
   categorys?: any[];
 }
 const props = withDefaults(defineProps<PropType>(), {
diff --git a/src/components/BpmnDesign/panel/property/TaskListener.vue b/src/components/BpmnDesign/panel/property/TaskListener.vue
index 3538894..0bb998e 100644
--- a/src/components/BpmnDesign/panel/property/TaskListener.vue
+++ b/src/components/BpmnDesign/panel/property/TaskListener.vue
@@ -74,7 +74,7 @@
 import ListenerParam from './ListenerParam.vue';
 import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
 import { TaskListenerVO } from 'bpmnDesign';
-import { Moddle, Modeler } from 'bpmn';
+import { Moddle, Modeler, Element } from 'bpmn';
 
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import useDialog from '@/hooks/useDialog';
@@ -83,7 +83,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
   modeler: Modeler;
-  element: any;
+  element: Element;
   categorys?: any[];
 }
 const props = withDefaults(defineProps<PropType>(), {
diff --git a/src/types/bpmn/index.d.ts b/src/types/bpmn/index.d.ts
index 66a4bca..70598bf 100644
--- a/src/types/bpmn/index.d.ts
+++ b/src/types/bpmn/index.d.ts
@@ -4,10 +4,12 @@ declare module 'bpmn' {
   import type modeling from 'bpmn-js/lib/features/modeling/Modeling';
   import type canvas from 'diagram-js/lib/core/Canvas';
   import type elementRegistry from 'diagram-js/lib/core/ElementRegistry';
+  import type { Element as element } from 'bpmn-js/lib/model/Types';
 
   export type Modeler = modeler;
   export type Modeling = modeling;
   export type Canvas = canvas;
   export type ElementRegistry = elementRegistry;
   export type Moddle = moddle;
+  export type Element = element;
 }