update 优化页面类型

src/components/BpmnDesign/PropertyPanel.vue

@@ -11,7 +11,7 @@ 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, Element } from 'bpmn';
+import { Modeler, ModdleElement } from 'bpmn';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 interface propsType {
   users: Array<any>;
@@ -20,8 +20,8 @@ interface propsType {
 }
 const props = withDefaults(defineProps<propsType>(), {});
 
-const element = ref<Element>();
+const element = ref<ModdleElement>();
-const processElement = ref<Element>();
+const processElement = ref<ModdleElement>();
 
 const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'];
 const taskType = [

src/components/BpmnDesign/hooks/usePanel.ts

@@ -1,8 +1,8 @@
 import showConfig from '@/components/BpmnDesign/assets/showConfig';
-import { Element } from 'bpmn';
+import { ModdleElement } from 'bpmn';
 import useModelerStore from '@/store/modules/modeler';
 interface Options {
-  element: Element;
+  element: ModdleElement;
 }
 
 export default (ops: Options) => {
@@ -30,7 +30,7 @@ export default (ops: Options) => {
    * @param properties 属性
    * @param parent 父节点
    */
-  const createModdleElement = (elementType: string, properties: any, parent: Element) => {
+  const createModdleElement = (elementType: string, properties: any, parent: ModdleElement) => {
     const element = moddle.create(elementType, properties);
     parent && (element.$parent = parent);
     return element;
@@ -40,7 +40,7 @@ export default (ops: Options) => {
    * 获取扩展属性，如果不存在会自动创建
    */
   const getExtensionElements = (create = true) => {
-    let extensionElements = element.businessObject.get('extensionElements');
+    let extensionElements = element.businessObject.get<ModdleElement>('extensionElements');
     if (!extensionElements && create) {
       extensionElements = createModdleElement('bpmn:ExtensionElements', { values: [] }, element.businessObject);
       modeling.updateModdleProperties(element, element.businessObject, { extensionElements });
@@ -52,7 +52,7 @@ export default (ops: Options) => {
    * 获取extensionElements下的properties
    * @param extensionElements 可选参数，默认获取当前Element下的extensionElements下的Properties
    */
-  const getPropertiesElements = (extensionElements?) => {
+  const getPropertiesElements = (extensionElements?: ModdleElement) => {
     if (!extensionElements) {
       extensionElements = getExtensionElements();
     }
@@ -60,7 +60,7 @@ export default (ops: Options) => {
     if (!propertiesElements) {
       propertiesElements = createModdleElement('flowable:properties', { values: [] }, extensionElements);
       modeling.updateModdleProperties(element, extensionElements, {
-        values: [...extensionElements.get('values'), propertiesElements]
+        values: [...extensionElements.get<[]>('values'), propertiesElements]
       });
     }
     return propertiesElements;

src/components/BpmnDesign/hooks/useParseElement.ts

@@ -1,7 +1,7 @@
-import { Element } from 'bpmn';
+import { ModdleElement } from 'bpmn';
 
 interface Options {
-  element: Element;
+  element: ModdleElement;
 }
 
 interface Data {
@@ -25,7 +25,7 @@ export default (ops: Options) => {
         delete result[key];
       }
     }
-    return { ...result };
+    return { ...result } as T;
   };
 
   return {

src/components/BpmnDesign/panel/GatewayPanel.vue

@@ -41,12 +41,12 @@
 <script setup lang="ts">
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler, Element } from 'bpmn';
+import { Modeler, ModdleElement } from 'bpmn';
 import { GatewayPanel } from 'bpmnDesign';
 import ExecutionListener from '@/components/BpmnDesign/panel/property/ExecutionListener.vue';
 
 interface PropType {
-  element: Element;
+  element: ModdleElement;
 }
 const props = withDefaults(defineProps<PropType>(), {});
 const { nameChange, idChange } = usePanel({

src/components/BpmnDesign/panel/ProcessPanel.vue

@@ -43,13 +43,13 @@
 import ExecutionListener from './property/ExecutionListener.vue';
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler, Element } from 'bpmn';
+import { Modeler, ModdleElement } from 'bpmn';
 import { ProcessPanel } from 'bpmnDesign';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
-  element: Element;
+  element: ModdleElement;
 }
 const props = withDefaults(defineProps<PropType>(), {});
 

src/components/BpmnDesign/panel/SequenceFlowPanel.vue

@@ -47,12 +47,12 @@
 <script setup lang="ts">
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler, Element } from 'bpmn';
+import { Modeler, ModdleElement } from 'bpmn';
 import { SequenceFlowPanel } from 'bpmnDesign';
 import useModelerStore from '@/store/modules/modeler';
 
 interface PropType {
-  element: Element;
+  element: ModdleElement;
 }
 const props = withDefaults(defineProps<PropType>(), {});
 const { nameChange, idChange, updateProperties } = usePanel({

src/components/BpmnDesign/panel/StartEndPanel.vue

@@ -15,11 +15,11 @@
 <script setup lang="ts">
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
-import { Modeler, Element } from 'bpmn';
+import { Modeler, ModdleElement } from 'bpmn';
 import { StartEndPanel } from 'bpmnDesign';
 
 interface PropType {
-  element: Element;
+  element: ModdleElement;
 }
 const props = withDefaults(defineProps<PropType>(), {});
 const { nameChange, idChange } = usePanel({

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -92,7 +92,7 @@
             </el-tabs>
 
             <el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
-              <el-input v-model="formData.dueDate" clearable @change="dueDateChange" @click.native="openDueDate">
+              <el-input v-model="formData.dueDate" clearable @change="dueDateChange" @click="openDueDate">
                 <template #append>
                   <el-button icon="Search" type="primary" @click="openDueDate" />
                 </template>
@@ -231,7 +231,7 @@ import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import UserSelect from '@/components/UserSelect';
 import RoleSelect from '@/components/RoleSelect';
 import DueDate from '@/components/BpmnDesign/panel/property/DueDate.vue';
-import { Element } from 'bpmn';
+import { ModdleElement } from 'bpmn';
 import { TaskPanel } from 'bpmnDesign';
 import { AllocationTypeEnum, MultiInstanceTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
 import { UserVO } from '@/api/system/user/types';
@@ -240,7 +240,7 @@ import { RoleVO } from '@/api/system/role/types';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
-  element: Element;
+  element: ModdleElement;
 }
 const props = withDefaults(defineProps<PropType>(), {});
 const { showConfig, nameChange, idChange, updateProperties, getExtensionElements, createModdleElement } = usePanel({
@@ -383,7 +383,7 @@ const elementVariableChange = (newVal) => {
   updateProperties({ loopCharacteristics: loopCharacteristics });
 };
 const completionConditionChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+  let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics');
   if (!loopCharacteristics) {
     loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
   }

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

@@ -88,7 +88,7 @@
 import ListenerParam from './ListenerParam.vue';
 import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
 import { ExecutionListenerVO } from 'bpmnDesign';
-import { Moddle, Modeler, Element } from 'bpmn';
+import { Moddle, Modeler, ModdleElement } from 'bpmn';
 
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import useDialog from '@/hooks/useDialog';
@@ -96,7 +96,7 @@ import useModelerStore from '@/store/modules/modeler';
 
 const emit = defineEmits(['close']);
 interface PropType {
-  element: Element;
+  element: ModdleElement;
 }
 const props = withDefaults(defineProps<PropType>(), {});
 

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

@@ -89,7 +89,7 @@
 import ListenerParam from './ListenerParam.vue';
 import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
 import { TaskListenerVO } from 'bpmnDesign';
-import { Element } from 'bpmn';
+import { ModdleElement } from 'bpmn';
 
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import useDialog from '@/hooks/useDialog';
@@ -98,7 +98,7 @@ import useModelerStore from '@/store/modules/modeler';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
-  element: Element;
+  element: ModdleElement;
 }
 const props = withDefaults(defineProps<PropType>(), {});
 

src/types/bpmn/index.d.ts

@@ -1,15 +1,13 @@
 declare module 'bpmn' {
-  import { Moddle as moddle } from 'moddle';
   import type modeler from 'bpmn-js/lib/Modeler';
   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 Moddle = import('moddle').Moddle;
-  export type Element = element;
+  export type ModdleElement = import('moddle').ModdleElement;
 }

src/types/bpmn/moddle.d.ts

@@ -1,195 +1,37 @@
-/************************************** 核心 Moddle 声明 *****************************************/
 declare module 'moddle' {
-  type UriOrPrefix = {
+  import type { Element as element } from 'bpmn-js/lib/model/Types';
-    uri?: string;
-    prefix?: string;
-  };
 
-  export class Element {
+  export type Element = {
-    $instanceOf: typeof Moddle.prototype.hasType;
+    get<T>(name: string): T;
 
-    get(name: string): ReturnType<typeof Properties.prototype.get>;
+    set(name: string, value: any): void;
+  } & element;
 
-    set(name: string, value: any): ReturnType<typeof Properties.prototype.set>;
+  export interface ModdleElement extends Element {
-  }
+    $model: Moddle;
-
-  export class ModdleElement extends Element {
-    static $model: Moddle;
-    static $descriptor: Descriptor;
     readonly $type: string;
     $attrs: object | {};
+    $parent: any;
+    businessObject: ModdleElement;
+    type: string;
 
     [field: string]: any;
 
-    $parent: any;
+    hasType(element: ModdleElement, type?: string): boolean;
-
-    constructor(attrs: object);
-
-    static hasType(element: ModdleElement, type?: string): boolean;
   }
 
-  export class Factory {
-    model: Moddle;
-    properties: Properties;
-
-    constructor(model: Moddle, properties: Properties);
-
-    createType(descriptor: Descriptor): ModdleElement;
-  }
-
-  export type BuiltinsKeys = 'String' | 'Boolean' | 'Integer' | 'Real' | 'Element';
-  export type TypeConverters = {
-    [T in Exclude<BuiltinsKeys, 'Element'>]: (s: string) => string | boolean | number;
-  };
-  export type coerceType = <T extends Exclude<BuiltinsKeys, 'Element'>>(type: T, value: string) => ReturnType<TypeConverters[T]>;
-
-  export function isBuiltIn(type: BuiltinsKeys): boolean;
-
-  export function isSimple(type: Exclude<BuiltinsKeys, 'Element'>): boolean;
-
-  type ParsedName = {
-    name: string;
-    prefix: string;
-    localName: string;
-  };
-
-  export function parseName(name: string, defaultPrefix?: string): ParsedName;
-
-  // DescriptorBuilder
-  type Property = {
-    ns: ParsedName;
-    name: ParsedName['name'];
-    isId?: boolean;
-    isBody?: boolean;
-  };
-  type DescriptorType = {
-    name: string;
-    properties: Property[];
-    superClass?: string[];
-    extends?: string[];
-    meta?: object | {};
-  };
-  type Descriptor = {
-    ns: ParsedName;
-    name: ParsedName['name'];
-    allTypes: DescriptorType[];
-    allTypesByName: Record<string, DescriptorType[]>;
-    properties: Property[];
-    propertiesByName: Record<string, Property[]>;
-
-    bodyProperty?: Property;
-    idProperty?: Property;
-  };
-
-  export class DescriptorBuilder implements Descriptor {
-    ns: ParsedName;
-    name: ParsedName['name'];
-    allTypes: DescriptorType[];
-    allTypesByName: Record<string, DescriptorType[]>;
-    properties: Property[];
-    propertiesByName: Record<string, Property[]>;
-    bodyProperty?: Property;
-    idProperty?: Property;
-
-    constructor(nameNs: ParsedName);
-
-    build(): Descriptor;
-
-    addProperty(p: Property, idx?: number, validate?: boolean): void;
-
-    replaceProperty(oldProperty: Property, newProperty: Property, replace?: boolean): void | never;
-
-    redefineProperty(p: Property, targetPropertyName: `${string}#${string}`, replace?: boolean): void | never;
-
-    addNamedProperty(p: Property, validate?: boolean): void | never;
-
-    removeNamedProperty(p: Property): void;
-
-    setBodyProperty(p: Property, validate?: boolean): void | never;
-
-    setIdProperty(p: Property, validate?: boolean): void | never;
-
-    assertNotDefined(p: Property, name?: string): void | never;
-
-    hasProperty(name: string): Property | undefined;
-
-    addTrait(t: DescriptorType, inherited: boolean): void;
-  }
-
-  // Registry
   export interface Package {
     name: string;
     prefix: string;
-    types: DescriptorType[];
   }
 
-  export class Registry {
+  export interface Moddle {
-    packageMap: Record<string, Package>;
-    typeMap: Record<string, DescriptorType>;
-    packages: Package[];
-    properties: Properties;
-
-    constructor(packages: Package[], properties: Properties);
-
-    getPackage(uriOrPrefix: UriOrPrefix): Package;
-
-    getPackages(): Package[];
-
-    registerPackage(pkg: Package): number;
-
-    registerType(type: DescriptorType, pkg: Package): void;
-
-    mapTypes(nsName: object, iterator: Function, trait?: boolean);
-
-    getEffectiveDescriptor(name: string): DescriptorBuilder;
-
-    definePackage(target: Descriptor, pkg: Package): void;
-  }
-
-  export class Properties {
-    model: Moddle;
-
-    constructor(model: Moddle);
-
-    set(target: ModdleElement, name: string, value: any): void;
-
-    get(target: ModdleElement, name: string): any;
-
-    define(target: ModdleElement, name: string, options: PropertyDescriptor): void;
-
-    defineDescriptor(target: Omit<ModdleElement, '$descriptor'>, descriptor: Descriptor): void;
-
-    defineModel(target: Omit<ModdleElement, '$model'>, model: ModdleElement): void;
-  }
-
-  export class Moddle {
-    properties: Properties;
-    factory: Factory;
-    registry: Registry;
     typeCache: Record<string, ModdleElement>;
 
     getPackage: typeof Registry.prototype.getPackage;
 
     getPackages: typeof Registry.prototype.getPackages;
 
-    constructor(packages: Package[]);
+    create(type: string, attrs?: any): ModdleElement;
-
-    create(type: Descriptor | string, attrs?: any): ModdleElement;
-
-    getType(type: string | Descriptor): DescriptorBuilder;
-
-    createAny(name: string, nsUri: string, properties?: Properties): void;
-
-    getElementDescriptor(element: ModdleElement): Descriptor;
-
-    hasType(element: ModdleElement | string, type?: string): boolean;
-
-    getPropertyDescriptor(element: ModdleElement, property: Property): Descriptor;
-
-    getTypeDescriptor(type: string): Descriptor;
   }
-
-  export type isBuiltInType = typeof isBuiltIn;
-  export type isSimpleType = typeof isSimple;
-  export type parseNameNS = typeof parseName;
 }