feat(接口测试): 下拉单选协议存上次值且分开存

2024-12-04 21:19:52 +08:00 · 2024-07-16 15:06:43 +08:00 · 2024-07-16 15:06:43 +08:00 · 72542e9cc7
commit 72542e9cc7
parent 5bd094d3a8
7 changed files with 58 additions and 26 deletions
--- a/frontend/src/enums/apiEnum.ts
+++ b/frontend/src/enums/apiEnum.ts
@ -345,7 +345,11 @@ export enum ReportExecStatus {
 }

 export enum ProtocolKeyEnum {
-  API_PROTOCOL = 'API_PROTOCOL',
+  API_MODULE_TREE_PROTOCOL = 'API_MODULE_TREE_PROTOCOL',
  TEST_PLAN_API_CASE_PROTOCOL = 'TEST_PLAN_API_CASE_PROTOCOL',
  ASSOCIATE_CASE_PROTOCOL = 'ASSOCIATE_CASE_PROTOCOL',
+  API_SCENARIO_IMPORT_PROTOCOL = 'API_SCENARIO_IMPORT_PROTOCOL',
+  API_SCENARIO_CUSTOM_PROTOCOL = 'API_SCENARIO_CUSTOM_PROTOCOL',
+  API_NEW_PROTOCOL = 'API_NEW_PROTOCOL',
+  API_DEBUG_NEW_PROTOCOL = 'API_DEBUG_NEW_PROTOCOL',
 }
--- a/frontend/src/views/api-test/components/requestComposition/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/index.vue
@ -479,6 +479,7 @@
  import { AddApiCaseParams } from '@/models/apiTest/management';
  import { ModuleTreeNode, TransferFileParams } from '@/models/common';
  import {
+    ProtocolKeyEnum,
    RequestAuthType,
    RequestBodyFormat,
    RequestCaseStatus,
@ -536,6 +537,7 @@

  const props = defineProps<{
    request: RequestParam; // 请求参数集合
+    protocolKey?: ProtocolKeyEnum; // 用于记住协议下拉值
    moduleTree?: ModuleTreeNode[]; // 模块树
    isCase?: boolean; // 是否是用例引用的组件,只显示请求参数和响应内容,响应内容默认为空且折叠
    apiDetail?: RequestParam; // 用例引用的时候需要接口定义的数据
@ -868,7 +870,9 @@
        requestVModel.value.method = RequestMethods.GET;
      }
    }
-    localStorage.setItem('currentProtocol', requestVModel.value.protocol);
+    if (props.protocolKey) {
+      localStorage.setItem(props.protocolKey, requestVModel.value.protocol);
+    }
    handleActiveDebugChange();
  }

--- a/frontend/src/views/api-test/debug/index.vue
+++ b/frontend/src/views/api-test/debug/index.vue
@ -40,6 +40,7 @@
              v-model:detail-loading="loading"
              v-model:request="activeDebug"
              :module-tree="folderTree"
+              :protocol-key="ProtocolKeyEnum.API_DEBUG_NEW_PROTOCOL"
              :create-api="addDebug"
              :update-api="updateDebug"
              :execute-api="executeDebug"
@ -131,6 +132,7 @@

  import { ModuleTreeNode } from '@/models/common';
  import {
+    ProtocolKeyEnum,
    RequestAuthType,
    RequestComposition,
    RequestContentTypeEnum,
@ -158,7 +160,7 @@
  }

  const initDefaultId = `debug-${Date.now()}`;
