update 增加 Element类型定义

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 element = ref<Element>();
-
-const form = reactive({
-  id: '',
-  name: '',
-  color: null
-});
-
-const roles = ref([
-  { value: 'manager', label: '经理' },
-  { value: 'personnel', label: '人事' },
-  { value: 'charge', label: '主管' }
-]);
 
 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];

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) => {

src/components/BpmnDesign/hooks/useParseElement.ts

@@ -1,10 +1,9 @@
 import { Ref } from 'vue';
-import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import { Element, Modeler } from 'bpmn';
-import { Modeler } from 'bpmn';
 
 interface Options {
   modeler: Modeler;
-  element: any;
+  element: Element;
 }
 
 interface Data {

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 (modelerStore.getModeler()) {
-  if (store.getModeler()) {
     // 清除旧 modeler
-    store.getModeler().destroy();
+    modelerStore.getModeler().destroy();
-    store.setModeler(undefined);
+    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%;

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>(), {

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>(), {

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>(), {

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>(), {

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>(), {

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>(), {

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>(), {

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;
 }