From e7d4fed7f879289a25767d5d9a4fc2836f20e5bd Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Thu, 27 Jun 2024 20:31:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E4=BF=AE=E6=94=B9=E5=90=8E=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=9C=AA=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/workflow/common/NodeContainer.vue | 38 +++++++++++++-----------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/ui/src/workflow/common/NodeContainer.vue b/ui/src/workflow/common/NodeContainer.vue
index 747c8f49a..74f5e64ac 100644
--- a/ui/src/workflow/common/NodeContainer.vue
+++ b/ui/src/workflow/common/NodeContainer.vue
@@ -38,9 +38,9 @@
 
         <div>
           <slot></slot>
-          <template v-if="paramsFields?.length > 0">
+          <template v-if="nodeModel.properties.fields?.length > 0">
             <h5 class="title-decoration-1 mb-8 mt-8">参数输出</h5>
-            <template v-for="(item, index) in paramsFields" :key="index">
+            <template v-for="(item, index) in nodeModel.properties.fields" :key="index">
               <div
                 class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter"
                 @mouseenter="showicon = index"
@@ -66,7 +66,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { set } from 'lodash'
 import { iconComponent } from '../icons/utils'
 import { copyClick } from '@/utils/clipboard'
@@ -84,19 +84,7 @@ const height = ref<{
 })
 
 const showEditIcon = ref(false)
-const paramsFields = computed(() => {
-  if (props.nodeModel.properties.fields) {
-    return props.nodeModel.properties.fields?.map((field: any) => {
-      return {
-        label: field.label,
-        value: field.value,
-        globeLabel: `{{${props.nodeModel.properties.stepName}.${field.value}}}`,
-        globeValue: `{{context['${props.nodeModel.id}'].${field.value}}}`
-      }
-    })
-  }
-  return []
-})
+
 function editName(val: string) {
   if (val.trim() && val.trim() !== props.nodeModel.properties.stepName) {
     if (
@@ -143,7 +131,23 @@ const resizeStepContainer = (wh: any) => {
 const props = defineProps<{
   nodeModel: any
 }>()
-
+watch(
+  () => props.nodeModel.properties?.stepName,
+  () => {
+    if (props.nodeModel.properties.fields) {
+      const fields = props.nodeModel.properties.fields?.map((field: any) => {
+        return {
+          label: field.label,
+          value: field.value,
+          globeLabel: `{{${props.nodeModel.properties.stepName}.${field.value}}}`,
+          globeValue: `{{context['${props.nodeModel.id}'].${field.value}}}`
+        }
+      })
+      set(props.nodeModel.properties, 'fields', fields)
+    }
+  },
+  { immediate: true }
+)
 function showOperate(type: string) {
   return type !== WorkflowType.Base && type !== WorkflowType.Start
 }