From 04f93984e1434a3b6d858645f8fcfc87ffe7db95 Mon Sep 17 00:00:00 2001
From: song-tianyang <tianyang.song@fit2cloud.com>
Date: Thu, 7 Mar 2024 17:19:08 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=BC=BA=E9=99=B7=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E7=BC=BA=E9=99=B7=E7=AE=A1=E7=90=86=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=B3=E8=81=94=E7=94=A8=E4=BE=8B=E7=9A=84?=
 =?UTF-8?q?=E8=A7=92=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1036510 --user=宋天阳 【缺陷管理】缺陷详情-用例tab页签未展示数量统计 https://www.tapd.cn/55049933/s/1471524
---
 .../bug/dto/response/BugDetailDTO.java        |   3 +
 .../bug/mapper/ExtBugRelateCaseMapper.java    |   2 +
 .../bug/mapper/ExtBugRelateCaseMapper.xml     |   5 +
 .../metersphere/bug/service/BugService.java   |   1 +
 .../components/bug-detail-drawer.vue          | 110 +++++++++++-------
 .../bug-management/components/bugCaseTab.vue  |   3 +
 6 files changed, 82 insertions(+), 42 deletions(-)

diff --git a/backend/services/bug-management/src/main/java/io/metersphere/bug/dto/response/BugDetailDTO.java b/backend/services/bug-management/src/main/java/io/metersphere/bug/dto/response/BugDetailDTO.java
index 6f6fd8b3a2..3c224a3a7b 100644
--- a/backend/services/bug-management/src/main/java/io/metersphere/bug/dto/response/BugDetailDTO.java
+++ b/backend/services/bug-management/src/main/java/io/metersphere/bug/dto/response/BugDetailDTO.java
@@ -58,4 +58,7 @@ public class BugDetailDTO {
     @Schema(description = "缺陷状态")
     private String status;
 
+    @Schema(description = "缺陷关联的用例数")
+    private long linkCaseCount;
+
 }
diff --git a/backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.java b/backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.java
index 7244b9986a..689166ca65 100644
--- a/backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.java
+++ b/backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.java
@@ -65,4 +65,6 @@ public interface ExtBugRelateCaseMapper {
      * @return 缺陷集合
      */
     List<BugProviderDTO> getAssociateBugs(@Param("request") AssociateBugPageRequest request, @Param("sort") String sort);
+
+    long countByCaseId(String caseId);
 }
diff --git a/backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.xml b/backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.xml
index 13c5c0d0be..28057bce0f 100644
--- a/backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.xml
+++ b/backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.xml
@@ -88,6 +88,11 @@
             brc.create_time desc
         </if>
     </select>
+    <select id="countByCaseId" resultType="java.lang.Long">
+        SELECT count(id)
+        FROM bug_relation_case brc
+        where brc.bug_id = #{caseId}
+    </select>
 
     <sql id="queryWhereConditionByProvider">
         <if test="request.caseId != null and request.caseId != ''">
diff --git a/backend/services/bug-management/src/main/java/io/metersphere/bug/service/BugService.java b/backend/services/bug-management/src/main/java/io/metersphere/bug/service/BugService.java
index 4cfe126d37..9f48e79e6d 100644
--- a/backend/services/bug-management/src/main/java/io/metersphere/bug/service/BugService.java
+++ b/backend/services/bug-management/src/main/java/io/metersphere/bug/service/BugService.java
@@ -300,6 +300,7 @@ public class BugService {
         BugFollowerExample example = new BugFollowerExample();
         example.createCriteria().andBugIdEqualTo(id).andUserIdEqualTo(currentUser);
         detail.setFollowFlag(bugFollowerMapper.countByExample(example) > 0);
+        detail.setLinkCaseCount(extBugRelateCaseMapper.countByCaseId(id));
         return detail;
     }
 
diff --git a/frontend/src/views/bug-management/components/bug-detail-drawer.vue b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
index 55f43cd3d9..a551fe7564 100644
--- a/frontend/src/views/bug-management/components/bug-detail-drawer.vue
+++ b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
@@ -86,38 +86,32 @@
           <template #first>
             <div class="leftWrapper h-full">
               <div class="header h-[50px]">
-                <a-tabs v-model:active-key="activeTab" lazy-load>
-                  <a-tab-pane key="detail">
-                    <template #title>
-                      {{ t('bugManagement.detail.detail') }}
-                    </template>
-                    <BugDetailTab
-                      ref="bugDetailTabRef"
-                      :form-item="formItem"
-                      :allow-edit="true"
-                      :detail-info="detailInfo"
-                      @update-success="updateSuccess"
-                    />
-                  </a-tab-pane>
-                  <a-tab-pane key="case">
-                    <template #title>
-                      {{ t('bugManagement.detail.case') }}
-                    </template>
-                    <BugCaseTab :bug-id="detailInfo.id" />
-                  </a-tab-pane>
-                  <a-tab-pane key="comment">
-                    <template #title>
-                      {{ t('bugManagement.detail.comment') }}
-                    </template>
-                    <CommentTab ref="commentRef" :bug-id="detailInfo.id" />
-                  </a-tab-pane>
-                  <a-tab-pane key="history">
-                    <template #title>
-                      {{ t('bugManagement.detail.changeHistory') }}
-                    </template>
-                    <BugHistoryTab :bug-id="detailInfo.id" />
-                  </a-tab-pane>
-                </a-tabs>
+                <MsTab
+                  v-model:active-key="activeTab"
+                  :content-tab-list="contentTabList"
+                  :get-text-func="getTabBadge"
+                  class="no-content relative mb-[8px] border-b border-[var(--color-text-n8)]"
+                />
+                <div class="tab-pane-container">
+                  <BugDetailTab
+                    v-if="activeTab === 'detail'"
+                    ref="bugDetailTabRef"
+                    :form-item="formItem"
+                    :allow-edit="true"
+                    :detail-info="detailInfo"
+                    @update-success="updateSuccess"
+                  />
+
+                  <BugCaseTab
+                    v-else-if="activeTab === 'case'"
+                    :bug-id="detailInfo.id"
+                    @updateCaseSuccess="updateSuccess"
+                  />
+
+                  <CommentTab v-else-if="activeTab === 'comment'" ref="commentRef" :bug-id="detailInfo.id" />
+
+                  <BugHistoryTab v-else-if="activeTab === 'history'" :bug-id="detailInfo.id" />
+                </div>
               </div>
             </div>
           </template>
