fix(测试跟踪): 功能用例TAB菜单角标问题

--bug=1026581 --user=宋昌昌 统一角标风格为圆圈加数字，另外关联用例和关联缺陷下面都有数据，但是没有显示角标 https://www.tapd.cn/55049933/s/1378500

test-track/frontend/src/api/issue.js

@@ -83,7 +83,7 @@ export function getIssuesByCaseId(refType, caseId, page) {
   }
 }
 
-function like(key, target) {
+export function like(key, target) {
   if (key === undefined || target === undefined) {
     return false;
   }
@@ -93,22 +93,7 @@ function like(key, target) {
 
 export function getIssuesByCaseIdWithSearch(refType, caseId, page, condition) {
   if (caseId) {
-    return get('issues/get/case/' + refType + '/' + caseId)
-      .then((response) => {
-        if(condition && condition.name && response.data){
-          //过滤
-          page.data = response.data.filter((v) => {
-            return (
-              like(condition.name, v.title) ||
-              like(condition.name, v.num)
-            );
-          });
-        } else{
-          page.data = response.data;
-        }
-        buildIssues(page);
-        parseFields(page);
-      });
+    return get('issues/get/case/' + refType + '/' + caseId);
   }
 }
 

test-track/frontend/src/business/case/components/case/CaseEditInfoComponent.vue

@@ -3,6 +3,7 @@
     <!-- 非创建状态下 展示 -->
     <div class="tab-pane-wrap" v-if="!editable">
       <el-tabs v-model="caseActiveName" @tab-click="tabClick">
+        <!-- 用例详情 -->
         <el-tab-pane :label="$t('case.use_case_detail')" name="detail">
           <div
             class="tab-container"
@@ -31,10 +32,17 @@
             </el-scrollbar>
           </div>
         </el-tab-pane>
+        <!-- 关联用例 -->
         <el-tab-pane
           :label="$t('case.associate_test_cases')"
           name="associateTestCases"
         >
+          <span slot="label">
+            {{ $t('case.associate_test_cases') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="relateCaseCount && relateCaseCount > 0">
+              <div class="el-step__icon-inner">{{ relateCaseCount }}</div>
+            </div>
+          </span>
           <div
             class="tab-container"
             :class="{ 'comment-edit-tab-container': isCommentEdit }"
@@ -42,6 +50,7 @@
             <el-scrollbar>
               <div class="content-container">
                 <case-test-relate
+                  @setCount="setRelateCaseCount"
                   ref="relateTest"
                   :case-id="caseId"
                   :read-only="readOnly"
@@ -56,6 +65,12 @@
           :label="$t('test_track.case.relate_issue')"
           name="associatedDefects"
         >
+          <span slot="label">
+            {{ $t('test_track.case.relate_issue') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="relateIssueCount && relateIssueCount > 0">
+              <div class="el-step__icon-inner">{{ relateIssueCount }}</div>
+            </div>
+          </span>
           <div
             class="tab-container"
             :class="{ 'comment-edit-tab-container': isCommentEdit }"
@@ -63,6 +78,7 @@
             <el-scrollbar>
               <div class="content-container">
                 <case-issue-relate
+                  @setCount="setRelateIssueCount"
                   :plan-id="planId"
                   :is-copy="isCopy"
                   :copy-case-id="copyCaseId"
@@ -75,13 +91,14 @@
             </el-scrollbar>
           </div>
         </el-tab-pane>
+        <!-- 依赖关系 -->
         <el-tab-pane :label="$t('case.dependencies')" name="dependencies">
-          <template v-slot:label>
-            <tab-pane-count
-              :title="$t('commons.relationship.name')"
-              :count="relationshipCount"
-            />
-          </template>
+          <span slot="label">
+            {{ $t('commons.relationship.name') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="relationshipCount && relationshipCount > 0">
+              <div class="el-step__icon-inner">{{ relationshipCount }}</div>
+            </div>
+          </span>
           <div
             class="tab-container"
             :class="{ 'comment-edit-tab-container': isCommentEdit }"
@@ -101,6 +118,7 @@
             </el-scrollbar>
           </div>
         </el-tab-pane>
+        <!-- 评论 -->
         <el-tab-pane :label="$t('case.comment')" name="comment">
           <span slot="label">
             {{ $t('case.comment') }}
@@ -236,6 +254,8 @@ export default {
       fileList: [],
       tableData: [],
       demandOptions: [],
+      relateCaseCount: 0,
+      relateIssueCount: 0,
       relationshipCount: 0,
       demandValue: [],
       demandLabel: "",
@@ -344,6 +364,12 @@ export default {
     setRelationshipCount(count) {
       this.relationshipCount = count;
     },
+    setRelateCaseCount(count) {
+      this.relateCaseCount = count;
+    },
+    setRelateIssueCount(count) {
+      this.relateIssueCount = count;
+    },
     setRelationshipGraph(val) {
       this.$emit("syncRelationGraphOpen", val);
     },

test-track/frontend/src/business/case/components/case/CaseIssueRelate.vue

@@ -185,23 +185,19 @@ import IssueDescriptionTableItem from "@/business/issue/IssueDescriptionTableIte
 import {ISSUE_STATUS_MAP, TAPD_ISSUE_STATUS_MAP} from "metersphere-frontend/src/utils/table-constants";
 import IssueRelateList from "./CaseIssueRelateList";
 import {
+  buildIssues,
   closeIssue,
   deleteIssueRelate,
   getIssuePartTemplateWithProject,
-  getIssuesByCaseId,
+  getIssuesByCaseIdWithSearch,
+  getPlatformStatus,
   issueStatusChange,
-  getIssuesByCaseIdWithSearch, getPlatformStatus,
+  like,
+  parseFields,
 } from "@/api/issue";
-import {
-  getCustomFieldValue,
-  getTableHeaderWithCustomFields,
-} from "metersphere-frontend/src/utils/tableUtils";
+import {getCustomFieldValue, getTableHeaderWithCustomFields,} from "metersphere-frontend/src/utils/tableUtils";
 import {LOCAL} from "metersphere-frontend/src/utils/constants";
-import {
-  getCurrentProjectID,
-  getCurrentWorkspaceId,
-} from "metersphere-frontend/src/utils/token";
-import {operationConfirm} from "@/business/utils/sdk-utils";
+import {getCurrentProjectID, getCurrentWorkspaceId,} from "metersphere-frontend/src/utils/token";
 import MsNewUiSearch from "metersphere-frontend/src/components/new-ui/MsSearch";
 
 export default {
@@ -297,6 +293,7 @@ export default {
     });
   },
   activated() {
+    this.search();
     getPlatformStatus({
       projectId: getCurrentProjectID(),
       workspaceId: getCurrentWorkspaceId()
@@ -326,12 +323,23 @@ export default {
     getIssues() {
       if (!this.isCopy) {
         this.page.result = true;
-        let result = getIssuesByCaseIdWithSearch(
-          this.planId ? "PLAN_FUNCTIONAL" : "FUNCTIONAL",
-          this.getCaseResourceId(),
-          this.page,
-          this.condition
-        );
+        let result = getIssuesByCaseIdWithSearch(this.planId ? "PLAN_FUNCTIONAL" : "FUNCTIONAL", this.getCaseResourceId())
+                      .then((response) => {
+                        if(this.condition && this.condition.name && response.data){
+                          //过滤
+                          this.page.data = response.data.filter((v) => {
+                            return (
+                              like(condition.name, v.title) ||
+                              like(condition.name, v.num)
+                            );
+                          });
+                        } else {
+                          this.page.data = response.data;
+                        }
+                        this.$emit("setCount", this.page.data.length);
+                        buildIssues(page);
+                        parseFields(page);
+                      });
         if (result) {
           this.page.result = result;
         }

test-track/frontend/src/business/case/components/case/CaseTestRelate.vue

@@ -229,7 +229,7 @@ export default {
           } else {
             this.data = data;
           }
-
+          this.$emit("setCount", this.data.length);
           this.notInIds = this.data.map((i) => i.testId);
         });
       }