feat(测试计划): 接口/用例列表缺陷count按钮组件

frontend/src/components/business/ms-bug-operation/bugCountPopover.vue

@@ -1,6 +1,6 @@
 <template>
   <a-popover position="br" content-class="case-count-popover">
-    <div class="one-line-text cursor-pointer px-0 text-[rgb(var(--primary-5))]">{{ props.caseItem.bugCount ?? 0 }}</div>
+    <div class="one-line-text cursor-pointer px-0 text-[rgb(var(--primary-5))]">{{ props.bugCount ?? 0 }}</div>
     <template #content>
       <div class="w-[500px]">
         <MsBaseTable ref="tableRef" v-bind="propsRes" v-on="propsEvent">
@@ -26,12 +26,13 @@
   import { testPlanCancelBug } from '@/api/modules/test-plan/testPlan';
   import { useI18n } from '@/hooks/useI18n';
 
-  import type { PlanDetailFeatureCaseItem } from '@/models/testPlan/testPlan';
+  import type { CaseBugItem } from '@/models/testPlan/testPlan';
   import { TableKeyEnum } from '@/enums/tableEnum';
 
   const props = defineProps<{
-    caseItem: PlanDetailFeatureCaseItem;
+    bugList?: CaseBugItem[]; // 缺陷列表
     canEdit: boolean;
+    bugCount: number;
   }>();
 
   const emit = defineEmits<{
@@ -69,7 +70,7 @@
           },
         ]),
   ]);
