style(接口测试): 优化场景表格针中执行结果的显示

backend/services/api-test/src/main/java/io/metersphere/api/mapper/ExtApiScenarioMapper.xml

@@ -214,6 +214,20 @@
             <foreach collection="${filter}.entrySet()" index="key" item="values">
                 <if test="values != null and values.size() > 0">
                     <choose>
+                        <when test="key=='lastReportStatus' and values.size() != 7 ">
+                            <!--    取值范围在7个状态（成功、失败、误报、停止、执行中、重跑中、排队中）内选。如果全部全选，则不用拼接这条语句-->
+                            <if test="values.contains('PENDING')">
+                                and (
+                                (api_scenario.last_report_status is null or api_scenario.last_report_status = '')
+                                or api_scenario.last_report_status in
+                                <include refid="io.metersphere.system.mapper.BaseMapper.filterInWrapper"/>
+                                )
+                            </if>
+                            <if test="!values.contains('PENDING')">
+                                and api_scenario.last_report_status in
+                                <include refid="io.metersphere.system.mapper.BaseMapper.filterInWrapper"/>
+                            </if>
+                        </when>
                         <when test="key=='status'">
                             and api_scenario.status in
                             <include refid="io.metersphere.system.mapper.BaseMapper.filterInWrapper"/>

frontend/src/views/api-test/scenario/components/scenarioTable.vue

@@ -86,6 +86,43 @@
           </a-option>
         </a-select>
       </template>
+      <!-- 报告结果筛选 -->
+      <template #lastReportStatusFilter="{ columnConfig }">
+        <a-trigger
+          v-model:popup-visible="lastReportStatusFilterVisible"
+          trigger="click"
+          @popup-visible-change="handleFilterHidden"
+        >
+          <a-button
+            type="text"
+            class="arco-btn-text--secondary p-[8px_4px]"
+            @click="lastReportStatusFilterVisible = true"
+          >
+            <div class="font-medium">
+              {{ t(columnConfig.title as string) }}
+            </div>
+            <icon-down :class="lastReportStatusFilterVisible ? 'text-[rgb(var(--primary-5))]' : ''" />
+          </a-button>
+          <template #content>
+            <div class="arco-table-filters-content">
+              <div class="flex items-center justify-center px-[6px] py-[2px]">
+                <a-checkbox-group v-model:model-value="lastReportStatusListFilters" direction="vertical" size="small">
+                  <a-checkbox v-for="key of lastReportStatusFilters" :key="key" :value="key">
+                    <ExecutionStatus :module-type="ReportEnum.API_SCENARIO_REPORT" :status="key" />
+                  </a-checkbox>
+                </a-checkbox-group>
+              </div>
+            </div>
+          </template>
+        </a-trigger>
+      </template>
+      <template #lastReportStatus="{ record }">
+        <ExecutionStatus
+          v-if="record.lastReportStatus"
+          :module-type="ReportEnum.API_SCENARIO_REPORT"
+          :status="record.lastReportStatus"
+        />
+      </template>
       <template #operation="{ record }">
         <MsButton
           v-permission="['PROJECT_API_SCENARIO:READ+EXECUTE']"
@@ -256,6 +293,7 @@
   import type { CaseLevel } from '@/components/business/ms-case-associate/types';
   import type { MsTreeNodeData } from '@/components/business/ms-tree/types';
   import apiStatus from '@/views/api-test/components/apiStatus.vue';
+  import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
   import operationScenarioModuleTree from '@/views/api-test/scenario/components/operationScenarioModuleTree.vue';
 
   import {
@@ -273,6 +311,7 @@
 
   import { ApiScenarioTableItem, ApiScenarioUpdateDTO } from '@/models/apiTest/scenario';
   import { ApiScenarioStatus } from '@/enums/apiEnum';
+  import { ReportEnum, ReportStatus } from '@/enums/reportEnum';
   import { TableKeyEnum } from '@/enums/tableEnum';
 
   const props = defineProps<{
@@ -281,7 +320,11 @@
     offspringIds: string[];
     readOnly?: boolean; // 是否是只读模式
   }>();
-
+  const lastReportStatusFilterVisible = ref(false);
+  const lastReportStatusListFilters = ref<string[]>(Object.keys(ReportStatus[ReportEnum.API_SCENARIO_REPORT]));
+  const lastReportStatusFilters = computed(() => {
+    return Object.keys(ReportStatus[ReportEnum.API_SCENARIO_REPORT]);
+  });
   const appStore = useAppStore();
   const { t } = useI18n();
   const { openModal } = useModal();
@@ -354,8 +397,9 @@
     },
     {
       title: 'apiScenario.table.columns.runResult',
-      titleSlotName: 'lastReportStatus',
+      titleSlotName: 'lastReportStatusFilter',
       dataIndex: 'lastReportStatus',
+      slotName: 'lastReportStatus',
       showTooltip: true,
       width: 100,
       showDrag: true,
@@ -510,6 +554,7 @@
       projectId: appStore.currentProjectId,
       moduleIds,
       filter: {
+        lastReportStatus: lastReportStatusListFilters.value,
         status: statusFilters.value.length === Object.keys(ApiScenarioStatus).length ? undefined : statusFilters.value,
       },
     };

