update 初始化流程数据

src/components/BpmnDesign/hooks/useParseElement.ts

@@ -0,0 +1,39 @@
+interface Options {
+  modeler: any;
+  element: any;
+}
+export default <T>(ops: Options) => {
+  const { modeler, element } = ops;
+
+  const formData = ref<T>();
+
+  const parse = () => {
+    const result = {
+      ...element.businessObject,
+      ...element.businessObject.$attrs
+    };
+
+    // 移除flowable前缀，格式化数组
+    for (const key in result) {
+      if (key.indexOf('flowable:') === 0) {
+        const newKey = key.replace('flowable:', '');
+        result[newKey] = result[key];
+        delete result[key];
+      }
+    }
+    if ('documentation' in result) {
+      let str = '';
+      result.documentation.forEach((item: any) => {
+        str += item.text;
+      });
+      result.documentation = str;
+    }
+    formData.value = result;
+    return formData;
+  };
+
+  return {
+    parse,
+    formData
+  };
+};

src/components/BpmnDesign/panel/ProcessPanel.vue

@@ -13,7 +13,7 @@
         <el-input v-model="formData.name"></el-input>
       </el-form-item>
       <el-form-item label="节点描述" prop="description">
-        <el-input v-model="formData.description"></el-input>
+        <el-input v-model="formData.documentation"></el-input>
       </el-form-item>
       <el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
       <ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
@@ -24,6 +24,7 @@
 <script setup lang="ts" name="ProcessPanel">
 import ExecutionListener from './property/ExecutionListener.vue';
 import { ProcessPanel } from 'bpmnDesign';
+import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -36,18 +37,27 @@ const props = withDefaults(defineProps<PropType>(), {
   categorys: () => []
 });
 
-const formData = ref<ProcessPanel>({
+const { parse, formData } = useParseElement<ProcessPanel>({
-  processCategory: '',
+  modeler: props.modeler,
-  id: '',
+  element: toRaw(props.element)
-  name: '',
-  description: ''
 });
 
+// const formData = ref<ProcessPanel>({
+//   processCategory: '',
+//   id: '',
+//   name: '',
+//   documentation: ''
+// });
+
 const formRules = ref<ElFormRules>({
   processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
   id: [{ required: true, message: '请输入', trigger: 'blur' }],
   name: [{ required: true, message: '请输入', trigger: 'blur' }]
 });
+
+onBeforeMount(() => {
+  parse();
+});
 </script>
 
 <style scoped lang="scss"></style>

src/types/bpmn.d.ts

@@ -24,6 +24,6 @@ declare module 'bpmnDesign' {
     processCategory: string;
     id: string;
     name: string;
-    description: string;
+    documentation: string;
   }
 }