-  const localProtocol = localStorage.getItem('currentProtocol');
+  const localProtocol = localStorage.getItem(ProtocolKeyEnum.API_DEBUG_NEW_PROTOCOL);
  const defaultDebugParams: RequestParam = {
    type: 'api',
    id: initDefaultId,
@ -233,7 +235,7 @@

  function addDebugTab(defaultProps?: Partial<TabItem>) {
    const id = `debug-${Date.now()}`;
-    const protocol = localStorage.getItem('currentProtocol');
+    const protocol = localStorage.getItem(ProtocolKeyEnum.API_DEBUG_NEW_PROTOCOL);
    debugTabs.value.push({
      ...cloneDeep(defaultDebugParams),
      id,
--- a/frontend/src/views/api-test/management/components/management/api/index.vue
+++ b/frontend/src/views/api-test/management/components/management/api/index.vue
@ -71,6 +71,7 @@
            ref="requestCompositionRef"
            v-model:detail-loading="loading"
            v-model:request="activeApiTab"
+            :protocol-key="ProtocolKeyEnum.API_NEW_PROTOCOL"
            :module-tree="props.moduleTree"
            :create-api="addDefinition"
            :update-api="updateDefinition"
@ -157,6 +158,7 @@
  import { MockDetail } from '@/models/apiTest/mock';
  import { ModuleTreeNode } from '@/models/common';
  import {
+    ProtocolKeyEnum,
    RequestAuthType,
    RequestBodyFormat,
    RequestComposition,
@ -226,7 +228,7 @@
  });

  const initDefaultId = `definition-${Date.now()}`;
-  const localProtocol = localStorage.getItem('currentProtocol');
+  const localProtocol = localStorage.getItem(ProtocolKeyEnum.API_NEW_PROTOCOL);
  const defaultDefinitionParams: RequestParam = {
    type: 'api',
    definitionActiveKey: 'definition',
@ -300,7 +302,7 @@

  function addApiTab(defaultProps?: Partial<TabItem>) {
    const id = `definition-${Date.now()}`;
-    const protocol = localStorage.getItem('currentProtocol');
+    const protocol = localStorage.getItem(ProtocolKeyEnum.API_NEW_PROTOCOL);
    apiTabs.value.push({
      ...cloneDeep(defaultDefinitionParams),
      moduleId: props.activeModule === 'all' ? 'root' : props.activeModule,
--- a/frontend/src/views/api-test/management/components/moduleTree.vue
+++ b/frontend/src/views/api-test/management/components/moduleTree.vue
@ -48,7 +48,7 @@
        ref="treeFolderAllRef"
        v-model:isExpandApi="isExpandApi"
        v-model:isExpandAll="isExpandAll"
-        :protocol-key="ProtocolKeyEnum.API_PROTOCOL"
+        :protocol-key="ProtocolKeyEnum.API_MODULE_TREE_PROTOCOL"
        :folder-name="t('apiTestManagement.allApi')"
        :all-count="allFileCount"
        :active-folder="selectedKeys[0] as string"
--- a/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
@ -110,7 +110,6 @@
            :loading="protocolLoading"
            :disabled="_stepType.isQuoteApi || props.step?.isQuoteScenarioStep"
            class="w-[90px]"
-            @change="(val) => handleActiveDebugProtocolChange(val as string)"
          >
            <a-tooltip
              v-for="item of protocolOptions"
@ -370,6 +369,7 @@
  import { useAppStore } from '@/store';
  import { getGenerateId, parseQueryParams } from '@/utils';
  import { scrollIntoView } from '@/utils/dom';
+  import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';

  import {
    EnableKeyValueParam,
@ -385,6 +385,7 @@
  import { ScenarioStepFileParams, ScenarioStepItem } from '@/models/apiTest/scenario';
  import type { EnvConfig } from '@/models/projectManagement/environmental';
  import {
+    ProtocolKeyEnum,
    RequestAuthType,
    RequestBodyFormat,
    RequestComposition,
@ -1272,6 +1273,16 @@
    }
  );

+  watch(
+    () => requestVModel.value.protocol,
+    (val) => {
+      if (requestVModel.value.isNew) {
+        setLocalStorage(ProtocolKeyEnum.API_SCENARIO_CUSTOM_PROTOCOL, val);
+      }
+      handleActiveDebugProtocolChange(val);
+    }
+  );
+
  watch(
    () => visible.value,
    async (val) => {
@ -1304,11 +1315,16 @@
          handleActiveDebugProtocolChange(requestVModel.value.protocol);
        } else {
          // 新建自定义请求
+          const localProtocol = getLocalStorage<string>(ProtocolKeyEnum.API_SCENARIO_CUSTOM_PROTOCOL);
          const id = getGenerateId();
          requestVModel.value = cloneDeep({
            ...defaultApiParams,
            stepId: id,
            uniqueId: id,
+            protocol:
+              localProtocol?.length && protocolOptions.value.some((item) => item.value === localProtocol)
+                ? localProtocol
+                : 'HTTP',
          });
        }
        requestVModel.value.activeTab = contentTabList.value[0].value;
--- a/frontend/src/views/api-test/scenario/components/common/importApiDrawer/index.vue
+++ b/frontend/src/views/api-test/scenario/components/common/importApiDrawer/index.vue
@ -18,12 +18,7 @@
          <div class="flex flex-col">
            <div class="mb-[12px] flex items-center gap-[8px]">
              <MsProjectSelect v-model:project="currentProject" @change="resetModule" />
-              <a-select
-                v-if="activeKey !== 'scenario'"
-                v-model:model-value="protocol"
-                class="w-[90px]"
-                @change="resetModule"
-              >
+              <a-select v-if="activeKey !== 'scenario'" v-model:model-value="protocol" class="w-[90px]">
                <a-tooltip
                  v-for="item of protocolOptions"
                  :key="item.value as string"
@ -123,10 +118,11 @@
  import { useI18n } from '@/hooks/useI18n';
  import useAppStore from '@/store/modules/app';
  import { getGenerateId, mapTree } from '@/utils';
+  import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';

  import type { ApiCaseDetail, ApiDefinitionDetail } from '@/models/apiTest/management';
  import type { ApiScenarioTableItem } from '@/models/apiTest/scenario';
-  import { ScenarioStepRefType, ScenarioStepType } from '@/enums/apiEnum';
+  import { ProtocolKeyEnum, ScenarioStepRefType, ScenarioStepType } from '@/enums/apiEnum';

  export interface ImportData {
    api: MsTableDataItem<ApiDefinitionDetail>[];
@ -178,7 +174,7 @@

  const activeModule = ref<MsTreeNodeData>({});
  const currentProject = ref(appStore.currentProjectId);
-  const protocol = ref('HTTP');
+  const protocol = ref('');
  const protocolOptions = ref<SelectOptionData[]>([]);
  const protocolLoading = ref(false);

@ -204,6 +200,16 @@
  const apiTableRef = ref<InstanceType<typeof apiTable>>();
  const moduleIds = ref<(string | number)[]>([]);

+  watch(
+    () => protocol.value,
+    (val) => {
+      setLocalStorage(ProtocolKeyEnum.API_SCENARIO_IMPORT_PROTOCOL, val);
+      nextTick(() => {
+        moduleTreeRef.value?.init(activeKey.value);
+      });
+    }
+  );
+
  function resetModule() {
    nextTick(() => {
      moduleTreeRef.value?.init(activeKey.value);
@ -398,16 +404,14 @@
    }
  }

-  onBeforeMount(() => {
-    initProtocolList();
-  });
-
-  // 外面需要使用 v-if 动态渲染
-  onMounted(() => {
-    nextTick(() => {
-      // 外面使用 v-if 动态渲染时，需要在 nextTick 中执行初始化数据，因为子组件 ref 引用需要在渲染后才能获取到
-      moduleTreeRef.value?.init(activeKey.value);
-    });
+  onBeforeMount(async () => {
+    await initProtocolList();
+    const localProtocol = getLocalStorage<string>(ProtocolKeyEnum.API_SCENARIO_IMPORT_PROTOCOL);
+    if (localProtocol?.length && protocolOptions.value.some((item) => item.value === localProtocol)) {
+      protocol.value = localProtocol;
+    } else {
+      protocol.value = 'HTTP';
+    }
  });
 </script>