refactor(测试计划): 测试计划详情-缺陷列表-点id查看详情

frontend/src/components/business/ms-detail-drawer/index.vue

@@ -20,6 +20,7 @@
           <slot name="titleLeft" :loading="loading" :detail="detail"></slot>
         </div>
         <MsPrevNextButton
+          v-if="props.tableData && props.pagination && props.pageChange"
           ref="prevNextButtonRef"
           v-model:loading="loading"
           class="ml-[16px]"
@@ -52,15 +53,15 @@
     width: number;
     detailId: string; // 详情 id
     tooltipText?: string; // tooltip内容
-    detailIndex: number; // 详情 下标
-    tableData: any[]; // 表格数据
-    pagination: MsPaginationI; // 分页器对象
+    detailIndex?: number; // 详情 下标
+    tableData?: any[]; // 表格数据
+    pagination?: MsPaginationI; // 分页器对象
     showFullScreen?: boolean; // 是否显示全屏按钮
-    pageChange: (page: number) => Promise<void>; // 分页变更函数
+    pageChange?: (page: number) => Promise<void>; // 分页变更函数
     getDetailFunc: (id: string) => Promise<any>; // 获取详情的请求函数
   }>();
 
-  const emit = defineEmits(['update:visible', 'loaded', 'loadingDetail']);
+  const emit = defineEmits(['update:visible', 'loaded', 'loadingDetail', 'getDetail']);
 
   const prevNextButtonRef = ref<InstanceType<typeof MsPrevNextButton>>();
 
@@ -108,7 +109,11 @@
     if (innerVisible.value) {
       nextTick(() => {
         // 为了确保 prevNextButtonRef 已渲染
+        if (props.tableData && props.pagination && props.pageChange) {
           initDetail();
+        } else {
+          emit('getDetail');
+        }
       });
     }
   });

frontend/src/components/business/ms-prev-next-button/index.vue

@@ -45,7 +45,7 @@
   const props = defineProps<{
     loading: boolean;
     detailId: string; // 详情 id
-    detailIndex: number; // 详情 下标
+    detailIndex?: number; // 详情 下标
     tableData: any[]; // 表格数据
     pagination: MsPaginationI; // 分页器对象
     pageChange: (page: number) => Promise<void>; // 分页变更函数
@@ -82,12 +82,12 @@
     { immediate: true }
   );
 
-  const activeDetailIndex = ref(props.detailIndex);
+  const activeDetailIndex = ref(props.detailIndex || 0);
 
   watch(
     () => props.detailIndex,
     (val) => {
-      activeDetailIndex.value = val;
+      activeDetailIndex.value = val as number;
     }
   );
 

frontend/src/models/testPlan/testPlan.ts

@@ -69,6 +69,7 @@ export interface TestPlanDetail extends AddTestPlanParams {
   reReviewedCount: number;
   underReviewedCount: number;
   functionalCaseCount?: number;
+  bugCount?: number;
   apiCaseCount?: number;
   apiScenarioCount?: number;
 }

frontend/src/views/bug-management/components/bug-detail-drawer.vue

@@ -17,6 +17,7 @@
     :mask="false"
     @loading-detail="setDetailLoading"
     @loaded="loadedBug"
+    @get-detail="getDetail"
   >
     <template #titleLeft>
       <div class="flex items-center">
@@ -286,11 +287,11 @@
   const props = defineProps<{
     visible: boolean;
     detailId: string; // 详情 id
-    detailIndex: number; // 详情 下标
+    detailIndex?: number; // 详情 下标
     detailDefaultTab: string; // 详情默认 tab
-    tableData: any[]; // 表格数据
-    pagination: MsPaginationI; // 分页器对象
-    pageChange: (page: number) => Promise<void>; // 分页变更函数
+    tableData?: any[]; // 表格数据
+    pagination?: MsPaginationI; // 分页器对象
+    pageChange?: (page: number) => Promise<void>; // 分页变更函数
     currentPlatform: string;
   }>();
   const caseCount = ref(0);
@@ -560,7 +561,11 @@
           await deleteSingleBug(params);
           Message.success(t('common.deleteSuccess'));
           updateSuccess();
+          if (!props.pagination && !props.tableData) {
+            showDrawerVisible.value = false;
+          } else {
             detailDrawerRef.value?.openPrevDetail();
+          }
         } catch (error) {
           // eslint-disable-next-line no-console
           console.log(error);
@@ -655,6 +660,12 @@
     });
     return data;
   }
