update 增加hooks方法

src/components/BpmnDesign/hooks/usePanel.ts

@@ -1,12 +1,15 @@
 import showConfig from '@/components/BpmnDesign/assets/showConfig';
-import { Moddle, Modeler, Modeling, Element } from 'bpmn';
+import { Element } from 'bpmn';
+import useModelerStore from '@/store/modules/modeler';
 interface Options {
-  modeler: Modeler;
   element: Element;
 }
 
 export default (ops: Options) => {
-  const { modeler, element } = ops;
+  const { element } = ops;
+  const { getModeling, getModdle } = useModelerStore();
+  const modeling = getModeling();
+  const moddle = getModdle();
 
   const elementType = computed(() => {
     const bizObj = element.businessObject;
@@ -16,7 +19,6 @@ export default (ops: Options) => {
   const config = computed(() => showConfig[elementType.value] || {});
 
   const updateProperties = (properties: any) => {
-    const modeling = modeler.get<Modeling>('modeling');
     modeling.updateProperties(element, properties);
   };
 
@@ -30,20 +32,67 @@ export default (ops: Options) => {
       updateProperties({ name: newVal });
     }
   };
-  const createModdleElement = (elementType, properties, parent) => {
-    const moddle = modeler.get<Moddle>('moddle');
+  const createModdleElement = (elementType: string, properties: any, parent: Element) => {
     const element = moddle.create(elementType, properties);
     parent && (element.$parent = parent);
     return element;
   };
 
+  /**
+   * 获取扩展属性，如果不存在会自动创建
+   */
+  const getExtensionElements = () => {
+    let extensionElements = element.businessObject.get('extensionElements');
+    if (!extensionElements) {
+      extensionElements = createModdleElement('bpmn:ExtensionElements', { values: [] }, element.businessObject);
+      modeling.updateModdleProperties(element, element.businessObject, { extensionElements });
+    }
+    return extensionElements;
+  };
+
+  const getPropertiesElements = (extensionElements?) => {
+    if (!extensionElements) {
+      extensionElements = getExtensionElements();
+    }
+    let propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties');
+    if (!propertiesElements) {
+      propertiesElements = createModdleElement('flowable:properties', { values: [] }, extensionElements);
+      modeling.updateModdleProperties(element, extensionElements, {
+        values: [...extensionElements.get('values'), propertiesElements]
+      });
+    }
+    return propertiesElements;
+  };
+
+  const updateProperty = (name: string, value: string) => {
+    const propertiesElements = getPropertiesElements();
+
+    let propertyElements = propertiesElements.values.find((item) => item.name === name);
+    if (!propertyElements) {
+      propertyElements = createModdleElement('flowable:property', { name: name, value: value }, propertiesElements);
+      modeling.updateModdleProperties(element, propertiesElements, {
+        values: [...propertiesElements.get('values'), propertyElements]
+      });
+    }
+    propertyElements.name = name;
+    propertyElements.value = value;
+    return propertyElements;
+  };
+
   return {
     elementType,
     showConfig: config,
+    modeling,
+    moddle,
 
     updateProperties,
+    updateProperty,
+
     createModdleElement,
     idChange,
-    nameChange
+    nameChange,
+
+    getExtensionElements,
+    getPropertiesElements
   };
 };

src/components/BpmnDesign/hooks/useParseElement.ts

@@ -1,22 +1,17 @@
-import { Ref } from 'vue';
-import { Element, Modeler } from 'bpmn';
+import { Element } from 'bpmn';
 
-interface Options<T> {
-  modeler: Modeler;
+interface Options {
   element: Element;
-  initData: T;
 }
 
 interface Data {
   id: string;
 }
 
-export default <T extends Data>(ops: Options<T>) => {
-  const { modeler, element, initData } = ops;
+export default (ops: Options) => {
+  const { element } = ops;
 
-  const formData = ref<T>(initData);
-
-  const parse = () => {
+  const parseData = <T>(): T => {
     const result = {
       ...element.businessObject,
       ...element.businessObject.$attrs
@@ -30,16 +25,10 @@ export default <T extends Data>(ops: Options<T>) => {
         delete result[key];
       }
     }
-    formData.value = { ...formData.value, ...result };
-    return formData;
+    return { ...result };
   };
 
-  onBeforeMount(() => {
-    parse();
-  });
-
   return {
-    parse,
-    formData: formData as Ref<T>
+    parseData
   };
 };