refactor(测试计划): 执行脑图-缺陷列表

frontend/src/components/business/ms-minders/featureCaseMinder/bugList.vue

@@ -1,6 +1,6 @@
 <template>
   <a-spin :loading="bugListLoading" class="block h-full pl-[16px]">
-    <div v-if="!props.isTestPlanCase" class="flex items-center justify-between">
+    <div class="flex items-center justify-between">
       <div class="flex items-center justify-between">
         <a-button v-if="hasEditPermission" class="mr-3" type="primary" @click="linkBug">
           {{ t('caseManagement.featureCase.linkDefect') }}
@@ -39,11 +39,7 @@
         <div class="bug-item">
           <div class="mb-[4px] flex items-center justify-between">
             <MsButton type="text" @click="goBug(item.bugId)">{{ item.num }}</MsButton>
-            <MsButton
+            <MsButton v-if="hasEditPermission && showType === 'link'" type="text" @click="disassociateBug(item.id)">
-              v-if="hasEditPermission && (!props.isTestPlanCase ? showType === 'link' : props.showDisassociateButton)"
-              type="text"
-              @click="disassociateBug(item.id)"
-            >
               {{ t('ms.add.attachment.cancelAssociate') }}
             </MsButton>
           </div>
@@ -98,8 +94,6 @@
 
   const props = defineProps<{
     activeCase: Record<string, any>;
-    isTestPlanCase?: boolean;
-    showDisassociateButton?: boolean;
   }>();
 
   const { openNewPage } = useOpenNewPage();
@@ -114,7 +108,7 @@
     pageSize: 10,
     current: 1,
   });