+
+  async function getDetail() {
+    const res = await getBugDetail(props.detailId);
+    loadedBug(res);
+  }
+
   watch(
     () => showDrawerVisible.value,
     (val) => {
@@ -665,6 +676,7 @@
           activeTab.value = 'detail';
         }
       } else {
+        if (!props.pagination && !props.tableData) return;
         const query = { ...route.query };
         delete query.id;
         router.replace({

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

@@ -16,8 +16,8 @@
       />
     </div>
     <MsBaseTable ref="tableRef" v-bind="propsRes" v-on="propsEvent">
-      <template #num="{ record }">
-        <MsButton type="text" @click="toDetail(record.id)">{{ record.num }}</MsButton>
+      <template v-if="props.canEdit" #num="{ record }">
+        <MsButton type="text" @click="handleShowDetail(record.id)">{{ record.num }}</MsButton>
       </template>
       <template #name="{ record }">
         <a-tooltip :content="record.title">
@@ -35,6 +35,13 @@
       </template>
     </MsBaseTable>
   </div>
+  <BugDetailDrawer
+    v-model:visible="detailVisible"
+    :detail-id="activeDetailId"
+    detail-default-tab="detail"
+    :current-platform="currentPlatform"
+    @submit="refresh"
+  />
 </template>
 
 <script setup lang="ts">
@@ -46,22 +53,28 @@
   import type { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import CaseCountPopover from './caseCountPopover.vue';
+  import BugDetailDrawer from '@/views/bug-management/components/bug-detail-drawer.vue';
 
-  import { getCustomOptionHeader } from '@/api/modules/bug-management';
+  import { getCustomOptionHeader, getPlatform } from '@/api/modules/bug-management';
   import { planDetailBugPage } from '@/api/modules/test-plan/testPlan';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
   import { addCommasToNumber } from '@/utils';
   import { hasAnyPermission } from '@/utils/permission';
 
-  // import { BugManagementRouteEnum } from '@/enums/routeEnum';
   import { TableKeyEnum } from '@/enums/tableEnum';
 
   import { makeColumns } from '@/views/case-management/caseManagementFeature/components/utils';
 
+  const props = defineProps<{
+    canEdit: boolean;
+  }>();
+  const emit = defineEmits<{
+    (e: 'refresh'): void;
+  }>();
+
   const { t } = useI18n();
   const route = useRoute();
-  // const router = useRouter();
   const appStore = useAppStore();
 
   const keyword = ref<string>('');
@@ -166,20 +179,27 @@
     tableRef.value?.initColumn(columns.value);
   }
 
-  function toDetail(id: string) {
-    // eslint-disable-next-line no-console
-    console.log('id', id);
-    // TODO: 查看详情
-    // window.open(
-    //   `${window.location.origin}#${
-    //     router.resolve({ name: BugManagementRouteEnum.BUG_MANAGEMENT_INDEX }).fullPath
-    //   }?id=${id}&orgId=${appStore.currentOrgId}&pId=${appStore.currentProjectId}`
-    // );
+  const detailVisible = ref(false);
+  const activeDetailId = ref<string>('');
+  const currentPlatform = ref('Local');
+  const handleShowDetail = async (id: string) => {
+    activeDetailId.value = id;
+    detailVisible.value = true;
+  };
+  const setCurrentPlatform = async () => {
+    const res = await getPlatform(appStore.currentProjectId);
+    currentPlatform.value = res;
+  };
+
+  function refresh() {
+    loadList();
+    emit('refresh');
   }
 
   onBeforeMount(() => {
     initFilterOptions();
     getFetch();
+    setCurrentPlatform();
   });
 </script>
 

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

@@ -107,7 +107,7 @@
       :can-edit="detail.status !== 'ARCHIVED'"
       @refresh="initDetail"
     />
-    <BugManagement v-if="activeTab === 'defectList'" />
+    <BugManagement v-if="activeTab === 'defectList'" :can-edit="detail.status !== 'ARCHIVED'" @refresh="initDetail" />
     <ApiCase
       v-if="activeTab === 'apiCase'"
       ref="apiCaseRef"
@@ -326,6 +326,9 @@
       case 'featureCase':
         const count = detail.value.functionalCaseCount ?? 0;
         return `${count > 0 ? count : ''}`;
+      case 'defectList':
+        const bugCount = detail.value.bugCount ?? 0;
+        return `${bugCount > 0 ? bugCount : ''}`;
       case 'apiCase':
         const apiCaseCount = detail.value?.apiCaseCount ?? 0;
         return `${apiCaseCount > 0 ? apiCaseCount : ''}`;