test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(接口场景): 引用API请求参数不能改&引用CASE都不能改&删除

This commit is contained in:
teukkk 2024-03-24 14:10:03 +08:00 committed by Craftsman
parent a6000793be
commit 960f1e3505
10 changed files with 168 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/business/ms-params-input/index.vue
View File

@ -208,6 +208,7 @@
<a-auto-complete
ref="autoCompleteRef"
v-model:model-value="innerValue"
:disabled="props.disabled"
:data="autoCompleteParams"
:placeholder="t('ms.paramsInput.placeholder', { at: '@' })"
:class="`ms-params-input ${paramSettingVisible ? 'ms-params-input--focus' : ''}`"
@ -219,7 +220,12 @@
@select="selectAutoComplete"
>
<template #suffix>
<MsIcon type="icon-icon_mock" class="ms-params-input-suffix-icon" @click.stop="openParamSetting" />
<MsIcon
v-if="!props.disabled"
type="icon-icon_mock"
class="ms-params-input-suffix-icon"
@click.stop="openParamSetting"
/>
</template>
<template #option="{ data }">
<div class="w-[350px]">
@ -263,6 +269,7 @@
const props = defineProps<{
value: string;
disabled?: boolean;
size?: 'small' | 'large' | 'medium' | 'mini';
}>();
const emit = defineEmits<{
@ -338,6 +345,7 @@
onMounted(() => {
useEventListener(autoCompleteRef.value?.inputRef, 'dblclick', () => {
if (props.disabled) return;
emit('dblclick');
});
const autoCompleteInput = (autoCompleteRef.value?.inputRef as any)?.$el.querySelector('.arco-input');

68
frontend/src/views/api-test/components/paramTable.vue
View File

@ -37,7 +37,7 @@
<template #documentMustIncludeTitle>
<div class="flex flex-row items-center gap-[4px]">
<a-checkbox
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:model-value="mustIncludeAllChecked"
:indeterminate="mustIncludeIndeterminate"
@change="(v) => handleMustIncludeChange(v as boolean)"
@ -48,7 +48,7 @@
<template #documentTypeCheckingTitle>
<div class="flex flex-row items-center gap-[4px]">
<a-checkbox
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:model-value="typeCheckingAllChecked"
:indeterminate="typeCheckingIndeterminate"
@change="(v) => handleTypeCheckingChange(v as boolean)"
@ -75,7 +75,7 @@
<a-auto-complete
v-if="columnConfig.inputType === 'autoComplete'"
v-model:model-value="record[columnConfig.dataIndex as string]"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:data="columnConfig.autoCompleteParams?.filter((e) => e.isShow === true)"
class="ms-form-table-input"
:trigger-props="{ contentClass: 'ms-form-table-input-trigger' }"
@ -99,7 +99,7 @@
<a-input
v-else
v-model:model-value="record[columnConfig.dataIndex as string]"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:placeholder="t('apiTestDebug.paramNamePlaceholder')"
class="ms-form-table-input"
:max-length="255"
@ -115,7 +115,7 @@
:content="t(record.required ? 'apiTestDebug.paramRequired' : 'apiTestDebug.paramNotRequired')"
>
<MsButton
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
type="icon"
:class="[
record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
@ -129,7 +129,7 @@
</a-tooltip>
<a-select
v-model:model-value="record.paramType"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:options="columnConfig.typeOptions || []"
class="ms-form-table-input w-full"
size="mini"
@ -140,7 +140,7 @@
<template #extractType="{ record, columnConfig, rowIndex }">
<a-select
v-model:model-value="record.extractType"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:options="columnConfig.typeOptions || []"
class="ms-form-table-input w-[110px]"
size="mini"
@ -151,7 +151,7 @@
<template #variableType="{ record, columnConfig, rowIndex }">
<a-select
v-model:model-value="record.variableType"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:options="columnConfig.typeOptions || []"
class="ms-form-table-input w-[110px]"
size="mini"
@ -162,7 +162,7 @@
<template #extractScope="{ record, columnConfig, rowIndex }">
<a-select
v-model:model-value="record.extractScope"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:options="columnConfig.typeOptions || []"
class="ms-form-table-input w-[180px]"
size="mini"
@ -191,6 +191,7 @@
</template>
<a-input
v-model:model-value="record.value"
:disabled="props.disabledParamValue"
class="ms-form-table-input"
:placeholder="t('apiTestDebug.commonPlaceholder')"
:max-length="255"
@ -201,7 +202,7 @@
<MsAddAttachment
v-else-if="record.paramType === RequestParamsType.FILE"
v-model:file-list="record.files"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
mode="input"
:multiple="true"
:fields="{
@ -220,7 +221,7 @@
<MsParamsInput
v-else
v-model:value="record.value"
:disabled="props.disabled"
:disabled="props.disabledParamValue"
size="mini"
@change="() => addTableLine(rowIndex)"
@dblclick="quickInputParams(record)"
@ -232,7 +233,7 @@
<div class="flex items-center justify-between">
<a-input-number
v-model:model-value="record.minLength"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:placeholder="t('apiTestDebug.paramMin')"
:min="0"
class="ms-form-table-input ms-form-table-input-number"
@ -243,7 +244,7 @@
<div class="mx-[4px]">{{ t('common.to') }}</div>
<a-input-number
v-model:model-value="record.maxLength"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:placeholder="t('apiTestDebug.paramMax')"
:min="0"
class="ms-form-table-input"
@ -270,7 +271,7 @@
</template>
<MsTagsInput
v-model:model-value="record[columnConfig.dataIndex as string]"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:max-tag-count="2"
input-class="ms-form-table-input"
size="mini"
@ -283,7 +284,7 @@
<template #description="{ record, columnConfig, rowIndex }">
<paramDescInput
v-model:desc="record[columnConfig.dataIndex as string]"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
size="mini"
@input="() => addTableLine(rowIndex)"
@dblclick="quickInputDesc(record)"
@ -294,7 +295,7 @@
<template #encode="{ record, rowIndex }">
<a-switch
v-model:model-value="record.encode"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
size="small"
class="ms-form-table-input-switch"
type="line"
@ -305,7 +306,7 @@
<template #mustContain="{ record, columnConfig }">
<a-checkbox
v-model:model-value="record[columnConfig.dataIndex as string]"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
@change="handleMustContainColChange(false)"
/>
</template>
@ -313,7 +314,7 @@
<template #typeChecking="{ record, columnConfig }">
<a-checkbox
v-model:model-value="record[columnConfig.dataIndex as string]"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
@change="handleTypeCheckingColChange(false)"
/>
</template>
@ -321,7 +322,7 @@
<template #header="{ record, columnConfig, rowIndex }">
<a-select
v-model="record.header"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
class="ms-form-table-input"
size="mini"
@change="() => addTableLine(rowIndex)"
@ -331,7 +332,12 @@
</template>
<!-- 匹配条件 -->
<template #condition="{ record, columnConfig }">
<a-select v-model="record.condition" :disabled="props.disabled" size="mini" class="ms-form-table-input">
<a-select
v-model="record.condition"
:disabled="props.disabledExceptParam"
size="mini"
class="ms-form-table-input"
>
<a-option v-for="item in columnConfig.options" :key="item.value" :value="item.value">{{
t(item.label)
}}</a-option>
@ -349,20 +355,25 @@
record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
'!mr-[4px] !p-[4px]',
]"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
size="mini"
@click="toggleRequired(record, rowIndex)"
>
<div>*</div>
</MsButton>
</a-tooltip>
<a-input v-model="record.expectedValue" :disabled="props.disabled" size="mini" class="ms-form-table-input" />
<a-input
v-model="record.expectedValue"
:disabled="props.disabledExceptParam"
size="mini"
class="ms-form-table-input"
/>
</template>
<!-- 项目选择 -->
<template #project="{ record, rowIndex }">
<a-select
v-model:model-value="record.projectId"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
class="ms-form-table-input w-max-[200px] focus-within:!bg-[var(--color-text-n8)] hover:!bg-[var(--color-text-n8)]"
:bordered="false"
allow-search
@ -390,7 +401,7 @@
v-if="record.projectId"
v-model:model-value="record.environmentId"
v-model:input-value="record.environmentInput"
:disabled="props.disabled || !record.projectId"
:disabled="props.disabledExceptParam || !record.projectId"
:options="[]"
mode="remote"
value-key="id"
@ -421,7 +432,7 @@
<a-switch
v-if="columnConfig.hasDisable"
v-model="record.enable"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
size="small"
type="line"
class="mr-[8px]"
@ -442,7 +453,7 @@
<div class="mb-[8px] text-[var(--color-text-1)]">Content-Type</div>
<a-select
v-model:model-value="record.contentType"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:options="Object.values(RequestContentTypeEnum).map((e) => ({ label: e, value: e }))"
allow-create
size="mini"
@ -578,7 +589,8 @@
selectable?: boolean;
showSetting?: boolean; // 是否显示列设置
tableKey?: TableKeyEnum; // 表格key showSetting为true时必传
disabled?: boolean; // 是否禁用
disabledParamValue?: boolean; // 参数值禁用
disabledExceptParam?: boolean; // 除了可以修改参数值其他都禁用
showSelectorAll?: boolean; // 是否显示全选
isSimpleSetting?: boolean; // 是否简单Column设置
response?: string; // 响应内容
@ -635,7 +647,7 @@
const paramsLength = computed(() => paramsData.value.length);
function deleteParam(record: Record<string, any>, rowIndex: number) {
if (props.disabled) return;
if (props.disabledExceptParam) return;
if (props.isTreeTable) {
emit('treeDelete', record);
return;

16
frontend/src/views/api-test/components/requestAndResponse.vue
View File

@ -30,7 +30,8 @@
v-if="requestVModel.activeTab === RequestComposition.HEADER"
v-model:params="requestVModel.headers"
:layout="activeLayout"
:disabled="props.disabledExceptParam"
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:second-box-height="secondBoxHeight"
@change="handleActiveDebugChange"
/>
@ -38,7 +39,8 @@
v-else-if="requestVModel.activeTab === RequestComposition.BODY"
v-model:params="requestVModel.body"
:layout="activeLayout"
:disabled="props.disabledExceptParam"
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:second-box-height="secondBoxHeight"
:upload-temp-file-api="props.uploadTempFileApi"
:file-save-as-source-id="props.fileSaveAsSourceId"
@ -50,7 +52,8 @@
v-else-if="requestVModel.activeTab === RequestComposition.QUERY"
v-model:params="requestVModel.query"
:layout="activeLayout"
:disabled="props.disabledExceptParam"
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:second-box-height="secondBoxHeight"
@change="handleActiveDebugChange"
/>
@ -58,7 +61,8 @@
v-else-if="requestVModel.activeTab === RequestComposition.REST"
v-model:params="requestVModel.rest"
:layout="activeLayout"
:disabled="props.disabledExceptParam"
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:second-box-height="secondBoxHeight"
@change="handleActiveDebugChange"
/>
@ -157,10 +161,10 @@
const props = defineProps<{
request?: RequestParam; // 请求参数集合
defaultParams?: RequestParam;
detailLoading?: boolean; // 详情加载状态
isPriorityLocalExec?: boolean; // 是否优先本地执行
disabledExceptParam?: boolean; // 除了可以修改参数值其他都只读
disabledParamValue?: boolean; // 参数值禁用
disabledExceptParam?: boolean; // 除了可以修改参数值其他都禁用
isShowCommonContentTabKey?: boolean; // 是否展示请求内容公共tabKey
uploadTempFileApi?: (...args) => Promise<any>; // 上传临时文件接口
fileSaveAsSourceId?: string | number; // 文件转存关联的资源id

17
frontend/src/views/api-test/components/requestComposition/body.vue
View File

@ -12,7 +12,7 @@
</a-radio-group>
<batchAddKeyVal
v-if="showParamTable"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:params="currentTableParams"
:default-param-item="defaultBodyParamsItem"
@apply="handleBatchParamApply"
@ -26,7 +26,8 @@
</div>
<paramTable
v-else-if="innerParams.bodyType === RequestBodyFormat.FORM_DATA"
:disabled="props.disabled"
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:params="currentTableParams"
:scroll="{ minWidth: 1160 }"
:columns="columns"
@ -42,7 +43,8 @@
/>
<paramTable
v-else-if="innerParams.bodyType === RequestBodyFormat.WWW_FORM"
:disabled="props.disabled"
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:params="currentTableParams"
:scroll="{ minWidth: 1160 }"
:columns="columns"
@ -56,13 +58,13 @@
<div class="mb-[16px] flex justify-between gap-[8px] bg-[var(--color-text-n9)] p-[12px]">
<a-input
v-model:model-value="innerParams.binaryBody.description"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:placeholder="t('common.desc')"
:max-length="255"
/>
<MsAddAttachment
v-model:file-list="fileList"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
mode="input"
:multiple="false"
:fields="{
@ -90,7 +92,7 @@
<div v-else class="flex h-[calc(100%-34px)]">
<MsCodeEditor
v-model:model-value="currentBodyCode"
:read-only="props.disabled"
:read-only="props.disabledExceptParam"
class="flex-1"
theme="vs"
height="100%"
@ -127,7 +129,8 @@
const props = defineProps<{
params: ExecuteBody;
layout: 'horizontal' | 'vertical';
disabled?: boolean;
disabledParamValue?: boolean; // 参数值禁用
disabledExceptParam?: boolean; // 除了可以修改参数值其他都禁用
secondBoxHeight: number;
uploadTempFileApi?: (file: File) => Promise<any>; // 上传临时文件接口
fileSaveAsSourceId?: string | number; // 文件转存关联的资源id

8
frontend/src/views/api-test/components/requestComposition/header.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="mb-[8px] flex items-center justify-between">
<batchAddKeyVal
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:params="innerParams"
:default-param-item="defaultHeaderParamsItem"
no-param-type
@ -10,7 +10,8 @@
</div>
<paramTable
v-model:params="innerParams"
:disabled="props.disabled"
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:columns="columns"
:height-used="heightUsed"
:scroll="scroll"
@ -37,7 +38,8 @@
params: EnableKeyValueParam[];
layout: 'horizontal' | 'vertical';
secondBoxHeight: number;
disabled?: boolean;
disabledParamValue?: boolean; // 参数值禁用
disabledExceptParam?: boolean; // 除了可以修改参数值其他都禁用
}>();
const emit = defineEmits<{
(e: 'update:selectedKeys', value: string[]): void;

8
frontend/src/views/api-test/components/requestComposition/query.vue
View File

@ -11,14 +11,15 @@
</div>
<batchAddKeyVal
:params="innerParams"
:disabled="props.disabled"
:disabled="props.disabledParamValue"
:default-param-item="defaultRequestParamsItem"
@apply="handleBatchParamApply"
/>
</div>
<paramTable
:params="innerParams"
:disabled="props.disabled"
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:columns="columns"
:height-used="heightUsed"
:scroll="{ minWidth: 1160 }"
@ -44,7 +45,8 @@
const props = defineProps<{
params: ExecuteRequestCommonParam[];
layout: 'horizontal' | 'vertical';
disabled?: boolean;
disabledParamValue?: boolean; // 参数值禁用
disabledExceptParam?: boolean; // 除了可以修改参数值其他都禁用
secondBoxHeight: number;
}>();
const emit = defineEmits<{

8
frontend/src/views/api-test/components/requestComposition/rest.vue
View File

@ -11,7 +11,7 @@
</div>
<batchAddKeyVal
:params="innerParams"
:disabled="props.disabled"
:disabled="props.disabledExceptParam"
:default-param-item="defaultRequestParamsItem"
@apply="handleBatchParamApply"
/>
@ -19,7 +19,8 @@
<paramTable
:params="innerParams"
:columns="columns"
:disabled="props.disabled"
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:height-used="heightUsed"
:scroll="{ minWidth: 1160 }"
:default-param-item="defaultRequestParamsItem"
@ -45,7 +46,8 @@
params: ExecuteRequestCommonParam[];
layout: 'horizontal' | 'vertical';
secondBoxHeight: number;
disabled?: boolean;
disabledParamValue?: boolean; // 参数值禁用
disabledExceptParam?: boolean; // 除了可以修改参数值其他都禁用
}>();
const emit = defineEmits<{
(e: 'update:params', value: any[]): void;

45
frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
View File

@ -117,7 +117,7 @@
v-model:model-value="requestVModel.name"
:max-length="255"
:placeholder="t('apiTestManagement.apiNamePlaceholder')"
disabled
:disabled="!isEditableApi"
allow-clear
class="mt-[8px]"
/>
@ -170,6 +170,7 @@
<httpHeader
v-if="requestVModel.activeTab === RequestComposition.HEADER"
v-model:params="requestVModel.headers"
:disabled-except-param="!isEditableApi"
:layout="activeLayout"
:second-box-height="secondBoxHeight"
@change="handleActiveDebugChange"
@ -178,6 +179,7 @@
v-else-if="requestVModel.activeTab === RequestComposition.BODY"
v-model:params="requestVModel.body"
:layout="activeLayout"
:disabled-except-param="!isEditableApi"
:second-box-height="secondBoxHeight"
:upload-temp-file-api="props.uploadTempFileApi"
:file-save-as-source-id="props.fileSaveAsSourceId"
@ -189,6 +191,7 @@
v-else-if="requestVModel.activeTab === RequestComposition.QUERY"
v-model:params="requestVModel.query"
:layout="activeLayout"
:disabled-except-param="!isEditableApi"
:second-box-height="secondBoxHeight"
@change="handleActiveDebugChange"
/>
@ -196,6 +199,7 @@
v-else-if="requestVModel.activeTab === RequestComposition.REST"
v-model:params="requestVModel.rest"
:layout="activeLayout"
:disabled-except-param="!isEditableApi"
:second-box-height="secondBoxHeight"
@change="handleActiveDebugChange"
/>
@ -203,6 +207,7 @@
v-else-if="requestVModel.activeTab === RequestComposition.PRECONDITION"
v-model:config="requestVModel.children[0].preProcessorConfig"
:is-definition="false"
:disabled="!isEditableApi"
@change="handleActiveDebugChange"
/>
<postcondition
@ -210,6 +215,7 @@
v-model:config="requestVModel.children[0].postProcessorConfig"
:response="requestVModel.response?.requestResults[0]?.responseResult.body"
:layout="activeLayout"
:disabled="!isEditableApi"
:second-box-height="secondBoxHeight"
:is-definition="false"
@change="handleActiveDebugChange"
@ -218,16 +224,19 @@
v-else-if="requestVModel.activeTab === RequestComposition.ASSERTION"
v-model:params="requestVModel.children[0].assertionConfig.assertions"
:is-definition="false"
:disabled="!isEditableApi"
:assertion-config="requestVModel.children[0].assertionConfig"
/>
<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>
@ -1011,7 +1020,7 @@
function handleClose() {
// 关闭时若不是创建行为则是编辑行为，需要触发 applyStep
if (!requestVModel.value.isNew) {
emit('applyStep', requestVModel.value);
emit('applyStep', { ...requestVModel.value, ...makeRequestParams() });
}
}
@ -1065,8 +1074,38 @@
isCopyApiNeedInit.value
// 引用接口时，需要初始化引用接口的详情；复制只在第一次初始化的时候需要加载后台数据(request.request是复制请求时列表参数字段request会为 null，以此判断释放第一次初始化)
) {
initQuoteApiDetail();
await initQuoteApiDetail();
}
// TODO: 类型报错
// if (
// props.requestType === ScenarioStepType.QUOTE_API &&
// props.request.request &&
// requestVModel.value.request
// ) {
// // 初始化引用的详情后，需要要把外面传入的数据的请求头、请求体、query、rest里面的参数值写入
// ['headers', 'query', 'rest'].forEach((type) => {
// props.request.request[type]?.forEach((item) => {
// const index = requestVModel.value.request[type]?.findIndex((itemReq) => itemReq.key === item.key);
// if (index > -1) {
// requestVModel.value.request[type][index].value = item.value;
// requestVModel.value[type] = requestVModel.value.request[type];
// }
// });
// });
// if (props.request.request.body.bodyType !== 'NONE') {
// ['formDataBody', 'wwwFormBody'].forEach((type) => {
// props.request.request.body[type].formValues.forEach((item) => {
// const index = requestVModel.value.request.body[type].formValues.findIndex(
// (itemReq) => itemReq.key === item.key
// );
// if (index > -1) {
// requestVModel.value.request.body[type]?.formValues[index].value = item.value;
// requestVModel.value.body = requestVModel.value.request?.body;
// }
// });
// });
// }
// }
}
await initProtocolList();
if (props.request) {

54
frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
View File

@ -10,11 +10,12 @@
@close="handleClose"
>
<template #title>
<stepType v-if="props.activeStep?.type" :type="props.activeStep?.type" class="mr-[4px]" />
<stepType v-if="activeStep?.type" :type="activeStep?.type" class="mr-[4px]" />
<a-input
v-if="activeStep?.name"
v-show="isShowEditStepNameInput"
ref="stepNameInputRef"
v-model:model-value="stepName"
v-model:model-value="activeStep.name"
class="flex-1"
:placeholder="t('apiScenario.pleaseInputStepName')"
:max-length="255"
@ -24,22 +25,17 @@
/>
<div v-show="!isShowEditStepNameInput" class="flex flex-1 items-center justify-between">
<div class="flex items-center gap-[8px]">
<a-tooltip :content="stepName">
<span> {{ characterLimit(stepName) }}</span>
<a-tooltip :content="activeStep?.name">
<span> {{ characterLimit(activeStep?.name) }}</span>
</a-tooltip>
<MsIcon type="icon-icon_edit_outlined" class="edit-script-name-icon" @click="showEditScriptNameInput" />
</div>
<div class="right-operation-button-icon flex items-center">
<MsButton v-permission="['PROJECT_API_DEFINITION_CASE:READ+UPDATE']" type="icon" status="secondary">
<MsButton type="icon" status="secondary">
<MsIcon type="icon-icon_swich" />
{{ t('common.replace') }}
</MsButton>
<MsButton
v-permission="['PROJECT_API_DEFINITION_CASE:READ+UPDATE']"
class="mr-4"
type="icon"
status="secondary"
>
<MsButton class="mr-4" type="icon" status="secondary" @click="handleDelete">
<MsIcon type="icon-icon_delete-trash_outlined" />
{{ t('common.delete') }}
</MsButton>
@ -68,7 +64,7 @@
ref="requestAndResponseRef"
:detail-loading="loading"
:disabled-except-param="isQuote"
:default-params="defaultCaseParams"
:disabled-param-value="isQuote"
:request="requestVModel"
:is-priority-local-exec="isPriorityLocalExec"
:file-save-as-source-id="requestVModel.id"
@ -83,7 +79,7 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { InputInstance, Message } from '@arco-design/web-vue';
import { InputInstance } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash-es';
import MsButton from '@/components/pure/ms-button/index.vue';
@ -120,16 +116,23 @@
import { parseRequestBodyFiles } from '@/views/api-test/components/utils';
const props = defineProps<{
activeStep?: ScenarioStepItem;
request?: RequestParam; // 请求参数集合
}>();
const emit = defineEmits<{
(e: 'applyStep', request: RequestParam): void;
(e: 'deleteStep'): void;
}>();
const { t } = useI18n();
const visible = defineModel<boolean>('visible', { required: true });
const activeStep = defineModel<ScenarioStepItem>('activeStep', {
required: false,
});
const isCopyNeedInit = computed(
() => activeStep.value?.type === ScenarioStepType.COPY_CASE && props.request?.request === null
);
const isQuote = computed(() => activeStep.value?.type === ScenarioStepType.QUOTE_CASE);
const defaultCaseParams: RequestParam = {
id: `case-${Date.now()}`,
@ -198,16 +201,7 @@
postDependency: [], // 后置依赖
};
const isCopyNeedInit = computed(
() => props.activeStep?.type === ScenarioStepType.COPY_CASE && props.request?.request === null
);
const isQuote = computed(() => props.activeStep?.type === ScenarioStepType.QUOTE_CASE);
const stepName = ref(props.activeStep?.name);
watchEffect(() => {
stepName.value = props.activeStep?.name;
});
const requestVModel = ref<RequestParam>(cloneDeep(defaultCaseParams));
const requestVModel = ref<RequestParam>(props.request || cloneDeep(defaultCaseParams));
const executeRef = ref<InstanceType<typeof executeButton>>();
const requestAndResponseRef = ref<InstanceType<typeof requestAndResponse>>();
@ -234,8 +228,6 @@
});
}
function updateStepName() {
// TODO: 更新步骤名称接口
Message.success(t('common.updateSuccess'));
isShowEditStepNameInput.value = false;
}
@ -301,14 +293,20 @@
}
function handleClose() {
emit('applyStep', requestVModel.value);
if (!isQuote.value) {
emit('applyStep', { ...requestVModel.value, ...requestAndResponseRef.value?.makeRequestParams() });
}
}
function handleDelete() {
emit('deleteStep');
}
const loading = ref(false);
async function initQuoteCaseDetail() {
try {
loading.value = true;
const res = await getCaseDetail(requestVModel.value.id as string);
const res = await getCaseDetail(props.request?.id as string);
let parseRequestBodyResult;
if (res.protocol === 'HTTP') {
parseRequestBodyResult = parseRequestBodyFiles(res.request.body); // 解析请求体中的文件，将详情中的文件 id 集合收集，更新时以判断文件是否删除以及是否新上传的文件

17
frontend/src/views/api-test/scenario/components/step/stepTree.vue
View File

@ -199,6 +199,8 @@
v-model:visible="customCaseDrawerVisible"
:active-step="activeStep"
:request="currentStepDetail"
@apply-step="applyApiStep"
@delete-step="deleteCaseStep"
/>
<importApiDrawer
v-if="importApiDrawerVisible"
@ -264,6 +266,7 @@
import quoteContent from './stepNodeComposition/quoteContent.vue';
import waitTimeContent from './stepNodeComposition/waitTimeContent.vue';
import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
import { RequestParam as CaseRequestParam } from '@/views/api-test/components/requestComposition/index.vue';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -733,13 +736,25 @@
/**
* API 详情抽屉关闭时应用更改
*/
function applyApiStep(request: RequestParam) {
function applyApiStep(request: RequestParam | CaseRequestParam) {
if (activeStep.value) {
stepsDetailMap.value[activeStep.value?.stepId] = request;
activeStep.value = undefined;
}
}
/**
* 删除
*/
function deleteCaseStep() {
if (activeStep.value) {
customCaseDrawerVisible.value = false;
steps.value = steps.value.filter((item) => item.stepId !== activeStep.value?.stepId);
delete stepsDetailMap.value[activeStep.value?.stepId];
activeStep.value = undefined;
}
}
/**
* 添加脚本操作步骤
*/