-  const showType = ref<'link' | 'testPlan'>(!props.isTestPlanCase ? 'link' : 'testPlan');
+  const showType = ref<'link' | 'testPlan'>('link');
   const bugListLoading = ref(false);
 
   async function loadBugList() {
@@ -208,10 +202,6 @@
   onBeforeMount(() => {
     loadBugList();
   });
-
-  defineExpose({
-    handleShowTypeChange,
-  });
 </script>
 
 <style lang="less" scoped>

frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/bugList.vue

@@ -0,0 +1,145 @@
+<template>
+  <a-spin :loading="bugListLoading" class="block h-full pl-[16px]">
+    <MsList
+      v-model:data="bugList"
+      mode="remote"
+      item-key-field="id"
+      :item-border="false"
+      :no-more-data="false"
+      :virtual-list-props="{
+        height: '100%',
+      }"
+      @reach-bottom="handleReachBottom"
+    >
+      <template #item="{ item }">
+        <div class="bug-item">
+          <div class="mb-[4px] flex items-center justify-between">
+            <MsButton type="text" @click="goBug(item.bugId)">{{ item.num }}</MsButton>
+            <MsButton v-if="props.showDisassociateButton" type="text" @click="disassociateBug(item.id)">
+              {{ t('ms.add.attachment.cancelAssociate') }}
+            </MsButton>
+          </div>
+          <a-tooltip :content="item.name" position="tl">
+            <div class="one-line-text">{{ item.name }}</div>
+          </a-tooltip>
+        </div>
+      </template>
+    </MsList>
+  </a-spin>
+</template>
+
+<script setup lang="ts">
+  import { Message } from '@arco-design/web-vue';
+
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsList from '@/components/pure/ms-list/index.vue';
+
+  import { associatedBugPage, testPlanCancelBug } from '@/api/modules/test-plan/testPlan';
+  import { useI18n } from '@/hooks/useI18n';
+  import useOpenNewPage from '@/hooks/useOpenNewPage';
+  import useAppStore from '@/store/modules/app';
+
+  import { BugManagementRouteEnum } from '@/enums/routeEnum';
+
+  const props = defineProps<{
+    activeCase: Record<string, any>;
+    testPlanCaseId: string;
+    showDisassociateButton?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'disassociateBugDone'): void;
+  }>();
+
+  const { openNewPage } = useOpenNewPage();
+  const appStore = useAppStore();
+  const { t } = useI18n();
+
+  const bugList = ref<any[]>([]);
+  const bugListLoading = ref(false);
+  const pageNation = ref({
+    total: 0,
+    pageSize: 10,
+    current: 1,
+  });
+
+  async function loadBugList() {
+    try {
+      bugListLoading.value = true;
+      const res = await associatedBugPage({
+        caseId: props.activeCase.id,
+        testPlanCaseId: props.testPlanCaseId,
+        projectId: appStore.currentProjectId,
+        current: pageNation.value.current || 1,
+        pageSize: pageNation.value.pageSize,
+      });
+      if (pageNation.value.current === 1) {
+        bugList.value = res.list;
+      } else {
+        bugList.value = bugList.value.concat(res.list);
+      }
+      pageNation.value.total = res.total;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      bugListLoading.value = false;
+    }
+  }
+
+  // 滚动翻页
+  function handleReachBottom() {
+    pageNation.value.current += 1;
+    if (pageNation.value.current > Math.ceil(pageNation.value.total / pageNation.value.pageSize)) {
+      return;
+    }
+    loadBugList();
+  }
+
+  // 取消关联缺陷
+  async function disassociateBug(id: string) {
+    try {
+      await testPlanCancelBug(id);
+      bugList.value = bugList.value.filter((item) => item.id !== id);
+      Message.success(t('caseManagement.featureCase.cancelLinkSuccess'));
+      emit('disassociateBugDone');
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  function goBug(id: string) {
+    openNewPage(BugManagementRouteEnum.BUG_MANAGEMENT_INDEX, {
+      id,
+    });
+  }
+
+  onBeforeMount(() => {
+    loadBugList();
+  });
+
+  defineExpose({
+    loadBugList,
+  });
+</script>
+
+<style lang="less" scoped>
+  .bug-item {
+    @apply cursor-pointer;
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    padding: 8px;
+    border: 1px solid var(--color-text-n8);
+    border-radius: var(--border-radius-small);
+    background-color: white;
+    &:hover {
+      @apply relative;
+
+      background: var(--color-text-n9);
+      box-shadow: inset 0 0 0.5px 0.5px rgb(var(--primary-5));
+    }
+  }
+</style>

frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue

@@ -103,8 +103,9 @@
           v-else-if="activeExtraKey === 'bug'"
           ref="bugListRef"
           :active-case="activeCaseInfo"
-          is-test-plan-case
+          :test-plan-case-id="selectNode?.data?.id"
           :show-disassociate-button="props.canEdit && hasAnyPermission(['PROJECT_TEST_PLAN:READ+EXECUTE'])"
+          @disassociate-bug-done="emit('refreshPlan')"
         />
         <ReviewCommentList
           v-else
@@ -177,8 +178,8 @@
   } from '@/components/pure/ms-minder-editor/script/tool/utils';
   import { MsFileItem } from '@/components/pure/ms-upload/types';
   import Attachment from '@/components/business/ms-minders/featureCaseMinder/attachment.vue';
-  import BugList from '@/components/business/ms-minders/featureCaseMinder/bugList.vue';
   import useMinderBaseApi from '@/components/business/ms-minders/featureCaseMinder/useMinderBaseApi';
+  import BugList from './bugList.vue';
   import AddStep from '@/views/case-management/caseManagementFeature/components/addStep.vue';
   import AddDefectDrawer from '@/views/case-management/caseManagementFeature/components/tabContent/tabBug/addDefectDrawer.vue';
   import LinkDefectDrawer from '@/views/case-management/caseManagementFeature/components/tabContent/tabBug/linkDefectDrawer.vue';
@@ -518,7 +519,7 @@
   const bugListRef = ref<InstanceType<typeof BugList>>();
   function handleAddBugDone() {
     if (extraVisible.value && activeExtraKey.value === 'bug') {
-      bugListRef.value?.handleShowTypeChange();
+      bugListRef.value?.loadBugList();
     }
     emit('refreshPlan');
   }