From 53b72d751769965be6864cdef429b253df45726c Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Mon, 8 Apr 2024 16:28:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8A=A5=E5=91=8A=E5=B9=B3=E9=93=BA=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8D=E8=AF=B7=E6=B1=82=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../response/result/index.vue                 | 30 ++++++++++---------
 .../report/component/step/stepTree.vue        | 10 +++++--
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/api-test/components/requestComposition/response/result/index.vue b/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
index 0c4c308575..c0599be7ce 100644
--- a/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
@@ -87,14 +87,15 @@
       />
     </div>
     <!-- 平铺 -->
-    <TiledDisplay
-      v-if="props.mode === 'tiled'"
-      :menu-list="responseCompositionTabList"
-      :request-result="activeStepDetailCopy?.content"
-      :console="props.console"
-      :is-definition="props.isDefinition"
-      :report-id="props.reportId"
-    />
+    <a-spin v-if="props.mode === 'tiled'" class="w-full" :loading="loading">
+      <TiledDisplay
+        :menu-list="responseCompositionTabList"
+        :request-result="activeStepDetailCopy?.content"
+        :console="props.console"
+        :is-definition="props.isDefinition"
+        :report-id="props.reportId"
+      />
+    </a-spin>
     <!-- 响应内容tab -->
     <div v-else class="h-[calc(100%-8px)]">
       <a-spin :loading="loading" class="h-[calc(100%-8px)] w-full pb-1">
@@ -344,17 +345,18 @@
   const originStepId = ref<string | undefined>('');
 
   watchEffect(() => {
-    if (props.stepItem?.stepId && !props.stepItem.fold) {
-      if (isShowLoopControl.value && props.stepItem?.stepChildren) {
-        getStepDetail(props.stepItem?.stepChildren[controlCurrent.value - 1].stepId as string);
-      } else {
-        getStepDetail(props.stepItem.stepId);
-      }
+    if (props.stepItem?.stepId && props.mode === 'tiled') {
+      const stepIds = props.stepItem?.stepChildren || [];
+      getStepDetail(isShowLoopControl.value ? stepIds[controlCurrent.value - 1].stepId : props.stepItem.stepId);
     }
   });
 
   onMounted(() => {
     originStepId.value = props.stepItem?.stepId;
+    if (props.stepItem?.stepId && !props.stepItem.fold) {
+      const stepIds = props.stepItem?.stepChildren || [];
+      getStepDetail(isShowLoopControl.value ? stepIds[controlCurrent.value - 1].stepId : props.stepItem.stepId);
+    }
   });
 </script>
 
diff --git a/frontend/src/views/api-test/report/component/step/stepTree.vue b/frontend/src/views/api-test/report/component/step/stepTree.vue
index 74953dfefd..b10e788ea4 100644
--- a/frontend/src/views/api-test/report/component/step/stepTree.vue
+++ b/frontend/src/views/api-test/report/component/step/stepTree.vue
@@ -27,7 +27,6 @@
         @more-actions-close="() => setFocusNodeKey('')"
       >
         <template #title="step">
-          <!-- <div class="absolute h-full w-full top-0" style="border: 1px solid #0cc"></div> -->
           <div class="flex flex-col" @click="handleStop($event, step)">
             <div class="flex w-full items-center gap-[8px]">
               <div
@@ -168,7 +167,7 @@
               <div v-if="!step.fold" class="line"></div>
             </div>
             <!-- 折叠展开内容 -->
-            <div v-show="showResContent(step)" class="foldContent mt-4 pl-2">
+            <div v-if="showResContent(step)" class="foldContent mt-4 pl-2">
               <StepDetailContent
                 :mode="props.activeType"
                 :step-item="step"
@@ -310,7 +309,12 @@
     if (!showApiType.value.includes(item.stepType)) {
       return;
     }
-    activeItem.value = item;
+    const isNotAllowExpand = item.children && item?.children.length && showApiType.value.includes(item.stepType);
+    if (isNotAllowExpand) {
+      item.stepChildren = cloneDeep(item.children);
+      item.children = [];
+    }
+    activeItem.value = cloneDeep(item);
     emit('detail', activeItem.value);
     event.stopPropagation();
   }