-  const tableProps = ref<Partial<MsTableProps<PlanDetailFeatureCaseItem>>>({
+  const tableProps = ref<Partial<MsTableProps<CaseBugItem[]>>>({
     columns: columns.value,
     size: 'mini',
     tableKey: TableKeyEnum.TEST_PLAN_DETAIL_CASE_TABLE_BUG_COUNT,
@@ -81,7 +82,7 @@
   const { propsRes, propsEvent, setLoading } = useTable(undefined, tableProps.value);
 
   watchEffect(() => {
-    propsRes.value.data = props.caseItem.bugList;
+    propsRes.value.data = props.bugList || [];
   });
 
   // 取消关联缺陷

frontend/src/components/business/ms-bug-operation/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="flex items-center">
+    <BugCountPopover :bug-list="bugList || []" :bug-count="bugCount" :can-edit="props.canEdit" @load-list="loadList" />
+    <a-dropdown
+      v-if="hasAllPermission(['PROJECT_BUG:READ', ...(props.linkBugPermission || [])])"
+      position="bl"
+      @select="handleSelect"
+    >
+      <a-button
+        v-permission="['PROJECT_BUG:READ+ADD']"
+        class="arco-btn-outline--secondary ml-[8px] !p-[4px]"
+        type="outline"
+        size="small"
+      >
+        <icon-plus class="text-[14px]" />
+      </a-button>
+
+      <template #content>
+        <a-doption v-if="hasAnyPermission(props.linkBugPermission || []) && props.bugCount" value="linkBug">
+          {{ t('caseManagement.featureCase.linkDefect') }}
+        </a-doption>
+        <a-doption v-if="hasAnyPermission(['PROJECT_BUG:READ+ADD'])" value="newBug">
+          {{ t('testPlan.featureCase.noBugDataNewBug') }}
+        </a-doption>
+      </template>
+    </a-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import BugCountPopover from './bugCountPopover.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+  import { hasAllPermission, hasAnyPermission } from '@/utils/permission';
+
+  import type { CaseBugItem } from '@/models/testPlan/testPlan';
+
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    resourceId: string; // 资源id: 功能用例id/接口用例id/场景用例id
+    bugCount: number; // 缺陷数
+    canEdit: boolean;
+    bugList?: CaseBugItem[];
+    linkBugPermission?: string[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'associated'): void;
+    (e: 'create'): void;
+    (e: 'loadList'): void;
+  }>();
+
+  function handleSelect(value: string | number | Record<string, any> | undefined) {
+    switch (value) {
+      case 'newBug':
+        emit('create');
+        break;
+      default:
+        emit('associated');
+        break;
+    }
+  }
+
+  function loadList() {
+    emit('loadList');
+  }
+</script>
+
+<style scoped lang="less">
+  :deep(.arco-btn-outline--secondary) {
+    &:hover {
+      border-color: rgb(var(--primary-5)) !important;
+    }
+  }
+</style>

frontend/src/models/testPlan/testPlan.ts

@@ -164,6 +164,14 @@ export interface TestPlanBaseParams {
   triggerMode?: string;
 }
 
+export interface CaseBugItem {
+  bugId: string;
+  id: string;
+  title: string;
+  type: string;
+  caseId: string;
+}
+
 export interface PlanDetailFeatureCaseItem {
   id: string;
   num: string;
@@ -182,13 +190,7 @@ export interface PlanDetailFeatureCaseItem {
   caseId: string;
   testPlanId: string;
   testPlanCollectionName: string; // 测试集名称
-  bugList: {
-    bugId: string;
-    id: string;
-    title: string;
-    type: string;
-    caseId: string;
-  }[];
+  bugList: CaseBugItem[];
 }
 
 export interface PlanDetailFeatureCaseListQueryParams extends TableQueryParams, TestPlanBaseParams {}

frontend/src/views/test-plan/testPlan/detail/apiCase/components/caseTable.vue

@@ -37,6 +37,14 @@
         <template #caseLevel="{ record }">
           <CaseLevel :case-level="record.priority" />
         </template>
+        <template #bugCount="{ record }">
+          <MsBugOperation
+            :can-edit="props.canEdit"
+            :bug-list="record.bugList"
+            :resource-id="record.id"
+            :bug-count="record.bugCount || 0"
+          />
+        </template>
         <template #[FilterSlotNameEnum.API_TEST_CASE_API_LAST_EXECUTE_STATUS]="{ filterContent }">
           <ExecutionStatus :module-type="ReportEnum.API_REPORT" :status="filterContent.value" />
         </template>
@@ -114,6 +122,7 @@
     MsTableProps,
   } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
+  import MsBugOperation from '@/components/business/ms-bug-operation/index.vue';
   import CaseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import ApiMethodName from '@/views/api-test/components/apiMethodName.vue';
   import apiStatus from '@/views/api-test/components/apiStatus.vue';
@@ -246,6 +255,14 @@
       width: 200,
       showDrag: true,
     },
+    {
+      title: 'testPlan.featureCase.bugCount',
+      dataIndex: 'bugCount',
+      slotName: 'bugCount',
+      width: 150,
+      showDrag: true,
+      showInTable: true,
+    },
     {
       title: 'case.caseLevel',
       dataIndex: 'priority',
@@ -638,6 +655,11 @@
     }
   }
 
+  const showLinkDrawer = ref(false);
+  const showCreateDrawer = ref(false);
+
+  const drawerLoading = ref(false);
+
   // 去接口用例详情页面
   function toDetail(record: PlanDetailApiCaseItem) {
     openNewPage(ApiTestRouteEnum.API_TEST_MANAGEMENT, {

frontend/src/views/test-plan/testPlan/detail/apiScenario/components/scenarioTable.vue

@@ -49,6 +49,14 @@
         <template #status="{ record }">
           <apiStatus :status="record.status" />
         </template>
+        <template #bugCount="{ record }">
+          <MsBugOperation
+            :can-edit="props.canEdit"
+            :bug-list="record.bugList"
+            :resource-id="record.id"
+            :bug-count="record.bugCount || 0"
+          />
+        </template>
         <template v-if="props.canEdit" #operation="{ record }">
           <MsButton
             v-permission="['PROJECT_TEST_PLAN:READ+EXECUTE']"
@@ -113,6 +121,7 @@
     MsTableProps,
   } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
+  import MsBugOperation from '@/components/business/ms-bug-operation/index.vue';
   import CaseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import apiStatus from '@/views/api-test/components/apiStatus.vue';
   import CaseAndScenarioReportDrawer from '@/views/api-test/components/caseAndScenarioReportDrawer.vue';
@@ -273,6 +282,14 @@
       width: 200,
       showDrag: true,
     },
+    {
+      title: 'testPlan.featureCase.bugCount',
+      dataIndex: 'bugCount',
+      slotName: 'bugCount',
+      width: 150,
+      showDrag: true,
+      showInTable: true,
+    },
     {
       title: 'common.belongProject',
       dataIndex: 'projectName',

frontend/src/views/test-plan/testPlan/detail/featureCase/components/caseTable.vue

@@ -77,7 +77,12 @@
           </span>
         </template>
         <template #bugCount="{ record }">
-          <BugCountPopover :case-item="record" :can-edit="props.canEdit" @load-list="loadList" />
+          <BugCountPopover
+            :bug-list="record.bugList"
+            :bug-count="record.bugCount"
+            :can-edit="props.canEdit"
+            @load-list="loadList"
+          />
         </template>
         <template v-if="props.canEdit" #operation="{ record }">
           <MsButton
@@ -183,11 +188,11 @@
     MsTableProps,
   } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
+  import BugCountPopover from '@/components/business/ms-bug-operation/bugCountPopover.vue';
   import CaseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import ExecuteResult from '@/components/business/ms-case-associate/executeResult.vue';
   import { getMinderOperationParams } from '@/components/business/ms-minders/caseReviewMinder/utils';
   import MsTestPlanFeatureCaseMinder from '@/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue';
-  import BugCountPopover from './bugCountPopover.vue';
   import BatchApiMoveModal from '@/views/test-plan/testPlan/components/batchApiMoveModal.vue';
   import BatchUpdateExecutorModal from '@/views/test-plan/testPlan/components/batchUpdateExecutorModal.vue';
   import ExecuteForm from '@/views/test-plan/testPlan/detail/featureCase/components/executeForm.vue';