feat(接口调试): 99%

This commit is contained in:
baiqi 2024-02-23 18:59:16 +08:00 committed by Craftsman
parent 342cde7dbf
commit fa853e230f
10 changed files with 143 additions and 140 deletions

View File

@ -152,7 +152,7 @@
inputSize?: 'small' | 'medium' | 'large' | 'mini'; inputSize?: 'small' | 'medium' | 'large' | 'mini';
tagSize?: Size; tagSize?: Size;
fields?: { fields?: {
id: string; id: string; // id
name: string; name: string;
}; };
}>(), }>(),
@ -193,11 +193,11 @@
inputFiles.value = defaultFiles.map((item) => ({ inputFiles.value = defaultFiles.map((item) => ({
...item, ...item,
// //
value: item?.[props.fields.id] || '', value: item?.[props.fields.id] || item.uid || '', // uid id
label: item?.[props.fields.name] || '', label: item?.[props.fields.name] || item?.name || '',
})); }));
} else { } else {
inputFileName.value = defaultFiles[0]?.[props.fields.name] || ''; inputFileName.value = defaultFiles[0]?.[props.fields.name] || defaultFiles[0]?.name || '';
} }
getListFunParams.value.combine.hiddenIds = defaultFiles getListFunParams.value.combine.hiddenIds = defaultFiles
.filter((item) => !item?.local) .filter((item) => !item?.local)
@ -214,6 +214,7 @@
innerFileList.value = _fileList.map((item) => ({ ...item, local: true })); innerFileList.value = _fileList.map((item) => ({ ...item, local: true }));
if (props.multiple) { if (props.multiple) {
inputFiles.value = _fileList.map((item) => ({ inputFiles.value = _fileList.map((item) => ({
...item,
value: item?.uid || '', value: item?.uid || '',
label: item?.name || '', label: item?.name || '',
})); }));
@ -252,6 +253,7 @@
innerFileList.value.push(...fileResultList); innerFileList.value.push(...fileResultList);
inputFiles.value.push( inputFiles.value.push(
...fileResultList.map((item) => ({ ...fileResultList.map((item) => ({
...item,
value: item?.uid || '', value: item?.uid || '',
label: item?.name || '', label: item?.name || '',
})) }))
@ -278,8 +280,10 @@
function handleClose(data: TagData) { function handleClose(data: TagData) {
inputFiles.value = inputFiles.value.filter((item) => item.value !== data.value); inputFiles.value = inputFiles.value.filter((item) => item.value !== data.value);
innerFileList.value = innerFileList.value.filter((item) => item[props.fields.id] !== data.value); innerFileList.value = innerFileList.value.filter(
if (innerFileList.value.length === 0) { (item) => (item[props.fields.id] || item.uid) !== (data[props.fields.id] || data.value)
);
if (inputFiles.value.length === 0) {
inputFilesPopoverVisible.value = false; inputFilesPopoverVisible.value = false;
} }
emit('deleteFile', data.value); emit('deleteFile', data.value);

View File

@ -17,7 +17,7 @@
@change="handleChange" @change="handleChange"
@more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)" @more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)"
> >
<template #expression="{ record }"> <template #expression="{ record, rowIndex }">
<a-popover <a-popover
position="tl" position="tl"
:disabled="!record.expression || record.expression.trim() === ''" :disabled="!record.expression || record.expression.trim() === ''"
@ -35,8 +35,8 @@
v-model:model-value="record.expression" v-model:model-value="record.expression"
class="ms-params-input" class="ms-params-input"
:max-length="255" :max-length="255"
@input="handleExpressionChange" @input="() => handleExpressionChange(rowIndex)"
@change="handleExpressionChange" @change="() => handleExpressionChange(rowIndex)"
> >
<template #suffix> <template #suffix>
<a-tooltip :disabled="!disabledExpressionSuffix"> <a-tooltip :disabled="!disabledExpressionSuffix">
@ -102,7 +102,7 @@
@change="handleChange" @change="handleChange"
@more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)" @more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)"
> >
<template #expression="{ record }"> <template #expression="{ record, rowIndex }">
<a-popover <a-popover
position="tl" position="tl"
:disabled="!record.expression || record.expression.trim() === ''" :disabled="!record.expression || record.expression.trim() === ''"
@ -120,8 +120,8 @@
v-model:model-value="record.expression" v-model:model-value="record.expression"
class="ms-params-input" class="ms-params-input"
:max-length="255" :max-length="255"
@input="handleExpressionChange" @input="() => handleExpressionChange(rowIndex)"
@change="handleExpressionChange" @change="() => handleExpressionChange(rowIndex)"
> >
<template #suffix> <template #suffix>
<a-tooltip :disabled="!disabledExpressionSuffix"> <a-tooltip :disabled="!disabledExpressionSuffix">
@ -209,7 +209,7 @@
@change="handleChange" @change="handleChange"
@more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)" @more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)"
> >
<template #expression="{ record }"> <template #expression="{ record, rowIndex }">
<a-popover <a-popover
position="tl" position="tl"
:disabled="!record.expression || record.expression.trim() === ''" :disabled="!record.expression || record.expression.trim() === ''"
@ -227,8 +227,8 @@
v-model:model-value="record.expression" v-model:model-value="record.expression"
class="ms-params-input" class="ms-params-input"
:max-length="255" :max-length="255"
@input="handleExpressionChange" @input="() => handleExpressionChange(rowIndex)"
@change="handleExpressionChange" @change="() => handleExpressionChange(rowIndex)"
> >
<template #suffix> <template #suffix>
<a-tooltip :disabled="!disabledExpressionSuffix"> <a-tooltip :disabled="!disabledExpressionSuffix">
@ -434,8 +434,8 @@
const handleChange = () => { const handleChange = () => {
emit('change'); emit('change');
}; };
function handleExpressionChange(val: string) { function handleExpressionChange(rowIndex: number) {
extractParamsTableRef.value?.addTableLine(val, 'expression'); extractParamsTableRef.value?.addTableLine(rowIndex);
} }
const xPathColumns: ParamTableColumn[] = [ const xPathColumns: ParamTableColumn[] = [

View File

@ -157,7 +157,13 @@ export interface ScriptCommonConfig {
scriptId: string; // 脚本id scriptId: string; // 脚本id
scriptName: string; // 脚本名称 scriptName: string; // 脚本名称
scriptLanguage: Language; // 脚本语言 scriptLanguage: Language; // 脚本语言
params: KeyValueParam[]; // 公共脚本参数 commonScriptInfo: {
id: string; // 公共脚本id
name: string; // 公共脚本名称
script: string; // 公共脚本内容
params: KeyValueParam[]; // 公共脚本参数
scriptLanguage: Language; // 脚本语言
}; // 公共脚本信息
} }
// 断言-响应体断言 // 断言-响应体断言
export interface ResponseBodyAssertion { export interface ResponseBodyAssertion {

View File

@ -41,7 +41,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { isEmpty } from 'lodash-es'; import { cloneDeep, isEmpty } from 'lodash-es';
import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue'; import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
import MsDrawer from '@/components/pure/ms-drawer/index.vue'; import MsDrawer from '@/components/pure/ms-drawer/index.vue';
@ -87,7 +87,7 @@
if (key || value) { if (key || value) {
tempObj[key.trim()] = { tempObj[key.trim()] = {
id: new Date().getTime() + i, id: new Date().getTime() + i,
...props.defaultParamItem, ...cloneDeep(props.defaultParamItem), //
key: key.trim(), key: key.trim(),
value: value?.trim(), value: value?.trim(),
}; };

View File

@ -23,10 +23,10 @@
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<a-tooltip :content="condition.scriptName"> <a-tooltip :content="condition.commonScriptInfo?.name">
<div class="script-name-container"> <div class="script-name-container">
<div class="one-line-text mr-[4px] max-w-[110px] font-medium text-[var(--color-text-1)]"> <div class="one-line-text mr-[4px] max-w-[110px] font-medium text-[var(--color-text-1)]">
{{ condition.scriptName }} {{ condition.commonScriptInfo?.name }}
</div> </div>
<MsIcon type="icon-icon_edit_outlined" class="edit-script-name-icon" @click="showEditScriptNameInput" /> <MsIcon type="icon-icon_edit_outlined" class="edit-script-name-icon" @click="showEditScriptNameInput" />
</div> </div>
@ -127,9 +127,11 @@
</MsBaseTable> </MsBaseTable>
<div v-show="commonScriptShowType === 'scriptContent'" class="h-[calc(100%-76px)]"> <div v-show="commonScriptShowType === 'scriptContent'" class="h-[calc(100%-76px)]">
<MsCodeEditor <MsCodeEditor
v-model:model-value="condition.script" v-if="condition.commonScriptInfo"
v-model:model-value="condition.commonScriptInfo.script"
theme="vs" theme="vs"
height="100%" height="100%"
:language="condition.commonScriptInfo.scriptLanguage || LanguageEnum.BEANSHELL"
:show-full-screen="false" :show-full-screen="false"
:show-theme-change="false" :show-theme-change="false"
read-only read-only
@ -240,7 +242,7 @@
@change="handleExtractParamTableChange" @change="handleExtractParamTableChange"
@more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)" @more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)"
> >
<template #expression="{ record }"> <template #expression="{ record, rowIndex }">
<a-popover <a-popover
position="tl" position="tl"
:disabled="!record.expression || record.expression.trim() === ''" :disabled="!record.expression || record.expression.trim() === ''"
@ -258,8 +260,8 @@
v-model:model-value="record.expression" v-model:model-value="record.expression"
class="ms-params-input" class="ms-params-input"
:max-length="255" :max-length="255"
@input="handleExpressionChange" @input="() => handleExpressionChange(rowIndex)"
@change="handleExpressionChange" @change="() => handleExpressionChange(rowIndex)"
> >
<template #suffix> <template #suffix>
<a-tooltip :disabled="!disabledExpressionSuffix"> <a-tooltip :disabled="!disabledExpressionSuffix">
@ -451,24 +453,28 @@ if (!result){
}); });
watch( watch(
() => condition.value.params, () => condition.value.commonScriptInfo,
(arr) => { (info) => {
propsRes.value.data = arr as any[]; // propsRes.value.data = info?.params as any[]; //
} }
); );
const showQuoteDrawer = ref(false); const showQuoteDrawer = ref(false);
function saveQuoteScriptHandler(item: any) { function saveQuoteScriptHandler(item: any) {
condition.value.script = item.script; // TODO:any
condition.value.scriptId = item.id; condition.value.commonScriptInfo = {
condition.value.scriptName = item.name; // TODO: id: item.id,
condition.value.params = (JSON.parse(item.params) || []).map((e: any) => { script: item.script,
return { name: item.name,
key: e.name, scriptLanguage: item.type,
...e, params: (JSON.parse(item.params) || []).map((e: any) => {
}; return {
}); key: e.name,
propsRes.value.data = condition.value.params as any[]; ...e,
};
}),
};
propsRes.value.data = (condition.value.commonScriptInfo?.params as any[]) || [];
showQuoteDrawer.value = false; showQuoteDrawer.value = false;
} }
@ -645,8 +651,8 @@ if (!result){
fastExtractionVisible.value = true; fastExtractionVisible.value = true;
} }
function handleExpressionChange(val: string) { function handleExpressionChange(rowIndex: number) {
extractParamsTableRef.value?.addTableLine(val, 'expression'); extractParamsTableRef.value?.addTableLine(rowIndex);
} }
/** /**
@ -693,7 +699,9 @@ if (!result){
}); });
fastExtractionVisible.value = false; fastExtractionVisible.value = false;
nextTick(() => { nextTick(() => {
extractParamsTableRef.value?.addTableLine(); extractParamsTableRef.value?.addTableLine(
condition.value.extractParams?.findIndex((e) => e.id === activeRecord.value.id) || 0
);
}); });
emit('change'); emit('change');
} }

View File

@ -111,7 +111,13 @@
script: '', script: '',
scriptId: '', scriptId: '',
scriptLanguage: LanguageEnum.BEANSHELL, scriptLanguage: LanguageEnum.BEANSHELL,
params: [], commonScriptInfo: {
id: '',
name: '',
script: '',
params: [],
scriptLanguage: LanguageEnum.BEANSHELL,
},
}); });
break; break;
// case RequestConditionProcessor.SQL: // case RequestConditionProcessor.SQL:

View File

@ -48,7 +48,7 @@
</div> </div>
</template> </template>
<!-- 表格列 slot --> <!-- 表格列 slot -->
<template #key="{ record, columnConfig }"> <template #key="{ record, columnConfig, rowIndex }">
<a-popover <a-popover
position="tl" position="tl"
:disabled="!record[columnConfig.dataIndex as string] || record[columnConfig.dataIndex as string].trim() === ''" :disabled="!record[columnConfig.dataIndex as string] || record[columnConfig.dataIndex as string].trim() === ''"
@ -67,11 +67,11 @@
:placeholder="t('apiTestDebug.paramNamePlaceholder')" :placeholder="t('apiTestDebug.paramNamePlaceholder')"
class="param-input" class="param-input"
:max-length="255" :max-length="255"
@input="(val) => addTableLine(val, 'key')" @input="() => addTableLine(rowIndex)"
/> />
</a-popover> </a-popover>
</template> </template>
<template #paramType="{ record, columnConfig }"> <template #paramType="{ record, columnConfig, rowIndex }">
<a-tooltip <a-tooltip
v-if="columnConfig.hasRequired" v-if="columnConfig.hasRequired"
:content="t(record.required ? 'apiTestDebug.paramRequired' : 'apiTestDebug.paramNotRequired')" :content="t(record.required ? 'apiTestDebug.paramRequired' : 'apiTestDebug.paramNotRequired')"
@ -82,7 +82,7 @@
record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]', record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
'!mr-[4px] !p-[4px]', '!mr-[4px] !p-[4px]',
]" ]"
@click="toggleRequired(record)" @click="toggleRequired(record, rowIndex)"
> >
<div>*</div> <div>*</div>
</MsButton> </MsButton>
@ -91,37 +91,37 @@
v-model:model-value="record.paramType" v-model:model-value="record.paramType"
:options="columnConfig.typeOptions || []" :options="columnConfig.typeOptions || []"
class="param-input w-full" class="param-input w-full"
@change="(val) => handleTypeChange(val, record)" @change="(val) => handleTypeChange(val, record, rowIndex)"
/> />
</template> </template>
<template #expressionType="{ record, columnConfig }"> <template #expressionType="{ record, columnConfig, rowIndex }">
<a-select <a-select
v-model:model-value="record.expressionType" v-model:model-value="record.expressionType"
:options="columnConfig.typeOptions || []" :options="columnConfig.typeOptions || []"
class="param-input w-[110px]" class="param-input w-[110px]"
@change="(val) => handleExpressionTypeChange(val)" @change="() => addTableLine(rowIndex)"
/> />
</template> </template>
<template #variableType="{ record, columnConfig }"> <template #variableType="{ record, columnConfig, rowIndex }">
<a-select <a-select
v-model:model-value="record.variableType" v-model:model-value="record.variableType"
:options="columnConfig.typeOptions || []" :options="columnConfig.typeOptions || []"
class="param-input w-[110px]" class="param-input w-[110px]"
@change="(val) => handleVariableTypeChange(val)" @change="() => addTableLine(rowIndex)"
/> />
</template> </template>
<template #extractScope="{ record, columnConfig }"> <template #extractScope="{ record, columnConfig, rowIndex }">
<a-select <a-select
v-model:model-value="record.extractScope" v-model:model-value="record.extractScope"
:options="columnConfig.typeOptions || []" :options="columnConfig.typeOptions || []"
class="param-input w-[180px]" class="param-input w-[180px]"
@change="(val) => handleRangeChange(val)" @change="() => addTableLine(rowIndex)"
/> />
</template> </template>
<template #expression="{ record, rowIndex, columnConfig }"> <template #expression="{ record, rowIndex, columnConfig }">
<slot name="expression" :record="record" :row-index="rowIndex" :column-config="columnConfig"></slot> <slot name="expression" :record="record" :row-index="rowIndex" :column-config="columnConfig"></slot>
</template> </template>
<template #value="{ record, columnConfig }"> <template #value="{ record, columnConfig, rowIndex }">
<a-popover <a-popover
v-if="columnConfig.isNormal" v-if="columnConfig.isNormal"
position="tl" position="tl"
@ -141,7 +141,7 @@
class="param-input" class="param-input"
:placeholder="t('apiTestDebug.commonPlaceholder')" :placeholder="t('apiTestDebug.commonPlaceholder')"
:max-length="255" :max-length="255"
@input="(val) => addTableLine(val, 'value')" @input="() => addTableLine(rowIndex)"
/> />
</a-popover> </a-popover>
<MsAddAttachment <MsAddAttachment
@ -156,24 +156,24 @@
input-class="param-input h-[24px]" input-class="param-input h-[24px]"
input-size="small" input-size="small"
tag-size="small" tag-size="small"
@change="(files) => handleFileChange(files, record)" @change="(files) => handleFileChange(files, record, rowIndex)"
/> />
<MsParamsInput <MsParamsInput
v-else v-else
v-model:value="record.value" v-model:value="record.value"
@change="(val) => addTableLine(val, 'value')" @change="() => addTableLine(rowIndex)"
@dblclick="quickInputParams(record)" @dblclick="quickInputParams(record)"
@apply="handleParamSettingApply" @apply="() => addTableLine(rowIndex)"
/> />
</template> </template>
<template #lengthRange="{ record }"> <template #lengthRange="{ record, rowIndex }">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a-input-number <a-input-number
v-model:model-value="record.minLength" v-model:model-value="record.minLength"
:placeholder="t('apiTestDebug.paramMin')" :placeholder="t('apiTestDebug.paramMin')"
:min="0" :min="0"
class="param-input param-input-number" class="param-input param-input-number"
@change="(val) => addTableLine(val, 'minLength')" @change="() => addTableLine(rowIndex)"
/> />
<div class="mx-[4px]">{{ t('common.to') }}</div> <div class="mx-[4px]">{{ t('common.to') }}</div>
<a-input-number <a-input-number
@ -181,11 +181,11 @@
:placeholder="t('apiTestDebug.paramMax')" :placeholder="t('apiTestDebug.paramMax')"
:min="0" :min="0"
class="param-input" class="param-input"
@change="(val) => addTableLine(val, 'maxLength')" @change="() => addTableLine(rowIndex)"
/> />
</div> </div>
</template> </template>
<template #tag="{ record, columnConfig }"> <template #tag="{ record, columnConfig, rowIndex }">
<a-popover <a-popover
position="tl" position="tl"
:disabled="record[columnConfig.dataIndex as string].length === 0" :disabled="record[columnConfig.dataIndex as string].length === 0"
@ -203,29 +203,32 @@
v-model:model-value="record[columnConfig.dataIndex as string]" v-model:model-value="record[columnConfig.dataIndex as string]"
:max-tag-count="1" :max-tag-count="1"
input-class="param-input" input-class="param-input"
@change="(val) => addTableLine(val, 'tag')" @change="() => addTableLine(rowIndex)"
/> />
</a-popover> </a-popover>
</template> </template>
<template #description="{ record, columnConfig }"> <template #description="{ record, columnConfig, rowIndex }">
<paramDescInput <paramDescInput
v-model:desc="record[columnConfig.dataIndex as string]" v-model:desc="record[columnConfig.dataIndex as string]"
@input="(val) => addTableLine(val, 'description')" @input="() => addTableLine(rowIndex)"
@dblclick="quickInputDesc(record)" @dblclick="quickInputDesc(record)"
@change="handleDescChange" @change="handleDescChange"
/> />
</template> </template>
<template #encode="{ record }"> <template #encode="{ record, rowIndex }">
<a-switch <a-switch
v-model:model-value="record.encode" v-model:model-value="record.encode"
size="small" size="small"
class="param-input-switch" class="param-input-switch"
type="line" type="line"
@change="(val) => addTableLine(val.toString(), 'encode')" @change="() => addTableLine(rowIndex)"
/> />
</template> </template>
<template #mustContain="{ record, columnConfig }"> <template #mustContain="{ record, columnConfig, rowIndex }">
<a-checkbox v-model:model-value="record[columnConfig.dataIndex as string]" @change="(val) => addTableLine(val)" /> <a-checkbox
v-model:model-value="record[columnConfig.dataIndex as string]"
@change="() => addTableLine(rowIndex)"
/>
</template> </template>
<template #operation="{ record, rowIndex, columnConfig }"> <template #operation="{ record, rowIndex, columnConfig }">
<a-switch <a-switch
@ -234,7 +237,7 @@
size="small" size="small"
type="line" type="line"
class="mr-[8px]" class="mr-[8px]"
@change="(val) => addTableLine(val, 'disable')" @change="() => addTableLine(rowIndex)"
/> />
<slot name="operationPre" :record="record" :row-index="rowIndex" :column-config="columnConfig"></slot> <slot name="operationPre" :record="record" :row-index="rowIndex" :column-config="columnConfig"></slot>
<MsTableMoreAction <MsTableMoreAction
@ -251,7 +254,7 @@
v-model:model-value="record.contentType" v-model:model-value="record.contentType"
:options="Object.values(RequestContentTypeEnum).map((e) => ({ label: e, value: e }))" :options="Object.values(RequestContentTypeEnum).map((e) => ({ label: e, value: e }))"
allow-create allow-create
@change="(val) => addTableLine(val as string, 'contentType')" @change="() => addTableLine(rowIndex)"
/> />
</div> </div>
</template> </template>
@ -265,24 +268,24 @@
/> />
</div> </div>
</template> </template>
<template #responseHeader="{ record, columnConfig }"> <template #responseHeader="{ record, columnConfig, rowIndex }">
<a-select v-model="record.responseHeader" class="param-input" @change="(val) => addTableLine(val as string)"> <a-select v-model="record.responseHeader" class="param-input" @change="() => addTableLine(rowIndex)">
<a-option v-for="item in columnConfig.options" :key="item.value">{{ t(item.label) }}</a-option> <a-option v-for="item in columnConfig.options" :key="item.value">{{ t(item.label) }}</a-option>
</a-select> </a-select>
</template> </template>
<template #matchCondition="{ record, columnConfig }"> <template #matchCondition="{ record, columnConfig, rowIndex }">
<a-select v-model="record.condition" class="param-input" @change="(val) => addTableLine(val as string)"> <a-select v-model="record.condition" class="param-input" @change="() => addTableLine(rowIndex)">
<a-option v-for="item in columnConfig.options" :key="item.value">{{ t(item.label) }}</a-option> <a-option v-for="item in columnConfig.options" :key="item.value">{{ t(item.label) }}</a-option>
</a-select> </a-select>
</template> </template>
<template #matchValue="{ record }"> <template #matchValue="{ record, rowIndex }">
<a-input v-model="record.matchValue" class="param-input" @change="(val) => addTableLine(val)" /> <a-input v-model="record.matchValue" class="param-input" @change="() => addTableLine(rowIndex)" />
</template> </template>
<template #project="{ record, columnConfig }"> <template #project="{ record, columnConfig, rowIndex }">
<a-select <a-select
v-model="record.projectId" v-model="record.projectId"
class="param-input" class="param-input"
@change="(val) => handelProjectChange(val as string, record.projectId)" @change="(val) => handelProjectChange(val as string, record.projectId, rowIndex)"
> >
<a-option v-for="item in columnConfig.options" :key="item.id">{{ item.name }}</a-option> <a-option v-for="item in columnConfig.options" :key="item.id">{{ item.name }}</a-option>
</a-select> </a-select>
@ -343,7 +346,7 @@
</template> </template>
<script async setup lang="ts"> <script async setup lang="ts">
import { isEqual } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import MsButton from '@/components/pure/ms-button/index.vue'; import MsButton from '@/components/pure/ms-button/index.vue';
import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue'; import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
@ -359,6 +362,7 @@
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';
import useTableStore from '@/hooks/useTableStore'; import useTableStore from '@/hooks/useTableStore';
import useAppStore from '@/store/modules/app';
import { RequestBodyFormat, RequestContentTypeEnum, RequestParamsType } from '@/enums/apiEnum'; import { RequestBodyFormat, RequestContentTypeEnum, RequestParamsType } from '@/enums/apiEnum';
import { SelectAllEnum, TableKeyEnum } from '@/enums/tableEnum'; import { SelectAllEnum, TableKeyEnum } from '@/enums/tableEnum';
@ -426,6 +430,7 @@
(e: 'projectChange', projectId: string): void; (e: 'projectChange', projectId: string): void;
}>(); }>();
const appStore = useAppStore();
const { t } = useI18n(); const { t } = useI18n();
const tableStore = useTableStore(); const tableStore = useTableStore();
@ -497,24 +502,13 @@
* @param key 当前列的 key * @param key 当前列的 key
* @param isForce 是否强制添加 * @param isForce 是否强制添加
*/ */
function addTableLine( function addTableLine(rowIndex: number) {
val?: string | number | boolean | (string | number | boolean)[], if (rowIndex === propsRes.value.data.length - 1) {
key?: string, //
isForce?: boolean
) {
const lastData = { ...propsRes.value.data[propsRes.value.data.length - 1] };
delete lastData.id; // id
lastData.enable = props.defaultParamItem.enable; // enable
// key key
const isNotChange =
val === undefined || key === undefined
? isEqual(lastData, props.defaultParamItem)
: isEqual(lastData[key], props.defaultParamItem[key]);
if (isForce || (val !== '' && !isNotChange)) {
const id = new Date().getTime().toString(); const id = new Date().getTime().toString();
propsRes.value.data.push({ propsRes.value.data.push({
id, id,
...props.defaultParamItem, ...cloneDeep(props.defaultParamItem), //
enable: true, // enable: true, //
} as any); } as any);
emit('change', propsRes.value.data); emit('change', propsRes.value.data);
@ -525,14 +519,7 @@
() => props.params, () => props.params,
(val) => { (val) => {
if (val.length > 0) { if (val.length > 0) {
const lastData = { ...val[val.length - 1] };
delete lastData.id; // id
delete lastData.enable; // enable
const isNotChange = isEqual(lastData, props.defaultParamItem);
propsRes.value.data = val; propsRes.value.data = val;
if (!isNotChange) {
addTableLine();
}
} else { } else {
const id = new Date().getTime().toString(); const id = new Date().getTime().toString();
propsRes.value.data = [ propsRes.value.data = [
@ -550,16 +537,18 @@
} }
); );
function toggleRequired(record: Record<string, any>) { function toggleRequired(record: Record<string, any>, rowIndex: number) {
record.required = !record.required; record.required = !record.required;
addTableLine(rowIndex);
emit('change', propsRes.value.data); emit('change', propsRes.value.data);
} }
async function handleFileChange(files: MsFileItem[], record: Record<string, any>) { async function handleFileChange(files: MsFileItem[], record: Record<string, any>, rowIndex: number) {
try { try {
if (props.uploadTempFileApi && files.length === 1) { if (props.uploadTempFileApi && files.length === 1) {
// //
const fileItem = files[0]; const fileItem = files[0];
appStore.showLoading();
const res = await props.uploadTempFileApi(fileItem.file); const res = await props.uploadTempFileApi(fileItem.file);
record.files = [ record.files = [
{ {
@ -576,10 +565,13 @@
fileName: e.name || e.fileName || '', fileName: e.name || e.fileName || '',
})); }));
} }
addTableLine(rowIndex);
emit('change', propsRes.value.data); emit('change', propsRes.value.data);
} catch (error) { } catch (error) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(error); console.log(error);
} finally {
appStore.hideLoading();
} }
} }
@ -601,14 +593,11 @@
function applyQuickInputParam() { function applyQuickInputParam() {
activeQuickInputRecord.value.value = quickInputParamValue.value; activeQuickInputRecord.value.value = quickInputParamValue.value;
showQuickInputParam.value = false; showQuickInputParam.value = false;
addTableLine(propsRes.value.data.findIndex((e) => e.id === activeQuickInputRecord.value.id));
clearQuickInputParam(); clearQuickInputParam();
emit('change', propsRes.value.data); emit('change', propsRes.value.data);
} }
function handleParamSettingApply(val: string | number) {
addTableLine(val, 'value');
}
const showQuickInputDesc = ref(false); const showQuickInputDesc = ref(false);
const quickInputDescValue = ref(''); const quickInputDescValue = ref('');
@ -626,6 +615,7 @@
function applyQuickInputDesc() { function applyQuickInputDesc() {
activeQuickInputRecord.value.description = quickInputDescValue.value; activeQuickInputRecord.value.description = quickInputDescValue.value;
showQuickInputDesc.value = false; showQuickInputDesc.value = false;
addTableLine(propsRes.value.data.findIndex((e) => e.id === activeQuickInputRecord.value.id));
clearQuickInputDesc(); clearQuickInputDesc();
emit('change', propsRes.value.data); emit('change', propsRes.value.data);
} }
@ -636,9 +626,10 @@
function handleTypeChange( function handleTypeChange(
val: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[], val: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[],
record: Record<string, any> record: Record<string, any>,
rowIndex: number
) { ) {
addTableLine(val as string, 'paramType'); addTableLine(rowIndex);
// Content-Type // Content-Type
if (record.contentType) { if (record.contentType) {
if (val === 'file') { if (val === 'file') {
@ -651,24 +642,6 @@
} }
} }
function handleExpressionTypeChange(
val: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
) {
addTableLine(val as string, 'expressionType');
}
function handleVariableTypeChange(
val: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
) {
addTableLine(val as string, 'variableType');
}
function handleRangeChange(
val: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
) {
addTableLine(val as string, 'extractScope');
}
/** /**
* 获取更多操作按钮列表 * 获取更多操作按钮列表
* @param actions 按钮列表 * @param actions 按钮列表
@ -689,9 +662,9 @@
emit('moreActionSelect', event, record); emit('moreActionSelect', event, record);
} }
function handelProjectChange(val: string, projectId: string) { function handelProjectChange(val: string, projectId: string, rowIndex: number) {
emit('projectChange', projectId); emit('projectChange', projectId);
addTableLine(val as string, 'projectId'); addTableLine(rowIndex);
} }
/** 断言-文档-Begin */ /** 断言-文档-Begin */

View File

@ -252,7 +252,7 @@
watch( watch(
() => props.layout, () => props.layout,
(val) => { (val) => {
heightUsed.value = val === 'horizontal' ? 428 : 428 + props.secondBoxHeight; heightUsed.value = val === 'horizontal' ? 428 : 430 + props.secondBoxHeight;
}, },
{ {
immediate: true, immediate: true,
@ -263,7 +263,7 @@
() => props.secondBoxHeight, () => props.secondBoxHeight,
(val) => { (val) => {
if (props.layout === 'vertical') { if (props.layout === 'vertical') {
heightUsed.value = 428 + val; heightUsed.value = 430 + val;
} }
}, },
{ {
@ -327,10 +327,15 @@
* 批量参数代码转换为参数表格数据 * 批量参数代码转换为参数表格数据
*/ */
function handleBatchParamApply(resultArr: any[]) { function handleBatchParamApply(resultArr: any[]) {
const files = currentTableParams.value.filter((item) => item.paramType === RequestParamsType.FILE);
if (resultArr.length < currentTableParams.value.length) { if (resultArr.length < currentTableParams.value.length) {
currentTableParams.value.splice(0, currentTableParams.value.length - 1, ...resultArr); currentTableParams.value.splice(0, currentTableParams.value.length - 1, ...files, ...resultArr);
} else { } else {
currentTableParams.value = [...resultArr, currentTableParams.value[currentTableParams.value.length - 1]]; currentTableParams.value = [
...files,
...resultArr,
currentTableParams.value[currentTableParams.value.length - 1],
];
} }
emit('change'); emit('change');
} }

View File

@ -676,7 +676,7 @@
headers: requestVModel.value.headers.filter((e, i) => i !== requestVModel.value.headers.length - 1), // headers: requestVModel.value.headers.filter((e, i) => i !== requestVModel.value.headers.length - 1), //
method: requestVModel.value.method, method: requestVModel.value.method,
otherConfig: requestVModel.value.otherConfig, otherConfig: requestVModel.value.otherConfig,
path: requestVModel.value.url, path: requestVModel.value.url || requestVModel.value.path,
query: requestVModel.value.query.filter((e, i) => i !== requestVModel.value.query.length - 1), // query: requestVModel.value.query.filter((e, i) => i !== requestVModel.value.query.length - 1), //
rest: requestVModel.value.rest.filter((e, i) => i !== requestVModel.value.rest.length - 1), // rest: requestVModel.value.rest.filter((e, i) => i !== requestVModel.value.rest.length - 1), //
url: requestVModel.value.url, url: requestVModel.value.url,
@ -762,6 +762,7 @@
...makeRequestParams(), ...makeRequestParams(),
protocol: requestVModel.value.protocol, protocol: requestVModel.value.protocol,
method: isHttpProtocol.value ? requestVModel.value.method : requestVModel.value.protocol, method: isHttpProtocol.value ? requestVModel.value.method : requestVModel.value.protocol,
path: isHttpProtocol.value ? requestVModel.value.url || requestVModel.value.path : undefined,
}); });
Message.success(t('common.updateSuccess')); Message.success(t('common.updateSuccess'));
requestVModel.value.unSaved = false; requestVModel.value.unSaved = false;

View File

@ -42,19 +42,19 @@
/> />
</a-form-item> --> </a-form-item> -->
<a-form-item :label="t('apiTestDebug.redirect')"> <a-form-item :label="t('apiTestDebug.redirect')">
<a-radio <a-checkbox
v-model:model-value="settingForm.followRedirects" v-model:model-value="settingForm.followRedirects"
@change="(val) => handleFollowRedirectsChange(val as boolean)" @change="(val) => handleFollowRedirectsChange(val as boolean)"
> >
{{ t('apiTestDebug.follow') }} {{ t('apiTestDebug.follow') }}
</a-radio> </a-checkbox>
<a-radio <a-checkbox
v-model:model-value="settingForm.autoRedirects" v-model:model-value="settingForm.autoRedirects"
class="ml-[24px]" class="ml-[24px]"
@change="val => handleAutoRedirectsChange(val as boolean)" @change="val => handleAutoRedirectsChange(val as boolean)"
> >
{{ t('apiTestDebug.auto') }} {{ t('apiTestDebug.auto') }}
</a-radio> </a-checkbox>
</a-form-item> </a-form-item>
</a-form> </a-form>
</div> </div>