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

2024-12-05 05:29:29 +08:00 · 2024-03-21 19:59:34 +08:00 · 2024-03-21 19:59:34 +08:00 · ca99eeca14
commit ca99eeca14
parent 84b3947d3f
4 changed files with 118 additions and 9 deletions
--- a/backend/services/api-test/src/main/java/io/metersphere/api/mapper/ExtApiScenarioMapper.xml
+++ b/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"/>
--- a/frontend/src/views/api-test/scenario/components/scenarioTable.vue
+++ b/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,
      },
    };
--- a/frontend/src/views/api-test/scenario/index.vue
+++ b/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 () => {
-    const res = await getTrashModuleCount({
-      projectId: appStore.currentProjectId,
-    });
-    recycleModulesCount.value = res.all;
-  });
+  onBeforeMount(selectRecycleCount);

  const saveLoading = ref(false);

--- a/frontend/src/views/api-test/scenario/recycle/recycleTable.vue
+++ b/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,
      },
    };