From 21dcfce1bc1bb4d9cf7d1dc7d25a19748a5205c4 Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Fri, 24 Jan 2025 11:46:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=BF=9E=E7=BA=BF=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=B7=BB=E5=8A=A0=E6=B8=90=E5=8F=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/createapp/components/workFlow.vue   | 83 ++++++++++++++---
 .../components/workFlowConfig/CustomEdge.vue  | 88 +++++++++++++++++--
 2 files changed, 152 insertions(+), 19 deletions(-)

diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 0138b19..3a4d89d 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -29,7 +29,7 @@ const editData = ref();
 const dialogType = ref('');
 const isEditYaml = ref(false);
 const flowZoom = ref(1);
-const debugDialogVisible = ref(false)
+const debugDialogVisible = ref(false);
 const isNodeAndLineConnect = ref(false);
 const emits = defineEmits(['validateConnect']);
 const hanleAsideVisible = () => {
@@ -41,8 +41,19 @@ const hanleAsideVisible = () => {
   }
 };
 
-const { onConnect, addEdges, getNodes, getEdges, findNode, removeNodes, setViewport, getViewport, fitView } =
-  useVueFlow();
+const {
+  onConnect,
+  updateNode,
+  updateEdgeData,
+  addEdges,
+  getNodes,
+  getEdges,
+  findNode,
+  removeNodes,
+  setViewport,
+  getViewport,
+  fitView,
+} = useVueFlow();
 const { layout } = useLayout();
 
 const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } = useDragAndDrop();
