fix(接口测试): 回收站和场景-协议调整

frontend/src/models/apiTest/management.ts

@@ -100,8 +100,7 @@ export interface ApiDefinitionGetModuleParams {
   filter?: Record<string, any>;
   combine?: Record<string, any>;
   moduleIds: string[];
-  protocols?: string[]; // TODO 协议 必填
+  protocols: string[];
-  protocol?: string; // TODO 协议 改完回收站删除这行
   projectId: string;
   versionId?: string;
   refId?: string;
@@ -181,8 +180,7 @@ export interface mockParams {
 }
 // 批量操作参数
 export interface ApiDefinitionBatchParams extends BatchApiParams {
-  protocols?: string[]; // TODO 协议 必填
+  protocols: string[];
-  protocol?: string; // TODO 协议 改完回收站删除这行
 }
 // 批量更新定义参数
 export interface ApiDefinitionBatchUpdateParams extends ApiDefinitionBatchParams {
@@ -281,7 +279,6 @@ export interface DefinitionReferencePageParams extends TableQueryParams {
 export interface ApiDefinitionDeleteParams {
   id: string;
   projectId: string;
-  protocol: string;
   deleteAll?: boolean;
 }
 
@@ -334,8 +331,7 @@ export interface ApiCaseDetail extends ExecuteRequestParams {
 }
 // 批量操作参数
 export interface ApiCaseBatchParams extends BatchApiParams {
-  protocols?: string[]; // TODO 协议 必填
+  protocols: string[];
-  protocol?: string; // TODO 协议 改完回收站删除这行
   apiDefinitionId?: string;
   versionId?: string;
 }

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

@@ -105,7 +105,7 @@
     try {
       apiModuleTree.value = await getModuleTreeOnlyModules({
         keyword: '',
-        protocol,
+        protocols: [protocol],
         projectId: appStore.currentProjectId,
         moduleIds: [],
       });

frontend/src/views/api-test/management/components/moduleTree.vue

@@ -9,10 +9,7 @@
         />
         <template v-if="!props.readOnly && !props.trash">
           <a-dropdown-button
-            v-if="
+            v-if="hasAllPermission(['PROJECT_API_DEFINITION:READ+ADD', 'PROJECT_API_DEFINITION:READ+IMPORT'])"
-              selectedProtocols.includes('HTTP') &&
-              hasAllPermission(['PROJECT_API_DEFINITION:READ+ADD', 'PROJECT_API_DEFINITION:READ+IMPORT'])
-            "
             type="primary"
             @click="handleSelect('newApi')"
           >
@@ -28,7 +25,6 @@
           </a-dropdown-button>
           <a-button
             v-else-if="
-              selectedProtocols.includes('HTTP') &&
               !hasAnyPermission(['PROJECT_API_DEFINITION:READ+ADD']) &&
               hasAnyPermission(['PROJECT_API_DEFINITION:READ+IMPORT'])
             "

frontend/src/views/api-test/management/components/recycle/api/apiTable.vue

@@ -19,6 +19,7 @@
       </div>
     </div>
     <ms-base-table
+      ref="apiTableRef"
       v-bind="propsRes"
       :action-config="batchActions"
       :first-column-width="44"
@@ -28,7 +29,7 @@
       @selected-change="handleTableSelect"
       @batch-action="handleTableBatch"
     >
-      <template v-if="props.protocol === 'HTTP'" #[FilterSlotNameEnum.API_TEST_API_REQUEST_METHODS]="{ filterContent }">
+      <template #[FilterSlotNameEnum.API_TEST_API_REQUEST_METHODS]="{ filterContent }">
         <apiMethodName :method="filterContent.value" />
       </template>
       <template #[FilterSlotNameEnum.API_TEST_API_REQUEST_API_STATUS]="{ filterContent }">
@@ -50,6 +51,9 @@
       <template #deleteUserName="{ record }">
         <span type="text" class="px-0">{{ record.deleteUserName || '-' }}</span>
       </template>
+      <template #protocol="{ record }">
+        <apiMethodName :method="record.protocol" />
+      </template>
       <template #method="{ record }">
         <apiMethodName :method="record.method" is-tag />
       </template>
@@ -92,6 +96,7 @@
   import apiStatus from '@/views/api-test/components/apiStatus.vue';
   import TableFilter from '@/views/case-management/caseManagementFeature/components/tableFilter.vue';
 
+  import { getProtocolList } from '@/api/modules/api-test/common';
   import {
     batchCleanOutDefinition,
     batchRecoverDefinition,
@@ -105,6 +110,7 @@
   import useAppStore from '@/store/modules/app';
   import { characterLimit, operationWidth } from '@/utils';
 
+  import { ProtocolItem } from '@/models/apiTest/common';
   import {
     ApiDefinitionDetail,
     ApiDefinitionGetModuleParams,
@@ -112,13 +118,13 @@
   } from '@/models/apiTest/management';
   import { RequestDefinitionStatus, RequestMethods } from '@/enums/apiEnum';
   import { TableKeyEnum } from '@/enums/tableEnum';
-  import {FilterSlotNameEnum} from "@/enums/tableFilterEnum";
+  import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
 
   const props = defineProps<{
     class?: string;
     activeModule: string;
     offspringIds: string[];
-    protocol: string; // 查看的协议类型
+    selectedProtocols: string[];
     readOnly?: boolean; // 是否是只读模式
     memberOptions: { label: string; value: string }[];
   }>();
@@ -132,13 +138,43 @@
   const refreshModuleTree: (() => Promise<any>) | undefined = inject('refreshModuleTree');
   const refreshModuleTreeCount: ((data: ApiDefinitionGetModuleParams) => Promise<any>) | undefined =
     inject('refreshModuleTreeCount');
+
+  // TODO: 后期优化 放store里
+  const protocolList = ref<ProtocolItem[]>([]);
+  async function initProtocolList() {
+    try {
+      const res = await getProtocolList(appStore.currentOrgId);
+      protocolList.value = res.map((e) => ({
+        protocol: e.protocol,
+        polymorphicName: e.polymorphicName,
+        pluginId: e.pluginId,
+      }));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+  onBeforeMount(() => {
+    initProtocolList();
+  });
+
+  // TODO 后期提到apiTest公用里
   const requestMethodsOptions = computed(() => {
-    return Object.values(RequestMethods).map((e) => {
+    const otherMethods = protocolList.value
+      .filter((e) => e.protocol !== 'HTTP')
+      .map((item) => {
+        return {
+          value: item.protocol,
+          key: item.protocol,
+        };
+      });
+    const httpMethods = Object.values(RequestMethods).map((e) => {
       return {
         value: e,
         key: e,
       };
     });
+    return [...httpMethods, ...otherMethods];
   });
   const requestApiStatus = computed(() => {
     return Object.values(RequestDefinitionStatus).map((e) => {
@@ -148,7 +184,7 @@
       };
     });
   });
-  const columns: MsTableColumn = [
+  let columns: MsTableColumn = [
     {
       title: 'ID',
       dataIndex: 'num',
@@ -176,6 +212,7 @@
     {
       title: 'apiTestManagement.protocol',
       dataIndex: 'protocol',
+      slotName: 'protocol',
       showTooltip: true,
       width: 200,
       showDrag: true,
@@ -309,7 +346,7 @@
       projectId: appStore.currentProjectId,
       moduleIds: props.activeModule === 'all' ? [] : queryModuleIds,
       deleted: true,
-      protocol: props.protocol,
+      protocols: props.selectedProtocols,
       filter: {
         status: statusFilters.value,
         method: methodFilters.value,
@@ -325,7 +362,7 @@
           deleteUser: deleteUserFilters.value,
         },
         moduleIds: [],
-        protocol: props.protocol,
+        protocols: props.selectedProtocols,
         projectId: appStore.currentProjectId,
       });
     }
@@ -347,8 +384,9 @@
     }
   );
 
+  // 第一次初始化会触发，所以不需要onBeforeMount再次调用
   watch(
-    () => props.protocol,
+    () => props.selectedProtocols,
     () => {
       resetSelector();
       loadApiList(true);
@@ -378,10 +416,6 @@
     loadApiList(false);
   }
 
-  onBeforeMount(() => {
-    loadApiList(true);
-  });
-
   const tableSelected = ref<(string | number)[]>([]);
   const batchParams = ref<BatchActionQueryParams>({
     selectedIds: [],
@@ -424,7 +458,7 @@
       selectIds: batchParams.value.selectedIds as string[],
       moduleIds: props.activeModule === 'all' ? [] : queryModuleIds,
       projectId: appStore.currentProjectId,
-      protocol: props.protocol,
+      protocols: props.selectedProtocols,
       condition: {
         keyword: keyword.value,
         filter: {
@@ -535,7 +569,6 @@
       await recoverDefinition({
         id: record.id,
         projectId: record.projectId,
-        protocol: props.protocol,
       });
       Message.success(t('apiTestManagement.recycle.recoveredSuccessfully'));
       resetSelector();
@@ -552,7 +585,31 @@
     loadApiList,
   });
 
+  function initFilterColumn() {
+    columns = columns.map((item) => {
+      if (item.dataIndex === 'method') {
+        return {
+          ...item,
+          filterConfig: {
+            ...item.filterConfig,
+            options: requestMethodsOptions.value,
+          },
+        };
+      }
+      return item;
+    });
+  }
+
+  await initFilterColumn();
   await tableStore.initColumn(TableKeyEnum.API_TEST, columns, 'drawer', true);
+  const apiTableRef = ref();
+  watch(
+    () => requestMethodsOptions.value,
+    () => {
+      initFilterColumn();
+      apiTableRef.value.initColumn(columns);
+    }
+  );
 </script>
 
 <style lang="less" scoped>

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

@@ -38,6 +38,9 @@
       <template #[FilterSlotNameEnum.API_TEST_CASE_API_STATUS]="{ filterContent }">
         <apiStatus :status="filterContent.value" />
       </template>
+      <template #protocol="{ record }">
+        <apiMethodName :method="record.protocol" />
+      </template>
       <template #[FilterSlotNameEnum.API_TEST_CASE_API_LAST_EXECUTE_STATUS]="{ filterContent }">
         <ExecutionStatus :module-type="ReportEnum.API_REPORT" :status="filterContent.value" />
       </template>
@@ -102,6 +105,7 @@
   import type { BatchActionParams, BatchActionQueryParams, MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import caseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
+  import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
   import apiStatus from '@/views/api-test/components/apiStatus.vue';
   import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
 
@@ -128,7 +132,7 @@
   const props = defineProps<{
     activeModule: string;
     offspringIds: string[];
-    protocol: string; // 查看的协议类型
+    selectedProtocols: string[];
     memberOptions: { label: string; value: string }[];
   }>();
 
@@ -184,6 +188,7 @@
     {
       title: 'apiTestManagement.protocol',
       dataIndex: 'protocol',
+      slotName: 'protocol',
       showTooltip: true,
       width: 200,
       showDrag: true,
@@ -380,7 +385,7 @@
       keyword: keyword.value,
       projectId: appStore.currentProjectId,
       moduleIds: moduleIds.value,
-      protocol: props.protocol,
+      protocols: props.selectedProtocols,
     };
     setLoadListParams(params);
     loadList();
@@ -390,19 +395,9 @@
     loadCaseList();
   }
 
-  watch(
+  watch([() => props.activeModule, () => props.selectedProtocols], () => {
-    () => props.activeModule,
-    () => {
     loadCaseListAndResetSelector();
-    }
+  });
-  );
-
-  watch(
-    () => props.protocol,
-    () => {
-      loadCaseListAndResetSelector();
-    }
-  );
 
   const tableSelected = ref<(string | number)[]>([]); // 表格选中的
   const batchParams = ref<BatchActionQueryParams>({
@@ -469,7 +464,7 @@
       selectIds: batchParams.value.selectedIds as string[],
       moduleIds: moduleIds.value,
       projectId: appStore.currentProjectId,
-      protocol: props.protocol,
+      protocols: props.selectedProtocols,
       condition: {
         keyword: keyword.value,
         filter: propsRes.value.filter,

frontend/src/views/api-test/management/components/recycle/index.vue

@@ -21,7 +21,6 @@
       </template>
     </MsEditableTab>
   </div>
-  <!-- TODO 协议 -->
   <api
     v-show="currentTab === 'api'"
     ref="apiRef"
@@ -29,15 +28,14 @@
     :module-tree="props.moduleTree"
     :active-module="props.activeModule"
     :offspring-ids="props.offspringIds"
-    :protocol="props.selectedProtocols[0]"
+    :selected-protocols="props.selectedProtocols"
   />
-  <!-- TODO 协议 -->
   <api-case
     v-show="currentTab === 'case'"
     :member-options="memberOptions"
     :active-module="props.activeModule"
     :offspring-ids="props.offspringIds"
-    :protocol="props.selectedProtocols[0]"
+    :selected-protocols="props.selectedProtocols"
   ></api-case>
 </template>
 

frontend/src/views/api-test/scenario/components/common/importApiDrawer/moduleTree.vue

@@ -121,7 +121,7 @@
       loading.value = true;
       const params = {
         keyword: moduleKeyword.value,
-        protocol: props.protocol,
+        protocols: [props.protocol],
         projectId: props.projectId,
         moduleIds: [],
       };
@@ -144,7 +144,7 @@
     try {
       const params = {
         keyword: moduleKeyword.value,
-        protocol: props.protocol,
+        protocols: [props.protocol],
         projectId: props.projectId,
         moduleIds: [],
       };

frontend/src/views/api-test/scenario/components/common/importApiDrawer/table.vue

@@ -483,7 +483,7 @@
         keyword: keyword.value,
         projectId: props.projectId,
         moduleIds: ids || props.moduleIds,
-        protocol: props.protocol,
+        protocols: [props.protocol],
         filter: {
           status: statusFilters.value,
           method: methodFilters.value,

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

@@ -462,12 +462,10 @@
         // 当前是最后一个，刷新数据
         loadCaseDetail();
         loadCaseList();
-        // TODO 更新历史列表
       }
     } else {
       // 不自动下一个才请求详情
       loadCase();
-      // TODO 更新历史列表
     }
   }