mirror of
https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
synced 2024-12-02 12:09:13 +08:00
feat(接口测试): curl导入解析
This commit is contained in:
baiqi
Craftsman
parent
6020b0781c
commit
2ad6cc78d0
@ -5,12 +5,14 @@ import {
|
||||
GetPluginOptionsUrl,
|
||||
GetPluginScriptUrl,
|
||||
GetProtocolListUrl,
|
||||
ImportCurlUrl,
|
||||
LocalExecuteApiDebugUrl,
|
||||
StopExecuteUrl,
|
||||
StopLocalExecuteUrl,
|
||||
} from '@/api/requrls/api-test/common';
|
||||
|
||||
import {
|
||||
type CurlParseResult,
|
||||
ExecuteRequestParams,
|
||||
GetPluginOptionsParams,
|
||||
PluginConfig,
|
||||
@ -61,3 +63,8 @@ export function stopLocalExecute(host: string, id: string | number, type?: Scena
|
||||
export function stopExecute(id: string | number, type?: ScenarioStepType) {
|
||||
return MSR.get({ url: type ? `${StopExecuteUrl}/${type}/${id}` : `${StopExecuteUrl}/${id}` });
|
||||
}
|
||||
|
||||
// 导入curl
|
||||
export function importByCurl(curl: string) {
|
||||
return MSR.post<CurlParseResult>({ url: ImportCurlUrl, data: { curl } });
|
||||
}
|
||||
|
||||
@ -6,3 +6,4 @@ export const GetEnvListUrl = '/api/test/env-list'; // 获取接口测试环境
|
||||
export const GetEnvironmentUrl = '/api/test/environment'; // 获取接口测试环境详情
|
||||
export const StopExecuteUrl = '/task/center/api/project/stop'; // 停止执行
|
||||
export const StopLocalExecuteUrl = '/api/stop'; // 停止本地执行
|
||||
export const ImportCurlUrl = '/api/debug/import-curl'; // 导入curl
|
||||
|
||||
@ -463,3 +463,11 @@ export type ApiCaseReportDetail = {
|
||||
scriptIdentifier: string;
|
||||
content: RequestResult;
|
||||
};
|
||||
// curl解析结果
|
||||
export interface CurlParseResult {
|
||||
method: RequestMethods | string;
|
||||
url: string;
|
||||
headers: Record<string, any>;
|
||||
body: string;
|
||||
queryParams: Record<string, any>;
|
||||
}
|
||||
|
||||
82
frontend/src/views/api-test/components/importCurlDialog.vue
Normal file
82
frontend/src/views/api-test/components/importCurlDialog.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title-align="start"
|
||||
:width="680"
|
||||
:ok-disabled="curlCode.trim() === ''"
|
||||
:ok-text="t('common.import')"
|
||||
:ok-button-props="{
|
||||
disabled: curlCode.trim() === '',
|
||||
}"
|
||||
class="ms-modal-form"
|
||||
@cancel="curlCode = ''"
|
||||
@before-ok="handleCurlImportConfirm"
|
||||
>
|
||||
<template #title>
|
||||
<a-tooltip position="right" :content="t('apiTestDebug.importByCURLTip')">
|
||||
<span
|
||||
>{{ t('apiTestDebug.importByCURL') }}
|
||||
<icon-question-circle
|
||||
class="ml-[4px] text-[var(--color-text-brand)] hover:text-[rgb(var(--primary-5))]"
|
||||
size="16"
|
||||
/>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<div class="h-full">
|
||||
<MsCodeEditor
|
||||
v-if="visible"
|
||||
v-model:model-value="curlCode"
|
||||
theme="MS-text"
|
||||
height="500px"
|
||||
:language="LanguageEnum.PLAINTEXT"
|
||||
:show-theme-change="false"
|
||||
:show-full-screen="false"
|
||||
>
|
||||
</MsCodeEditor>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
|
||||
import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
|
||||
|
||||
import { importByCurl } from '@/api/modules/api-test/common';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
|
||||
import type { CurlParseResult } from '@/models/apiTest/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', res: CurlParseResult): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const visible = defineModel('visible', {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
});
|
||||
|
||||
const importLoading = ref(false);
|
||||
const curlCode = ref('');
|
||||
|
||||
async function handleCurlImportConfirm(done: (closed: boolean) => void) {
|
||||
try {
|
||||
importLoading.value = true;
|
||||
const res = await importByCurl(curlCode.value);
|
||||
emit('done', res);
|
||||
done(true);
|
||||
Message.success(t('common.importSuccess'));
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(error);
|
||||
} finally {
|
||||
importLoading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -9,7 +9,7 @@
|
||||
@init="(val) => (folderTree = val)"
|
||||
@new-api="addDebugTab"
|
||||
@click-api-node="openApiTab"
|
||||
@import="importDrawerVisible = true"
|
||||
@import="importDialogVisible = true"
|
||||
@update-api-node="handleApiUpdateFromModuleTree"
|
||||
@delete-finish="handleDeleteFinish"
|
||||
/>
|
||||
@ -63,38 +63,7 @@
|
||||
</template>
|
||||
</MsSplitBox>
|
||||
</MsCard>
|
||||
<MsDrawer
|
||||
v-model:visible="importDrawerVisible"
|
||||
:width="680"
|
||||
:ok-disabled="curlCode.trim() === ''"
|
||||
disabled-width-drag
|
||||
@cancel="curlCode = ''"
|
||||
@confirm="handleCurlImportConfirm"
|
||||
>
|
||||
<template #title>
|
||||
<a-tooltip position="right" :content="t('apiTestDebug.importByCURLTip')">
|
||||
<span
|
||||
>{{ t('apiTestDebug.importByCURL') }}
|
||||
<icon-exclamation-circle
|
||||
class="ml-[4px] text-[var(--color-text-brand)] hover:text-[rgb(var(--primary-5))]"
|
||||
size="16"
|
||||
/>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<div class="h-full">
|
||||
<MsCodeEditor
|
||||
v-if="importDrawerVisible"
|
||||
v-model:model-value="curlCode"
|
||||
theme="MS-text"
|
||||
height="100%"
|
||||
:language="LanguageEnum.PLAINTEXT"
|
||||
:show-theme-change="false"
|
||||
:show-full-screen="false"
|
||||
>
|
||||
</MsCodeEditor>
|
||||
</div>
|
||||
</MsDrawer>
|
||||
<importCurlDialog v-model:visible="importDialogVisible" @done="handleImportCurlDone" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -105,14 +74,12 @@
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
import MsCard from '@/components/pure/ms-card/index.vue';
|
||||
import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
|
||||
import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
|
||||
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
|
||||
import MsEditableTab from '@/components/pure/ms-editable-tab/index.vue';
|
||||
import { TabItem } from '@/components/pure/ms-editable-tab/types';
|
||||
import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
|
||||
import moduleTree from './components/moduleTree.vue';
|
||||
import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
|
||||
import importCurlDialog from '@/views/api-test/components/importCurlDialog.vue';
|
||||
import requestComposition, { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
|
||||
|
||||
import { localExecuteApiDebug } from '@/api/modules/api-test/common';
|
||||
@ -128,9 +95,9 @@
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import useLeaveTabUnSaveCheck from '@/hooks/useLeaveTabUnSaveCheck';
|
||||
import useRequestCompositionStore from '@/store/modules/api/requestComposition';
|
||||
import { parseCurlScript } from '@/utils';
|
||||
import { hasAnyPermission } from '@/utils/permission';
|
||||
|
||||
import { CurlParseResult } from '@/models/apiTest/common';
|
||||
import { ModuleTreeNode } from '@/models/common';
|
||||
import {
|
||||
ProtocolKeyEnum,
|
||||
@ -151,8 +118,7 @@
|
||||
|
||||
const moduleTreeRef = ref<InstanceType<typeof moduleTree>>();
|
||||
const folderTree = ref<ModuleTreeNode[]>([]);
|
||||
const importDrawerVisible = ref(false);
|
||||
const curlCode = ref('');
|
||||
const importDialogVisible = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
async function handleDebugAddDone() {
|
||||
@ -283,20 +249,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
function handleCurlImportConfirm() {
|
||||
const { url, headers, queryParameters, method } = parseCurlScript(curlCode.value);
|
||||
function handleImportCurlDone(res: CurlParseResult) {
|
||||
const { url, method, headers, queryParams } = res;
|
||||
addDebugTab({
|
||||
url,
|
||||
method: method?.toUpperCase() || RequestMethods.GET,
|
||||
headers:
|
||||
headers?.map((e) => ({
|
||||
Object.keys(headers)?.map((e) => ({
|
||||
contentType: RequestContentTypeEnum.TEXT,
|
||||
description: '',
|
||||
enable: true,
|
||||
...e,
|
||||
key: e,
|
||||
value: headers[e],
|
||||
})) || [],
|
||||
query:
|
||||
queryParameters?.map((e) => ({
|
||||
Object.keys(queryParams)?.map((e) => ({
|
||||
paramType: RequestParamsType.STRING,
|
||||
description: '',
|
||||
required: false,
|
||||
@ -304,11 +271,11 @@
|
||||
minLength: undefined,
|
||||
encode: false,
|
||||
enable: true,
|
||||
...e,
|
||||
key: e,
|
||||
value: queryParams[e],
|
||||
})) || [],
|
||||
});
|
||||
curlCode.value = '';
|
||||
importDrawerVisible.value = false;
|
||||
importDialogVisible.value = false;
|
||||
nextTick(() => {
|
||||
handleActiveDebugChange();
|
||||
});
|
||||
|
||||
@ -1,344 +1,354 @@
|
||||
<template>
|
||||
<MsDrawer
|
||||
v-model:visible="visible"
|
||||
:width="960"
|
||||
class="customApiDrawer"
|
||||
no-content-padding
|
||||
:show-continue="true"
|
||||
:footer="requestVModel.isNew === true"
|
||||
:ok-disabled="requestVModel.executeLoading || (isHttpProtocol && !requestVModel.url)"
|
||||
:handle-before-cancel="handleBeforeCancel"
|
||||
show-full-screen
|
||||
unmount-on-close
|
||||
@confirm="handleSave"
|
||||
@continue="handleContinue"
|
||||
@close="handleClose"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex flex-1 items-center gap-[8px] overflow-hidden">
|
||||
<div
|
||||
v-if="props.step"
|
||||
class="flex h-[16px] min-w-[16px] items-center justify-center rounded-full bg-[var(--color-text-brand)] pr-[2px] !text-white"
|
||||
>
|
||||
{{ props.step.sort }}
|
||||
</div>
|
||||
<stepTypeVue
|
||||
v-if="props.step && [ScenarioStepType.API, ScenarioStepType.CUSTOM_REQUEST].includes(props.step?.stepType)"
|
||||
:step="props.step"
|
||||
/>
|
||||
<a-tooltip v-if="!isShowEditStepNameInput" :content="title" position="bottom">
|
||||
<div class="flex flex-1 items-center gap-[4px] overflow-hidden">
|
||||
<div class="one-line-text">
|
||||
{{ title }}
|
||||
</div>
|
||||
<MsIcon
|
||||
v-if="!props.step || !props.step.isQuoteScenarioStep"
|
||||
type="icon-icon_edit_outlined"
|
||||
class="min-w-[16px] cursor-pointer hover:text-[rgb(var(--primary-5))]"
|
||||
@click="isShowEditStepNameInput = true"
|
||||
/>
|
||||
<div>
|
||||
<MsDrawer
|
||||
v-model:visible="visible"
|
||||
:width="960"
|
||||
class="customApiDrawer"
|
||||
no-content-padding
|
||||
:show-continue="true"
|
||||
:footer="requestVModel.isNew === true"
|
||||
:ok-disabled="requestVModel.executeLoading || (isHttpProtocol && !requestVModel.url)"
|
||||
:handle-before-cancel="handleBeforeCancel"
|
||||
show-full-screen
|
||||
unmount-on-close
|
||||
@confirm="handleSave"
|
||||
@continue="handleContinue"
|
||||
@close="handleClose"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex flex-1 items-center gap-[8px] overflow-hidden">
|
||||
<div
|
||||
v-if="props.step"
|
||||
class="flex h-[16px] min-w-[16px] items-center justify-center rounded-full bg-[var(--color-text-brand)] pr-[2px] !text-white"
|
||||
>
|
||||
{{ props.step.sort }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-input
|
||||
v-if="isShowEditStepNameInput"
|
||||
ref="stepNameInputRef"
|
||||
v-model:model-value="requestVModel.stepName"
|
||||
class="flex-1"
|
||||
:placeholder="t('apiScenario.pleaseInputStepName')"
|
||||
:max-length="255"
|
||||
show-word-limit
|
||||
@press-enter="updateStepName"
|
||||
@blur="updateStepName"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="!isShowEditStepNameInput" class="ml-auto flex items-center gap-[16px]">
|
||||
<div
|
||||
v-if="!props.step || props.step?.stepType === ScenarioStepType.CUSTOM_REQUEST"
|
||||
class="customApiDrawer-title-right flex items-center gap-[16px]"
|
||||
>
|
||||
<a-tooltip :content="appStore.currentEnvConfig?.name" :disabled="!appStore.currentEnvConfig?.name">
|
||||
<div class="one-line-text max-w-[250px] text-[14px] font-normal text-[var(--color-text-4)]">
|
||||
{{ t('apiScenario.env', { name: appStore.currentEnvConfig?.name }) }}
|
||||
<stepTypeVue
|
||||
v-if="props.step && [ScenarioStepType.API, ScenarioStepType.CUSTOM_REQUEST].includes(props.step?.stepType)"
|
||||
:step="props.step"
|
||||
/>
|
||||
<a-tooltip v-if="!isShowEditStepNameInput" :content="title" position="bottom">
|
||||
<div class="flex flex-1 items-center gap-[4px] overflow-hidden">
|
||||
<div class="one-line-text">
|
||||
{{ title }}
|
||||
</div>
|
||||
<MsIcon
|
||||
v-if="!props.step || !props.step.isQuoteScenarioStep"
|
||||
type="icon-icon_edit_outlined"
|
||||
class="min-w-[16px] cursor-pointer hover:text-[rgb(var(--primary-5))]"
|
||||
@click="isShowEditStepNameInput = true"
|
||||
/>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-select
|
||||
v-model:model-value="requestVModel.customizeRequestEnvEnable"
|
||||
class="w-[150px]"
|
||||
:disabled="props.step?.isQuoteScenarioStep"
|
||||
@change="handleUseEnvChange"
|
||||
>
|
||||
<template #prefix>
|
||||
<div> {{ t('project.environmental.env') }} </div>
|
||||
</template>
|
||||
<a-option :value="true">{{ t('common.quote') }}</a-option>
|
||||
<a-option :value="false">{{ t('common.notQuote') }}</a-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.step && !props.step.isQuoteScenarioStep"
|
||||
class="right-operation-button-icon ml-auto flex items-center"
|
||||
>
|
||||
<replaceButton
|
||||
v-if="props.step.resourceId && props.step?.stepType !== ScenarioStepType.CUSTOM_REQUEST"
|
||||
:steps="props.steps"
|
||||
:step="props.step"
|
||||
:resource-id="props.step.resourceId"
|
||||
:scenario-id="scenarioId"
|
||||
@replace="handleReplace"
|
||||
<a-input
|
||||
v-if="isShowEditStepNameInput"
|
||||
v-model:model-value="requestVModel.stepName"
|
||||
class="flex-1"
|
||||
:placeholder="t('apiScenario.pleaseInputStepName')"
|
||||
:max-length="255"
|
||||
show-word-limit
|
||||
@press-enter="updateStepName"
|
||||
@blur="updateStepName"
|
||||
/>
|
||||
<MsButton type="icon" status="secondary" class="mr-4" @click="emit('deleteStep')">
|
||||
<MsIcon type="icon-icon_delete-trash_outlined1" />
|
||||
{{ t('common.delete') }}
|
||||
</MsButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-empty
|
||||
v-if="pluginError && !isHttpProtocol"
|
||||
:description="t('apiTestDebug.noPlugin')"
|
||||
class="h-[200px] items-center justify-center"
|
||||
>
|
||||
<template #image>
|
||||
<MsIcon type="icon-icon_plugin_outlined" size="48" />
|
||||
</template>
|
||||
</a-empty>
|
||||
<div v-show="!pluginError || isHttpProtocol" class="flex h-full flex-col">
|
||||
<div class="flex flex-wrap items-center justify-between gap-[12px] px-[18px] pt-[8px]">
|
||||
<div class="flex flex-1 items-center gap-[16px]">
|
||||
<a-select
|
||||
v-if="requestVModel.isNew"
|
||||
v-model:model-value="requestVModel.protocol"
|
||||
:loading="protocolLoading"
|
||||
:disabled="_stepType.isQuoteApi || props.step?.isQuoteScenarioStep"
|
||||
class="w-[90px]"
|
||||
<div v-show="!isShowEditStepNameInput" class="ml-auto flex items-center gap-[16px]">
|
||||
<div
|
||||
v-if="!props.step || props.step?.stepType === ScenarioStepType.CUSTOM_REQUEST"
|
||||
class="customApiDrawer-title-right flex items-center gap-[16px]"
|
||||
>
|
||||
<a-tooltip
|
||||
v-for="item of protocolOptions"
|
||||
:key="item.value as string"
|
||||
:content="item.label"
|
||||
:mouse-enter-delay="300"
|
||||
<a-tooltip :content="appStore.currentEnvConfig?.name" :disabled="!appStore.currentEnvConfig?.name">
|
||||
<div class="one-line-text max-w-[250px] text-[14px] font-normal text-[var(--color-text-4)]">
|
||||
{{ t('apiScenario.env', { name: appStore.currentEnvConfig?.name }) }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-select
|
||||
v-model:model-value="requestVModel.customizeRequestEnvEnable"
|
||||
class="w-[150px]"
|
||||
:disabled="props.step?.isQuoteScenarioStep"
|
||||
@change="handleUseEnvChange"
|
||||
>
|
||||
<a-option :value="item.value">
|
||||
{{ item.label }}
|
||||
</a-option>
|
||||
</a-tooltip>
|
||||
</a-select>
|
||||
<div v-else class="flex items-center gap-[4px]">
|
||||
<apiMethodName
|
||||
:method="(requestVModel.protocol as RequestMethods)"
|
||||
tag-background-color="rgb(var(--link-7))"
|
||||
tag-text-color="white"
|
||||
is-tag
|
||||
class="flex items-center"
|
||||
/>
|
||||
<a-tooltip v-if="!isHttpProtocol" :content="requestVModel.name" :mouse-enter-delay="500">
|
||||
<div class="one-line-text max-w-[350px]"> {{ requestVModel.name }}</div>
|
||||
</a-tooltip>
|
||||
<template #prefix>
|
||||
<div> {{ t('project.environmental.env') }} </div>
|
||||
</template>
|
||||
<a-option :value="true">{{ t('common.quote') }}</a-option>
|
||||
<a-option :value="false">{{ t('common.notQuote') }}</a-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<a-input-group v-if="isHttpProtocol" class="flex-1">
|
||||
<apiMethodSelect
|
||||
v-model:model-value="requestVModel.method"
|
||||
class="w-[140px]"
|
||||
:disabled="_stepType.isQuoteApi || props.step?.isQuoteScenarioStep"
|
||||
@change="handleActiveDebugChange"
|
||||
<div
|
||||
v-if="props.step && !props.step.isQuoteScenarioStep"
|
||||
class="right-operation-button-icon ml-auto flex items-center"
|
||||
>
|
||||
<replaceButton
|
||||
v-if="props.step.resourceId && props.step?.stepType !== ScenarioStepType.CUSTOM_REQUEST"
|
||||
:steps="props.steps"
|
||||
:step="props.step"
|
||||
:resource-id="props.step.resourceId"
|
||||
:scenario-id="scenarioId"
|
||||
@replace="handleReplace"
|
||||
/>
|
||||
<a-input
|
||||
v-model:model-value="requestVModel.url"
|
||||
:max-length="255"
|
||||
:placeholder="showEnvPrefix ? t('apiScenario.pleaseInputUrl') : t('apiTestDebug.urlPlaceholder')"
|
||||
allow-clear
|
||||
class="hover:z-10"
|
||||
:style="isUrlError ? 'border: 1px solid rgb(var(--danger-6);z-index: 10' : ''"
|
||||
:disabled="_stepType.isQuoteApi || props.step?.isQuoteScenarioStep"
|
||||
@input="() => (isUrlError = false)"
|
||||
@change="handleUrlChange"
|
||||
>
|
||||
<template v-if="showEnvPrefix" #prefix>
|
||||
{{ (appStore.currentEnvConfig as EnvConfig)?.httpConfig.find((e) => e.type === 'NONE')?.url }}
|
||||
</template>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
<MsButton type="icon" status="secondary" class="mr-4" @click="emit('deleteStep')">
|
||||
<MsIcon type="icon-icon_delete-trash_outlined1" />
|
||||
{{ t('common.delete') }}
|
||||
</MsButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-permission="[props.permissionMap?.execute]">
|
||||
<template v-if="hasLocalExec">
|
||||
<a-dropdown-button
|
||||
v-if="!requestVModel.executeLoading"
|
||||
:disabled="requestVModel.executeLoading || (isHttpProtocol && !requestVModel.url)"
|
||||
class="exec-btn"
|
||||
@click="() => execute(isPriorityLocalExec ? 'localExec' : 'serverExec')"
|
||||
@select="execute"
|
||||
</template>
|
||||
<a-empty
|
||||
v-if="pluginError && !isHttpProtocol"
|
||||
:description="t('apiTestDebug.noPlugin')"
|
||||
class="h-[200px] items-center justify-center"
|
||||
>
|
||||
<template #image>
|
||||
<MsIcon type="icon-icon_plugin_outlined" size="48" />
|
||||
</template>
|
||||
</a-empty>
|
||||
<div v-show="!pluginError || isHttpProtocol" class="flex h-full flex-col">
|
||||
<div class="flex flex-wrap items-center justify-between gap-[12px] px-[18px] pt-[8px]">
|
||||
<div class="flex flex-1 items-center gap-[16px]">
|
||||
<a-select
|
||||
v-if="requestVModel.isNew"
|
||||
v-model:model-value="requestVModel.protocol"
|
||||
:loading="protocolLoading"
|
||||
:disabled="_stepType.isQuoteApi || props.step?.isQuoteScenarioStep"
|
||||
class="w-[90px]"
|
||||
>
|
||||
{{ isPriorityLocalExec ? t('apiTestDebug.localExec') : t('apiTestDebug.serverExec') }}
|
||||
<template #icon>
|
||||
<icon-down />
|
||||
</template>
|
||||
<template #content>
|
||||
<a-doption :value="isPriorityLocalExec ? 'serverExec' : 'localExec'">
|
||||
{{ isPriorityLocalExec ? t('apiTestDebug.serverExec') : t('apiTestDebug.localExec') }}
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown-button>
|
||||
<a-tooltip
|
||||
v-for="item of protocolOptions"
|
||||
:key="item.value as string"
|
||||
:content="item.label"
|
||||
:mouse-enter-delay="300"
|
||||
>
|
||||
<a-option :value="item.value">
|
||||
{{ item.label }}
|
||||
</a-option>
|
||||
</a-tooltip>
|
||||
</a-select>
|
||||
<div v-else class="flex items-center gap-[4px]">
|
||||
<apiMethodName
|
||||
:method="(requestVModel.protocol as RequestMethods)"
|
||||
tag-background-color="rgb(var(--link-7))"
|
||||
tag-text-color="white"
|
||||
is-tag
|
||||
class="flex items-center"
|
||||
/>
|
||||
<a-tooltip v-if="!isHttpProtocol" :content="requestVModel.name" :mouse-enter-delay="500">
|
||||
<div class="one-line-text max-w-[350px]"> {{ requestVModel.name }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input-group v-if="isHttpProtocol" class="flex-1">
|
||||
<apiMethodSelect
|
||||
v-model:model-value="requestVModel.method"
|
||||
class="w-[140px]"
|
||||
:disabled="_stepType.isQuoteApi || props.step?.isQuoteScenarioStep"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<a-input
|
||||
v-model:model-value="requestVModel.url"
|
||||
:max-length="255"
|
||||
:placeholder="showEnvPrefix ? t('apiScenario.pleaseInputUrl') : t('apiTestDebug.urlPlaceholder')"
|
||||
allow-clear
|
||||
class="hover:z-10"
|
||||
:style="isUrlError ? 'border: 1px solid rgb(var(--danger-6);z-index: 10' : ''"
|
||||
:disabled="_stepType.isQuoteApi || props.step?.isQuoteScenarioStep"
|
||||
@input="() => (isUrlError = false)"
|
||||
@change="handleUrlChange"
|
||||
>
|
||||
<template v-if="showEnvPrefix" #prefix>
|
||||
{{ (appStore.currentEnvConfig as EnvConfig)?.httpConfig.find((e) => e.type === 'NONE')?.url }}
|
||||
</template>
|
||||
<template #suffix>
|
||||
<MsIcon
|
||||
type="icon-icon_curl"
|
||||
:size="18"
|
||||
class="cursor-pointer hover:text-[rgb(var(--primary-5))]"
|
||||
@click="importDialogVisible = true"
|
||||
/>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-input-group>
|
||||
</div>
|
||||
<div v-permission="[props.permissionMap?.execute]">
|
||||
<template v-if="hasLocalExec">
|
||||
<a-dropdown-button
|
||||
v-if="!requestVModel.executeLoading"
|
||||
:disabled="requestVModel.executeLoading || (isHttpProtocol && !requestVModel.url)"
|
||||
class="exec-btn"
|
||||
@click="() => execute(isPriorityLocalExec ? 'localExec' : 'serverExec')"
|
||||
@select="execute"
|
||||
>
|
||||
{{ isPriorityLocalExec ? t('apiTestDebug.localExec') : t('apiTestDebug.serverExec') }}
|
||||
<template #icon>
|
||||
<icon-down />
|
||||
</template>
|
||||
<template #content>
|
||||
<a-doption :value="isPriorityLocalExec ? 'serverExec' : 'localExec'">
|
||||
{{ isPriorityLocalExec ? t('apiTestDebug.serverExec') : t('apiTestDebug.localExec') }}
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown-button>
|
||||
<a-button v-else type="primary" class="mr-[12px]" @click="stopDebug">
|
||||
{{ t('common.stop') }}
|
||||
</a-button>
|
||||
</template>
|
||||
<a-button
|
||||
v-else-if="!requestVModel.executeLoading"
|
||||
class="mr-[12px]"
|
||||
type="primary"
|
||||
@click="() => execute('serverExec')"
|
||||
>
|
||||
{{ t('apiTestDebug.serverExec') }}
|
||||
</a-button>
|
||||
<a-button v-else type="primary" class="mr-[12px]" @click="stopDebug">
|
||||
{{ t('common.stop') }}
|
||||
</a-button>
|
||||
</template>
|
||||
<a-button
|
||||
v-else-if="!requestVModel.executeLoading"
|
||||
class="mr-[12px]"
|
||||
type="primary"
|
||||
@click="() => execute('serverExec')"
|
||||
>
|
||||
{{ t('apiTestDebug.serverExec') }}
|
||||
</a-button>
|
||||
<a-button v-else type="primary" class="mr-[12px]" @click="stopDebug">
|
||||
{{ t('common.stop') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="request-tab-and-response flex-1">
|
||||
<div class="px-[18px]">
|
||||
<a-input
|
||||
v-if="props.step?.stepType && _stepType.isQuoteApi && isHttpProtocol"
|
||||
v-model:model-value="requestVModel.name"
|
||||
:max-length="255"
|
||||
:placeholder="t('apiTestManagement.apiNamePlaceholder')"
|
||||
:disabled="!isEditableApi"
|
||||
allow-clear
|
||||
class="my-[8px]"
|
||||
<div class="request-tab-and-response flex-1">
|
||||
<div class="px-[18px]">
|
||||
<a-input
|
||||
v-if="props.step?.stepType && _stepType.isQuoteApi && isHttpProtocol"
|
||||
v-model:model-value="requestVModel.name"
|
||||
:max-length="255"
|
||||
:placeholder="t('apiTestManagement.apiNamePlaceholder')"
|
||||
:disabled="!isEditableApi"
|
||||
allow-clear
|
||||
class="my-[8px]"
|
||||
/>
|
||||
</div>
|
||||
<MsTab
|
||||
v-if="requestVModel.activeTab"
|
||||
v-model:active-key="requestVModel.activeTab"
|
||||
:content-tab-list="contentTabList"
|
||||
:get-text-func="getTabBadge"
|
||||
class="sticky-content no-content relative top-0 mx-[16px] border-b"
|
||||
@tab-click="requestTabClick"
|
||||
/>
|
||||
</div>
|
||||
<MsTab
|
||||
v-if="requestVModel.activeTab"
|
||||
v-model:active-key="requestVModel.activeTab"
|
||||
:content-tab-list="contentTabList"
|
||||
:get-text-func="getTabBadge"
|
||||
class="sticky-content no-content relative top-0 mx-[16px] border-b"
|
||||
@tab-click="requestTabClick"
|
||||
/>
|
||||
<div :class="`request-content-and-response ${activeLayout}`">
|
||||
<a-spin class="request block h-full w-full" :loading="requestVModel.executeLoading || loading">
|
||||
<div class="request-tab-pane flex flex-col p-[16px]">
|
||||
<a-spin
|
||||
v-show="requestVModel.activeTab === RequestComposition.PLUGIN"
|
||||
:loading="pluginLoading"
|
||||
class="min-h-[100px] w-full"
|
||||
>
|
||||
<MsFormCreate
|
||||
v-model:api="fApi"
|
||||
:rule="currentPluginScript"
|
||||
:option="currentPluginOptions"
|
||||
@change="
|
||||
() => {
|
||||
if (isInitPluginForm) {
|
||||
handlePluginFormChange();
|
||||
<div :class="`request-content-and-response ${activeLayout}`">
|
||||
<a-spin class="request block h-full w-full" :loading="requestVModel.executeLoading || loading">
|
||||
<div class="request-tab-pane flex flex-col p-[16px]">
|
||||
<a-spin
|
||||
v-show="requestVModel.activeTab === RequestComposition.PLUGIN"
|
||||
:loading="pluginLoading"
|
||||
class="min-h-[100px] w-full"
|
||||
>
|
||||
<MsFormCreate
|
||||
v-model:api="fApi"
|
||||
:rule="currentPluginScript"
|
||||
:option="currentPluginOptions"
|
||||
@change="
|
||||
() => {
|
||||
if (isInitPluginForm) {
|
||||
handlePluginFormChange();
|
||||
}
|
||||
}
|
||||
}
|
||||
"
|
||||
"
|
||||
/>
|
||||
</a-spin>
|
||||
<httpHeader
|
||||
v-if="requestVModel.activeTab === RequestComposition.HEADER"
|
||||
v-model:params="requestVModel.headers"
|
||||
:disabled-param-value="!isEditableApi && !isEditableParamValue"
|
||||
:disabled-except-param="!isEditableApi"
|
||||
:layout="activeLayout"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
</a-spin>
|
||||
<httpHeader
|
||||
v-if="requestVModel.activeTab === RequestComposition.HEADER"
|
||||
v-model:params="requestVModel.headers"
|
||||
:disabled-param-value="!isEditableApi && !isEditableParamValue"
|
||||
:disabled-except-param="!isEditableApi"
|
||||
:layout="activeLayout"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<httpBody
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.BODY"
|
||||
v-model:params="requestVModel.body"
|
||||
:disabled-param-value="!isEditableApi && !isEditableParamValue"
|
||||
:disabled-except-param="!isEditableApi"
|
||||
:disabled-body-type="!isEditableApi"
|
||||
:upload-temp-file-api="uploadTempFile"
|
||||
:file-save-as-source-id="props.step?.id"
|
||||
:file-save-as-api="stepTransferFile"
|
||||
:file-module-options-api="getTransferOptions"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<httpQuery
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.QUERY"
|
||||
v-model:params="requestVModel.query"
|
||||
:disabled-param-value="!isEditableApi && !isEditableParamValue"
|
||||
:disabled-except-param="!isEditableApi"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<httpRest
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.REST"
|
||||
v-model:params="requestVModel.rest"
|
||||
:disabled-param-value="!isEditableApi && !isEditableParamValue"
|
||||
:disabled-except-param="!isEditableApi"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<precondition
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.PRECONDITION"
|
||||
v-model:config="requestVModel.children[0].preProcessorConfig"
|
||||
is-definition
|
||||
:disabled="!isEditableApi"
|
||||
:tip-content="t('apiScenario.openGlobalPreConditionTip')"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<postcondition
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.POST_CONDITION"
|
||||
v-model:config="requestVModel.children[0].postProcessorConfig"
|
||||
:response="responseResultBody"
|
||||
:disabled="!isEditableApi"
|
||||
:tip-content="t('apiScenario.openGlobalPostConditionTip')"
|
||||
is-definition
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<assertion
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.ASSERTION"
|
||||
v-model:params="requestVModel.children[0].assertionConfig.assertions"
|
||||
:response="responseResultBody"
|
||||
is-definition
|
||||
:disabled="!isEditableApi"
|
||||
:assertion-config="requestVModel.children[0].assertionConfig"
|
||||
:show-extraction="true"
|
||||
/>
|
||||
<auth
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.AUTH"
|
||||
v-model:params="requestVModel.authConfig"
|
||||
:disabled="!isEditableApi"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<setting
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.SETTING"
|
||||
v-model:params="requestVModel.otherConfig"
|
||||
:disabled="!isEditableApi"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
</div>
|
||||
</a-spin>
|
||||
<httpBody
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.BODY"
|
||||
v-model:params="requestVModel.body"
|
||||
:disabled-param-value="!isEditableApi && !isEditableParamValue"
|
||||
:disabled-except-param="!isEditableApi"
|
||||
:disabled-body-type="!isEditableApi"
|
||||
:upload-temp-file-api="uploadTempFile"
|
||||
:file-save-as-source-id="props.step?.id"
|
||||
:file-save-as-api="stepTransferFile"
|
||||
:file-module-options-api="getTransferOptions"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<httpQuery
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.QUERY"
|
||||
v-model:params="requestVModel.query"
|
||||
:disabled-param-value="!isEditableApi && !isEditableParamValue"
|
||||
:disabled-except-param="!isEditableApi"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<httpRest
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.REST"
|
||||
v-model:params="requestVModel.rest"
|
||||
:disabled-param-value="!isEditableApi && !isEditableParamValue"
|
||||
:disabled-except-param="!isEditableApi"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<precondition
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.PRECONDITION"
|
||||
v-model:config="requestVModel.children[0].preProcessorConfig"
|
||||
is-definition
|
||||
:disabled="!isEditableApi"
|
||||
:tip-content="t('apiScenario.openGlobalPreConditionTip')"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<postcondition
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.POST_CONDITION"
|
||||
v-model:config="requestVModel.children[0].postProcessorConfig"
|
||||
:response="responseResultBody"
|
||||
:disabled="!isEditableApi"
|
||||
:tip-content="t('apiScenario.openGlobalPostConditionTip')"
|
||||
is-definition
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<assertion
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.ASSERTION"
|
||||
v-model:params="requestVModel.children[0].assertionConfig.assertions"
|
||||
:response="responseResultBody"
|
||||
is-definition
|
||||
:disabled="!isEditableApi"
|
||||
:assertion-config="requestVModel.children[0].assertionConfig"
|
||||
:show-extraction="true"
|
||||
/>
|
||||
<auth
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.AUTH"
|
||||
v-model:params="requestVModel.authConfig"
|
||||
:disabled="!isEditableApi"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
<setting
|
||||
v-else-if="requestVModel.activeTab === RequestComposition.SETTING"
|
||||
v-model:params="requestVModel.otherConfig"
|
||||
:disabled="!isEditableApi"
|
||||
@change="handleActiveDebugChange"
|
||||
/>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<response
|
||||
v-if="visible"
|
||||
v-show="showResponse"
|
||||
ref="responseRef"
|
||||
v-model:active-layout="activeLayout"
|
||||
v-model:active-tab="requestVModel.responseActiveTab"
|
||||
class="response"
|
||||
:is-http-protocol="isHttpProtocol"
|
||||
:is-priority-local-exec="isPriorityLocalExec"
|
||||
:request-url="requestVModel.url"
|
||||
:is-expanded="isVerticalExpanded"
|
||||
:request-result="currentResponse"
|
||||
:console="currentResponse?.console"
|
||||
:is-edit="false"
|
||||
is-definition
|
||||
hide-layout-switch
|
||||
:loading="requestVModel.executeLoading || loading"
|
||||
@execute="execute"
|
||||
>
|
||||
<template #titleRight>
|
||||
<loopPagination v-model:current-loop="currentLoop" :loop-total="loopTotal" />
|
||||
</template>
|
||||
</response>
|
||||
<response
|
||||
v-if="visible"
|
||||
v-show="showResponse"
|
||||
ref="responseRef"
|
||||
v-model:active-layout="activeLayout"
|
||||
v-model:active-tab="requestVModel.responseActiveTab"
|
||||
class="response"
|
||||
:is-http-protocol="isHttpProtocol"
|
||||
:is-priority-local-exec="isPriorityLocalExec"
|
||||
:request-url="requestVModel.url"
|
||||
:is-expanded="isVerticalExpanded"
|
||||
:request-result="currentResponse"
|
||||
:console="currentResponse?.console"
|
||||
:is-edit="false"
|
||||
is-definition
|
||||
hide-layout-switch
|
||||
:loading="requestVModel.executeLoading || loading"
|
||||
@execute="execute"
|
||||
>
|
||||
<template #titleRight>
|
||||
<loopPagination v-model:current-loop="currentLoop" :loop-total="loopTotal" />
|
||||
</template>
|
||||
</response>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <addDependencyDrawer v-model:visible="showAddDependencyDrawer" :mode="addDependencyMode" /> -->
|
||||
</MsDrawer>
|
||||
<!-- <addDependencyDrawer v-model:visible="showAddDependencyDrawer" :mode="addDependencyMode" /> -->
|
||||
</MsDrawer>
|
||||
<importCurlDialog v-model:visible="importDialogVisible" @done="handleImportCurlDone" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -356,6 +366,7 @@
|
||||
import stepTypeVue from './stepType/stepType.vue';
|
||||
import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
|
||||
import apiMethodSelect from '@/views/api-test/components/apiMethodSelect.vue';
|
||||
import importCurlDialog from '@/views/api-test/components/importCurlDialog.vue';
|
||||
import auth from '@/views/api-test/components/requestComposition/auth.vue';
|
||||
import { TabErrorMessage } from '@/views/api-test/components/requestComposition/index.vue';
|
||||
import postcondition from '@/views/api-test/components/requestComposition/postcondition.vue';
|
||||
@ -372,6 +383,7 @@
|
||||
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
|
||||
|
||||
import {
|
||||
CurlParseResult,
|
||||
EnableKeyValueParam,
|
||||
ExecuteApiRequestFullParams,
|
||||
ExecuteBody,
|
||||
@ -1268,6 +1280,27 @@
|
||||
});
|
||||
}
|
||||
|
||||
const importDialogVisible = ref(false);
|
||||
function handleImportCurlDone(res: CurlParseResult) {
|
||||
const { url, method, headers, queryParams } = res;
|
||||
requestVModel.value.url = url;
|
||||
requestVModel.value.method = method;
|
||||
requestVModel.value.headers = Object.keys(headers).map((e) => ({
|
||||
...defaultHeaderParamsItem,
|
||||
key: e,
|
||||
value: headers[e],
|
||||
}));
|
||||
requestVModel.value.query = Object.keys(queryParams).map((e) => ({
|
||||
...defaultRequestParamsItem,
|
||||
key: e,
|
||||
value: queryParams[e],
|
||||
}));
|
||||
importDialogVisible.value = false;
|
||||
nextTick(() => {
|
||||
handleActiveDebugChange();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.request?.uniqueId,
|
||||
() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user