feat(接口管理): 新增用例执行跳转

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

@@ -39,6 +39,7 @@
     environmentId: string;
     request?: (...args) => Record<string, any>;
     isCaseDetail?: boolean;
+    executeCase?: boolean;
   }>();
 
   const { t } = useI18n();
@@ -132,6 +133,16 @@
     caseDetail.value.executeLoading = false;
   }
 
+  watch(
+    () => props.executeCase,
+    (val) => {
+      if (val === true) {
+        execute(isPriorityLocalExec.value ? 'localExec' : 'serverExec');
+      }
+    },
+    { immediate: true }
+  );
+
   defineExpose({
     isPriorityLocalExec,
     execute,

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

@@ -7,6 +7,7 @@
           <execute
             ref="executeRef"
             v-model:detail="caseDetail"
+            :execute-case="props.executeCase"
             :environment-id="environmentId as string"
             is-case-detail
           />
@@ -102,6 +103,7 @@
 
   const props = defineProps<{
     isDrawer?: boolean; // 抽屉
+    executeCase?: boolean;
     detail: RequestParam;
   }>();
   const emit = defineEmits<{

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

@@ -55,7 +55,14 @@
         </MsButton>
       </div>
     </template>
-    <caseDetail ref="caseDerailRef" is-drawer :detail="props.detail" :api-detail="props.apiDetail" v-bind="$attrs" />
+    <caseDetail
+      ref="caseDerailRef"
+      is-drawer
+      :execute-case="props.executeCase"
+      :detail="props.detail"
+      :api-detail="props.apiDetail"
+      v-bind="$attrs"
+    />
   </MsDrawer>
 </template>
 
@@ -71,7 +78,8 @@
 
   const props = defineProps<{
     detail: RequestParam;
-    apiDetail: RequestParam;
+    apiDetail?: RequestParam;
+    executeCase?: boolean;
   }>();
 
   const { t } = useI18n();

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

@@ -163,7 +163,7 @@
           v-permission="['PROJECT_API_DEFINITION_CASE:READ+EXECUTE']"
           type="text"
           class="!mr-0"
-          @click="onExecute(record.id)"
+          @click="isApi ? openCaseDetailDrawerAndExecute(record.id) : openCaseTabAndExecute(record)"
         >
           {{ t('apiTestManagement.execute') }}
         </MsButton>
@@ -265,6 +265,7 @@
     v-model:visible="caseDetailDrawerVisible"
     :detail="caseDetail as RequestParam"
     :api-detail="apiDetail as RequestParam"
+    :execute-case="caseExecute"
     @update-follow="caseDetail.follow = !caseDetail.follow"
     @load-case="(id: string) => loadCase(id)"
     @delete-case="deleteCaseByDetail"
@@ -418,9 +419,9 @@
     offspringIds: string[];
   }>();
 
-  const emit = defineEmits<{
-    (e: 'openCaseTab', record: ApiCaseDetail): void;
-  }>();
+  const caseExecute = ref(false);
+
+  const emit = defineEmits(['openCaseTab', 'openCaseTabAndExecute']);
 
   const appStore = useAppStore();
   const { t } = useI18n();
@@ -1016,6 +1017,7 @@
   }
 
   const caseDetailDrawerVisible = ref(false);
+
   const defaultCaseParams = inject<RequestParam>('defaultCaseParams');
   const caseDetail = ref<Record<string, any>>({});
 
@@ -1045,6 +1047,16 @@
     caseDetailDrawerVisible.value = true;
   }
 
+  async function openCaseDetailDrawerAndExecute(id: string) {
+    await getCaseDetailInfo(id);
+    caseExecute.value = true;
+    caseDetailDrawerVisible.value = true;
+  }
+
+  function openCaseTabAndExecute(record: ApiCaseDetail) {
+    emit('openCaseTabAndExecute', record);
+  }
+
   function deleteCaseByDetail() {
     caseDetailDrawerVisible.value = false;
     loadCaseList();

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-1 flex-col overflow-hidden">
-    <div v-show="activeApiTab.id === 'all'" class="flex-1 overflow-hidden">
+    <div v-if="activeApiTab.id === 'all'" class="flex-1 overflow-hidden">
       <caseTable
         ref="caseTableRef"
         :offspring-ids="props.offspringIds"
@@ -8,11 +8,13 @@
         :active-module="props.activeModule"
         :protocol="props.protocol"
         @open-case-tab="openCaseTab"
+        @open-case-tab-and-execute="openCaseTabAndExecute"
       />
     </div>
     <div v-if="activeApiTab.id !== 'all'" class="flex-1 overflow-hidden">
       <caseDetail
         :detail="activeApiTab"
+        :execute-case="caseExecute"
         :module-tree="props.moduleTree"
         @delete-case="deleteCase"
         @update-follow="activeApiTab.follow = !activeApiTab.follow"
@@ -59,6 +61,8 @@
 
   const defaultCaseParams = inject<RequestParam>('defaultCaseParams');
 
+  const caseExecute = ref(false);
+
   const loading = ref(false);
   async function openOrUpdateCaseTab(isOpen: boolean, id: string) {
     try {
@@ -109,6 +113,11 @@
     await openOrUpdateCaseTab(true, typeof apiInfo === 'string' ? apiInfo : apiInfo.id);
   }
 
+  async function openCaseTabAndExecute(apiInfo: ApiCaseDetail | string) {
+    caseExecute.value = true;
+    await openCaseTab(apiInfo);
+  }
+
   const caseTableRef = ref<InstanceType<typeof caseTable>>();
   function deleteCase(id: string) {
     emit('deleteCase', id);
@@ -117,5 +126,6 @@
 
   defineExpose({
     openCaseTab,
+    openCaseTabAndExecute,
   });
 </script>