@@ -142,15 +136,6 @@
                   <MsTag v-for="item of tags" :key="item"> {{ item }} </MsTag>
                 </span>
               </div>
-              <!-- 创建人 创建时间需求说先去掉 -->
-              <!-- <div class="baseItem">
-                <span class="label"> {{ t('bugManagement.detail.creator') }}</span>
-                <span>{{ detailInfo?.createUserName }}</span>
-              </div>
-              <div class="baseItem">
-                <span class="label"> {{ t('bugManagement.detail.createTime') }}</span>
-                <span>{{ dayjs(detailInfo?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-              </div> -->
             </div>
           </template>
         </MsSplitBox>
@@ -178,6 +163,7 @@
   import type { FormItem, FormRuleItem } from '@/components/pure/ms-form-create/types';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
+  import MsTab from '@/components/pure/ms-tab/index.vue';
   import type { MsPaginationI } from '@/components/pure/ms-table/type';
   import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
   import { CommentInput } from '@/components/business/ms-comment';
@@ -221,6 +207,7 @@
     pageChange: (page: number) => Promise<void>; // 分页变更函数
   }>();
 
+  const caseCount = ref(0);
   const appStore = useAppStore();
   const commentContent = ref('');
   const commentRef = ref();
@@ -232,7 +219,7 @@
   const showDrawerVisible = defineModel<boolean>('visible', { default: false });
   const bugDetailTabRef = ref();
 
-  const activeTab = ref<string | number>('detail');
+  const activeTab = ref<string>('detail');
 
   const detailInfo = ref<Record<string, any>>({ match: [] }); // 存储当前详情信息，通过loadBug 获取
   const tags = ref([]);
@@ -279,6 +266,7 @@
     const { templateId } = detail;
     // tag 赋值
     tags.value = detail.tags || [];
+    caseCount.value = detail.linkCaseCount;
     const tmpObj = {};
     if (detail.customFields && Array.isArray(detail.customFields)) {
       detail.customFields.forEach((item) => {
@@ -292,6 +280,23 @@
     // 初始化自定义字段
     await templateChange(templateId, tmpObj, { platformBugKey: detail.platformBugId, fromStatusId: detail.status });
   }
+  /**
+   * 获取 tab 的参数数量徽标
+   */
+  function getTabBadge(tabKey: string) {
+    switch (tabKey) {
+      case 'detail':
+        return '';
+      case 'case':
+        return `${caseCount.value > 0 ? caseCount.value : ''}`;
+      case 'comment':
+        return '';
+      case 'history':
+        return '';
+      default:
+        return '';
+    }
+  }
 
   const editLoading = ref<boolean>(false);
 
@@ -299,6 +304,27 @@
     detailDrawerRef.value?.initDetail();
   }
 
+  const contentTabList = computed(() => {
+    return [
+      {
+        value: 'detail',
+        label: t('bugManagement.detail.detail'),
+      },
+      {
+        value: 'case',
+        label: t('bugManagement.detail.case'),
+      },
+      {
+        value: 'comment',
+        label: t('bugManagement.detail.comment'),
+      },
+      {
+        value: 'history',
+        label: t('bugManagement.detail.changeHistory'),
+      },
+    ];
+  });
+
   function updateHandler() {
     router.push({
       name: RouteEnum.BUG_MANAGEMENT_DETAIL,
diff --git a/frontend/src/views/bug-management/components/bugCaseTab.vue b/frontend/src/views/bug-management/components/bugCaseTab.vue
index 0a5fb9a327..927efe1ee7 100644
--- a/frontend/src/views/bug-management/components/bugCaseTab.vue
+++ b/frontend/src/views/bug-management/components/bugCaseTab.vue
@@ -115,6 +115,7 @@
     (e: 'update:project', val: string): void;
     (e: 'success', val: string[]): void;
     (e: 'close'): void;
+    (e: 'updateCaseSuccess'): void;
   }>();
   const keyword = ref<string>('');
 
@@ -218,6 +219,7 @@
       const { relateId } = record;
       await cancelAssociation(relateId);
       await getFetch();
+      emit('updateCaseSuccess');
       Message.success(t('common.unLinkSuccess'));
     } catch (error) {
       console.log(error);
@@ -236,6 +238,7 @@
       await batchAssociation(params);
       await getFetch();
       Message.success(t('common.linkSuccess'));
+      emit('updateCaseSuccess');
       innerVisible.value = false;
     } catch (error) {
       // eslint-disable-next-line no-console