@@ -115,8 +126,18 @@ const handleChangeZoom = zoomValue => {
 };
 
 onConnect(e => {
+  // 边的起点和终点节点的两个状态
+  const sourceItem = getNodes.value.find(item => item.id === e.source);
+  const targetItem = getNodes.value.find(item => item.id === e.target);
+  // 获取当前状态
+  const sourceStatus = sourceItem?.data?.status || 'default';
+  const targetStatus = targetItem?.data?.status || 'default';
   addEdges({
     ...e,
+    data: {
+      sourceStatus,
+      targetStatus,
+    },
     type: 'custom',
   });
   // 添加边连接时-判断节点是否都连接
@@ -197,10 +218,29 @@ const dropFunc = e => {
   nodeAndLineConnection();
 };
 
-const handleDebugDialogOps = (visible)=>{
-  debugDialogVisible.value = visible
-}
+// 更新节点状态--这里是测试第一个成功节点改变状态的方法【同时边也随之改变】
+const updateNodeTest = state => {
+  // 获取当前的success状态的
+  const nodes = getNodes.value.filter(item => item.data.status === 'success');
+  const id = nodes[0].id;
+  const data = nodes[0].data;
+  // 取第一个，状态改为error
+  updateNode(id, { data: { ...data, status: 'error' } });
+  // 遍历获取以当前节点为起源节点的边和为目的节点的边
+  const changeSourceEdges = [...getEdges.value.filter(item => item.source === id)];
+  const changeTargetEdges = [...getEdges.value.filter(item => item.target === id)];
+  // 分别遍历相应的边-并更新它们的状态为最新状态
+  changeSourceEdges.forEach(item => {
+    updateEdgeData(item.id, { sourceStatus: 'error' });
+  });
+  changeTargetEdges.forEach(item => {
+    updateEdgeData(item.id, { targetStatus: 'error' });
+  });
+};
 
+const handleDebugDialogOps = visible => {
+  debugDialogVisible.value = visible;
+};
 </script>
 <template>
   <div class="workFlowContainer" @drop="dropFunc">
@@ -247,6 +287,7 @@ const handleDebugDialogOps = (visible)=>{
                   </div>
                 </el-collapse-item>
               </el-collapse>
+              <div style="display: none" @click="updateNodeTest">测试状态修改（暂不显示）</div>
             </div>
           </div>
         </div>
@@ -255,6 +296,7 @@ const handleDebugDialogOps = (visible)=>{
     <div class="workFlowContainerRight">
       <VueFlow
         :nodes="nodes"
+        :edges="edges"
         :default-viewport="{ zoom: 0.8 }"
         :min-zoom="0.5"
         :max-zoom="4"
@@ -281,14 +323,31 @@ const handleDebugDialogOps = (visible)=>{
 
         <!-- 自定义边线 -->
         <template #edge-custom="props">
-          <CustomEdge v-bind="props" />
+          <CustomEdge
+            :id="props.id"
+            :key="props.id"
+            :sourceX="props.sourceX"
+            :sourceY="props.sourceY"
+            :targetX="props.targetX"
+            :targetY="props.targetY"
+            :sourcePosition="props.sourcePosition"
+            :targetPosition="props.targetPosition"
+            :data="JSON.parse(JSON.stringify(props.data))"
+          />
         </template>
 
         <template #connection-line="props">
-          <CustomEdge v-bind="props" />
+          <CustomEdge
+            :sourceX="props.sourceX"
+            :sourceY="props.sourceY"
+            :targetX="props.targetX"
+            :targetY="props.targetY"
+            :sourcePosition="props.sourcePosition"
+            :targetPosition="props.targetPosition"
+          />
         </template>
 
-        <WorkFlowDebug v-if="debugDialogVisible" :handleDebugDialogOps="handleDebugDialogOps"/>
+        <WorkFlowDebug v-if="debugDialogVisible" :handleDebugDialogOps="handleDebugDialogOps" />
       </VueFlow>
       <div class="workFlowOps">
         <div class="workFlowSelect">
@@ -304,9 +363,9 @@ const handleDebugDialogOps = (visible)=>{
           </el-select>
         </div>
         <div class="debugBtn" @click="handleDebugDialogOps(true)">
-          <img src="@/assets/images/debugBtnDis.png" v-if="debugDialogVisible"/>
-          <img src="@/assets/images/debugBtn.png" v-else/>
-        </div>
+            <img src="@/assets/images/debugBtnDis.png" v-if="debugDialogVisible"/>
+            <img src="@/assets/images/debugBtn.png" v-else/>
+          </div>
         <div class="debugStatus"></div>
       </div>
     </div>
diff --git a/src/views/createapp/components/workFlowConfig/CustomEdge.vue b/src/views/createapp/components/workFlowConfig/CustomEdge.vue
index 0021350..e687e93 100644
--- a/src/views/createapp/components/workFlowConfig/CustomEdge.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomEdge.vue
@@ -1,9 +1,40 @@
 <template>
-  <g>
-    <!-- path -->
-    <path :d="path" fill="none" stroke="#c3cedf" stroke-width="2" />
+  <g :id="'edge' + props.id">
+    <linearGradient id="success_success">
+      <stop offset="0" stop-color="rgba(36, 171, 54, 0.2)" />
+    </linearGradient>
+    <linearGradient id="error_error">
+      <stop offset="0" stop-color="rgba(227, 32, 32, 0.2)" />
+    </linearGradient>
+    <linearGradient id="success_error">
+      <stop offset="0" stop-color="rgba(36, 171, 54, 0.2)" />
+      <stop offset="100" stop-color="rgba(227, 32, 32, 0.2)" />
+    </linearGradient>
+    <linearGradient id="error_success">
+      <stop offset="0" stop-color="rgba(227, 32, 32, 0.2)" />
+      <stop offset="100" stop-color="rgba(36, 171, 54, 0.2)" />
+    </linearGradient>
+    <linearGradient id="success_runing" >
+      <stop offset="0" stop-color="rgba(36, 171, 54, 0.2)" />
+      <stop offset="100" stop-color="rgba(99, 149, 253, 0.3)" />
+    </linearGradient>
+    <linearGradient id="connect_runing">
+      <stop offset="0" stop-color="rgba(99, 149, 253, 0.3)" />
+      <stop offset="100" stop-color="#DFE5EF" />
+    </linearGradient>
+    <path
+      :id="'line' + props.id"
+      v-if="props.id && connectStatus.includes(status)"
+      :key="pathKey"
+      :d="`M  ${targetX } ${targetY - 1}` + path"
+      fill="none"
+      :stroke="`url(#${status})`"
+      stroke-width="4"
+    />
+    <path v-else :d="path" fill="none" stroke="#c3cedf" stroke-width="4" />
     <!-- 箭头markEnd -->
     <path
+      v-if="!connectStatus.includes(status) || !props.id"
       :transform="transform"
       :d="`M ${targetX} ${targetY + 2} L ${targetX - 5} ${targetY - 10} L ${targetX + 5} ${targetY - 10} Z`"
       fill="#c3cedf"
@@ -11,12 +42,28 @@
     />
   </g>
 </template>
-
 <script setup>
 import { getBezierPath, getSmoothStepPath } from '@vue-flow/core';
-import { computed } from 'vue';
-
+import { computed, watch, ref, onMounted } from 'vue';
+const status = ref('default');
+const startOffset = ref(0);
+const endOffset = ref(100);
+// default状态默认第一位，以便于判断包含时正好不包含index为0的default
+const connectStatus = ref([
+  'defau1lt',
+  'success_success',
+  'error_error',
+  'success_error',
+  'error_success',
+  'success_runing',
+  'connect_runing',
+]);
+const pathKey = ref(false)
 const props = defineProps({
+  id: {
+    type: String,
+    required: false,
+  },
   sourceX: {
     type: Number,
     required: true,
@@ -41,10 +88,37 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  data: {
+    type: Object,
+  },
 });
+watch(
+  () => props.data,
+  () => {
+    // 更新当前的初始状态
+    status.value = props.data?.sourceStatus + '_' + props.data?.targetStatus;
+    // 如果还未生成id，则返回
+    if (!props.id) {
+      return;
+    }
+    pathKey.value = !pathKey.key;
+    // 否则需要根据当前的起源节点和目的节点的位置，对相应的状态进行修改符合样式
+    if (props?.targetX < props?.sourceX) {
+      if (props.data.sourceStatus === 'success' && props.data.targetStatus === 'error') {
+        status.value = 'error_success';
+      }
+      if (props.data.sourceStatus === 'error' && props.data.targetStatus === 'success') {
+        status.value = 'success_error';
+      }
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
 const path = computed(() => getSmoothStepPath(props)[0]);
 const transform = computed(() => getArrowTransform(props));
-
 function getArrowTransform(props) {
   const { targetPosition } = props;
   if (targetPosition === 'top') {
-- 
Gitee