工作流格式转换

src/stores/modules/workflow.ts

@@ -63,7 +63,7 @@ export const useWorkflowStore = defineStore('workflow', {
       const dom = document.getElementById(portId)
       const node = this.graph.getCellById(nodeId)
       if (dom && node) {
-        node.portProp(portId, ['args', 'dy'], dom.offsetTop + 4)
+        node.portProp(portId, ['args', 'dy'], dom.offsetTop)
       }
     },
     getInVars(node) {

src/views/workflow/chart/index.vue

@@ -489,6 +489,7 @@ const initChart = async () => {
     state.graph.translate(props.data.viewport.x, props.data.viewport.y)
   } else {
     graphZoom(0)
+    emit('save')
   }
 }
 const initNodes = () => {
@@ -498,7 +499,6 @@ const initNodes = () => {
   if (props.data.nodes.length === 0) {
     const node = getNodeDefault(NodeType.Root)
     state.graph.addNode(handleNode(node))
-    emit('save')
   }
 }
 const initEdges = () => {

src/views/workflow/index.vue

@@ -73,10 +73,11 @@ const getJsonData = () => {
   }
   JSON.parse(JSON.stringify(data.cells)).forEach((cell: any) => {
     if (cell.shape === 'workflow-node') {
+      console.log(cell)
       const node: any = {
         id: cell.id,
-        x: cell.position.x,
-        y: cell.position.y,
+        type: cell.data.workflowData.type,
+        position: cell.position,
         data: cell.data.workflowData,
       }
       delete node.data.edgeSource
@@ -88,7 +89,7 @@ const getJsonData = () => {
         source: cell.source.cell,
       }
       if (!cell.source.port.includes('end')) {
-        edge.port = cell.source.port
+        edge.sourceHandle = cell.source.port
       }
       res.graph.edges.push(edge)
     }
@@ -108,14 +109,19 @@ const initData = () => {
       WorkflowStore.$patch(
         (s: any) => (s.envVars.vars = data.environmentVariables || []),
       )
-      // if (data.graph.viewport) {
-      //   state.workflowData = data.graph
-      // } else {
-      state.workflowData = {
-        nodes: [],
-        edges: [],
+      if (data.graph.viewport) {
+        const graph = {
+          viewport: data.graph.viewport,
+          nodes: formatNodes(data.graph.nodes),
+          edges: formatEdges(data.graph.edges),
+        }
+        state.workflowData = graph
+      } else {
+        state.workflowData = {
+          nodes: [],
+          edges: [],
+        }
       }
-      // }
     })
     .catch(() => {})
     .finally(() => {})
@@ -123,6 +129,27 @@ const initData = () => {
   // WorkflowStore.$patch((s: any) => (s.envVars.vars = d.envVars || []))
   // state.workflowData = d.graph
 }
+const formatNodes = (arr) => {
+  return arr.map((node: any) => {
+    const obj = {
+      id: node.id,
+      x: node.position.x,
+      y: node.position.y,
+      data: node.data,
+    }
+    return obj
+  })
+}
+const formatEdges = (arr) => {
+  return arr.map((edge: any) => {
+    const obj = {
+      source: edge.source,
+      target: edge.target,
+      port: edge.sourceHandle || null,
+    }
+    return obj
+  })
+}
 onMounted(() => {
   initData()
 })

src/views/workflow/instance/if-else/node/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="node-if-else">
+  <div class="node-if-else my-2 flex flex-col gap-2">
     <template v-for="(port, index) in state.nodeData.ports">
-      <div class="port-item" :id="port.id">
-        <div class="port-item-head">
+      <div class="break-all" :id="port.id">
+        <div class="port-item-head flex items-center justify-between">
           <template v-if="index === 0">
             <span>CASE {{ index + 1 }}</span>
             <span>IF</span>
@@ -49,22 +49,13 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.node-if-else {
-  margin: 8px 0;
-  .port-item {
-    word-break: break-all;
-    .port-item-head {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      > span:first-child {
-        font-size: 10px;
-        opacity: 0.65;
-      }
-      > span:last-child {
-        font-size: 12px;
-      }
-    }
+.port-item-head {
+  > span:first-child {
+    font-size: 10px;
+    opacity: 0.65;
+  }
+  > span:last-child {
+    font-size: 12px;
   }
 }
 </style>