fix(接口管理): 用例执行结果列筛选样式&用例的环境下拉值优先使用后端数据

frontend/src/views/api-test/components/environmentSelect.vue

@@ -30,8 +30,7 @@
   const appStore = useAppStore();
   const { openNewPage } = useOpenNewPage();
 
-  const currentEnv = ref('');
-
+  const currentEnv = defineModel<string>('currentEnv', { default: '' });
   const currentEnvConfig = ref<EnvConfig>();
   const envLoading = ref(false);
   const envOptions = ref<SelectOptionData[]>([]);
@@ -54,8 +53,8 @@
         label: item.name,
         value: item.id,
       }));
-      currentEnv.value = res[0]?.id || '';
-      initEnvironment();
+      currentEnv.value = currentEnv.value.length ? currentEnv.value : res[0]?.id;
+      await initEnvironment();
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);

frontend/src/views/api-test/management/components/management/case/caseDetail.vue

@@ -3,7 +3,7 @@
     <a-tabs v-model:active-key="activeKey" class="h-full px-[16px]" animation lazy-load>
       <template #extra>
         <div class="flex gap-[12px]">
-          <environmentSelect v-if="props.isDrawer" ref="environmentSelectRef" />
+          <environmentSelect v-if="props.isDrawer" v-model:current-env="environmentIdByDrawer" />
           <execute
             ref="executeRef"
             v-model:detail="caseDetail"
@@ -116,8 +116,10 @@
   const { openModal } = useModal();
 
   const caseDetail = ref<RequestParam>(cloneDeep(props.detail)); // props.detail是嵌套的引用类型，防止不必要的修改来源影响props.detail的数据
+  const environmentIdByDrawer = ref(props.detail.environmentId);
   watchEffect(() => {
     caseDetail.value = cloneDeep(props.detail); // props.detail是嵌套的引用类型，防止不必要的修改来源影响props.detail的数据
+    environmentIdByDrawer.value = props.detail.environmentId;
   });
 
   const activeKey = ref('detail');
@@ -219,11 +221,9 @@
 
   const protocols = inject<Ref<ProtocolItem[]>>('protocols');
 
-  const environmentSelectRef = ref<InstanceType<typeof environmentSelect>>();
-  const currentEnvConfigByDrawer = computed<EnvConfig | undefined>(() => environmentSelectRef.value?.currentEnvConfig);
   const currentEnvConfigByInject = inject<Ref<EnvConfig>>('currentEnvConfig');
   const environmentId = computed(() =>
-    props.isDrawer ? currentEnvConfigByDrawer.value?.id : currentEnvConfigByInject?.value?.id
+    props.isDrawer ? environmentIdByDrawer.value : currentEnvConfigByInject?.value?.id
   );
 
   const executeRef = ref<InstanceType<typeof execute>>();

frontend/src/views/api-test/management/components/management/case/caseTable.vue

@@ -139,7 +139,7 @@
               <div class="flex items-center justify-center px-[6px] py-[2px]">
                 <a-checkbox-group v-model:model-value="lastReportStatusFilters" direction="vertical" size="small">
                   <a-checkbox v-for="val of lastReportStatusList" :key="val" :value="val">
-                    <span>{{ val }}</span>
+                    <ExecutionStatus :module-type="ReportEnum.API_REPORT" :status="val" />
                   </a-checkbox>
                 </a-checkbox-group>
               </div>
@@ -147,6 +147,9 @@
           </template>
         </a-trigger>
       </template>
+      <template #lastReportStatus="{ record }">
+        <ExecutionStatus :module-type="ReportEnum.API_REPORT" :status="record.lastReportStatus" />
+      </template>
       <template #passRateColumn>
         <div class="flex items-center text-[var(--color-text-3)]">
           {{ t('case.passRate') }}
@@ -316,6 +319,7 @@
   import createAndEditCaseDrawer from './createAndEditCaseDrawer.vue';
   import apiStatus from '@/views/api-test/components/apiStatus.vue';
   import BatchRunModal from '@/views/api-test/components/batchRunModal.vue';
+  import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
 
   import {
     batchDeleteCase,
@@ -339,6 +343,7 @@
   import { ApiCaseDetail } from '@/models/apiTest/management';
   import { DragSortParams } from '@/models/common';
   import { RequestDefinitionStatus } from '@/enums/apiEnum';
+  import { ReportEnum, ReportStatus } from '@/enums/reportEnum';
   import { TableKeyEnum } from '@/enums/tableEnum';
 
   import type { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
@@ -434,9 +439,9 @@
     {
       title: 'case.lastReportStatus',
       dataIndex: 'lastReportStatus',
+      slotName: 'lastReportStatus',
       titleSlotName: 'lastReportStatusFilter',
       showInTable: false,
-      showTooltip: true,
       width: 150,
     },
     {
@@ -545,8 +550,10 @@
     return caseLevelFields.value?.options || [];
   });
   const lastReportStatusFilterVisible = ref(false);
-  const lastReportStatusList = ['error', 'FakeError', 'success'];
-  const lastReportStatusFilters = ref<string[]>([...lastReportStatusList]);
+  const lastReportStatusList = computed(() => {
+    return Object.keys(ReportStatus[ReportEnum.API_REPORT]);
+  });
+  const lastReportStatusFilters = ref<string[]>(Object.keys(ReportStatus[ReportEnum.API_REPORT]));
 
   async function getModuleIds() {
     let moduleIds: string[] = [];

frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue

@@ -34,7 +34,7 @@
                 :max-length="255"
                 show-word-limit
               />
-              <environmentSelect ref="environmentSelectRef" />
+              <environmentSelect v-model:current-env="environmentId" />
               <execute
                 ref="executeRef"
                 v-model:detail="detailForm"
@@ -160,8 +160,8 @@
     },
   ]);
 
