From 8394a5a5c7a7b2d08368473c2c4a74c01a1968ef Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Wed, 14 Aug 2024 15:03:19 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B&?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92):=20=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA=E5=B1=95=E7=A4=BA=E6=AD=A5=E9=AA=A4=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1044985 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001044985
---
 .../featureCaseMinder/commentList.vue         |  4 ++
 .../testPlanFeatureCaseMinder/index.vue       |  6 ++-
 frontend/src/models/testPlan/testPlan.ts      |  1 +
 .../components/stepDetailTrigger.vue          | 50 +++++++++++++++++++
 .../tabComment/reviewCommentList.vue          | 14 +++++-
 .../tabContent/tabComment/tabCommentIndex.vue |  1 +
 .../detail/executionHistory/index.vue         | 37 +++-----------
 7 files changed, 79 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue

diff --git a/frontend/src/components/business/ms-minders/featureCaseMinder/commentList.vue b/frontend/src/components/business/ms-minders/featureCaseMinder/commentList.vue
index b4d681dbe4..9f97192680 100644
--- a/frontend/src/components/business/ms-minders/featureCaseMinder/commentList.vue
+++ b/frontend/src/components/business/ms-minders/featureCaseMinder/commentList.vue
@@ -21,6 +21,7 @@
         :review-comment-list="reviewCommentList"
         :active-comment="activeComment"
         :permissions="['FUNCTIONAL_CASE:READ+COMMENT']"
+        show-step-detail-trigger
       />
       <template v-else>
         <MsComment
@@ -256,4 +257,7 @@
     overflow-y: auto;
     height: calc(100% - 130px);
   }
+  :deep(.comment-list-item-name) {
+    max-width: 130px;
+  }
 </style>
diff --git a/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue b/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue
index b9196b31ed..91d1620aef 100644
--- a/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue
+++ b/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue
@@ -112,6 +112,7 @@
           :review-comment-list="executeHistoryList"
           active-comment="executiveComment"
           not-show-review-name
+          show-step-detail-trigger
         />
       </template>
     </MsMinderEditor>