frontend/src/views/api-test/scenario/index.vue

@@ -156,8 +156,16 @@
     offspringIds.value = _offspringIds;
   }
 
+  async function selectRecycleCount() {
+    const res = await getTrashModuleCount({
+      projectId: appStore.currentProjectId,
+    });
+    recycleModulesCount.value = res.all;
+  }
+
   function refreshTree(params: ApiScenarioGetModuleParams) {
     scenarioModuleTreeRef.value?.initModuleCount(params);
+    selectRecycleCount();
   }
 
   function redirectRecycle() {
@@ -166,12 +174,7 @@
     });
   }
 
-  onBeforeMount(async () => {
+  onBeforeMount(selectRecycleCount);
-    const res = await getTrashModuleCount({
-      projectId: appStore.currentProjectId,
-    });
-    recycleModulesCount.value = res.all;
-  });
 
   const saveLoading = ref(false);
 

frontend/src/views/api-test/scenario/recycle/recycleTable.vue

@@ -61,6 +61,43 @@
         <template #priority="{ record }">
           <caseLevel :case-level="record.priority as CaseLevel" />
         </template>
+        <!-- 报告结果筛选 -->
+        <template #lastReportStatusFilter="{ columnConfig }">
+          <a-trigger
+            v-model:popup-visible="lastReportStatusFilterVisible"
+            trigger="click"
+            @popup-visible-change="handleFilterHidden"
+          >
+            <a-button
+              type="text"
+              class="arco-btn-text--secondary p-[8px_4px]"
+              @click="lastReportStatusFilterVisible = true"
+            >
+              <div class="font-medium">
+                {{ t(columnConfig.title as string) }}
+              </div>
+              <icon-down :class="lastReportStatusFilterVisible ? 'text-[rgb(var(--primary-5))]' : ''" />
+            </a-button>
+            <template #content>
+              <div class="arco-table-filters-content">
+                <div class="flex items-center justify-center px-[6px] py-[2px]">
+                  <a-checkbox-group v-model:model-value="lastReportStatusListFilters" direction="vertical" size="small">
+                    <a-checkbox v-for="key of lastReportStatusFilters" :key="key" :value="key">
+                      <ExecutionStatus :module-type="ReportEnum.API_SCENARIO_REPORT" :status="key" />
+                    </a-checkbox>
+                  </a-checkbox-group>
+                </div>
+              </div>
+            </template>
+          </a-trigger>
+        </template>
+        <template #lastReportStatus="{ record }">
+          <ExecutionStatus
+            v-if="record.lastReportStatus"
+            :module-type="ReportEnum.API_SCENARIO_REPORT"
+            :status="record.lastReportStatus"
+          />
+        </template>
         <template #operation="{ record }">
           <MsButton
             v-permission="['PROJECT_API_SCENARIO:READ+DELETED']"
@@ -86,6 +123,7 @@
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
   import { Message } from '@arco-design/web-vue';
   import dayjs from 'dayjs';
 
@@ -96,6 +134,7 @@
   import caseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import type { CaseLevel } from '@/components/business/ms-case-associate/types';
   import apiStatus from '@/views/api-test/components/apiStatus.vue';
+  import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
 
   import {
     batchDeleteScenario,
@@ -111,6 +150,7 @@
 
   import { ApiScenarioTableItem } from '@/models/apiTest/scenario';
   import { ApiScenarioStatus } from '@/enums/apiEnum';
+  import { ReportEnum, ReportStatus } from '@/enums/reportEnum';
   import { TableKeyEnum } from '@/enums/tableEnum';
 
   const props = defineProps<{
@@ -120,6 +160,11 @@
     readOnly?: boolean; // 是否是只读模式
   }>();
 
+  const lastReportStatusFilterVisible = ref(false);
+  const lastReportStatusListFilters = ref<string[]>(Object.keys(ReportStatus[ReportEnum.API_SCENARIO_REPORT]));
+  const lastReportStatusFilters = computed(() => {
+    return Object.keys(ReportStatus[ReportEnum.API_SCENARIO_REPORT]);
+  });
   const appStore = useAppStore();
   const { t } = useI18n();
   const { openModal } = useModal();
@@ -172,8 +217,9 @@
     },
     {
       title: 'apiScenario.table.columns.runResult',
-      titleSlotName: 'lastReportStatus',
+      titleSlotName: 'lastReportStatusFilter',
       dataIndex: 'lastReportStatus',
+      slotName: 'lastReportStatus',
       showTooltip: true,
       width: 100,
       showDrag: true,
@@ -305,6 +351,7 @@
       projectId: appStore.currentProjectId,
       moduleIds,
       filter: {
+        lastReportStatus: lastReportStatusListFilters.value,
         status: statusFilters.value.length === Object.keys(ApiScenarioStatus).length ? undefined : statusFilters.value,
       },
     };