From 2c093771bc0551ee73ed5f161c1bdfa8ea3ded3f Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Sun, 21 Jan 2024 15:59:33 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=88=9D=E5=A7=8B=E5=8C=96=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BpmnDesign/hooks/useParseElement.ts       | 39 +++++++++++++++++++
 .../BpmnDesign/panel/ProcessPanel.vue         | 22 ++++++++---
 src/types/bpmn.d.ts                           |  2 +-
 3 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 src/components/BpmnDesign/hooks/useParseElement.ts

diff --git a/src/components/BpmnDesign/hooks/useParseElement.ts b/src/components/BpmnDesign/hooks/useParseElement.ts
new file mode 100644
index 0000000..f4514c1
--- /dev/null
+++ b/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
+  };
+};
diff --git a/src/components/BpmnDesign/panel/ProcessPanel.vue b/src/components/BpmnDesign/panel/ProcessPanel.vue
index 30b4a1c..a0605d4 100644
--- a/src/components/BpmnDesign/panel/ProcessPanel.vue
+++ b/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>({
-  processCategory: '',
-  id: '',
-  name: '',
-  description: ''
+const { parse, formData } = useParseElement<ProcessPanel>({
+  modeler: props.modeler,
+  element: toRaw(props.element)
 });
 
+// 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>
diff --git a/src/types/bpmn.d.ts b/src/types/bpmn.d.ts
index 4ce81ca..cf400d6 100644
--- a/src/types/bpmn.d.ts
+++ b/src/types/bpmn.d.ts
@@ -24,6 +24,6 @@ declare module 'bpmnDesign' {
     processCategory: string;
     id: string;
     name: string;
-    description: string;
+    documentation: string;
   }
 }