@@ -483,11 +484,12 @@
   const executeHistoryList = ref<ExecuteHistoryItem[]>([]);
   async function initExecuteHistory(data: MinderJsonNodeData) {
     try {
-      executeHistoryList.value = await executeHistory({
+      const res = await executeHistory({
         caseId: data?.caseId,
         id: data.id,
         testPlanId: props.planId,
       });
+      executeHistoryList.value = res.map((item) => ({ ...item, stepsText: item.stepsExecResult }));
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
@@ -825,7 +827,7 @@
 
 <style lang="less" scoped>
   :deep(.comment-list-item-name) {
-    max-width: 200px;
+    max-width: 130px;
   }
   :deep(.ms-list) {
     margin: 0;
diff --git a/frontend/src/models/testPlan/testPlan.ts b/frontend/src/models/testPlan/testPlan.ts
index db5465864c..c2170e2c4d 100644
--- a/frontend/src/models/testPlan/testPlan.ts
+++ b/frontend/src/models/testPlan/testPlan.ts
@@ -269,6 +269,7 @@ export interface ExecuteHistoryItem {
   createTime: string;
   deleted: boolean;
   caseEditType: string; // 类型是：步骤描述
+  showResult: boolean;
 }
 
 export interface moduleForm {
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue b/frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue
new file mode 100644
index 0000000000..7b1cd205e3
--- /dev/null
+++ b/frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue
@@ -0,0 +1,50 @@
+<template>
+  <a-trigger trigger="click" position="bottom" :popup-translate="[0, 4]">
+    <MsButton type="text" class="!mr-0">
+      {{ t('system.orgTemplate.stepDetail') }}
+    </MsButton>
+    <template #content>
+      <div class="step-detail-trigger-content">
+        <StepDetail :step-list="getStepData()" is-disabled is-preview is-test-plan :is-disabled-test-plan="false" />
+      </div>
+    </template>
+  </a-trigger>
+</template>
+
+<script setup lang="ts">
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import StepDetail from '@/views/case-management/caseManagementFeature/components/addStep.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  const props = defineProps<{
+    stepsText: string;
+  }>();
+
+  const { t } = useI18n();
+
+  function getStepData() {
+    if (props.stepsText) {
+      return JSON.parse(props.stepsText).map((item: any) => {
+        return {
+          id: item.id,
+          step: item.desc,
+          expected: item.result,
+          actualResult: item.actualResult,
+          executeResult: item.executeResult,
+        };
+      });
+    }
+    return [];
+  }
+</script>
+
+<style scoped lang="less">
+  .step-detail-trigger-content {
+    padding: 16px;
+    width: 700px;
+    border-radius: var(--border-radius-medium);
+    box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
+    @apply bg-white;
+  }
+</style>
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/reviewCommentList.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/reviewCommentList.vue
index f9063147e6..09b8311e3c 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/reviewCommentList.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/reviewCommentList.vue
@@ -4,12 +4,22 @@
       <div v-for="item of props.reviewCommentList" :key="item.id" class="ms-comment-list-item">
         <MSAvatar :avatar="item.userLogo" />
         <div class="flex-1">
-          <div class="flex items-center gap-[8px]">
+          <div class="flex items-center">
             <a-tooltip :content="item.userName" :mouse-enter-delay="300">
               <div class="comment-list-item-name one-line-text max-w-[300px] font-medium text-[var(--color-text-1)]">
                 {{ item.userName }}
               </div>
             </a-tooltip>
+            <a-divider
+              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP' && item.showResult"
+              direction="vertical"
+              margin="8px"
+            ></a-divider>
+            <StepDetailTrigger
+              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP' && item.showResult"
+              :steps-text="item.stepsText"
+            />
+            <a-divider direction="vertical" margin="8px"></a-divider>
             <div v-if="item.status === 'PASS'" class="flex items-center">
               <MsIcon type="icon-icon_succeed_filled" class="mr-[4px] text-[rgb(var(--success-6))]" />
               {{ t('caseManagement.caseReview.pass') }}
@@ -87,6 +97,7 @@
   import MSAvatar from '@/components/pure/ms-avatar/index.vue';
   import MsEmpty from '@/components/pure/ms-empty/index.vue';
   import { CommentItem } from '@/components/business/ms-comment/types';
+  import StepDetailTrigger from '@/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue';
 
   import { useI18n } from '@/hooks/useI18n';
   import { characterLimit } from '@/utils';
@@ -97,6 +108,7 @@
     reviewCommentList: any[];
     activeComment: string;
     notShowReviewName?: boolean;
+    showStepDetailTrigger?: boolean;
   }>();
 
   const router = useRouter();
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/tabCommentIndex.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/tabCommentIndex.vue
index d8b36f5894..233a1e719e 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/tabCommentIndex.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/tabCommentIndex.vue
@@ -26,6 +26,7 @@
       v-show="activeComment === 'reviewComment' || activeComment === 'executiveComment'"
       :review-comment-list="reviewCommentList"
       :active-comment="activeComment"
+      show-step-detail-trigger
     />
   </div>
 </template>
diff --git a/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue b/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue
index 69a00d12dd..2476543db6 100644
--- a/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue
@@ -9,31 +9,14 @@
               <div class="one-line-text max-w-[300px] font-medium text-[var(--color-text-1)]">{{ item.userName }}</div>
             </a-tooltip>
             <a-divider
-              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP'"
+              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP' && item.showResult"
               direction="vertical"
               margin="8px"
             ></a-divider>
-            <a-trigger
-              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP'"
-              trigger="click"
-              position="bottom"
-              :popup-translate="[0, 4]"
-            >
-              <MsButton type="text" class="!mr-0">
-                {{ t('system.orgTemplate.stepDetail') }}
-              </MsButton>
-              <template #content>
-                <div class="step-detail-trigger-content">
-                  <StepDetail
-                    :step-list="getStepData(item.stepsExecResult)"
-                    is-disabled
-                    is-preview
-                    is-test-plan
-                    :is-disabled-test-plan="false"
-                  />
-                </div>
-              </template>
-            </a-trigger>
+            <StepDetailTrigger
+              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP' && item.showResult"
+              :steps-text="item.stepsExecResult"
+            />
             <a-divider direction="vertical" margin="8px"></a-divider>
             <div v-if="item.status === 'SUCCESS'" class="flex items-center">
               <MsIcon type="icon-icon_succeed_filled" class="mr-[4px] text-[rgb(var(--success-6))]" />
@@ -76,13 +59,12 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
   import dayjs from 'dayjs';
 
   import MsAvatar from '@/components/pure/ms-avatar/index.vue';
-  import MsButton from '@/components/pure/ms-button/index.vue';
   import MsEmpty from '@/components/pure/ms-empty/index.vue';
   import StepDetail from '@/views/case-management/caseManagementFeature/components/addStep.vue';
+  import StepDetailTrigger from '@/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue';
 
   import { useI18n } from '@/hooks/useI18n';
   import { characterLimit } from '@/utils';
@@ -125,11 +107,4 @@
       }
     }
   }
-  .step-detail-trigger-content {
-    padding: 16px;
-    width: 700px;
-    border-radius: var(--border-radius-medium);
-    box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
-    @apply bg-white;
-  }
 </style>