fix(测试用例&测试计划): 执行评论展示步骤详情

--bug=1044985 --user=吕梦园 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001044985
2024-08-14 15:03:19 +08:00 · 2024-08-14 15:03:19 +08:00 · 8394a5a5c7
parent a52a69a99e
commit 8394a5a5c7
7 changed files with 79 additions and 34 deletions
--- 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>
--- 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;
--- 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 {
--- a/frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue
+++ 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>
--- 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();
--- 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>
--- 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>