feat(测试计划): 测试计划详情-功能用例列表-缺陷数

frontend/src/components/pure/ms-button/index.vue

@@ -58,11 +58,6 @@
     color: rgb(var(--primary-3)) !important;
     cursor: not-allowed;
   }
-  .ms-button-text {
-    @apply p-0;
-
-    color: rgb(var(--primary-5));
-  }
   .ms-button-icon {
     padding: 4px;
     color: var(--color-text-4);
@@ -109,4 +104,9 @@
     padding: 0 2px;
     font-size: 12px;
   }
+  .ms-button-text {
+    @apply p-0;
+
+    color: rgb(var(--primary-5));
+  }
 </style>

frontend/src/components/pure/ms-table/base-table.vue

@@ -736,6 +736,11 @@
       line-height: normal;
       height: 48px;
     }
+    :deep(.arco-table-size-mini) {
+      .arco-table-td {
+        height: 36px;
+      }
+    }
     :deep(.arco-table-cell-align-left) {
       .arco-table-td-content {
         @apply flex items-center;

frontend/src/enums/tableEnum.ts

@@ -67,6 +67,7 @@ export enum TableKeyEnum {
   TEST_PLAN_DETAIL_BUG_TABLE = 'testPlanDetailBug',
   TEST_PLAN_DETAIL_FEATURE_CASE_TABLE = 'testPlanDetailFeatureCaseTable',
   TEST_PLAN_DETAIL_BUG_TABLE_CASE_COUNT = 'testPlanDetailBugCaseCount',
+  TEST_PLAN_DETAIL_CASE_TABLE_BUG_COUNT = 'testPlanDetailCaseBugCount',
   TEST_PLAN_REPORT_TABLE = 'testPlanReportTable',
   TEST_PLAN_REPORT_DETAIL_BUG = 'testPlanReportDetailBug',
   TEST_PLAN_REPORT_DETAIL_FEATURE_CASE = 'testPlanReportDetailFeatureCase',

frontend/src/models/testPlan/testPlan.ts

@@ -114,7 +114,7 @@ export interface PlanDetailBugItem {
   id: string;
   num: string;
   title: string;
-  relateCase: {
+  relateCases: {
     id: string;
     bugId: string;
     name: string;
@@ -152,6 +152,13 @@ export interface PlanDetailFeatureCaseItem {
   customFields: customFieldsItem[]; // 自定义字段集合
   caseId: string;
   testPlanId: string;
+  bugList: {
+    bugId: string;
+    id: string;
+    title: string;
+    type: string;
+    caseId: string;
+  }[];
 }
 
 export interface PlanDetailFeatureCaseListQueryParams extends TableQueryParams, TestPlanBaseParams {}

frontend/src/views/test-plan/testPlan/detail/bugManagement/caseCountPopover.vue

@@ -1,13 +1,13 @@
 <template>
   <a-popover position="br" content-class="case-count-popover" @popup-visible-change="popupChange">
     <div class="one-line-text cursor-pointer px-0 text-[rgb(var(--primary-5))]">{{
-      props.bugItem.relateCase?.length ?? 0
+      props.bugItem.relateCases?.length ?? 0
     }}</div>
     <template #content>
       <div class="w-[500px]">
         <MsBaseTable v-bind="propsRes" v-on="propsEvent">
           <template #num="{ record }">
-            <MsButton type="text" @click="goCaseDetail(record.id)">{{ record.num }}</MsButton>
+            <MsButton size="mini" type="text" @click="goCaseDetail(record.id)">{{ record.num }}</MsButton>
           </template>
         </MsBaseTable>
       </div>
@@ -54,6 +54,7 @@
 
   const { propsRes, propsEvent } = useTable(undefined, {
     columns,
+    size: 'mini',
     tableKey: TableKeyEnum.TEST_PLAN_DETAIL_BUG_TABLE_CASE_COUNT,
     scroll: { x: '100%' },
     showSelectorAll: false,
@@ -63,7 +64,7 @@
   });
 
   function popupChange() {
-    propsRes.value.data = props.bugItem.relateCase;
+    propsRes.value.data = props.bugItem.relateCases;
   }
 
   function goCaseDetail(id: string) {

frontend/src/views/test-plan/testPlan/detail/bugManagement/index.vue

@@ -182,3 +182,13 @@
     getFetch();
   });
 </script>
+
+<style lang="less">
+  .bug-content-popover {
+    .arco-popover-content {
+      overflow: auto;
+      max-height: 400px;
+      .ms-scroll-bar();
+    }
+  }
+</style>

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

@@ -0,0 +1,102 @@
+<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>
+    <template #content>
+      <div class="w-[500px]">
+        <MsBaseTable ref="tableRef" v-bind="propsRes" v-on="propsEvent">
+          <template #operation="{ record }">
+            <MsButton v-permission="['FUNCTIONAL_CASE:READ+UPDATE']" size="mini" @click="cancelLink(record.id)">{{
+              t('common.cancelLink')
+            }}</MsButton>
+          </template>
+        </MsBaseTable>
+      </div>
+    </template>
+  </a-popover>
+</template>
+
+<script setup lang="ts">
+  import { Message } from '@arco-design/web-vue';
+
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+  import type { MsTableColumn, MsTableProps } from '@/components/pure/ms-table/type';
+  import useTable from '@/components/pure/ms-table/useTable';
+
+  import { testPlanCancelBug } from '@/api/modules/test-plan/testPlan';
+  import { useI18n } from '@/hooks/useI18n';
+
+  import type { PlanDetailFeatureCaseItem } from '@/models/testPlan/testPlan';
+  import { TableKeyEnum } from '@/enums/tableEnum';
+
+  const props = defineProps<{
+    caseItem: PlanDetailFeatureCaseItem;
+    canEdit: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'loadList'): void;
+  }>();
+
+  const { t } = useI18n();
+
+  const columns = computed<MsTableColumn>(() => [
+    {
+      title: 'caseManagement.featureCase.tableColumnID',
+      dataIndex: 'num',
+      width: 100,
+      showTooltip: true,
+    },
+    {
+      title: 'caseManagement.featureCase.defectName',
+      dataIndex: 'title',
+      showTooltip: true,
+      width: 180,
+    },
+    {
+      title: 'caseManagement.featureCase.defectState',
+      dataIndex: 'type',
+      width: 100,
+    },
+    ...(!props.canEdit
+      ? []
+      : [
+          {
+            title: 'common.operation',
+            slotName: 'operation',
+            dataIndex: 'operation',
+            width: 100,
+          },
+        ]),
+  ]);
+  const tableProps = ref<Partial<MsTableProps<PlanDetailFeatureCaseItem>>>({
+    columns: columns.value,
+    size: 'mini',
+    tableKey: TableKeyEnum.TEST_PLAN_DETAIL_CASE_TABLE_BUG_COUNT,
+    scroll: { x: '100%' },
+    showSelectorAll: false,
+    heightUsed: 340,
+    enableDrag: false,
+    showPagination: false,
+  });
+  const { propsRes, propsEvent, setLoading } = useTable(undefined, tableProps.value);
+
+  watchEffect(() => {
+    propsRes.value.data = props.caseItem.bugList;
+  });
+
+  // 取消关联缺陷
+  async function cancelLink(id: string) {
+    try {
+      setLoading(true);
+      await testPlanCancelBug(id);
+      Message.success(t('common.unLinkSuccess'));
+      emit('loadList');
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      setLoading(false);
+    }
+  }
+</script>

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

@@ -53,6 +53,9 @@
         </a-select>
         <span v-else class="text-[var(--color-text-2)]"><ExecuteResult :execute-result="record.lastExecResult" /></span>
       </template>
+      <template #bugCount="{ record }">
+        <BugCountPopover :case-item="record" :can-edit="props.canEdit" @load-list="loadList" />
+      </template>
       <template v-if="props.canEdit" #operation="{ record }">
         <MsButton
           v-permission="['PROJECT_TEST_PLAN:READ+EXECUTE']"
@@ -180,6 +183,7 @@
   import CaseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import ExecuteResult from '@/components/business/ms-case-associate/executeResult.vue';
   import MsSelect from '@/components/business/ms-select';
+  import BugCountPopover from './bugCountPopover.vue';
   import ExecuteForm from '@/views/test-plan/testPlan/detail/featureCase/components/executeForm.vue';
 
   import {
@@ -322,6 +326,7 @@
     {
       title: 'testPlan.featureCase.bugCount',
       dataIndex: 'bugCount',
+      slotName: 'bugCount',
       width: 100,
       showDrag: true,
     },