chore: update

src/modules/market/my/components/Report.vue

@@ -228,15 +228,9 @@ defineExpose({ generateImage, generatePdf })
         <h2>六、自动化营销旅程设计</h2>
         <h3>（一）一级流程</h3>
         <p>本项目设计一级流程图如下。</p>
-        <Flow
-          id="report-flow-1"
-          :nodes="tripStore.nodes"
-          :edges="tripStore.edges"
-          :zoom-on-scroll="false"
-          :prevent-scrolling="false"
-          :pan-on-drag="false"
-          disabled
-          style="height: 200px; margin: 20px 0"></Flow>
+        <div style="height: 200px; margin: 20px 0">
+          <Flow :nodes="tripStore.nodes" :edges="tripStore.edges" :zoom-on-scroll="false" :prevent-scrolling="false" :pan-on-drag="false" disabled></Flow>
+        </div>
         <p>相关节点设计说明如下：</p>
         <template v-for="(item, index) in tripStore.nodes" :key="item.id">
           <h4>{{ index + 1 }}、{{ item.data.label || item.label }}节点</h4>
@@ -253,16 +247,16 @@ defineExpose({ generateImage, generatePdf })
         <p>本项目如下一级流程节点设计了二级流程。</p>
         <template v-for="(item, index) in tripStore.node1List" :key="item.id">
           <h4>{{ index + 1 }}、{{ item.data.label || item.label }}节点。该节点设计的二级流程图如下：</h4>
-          <Flow
-            :process="2"
-            :nodes="item.data.nodes"
-            :edges="item.data.edges"
-            :zoom-on-scroll="false"
-            :prevent-scrolling="false"
-            :pan-on-drag="false"
-            disabled
-            style="height: 200px; margin: 20px 0"
-            v-if="item.data.nodes?.length"></Flow>
+          <div style="height: 200px; margin: 20px 0" v-if="item.data.nodes?.length">
+            <Flow
+              :process="2"
+              :nodes="item.data.nodes"
+              :edges="item.data.edges"
+              :zoom-on-scroll="false"
+              :prevent-scrolling="false"
+              :pan-on-drag="false"
+              disabled></Flow>
+          </div>
           <p>该二级流程图节点说明如下：</p>
           <template v-for="(item, index) in item.data.nodes" :key="item.id">
             <h4>（{{ index + 1 }}）{{ item.data.label || item.label }}节点</h4>

src/modules/market/my/components/flow/Flow.vue

@@ -57,7 +57,7 @@ async function layoutGraph(direction) {
       <NodeEnd :process="process" :disabled="disabled" v-bind="props" />
     </template>
     <template #node-custom="props">
-      <NodeCustom :process="process" :disabled="disabled" v-bind="props" />
+      <NodeCustom :process="process" :disabled="disabled" v-bind="props" @node-remove="layoutGraph('LR')" />
     </template>
     <template #edge-custom="props">
       <EdgeCustom :process="process" :disabled="disabled" v-bind="props" />

src/modules/market/my/components/flow/NodeCustom.vue

@@ -5,6 +5,7 @@ import NodeCustomForm from './NodeCustomForm.vue'
 const Flow = defineAsyncComponent(() => import('./Flow.vue'))
 
 const props = defineProps(['label', 'data', 'process', 'selected', 'id', 'disabled'])
+const emit = defineEmits(['nodeRemove'])
 
 const dialogVisible = ref(false)
 
@@ -93,6 +94,7 @@ function removeNodeBetweenEdges() {
       markerEnd: MarkerType.ArrowClosed
     }
   ])
+  emit('nodeRemove')
 }
 </script>
 

src/modules/market/my/components/flow/useLayout.js

@@ -48,30 +48,30 @@ export function useLayout(findNode) {
         position: { x: nodeWithPosition.x, y: nodeWithPosition.y }
       }
     })
+  }
 
-    function sortNodes(nodes, edges) {
-      const nodesMap = new Map()
+  function sortNodes(nodes, edges) {
+    const nodesMap = new Map()
 
-      nodes.forEach(node => {
-        nodesMap.set(node.id, node)
-      })
+    nodes.forEach(node => {
+      nodesMap.set(node.id, node)
+    })
 
-      // Perform topological sort to determine the order of nodes
-      const sortedNodes = []
-      const visited = new Set()
+    // Perform topological sort to determine the order of nodes
+    const sortedNodes = []
+    const visited = new Set()
 
-      const visit = nodeId => {
-        if (!visited.has(nodeId)) {
-          visited.add(nodeId)
-          edges.filter(edge => edge.source === nodeId).forEach(edge => visit(edge.target))
-          sortedNodes.push(nodesMap.get(nodeId))
-        }
+    const visit = nodeId => {
+      if (!visited.has(nodeId)) {
+        visited.add(nodeId)
+        edges.filter(edge => edge.source === nodeId).forEach(edge => visit(edge.target))
+        sortedNodes.push(nodesMap.get(nodeId))
       }
+    }
 
-      nodesMap.forEach((_, nodeId) => visit(nodeId))
+    nodesMap.forEach((_, nodeId) => visit(nodeId))
 
-      return sortedNodes.reverse()
-    }
+    return sortedNodes.reverse()
   }
 
   return { graph, layout, previousDirection }

src/modules/market/my/views/Update.vue

@@ -75,16 +75,14 @@ async function handleNext(data, isCheck = false) {
       <el-tab-pane lazy label="第5步" :name="5">
         <Step5 @submit="handleSubmit" @next="handleNext"></Step5>
       </el-tab-pane>
-      <el-tab-pane lazy label="第6步" :name="6">
-        <Step6 @submit="handleSubmit" @next="handleNext"></Step6>
-      </el-tab-pane>
+      <el-tab-pane lazy label="第6步" :name="6"> </el-tab-pane>
       <el-tab-pane lazy label="第7步" :name="7">
         <Step7 @submit="handleSubmit" @next="handleNext"></Step7>
       </el-tab-pane>
-      <el-tab-pane lazy label="第8步" :name="8">
-        <Step8 @submit="handleSubmit" @next="handleNext"></Step8>
-      </el-tab-pane>
+      <el-tab-pane lazy label="第8步" :name="8"> </el-tab-pane>
     </el-tabs>
+    <Step6 @submit="handleSubmit" @next="handleNext" v-if="activeTab == 6"></Step6>
+    <Step8 @submit="handleSubmit" @next="handleNext" v-if="activeTab == 8"></Step8>
   </AppCard>
 </template>