-  const environmentSelectRef = ref<InstanceType<typeof environmentSelect>>();
-  const currentEnvConfig = computed<EnvConfig | undefined>(() => environmentSelectRef.value?.currentEnvConfig);
+  const currentEnvConfig = inject<Ref<EnvConfig>>('currentEnvConfig');
+  const environmentId = ref(currentEnvConfig?.value?.id);
 
   const formRef = ref<FormInstance>();
   const requestCompositionRef = ref<InstanceType<typeof requestComposition>>();
@@ -202,10 +202,12 @@
     if (isCopy) {
       detailForm.value.name = `copy_${record?.name}`;
     }
+    environmentId.value = currentEnvConfig?.value?.id;
     // 编辑
     if (!isCopy && record?.id) {
       isEdit.value = true;
       detailForm.value = cloneDeep(record as RequestParam);
+      environmentId.value = record.environmentId;
       detailForm.value.isNew = false;
     }
     innerVisible.value = true;
@@ -231,7 +233,7 @@
         const { name, priority, status, tags, id } = detailForm.value;
         const params: AddApiCaseParams = {
           projectId: appStore.currentProjectId,
-          environmentId: currentEnvConfig.value?.id as string,
+          environmentId: environmentId.value as string,
           apiDefinitionId: apiDefinitionId.value,
           linkFileIds,
           uploadFileIds,

frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue

@@ -51,8 +51,8 @@
             <div class="arco-table-filters-content">
               <div class="flex items-center justify-center px-[6px] py-[2px]">
                 <a-checkbox-group v-model:model-value="statusFilters" direction="vertical" size="small">
-                  <a-checkbox v-for="val of Object.values(ExecuteStatusFilters)" :key="val" :value="val">
-                    <execute-status :status="val" />
+                  <a-checkbox v-for="val of statusList" :key="val" :value="val">
+                    <ExecutionStatus :module-type="ReportEnum.API_REPORT" :status="val" />
                   </a-checkbox>
                 </a-checkbox-group>
               </div>
@@ -64,7 +64,7 @@
         <span>{{ t(TriggerModeLabel[record.triggerMode]) }}</span>
       </template>
       <template #status="{ record }">
-        <execute-status :status="record.status" />
+        <ExecutionStatus :status="record.status" :module-type="ReportEnum.API_REPORT" />
       </template>
       <template #operation="{ record }">
         <a-tooltip :disabled="!record.deleted" :content="t('case.detail.report.delete')" position="top">
@@ -105,23 +105,26 @@
   import { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import response from '@/views/api-test/components/requestComposition/response/index.vue';
-  import ExecuteStatus from '@/views/api-test/scenario/components/executeStatus.vue';
+  import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
 
   import { getApiCaseExecuteHistory, getCaseReportDetail, getReportById } from '@/api/modules/api-test/management';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
 
-  import { ApiCaseReportDetail, RequestResult, RequestTaskResult } from '@/models/apiTest/common';
+  import { ApiCaseReportDetail, RequestTaskResult } from '@/models/apiTest/common';
   import { ApiCaseExecuteHistoryItem } from '@/models/apiTest/management';
-  import { ExecuteStatusFilters, ResponseComposition } from '@/enums/apiEnum';
-  import { TriggerModeLabel } from '@/enums/reportEnum';
+  import { ResponseComposition } from '@/enums/apiEnum';
+  import { ReportEnum, ReportStatus, TriggerModeLabel } from '@/enums/reportEnum';
 
   import { defaultResponse } from '@/views/api-test/components/config';
 
   const triggerModeListFilters = ref<string[]>(Object.keys(TriggerModeLabel));
   const triggerModeFilterVisible = ref(false);
   const statusFilterVisible = ref(false);
-  const statusFilters = ref(Object.keys(ExecuteStatusFilters));
+  const statusFilters = ref<string[]>(Object.keys(ReportStatus[ReportEnum.API_REPORT]));
+  const statusList = computed(() => {
+    return Object.keys(ReportStatus[ReportEnum.API_REPORT]);
+  });
 
   const showResponse = ref(false);
 

frontend/src/views/api-test/report/component/reportStatus.vue

@@ -73,6 +73,11 @@
         label: 'report.status.pending',
         color: '!text-[var(--color-text-input-border)]',
       },
+      null: {
+        icon: 'icon-icon_block_filled',
+        label: 'report.status.pending',
+        color: '!text-[var(--color-text-input-border)]',
+      },
     },
     [ReportEnum.API_SCENARIO_REPORT]: {
       SUCCESS: {