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

fix(接口场景): 引用API参数值写入&调整引用API/CASE请求参数tab显示

This commit is contained in:
teukkk 2024-03-26 13:04:48 +08:00 committed by Craftsman
parent d6a0932361
commit 5e53eaa84f
9 changed files with 164 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
View File

@ -12,7 +12,7 @@
<paramsTable
ref="extractParamsTableRef"
v-model:params="condition.jsonPathAssertion.assertions"
:disabled="props.disabled"
:disabled-except-param="props.disabled"
:selectable="false"
:columns="jsonPathColumns"
:scroll="{ minWidth: '700px' }"
@ -105,7 +105,7 @@
<paramsTable
ref="extractParamsTableRef"
v-model:params="condition.xpathAssertion.assertions"
:disabled="props.disabled"
:disabled-except-param="props.disabled"
:selectable="false"
:columns="xPathColumns"
:scroll="{ minWidth: '700px' }"
@ -200,7 +200,7 @@
<div class="mt-[16px]">
<paramsTable
v-model:params="condition.document.jsonAssertion"
:disabled="props.disabled"
:disabled-except-param="props.disabled"
:selectable="false"
:columns="documentColumns"
:scroll="{
@ -253,7 +253,7 @@
ref="extractParamsTableRef"
v-model:params="condition.regexAssertion.assertions"
:selectable="false"
:disabled="props.disabled"
:disabled-except-param="props.disabled"
:columns="xPathColumns"
:scroll="{ minWidth: '700px' }"
:default-param-item="xPathDefaultParamItem"

2
frontend/src/components/business/ms-assertion/comp/ResponseHeaderTab.vue
View File

@ -6,7 +6,7 @@
:columns="columns"
:scroll="{ minWidth: '700px' }"
:default-param-item="defaultParamItem"
:disabled="props.disabled"
:disabled-except-param="props.disabled"
@change="handleParamTableChange"
/>
</div>

2
frontend/src/components/business/ms-assertion/comp/VariableTab.vue
View File

@ -5,6 +5,7 @@
:columns="columns"
:scroll="{ minWidth: '700px' }"
:default-param-item="defaultParamItem"
:disabled-except-param="props.disabled"
@change="handleParamTableChange"
/>
</template>
@ -24,6 +25,7 @@
const props = defineProps<{
data: Param;
disabled?: boolean;
}>();
const emit = defineEmits<{

2
frontend/src/components/business/ms-assertion/index.vue
View File

@ -49,7 +49,7 @@
<span class="ms-assertion-body-left-item-row-title">{{ item.name }}</span>
</div>
<div class="ms-assertion-body-left-item-switch">
<div class="ms-assertion-body-left-item-switch-action">
<div v-show="!props.disabled" class="ms-assertion-body-left-item-switch-action">
<MsIcon
type="icon-icon_drag"
class="action-btn-move sort-handle cursor-move text-[12px] text-[var(--color-text-4)]"

18
frontend/src/views/api-test/components/condition/content.vue
View File

@ -256,6 +256,7 @@
<div class="mb-[8px] text-[var(--color-text-1)]">{{ t('common.desc') }}</div>
<a-input
v-model:model-value="condition.name"
:disabled="props.disabled"
:placeholder="t('apiTestDebug.commonPlaceholder')"
:max-length="255"
@input="() => emit('change')"
@ -266,7 +267,12 @@
{{ condition.dataSourceName || '-' }}
</div>
<a-divider margin="8px" direction="vertical" />
<MsButton type="text" class="font-medium" @click="quoteSqlSourceDrawerVisible = true">
<MsButton
type="text"
class="font-medium"
:disabled="props.disabled"
@click="quoteSqlSourceDrawerVisible = true"
>
{{ t('apiTestDebug.introduceSource') }}
</MsButton>
</div>
@ -297,6 +303,7 @@
<a-input
v-model:model-value="condition.variableNames"
:max-length="255"
:disabled="props.disabled"
:placeholder="t('apiTestDebug.storageByColPlaceholder', { a: '{id_1}', b: '{username_1}' })"
@input="() => emit('change')"
/>
@ -313,6 +320,7 @@
</div>
<paramTable
:params="condition.extractParams"
:disabled-except-param="props.disabled"
:columns="sqlSourceColumns"
:selectable="false"
:default-param-item="defaultKeyValueParamItem"
@ -323,6 +331,7 @@
<div class="mb-[8px] text-[var(--color-text-1)]">{{ t('apiTestDebug.storageByResult') }}</div>
<a-input
v-model:model-value="condition.resultVariable"
:disabled="props.disabled"
:max-length="255"
:placeholder="t('apiTestDebug.storageByResultPlaceholder', { a: '${result}' })"
@input="() => emit('change')"
@ -351,6 +360,7 @@
<paramTable
ref="extractParamsTableRef"
:params="condition.extractors"
:disabled-except-param="props.disabled"
:default-param-item="defaultExtractParamItem"
:columns="extractParamsColumns"
:selectable="false"
@ -380,6 +390,7 @@
:max-length="255"
:placeholder="t('ms.paramsInput.commonPlaceholder')"
size="mini"
:disabled="props.disabled"
@input="() => handleExpressionChange(rowIndex)"
@change="() => handleExpressionChange(rowIndex)"
>
@ -394,7 +405,9 @@
type="icon-icon_flashlamp"
:size="15"
:class="
disabledExpressionSuffix ? 'ms-params-input-suffix-icon--disabled' : 'ms-params-input-suffix-icon'
disabledExpressionSuffix || props.disabled
? 'ms-params-input-suffix-icon--disabled'
: 'ms-params-input-suffix-icon'
"
@click.stop="() => showFastExtraction(record)"
/>
@ -828,6 +841,7 @@ if (!result){
const activeRecord = ref({ ...defaultExtractParamItem }); // 用于暂存当前操作的提取参数表格项
function showFastExtraction(record: ExpressionConfig) {
if (props.disabled) return;
activeRecord.value = { ...record };
fastExtractionVisible.value = true;
}

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

@ -237,42 +237,80 @@
label: t('apiTestDebug.setting'),
},
];
const headerNum = computed(
() => filterKeyValParams(requestVModel.value?.headers ?? [], defaultHeaderParamsItem).validParams?.length
);
const restNum = computed(
() => filterKeyValParams(requestVModel.value?.rest ?? [], defaultRequestParamsItem).validParams?.length
);
const queryNum = computed(
() => filterKeyValParams(requestVModel.value?.query ?? [], defaultRequestParamsItem).validParams?.length
);
const preProcessorNum = computed(() => requestVModel.value.children[0].preProcessorConfig.processors.length);
const postProcessorNum = computed(() => requestVModel.value.children[0].postProcessorConfig.processors.length);
const assertionsNum = computed(() => requestVModel.value.children[0].assertionConfig.assertions.length);
// 根据协议类型获取请求内容tab
const contentTabList = computed(() => {
// HTTP 协议 tabs
if (isHttpProtocol.value) {
// 引用CASE：如果[请求头、query、rest、前后置、断言]没有数据则直接隐藏tab
if (props.disabledExceptParam) {
return httpContentTabList.filter(
(item) =>
!(!restNum.value && item.value === RequestComposition.REST) &&
!(!queryNum.value && item.value === RequestComposition.QUERY) &&
!(!headerNum.value && item.value === RequestComposition.HEADER) &&
!(!preProcessorNum.value && item.value === RequestComposition.PRECONDITION) &&
!(!postProcessorNum.value && item.value === RequestComposition.POST_CONDITION) &&
!(!assertionsNum.value && item.value === RequestComposition.ASSERTION)
);
}
return props.isShowCommonContentTabKey
? httpContentTabList
: httpContentTabList.filter((e) => !commonContentTabKey.includes(e.value));
}
if (props.disabledExceptParam) {
return [
...pluginContentTab,
...httpContentTabList
.filter((e) => commonContentTabKey.includes(e.value))
.filter(
(item) =>
!(!preProcessorNum.value && item.value === RequestComposition.PRECONDITION) &&
!(!postProcessorNum.value && item.value === RequestComposition.POST_CONDITION) &&
!(!assertionsNum.value && item.value === RequestComposition.ASSERTION)
),
];
}
return [...pluginContentTab, ...httpContentTabList.filter((e) => commonContentTabKey.includes(e.value))];
});
// 获取 tab 的参数数量徽标
function getTabBadge(tabKey: RequestComposition) {
switch (tabKey) {
case RequestComposition.HEADER:
const headerNum = filterKeyValParams(requestVModel.value.headers, defaultHeaderParamsItem).validParams.length;
return `${headerNum > 0 ? headerNum : ''}`;
return `${headerNum.value > 0 ? headerNum.value : ''}`;
case RequestComposition.BODY:
return requestVModel.value.body?.bodyType !== RequestBodyFormat.NONE ? '1' : '';
case RequestComposition.QUERY:
const queryNum = filterKeyValParams(requestVModel.value.query, defaultRequestParamsItem).validParams.length;
return `${queryNum > 0 ? queryNum : ''}`;
return `${queryNum.value > 0 ? queryNum.value : ''}`;
case RequestComposition.REST:
const restNum = filterKeyValParams(requestVModel.value.rest, defaultRequestParamsItem).validParams.length;
return `${restNum > 0 ? restNum : ''}`;
return `${restNum.value > 0 ? restNum.value : ''}`;
case RequestComposition.PRECONDITION:
return `${requestVModel.value.children[0].preProcessorConfig.processors.length || ''}`;
return `${preProcessorNum.value > 99 ? '99+' : preProcessorNum.value || ''}`;
case RequestComposition.POST_CONDITION:
return `${requestVModel.value.children[0].postProcessorConfig.processors.length || ''}`;
return `${postProcessorNum.value > 99 ? '99+' : postProcessorNum.value || ''}`;
case RequestComposition.ASSERTION:
return `${requestVModel.value.children[0].assertionConfig.assertions.length || ''}`;
return `${assertionsNum.value > 99 ? '99+' : assertionsNum.value || ''}`;
case RequestComposition.AUTH:
return requestVModel.value.authConfig.authType !== RequestAuthType.NONE ? '1' : '';
default:
return '';
}
}
// 设置第一个tab为当前tab
function setActiveTabByFirst() {
requestVModel.value.activeTab = contentTabList.value[0].value;
}
const protocolLoading = ref(false);
const protocolOptions = ref<SelectOptionData[]>([]);
@ -492,6 +530,7 @@
initPluginScript,
handleActiveDebugChange,
makeRequestParams,
setActiveTabByFirst,
});
</script>

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

@ -64,7 +64,7 @@
/>
<MsAddAttachment
v-model:file-list="fileList"
:disabled="props.disabledExceptParam"
:disabled="props.disabledParamValue"
mode="input"
:multiple="false"
:fields="{

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

@ -475,6 +475,11 @@
}
return t('apiScenario.customApi');
});
// 复制 api 只要加载过一次后就会保存，所以 props.request 是不为空的
const isCopyApiNeedInit = computed(() => _stepType.value.isCopyApi && props.request === undefined);
const isEditableApi = computed(
() => _stepType.value.isCopyApi || props.step?.stepType === ScenarioStepType.CUSTOM_REQUEST || !props.step
);
const isHttpProtocol = computed(() => requestVModel.value.protocol === 'HTTP');
const temporaryResponseMap = {}; // 缓存websocket返回的报告内容，避免执行接口后切换tab导致报告丢失
const isInitPluginForm = ref(false);
@ -538,12 +543,49 @@
label: t('apiTestDebug.setting'),
},
];
const headerNum = computed(
() => filterKeyValParams(requestVModel.value?.headers ?? [], defaultHeaderParamsItem).validParams?.length
);
const restNum = computed(
() => filterKeyValParams(requestVModel.value?.rest ?? [], defaultRequestParamsItem).validParams?.length
);
const queryNum = computed(
() => filterKeyValParams(requestVModel.value?.query ?? [], defaultRequestParamsItem).validParams?.length
);
const preProcessorNum = computed(() => requestVModel.value.children[0].preProcessorConfig.processors.length);
const postProcessorNum = computed(() => requestVModel.value.children[0].postProcessorConfig.processors.length);
const assertionsNum = computed(() => requestVModel.value.children[0].assertionConfig.assertions.length);
// 根据协议类型获取请求内容tab
const contentTabList = computed(() => {
// HTTP 协议 tabs
if (isHttpProtocol.value) {
// 引用API：请求头、query、rest、前后置、断言。如果没有数据直接隐藏tab
if (!isEditableApi.value) {
return httpContentTabList.filter(
(item) =>
!(!restNum.value && item.value === RequestComposition.REST) &&
!(!queryNum.value && item.value === RequestComposition.QUERY) &&
!(!headerNum.value && item.value === RequestComposition.HEADER) &&
!(!preProcessorNum.value && item.value === RequestComposition.PRECONDITION) &&
!(!postProcessorNum.value && item.value === RequestComposition.POST_CONDITION) &&
!(!assertionsNum.value && item.value === RequestComposition.ASSERTION)
);
}
return httpContentTabList;
}
if (!isEditableApi.value) {
return [
...pluginContentTab,
...httpContentTabList
.filter((e) => commonContentTabKey.includes(e.value))
.filter(
(item) =>
!(!preProcessorNum.value && item.value === RequestComposition.PRECONDITION) &&
!(!postProcessorNum.value && item.value === RequestComposition.POST_CONDITION) &&
!(!assertionsNum.value && item.value === RequestComposition.ASSERTION)
),
];
}
return [...pluginContentTab, ...httpContentTabList.filter((e) => commonContentTabKey.includes(e.value))];
});
@ -553,34 +595,19 @@
function getTabBadge(tabKey: RequestComposition) {
switch (tabKey) {
case RequestComposition.HEADER:
const headerNum = filterKeyValParams(requestVModel.value.headers, defaultHeaderParamsItem).validParams.length;
return `${headerNum > 0 ? headerNum : ''}`;
return `${headerNum.value > 0 ? headerNum.value : ''}`;
case RequestComposition.BODY:
return requestVModel.value.body?.bodyType !== RequestBodyFormat.NONE ? '1' : '';
case RequestComposition.QUERY:
const queryNum = filterKeyValParams(requestVModel.value.query, defaultRequestParamsItem).validParams.length;
return `${queryNum > 0 ? queryNum : ''}`;
return `${queryNum.value > 0 ? queryNum.value : ''}`;
case RequestComposition.REST:
const restNum = filterKeyValParams(requestVModel.value.rest, defaultRequestParamsItem).validParams.length;
return `${restNum > 0 ? restNum : ''}`;
return `${restNum.value > 0 ? restNum.value : ''}`;
case RequestComposition.PRECONDITION:
return `${
requestVModel.value.children[0].preProcessorConfig.processors.length > 99
? '99+'
: requestVModel.value.children[0].preProcessorConfig.processors.length || ''
}`;
return `${preProcessorNum.value > 99 ? '99+' : preProcessorNum.value || ''}`;
case RequestComposition.POST_CONDITION:
return `${
requestVModel.value.children[0].postProcessorConfig.processors.length > 99
? '99+'
: requestVModel.value.children[0].postProcessorConfig.processors.length || ''
}`;
return `${postProcessorNum.value > 99 ? '99+' : postProcessorNum.value || ''}`;
case RequestComposition.ASSERTION:
return `${
requestVModel.value.children[0].assertionConfig.assertions.length > 99
? '99+'
: requestVModel.value.children[0].assertionConfig.assertions.length || ''
}`;
return `${assertionsNum.value > 99 ? '99+' : assertionsNum.value || ''}`;
case RequestComposition.AUTH:
return requestVModel.value.authConfig.authType !== RequestAuthType.NONE ? '1' : '';
default:
@ -623,11 +650,6 @@
const currentPluginScript = computed<Record<string, any>[]>(
() => pluginScriptMap.value[requestVModel.value.protocol]?.script || []
);
// 复制 api 只要加载过一次后就会保存，所以 props.request 是不为空的
const isCopyApiNeedInit = computed(() => _stepType.value.isCopyApi && props.request === undefined);
const isEditableApi = computed(
() => _stepType.value.isCopyApi || props.step?.stepType === ScenarioStepType.CUSTOM_REQUEST || !props.step
);
// 处理插件表单输入框变化
const handlePluginFormChange = debounce(() => {
@ -1045,7 +1067,37 @@
resourceId: res.id,
...parseRequestBodyResult,
};
if (_stepType.value.isQuoteApi && props.request && isHttpProtocol.value) {
// 初始化引用的详情后，需要要把外面传入的数据的请求头、请求体、query、rest里面的参数值写入
['headers', 'query', 'rest'].forEach((type) => {
props.request?.[type]?.forEach((item) => {
if (!item.key.length) return;
const index = requestVModel.value[type]?.findIndex((itemReq) => itemReq.key === item.key);
// 相同key的进行替换值;key不同的取交集
if (index > -1) {
requestVModel.value[type][index].value = item.value;
} else {
requestVModel.value[type].push(item);
}
});
});
['formDataBody', 'wwwFormBody'].forEach((type) => {
props.request?.body?.[type].formValues.forEach((item) => {
if (!item.key.length) return;
const index = requestVModel.value.body[type].formValues.findIndex((itemReq) => itemReq.key === item.key);
if (index > -1) {
requestVModel.value.body[type].formValues[index].value = item.value;
} else {
requestVModel.value.body[type].formValues.push(item);
}
});
});
if (props.request?.body.binaryBody.file) {
requestVModel.value.body.binaryBody.file = props.request?.body.binaryBody.file;
}
}
nextTick(() => {
requestVModel.value.activeTab = contentTabList.value[0].value;
// 等待内容渲染出来再隐藏loading
loading.value = false;
});

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

@ -5,7 +5,7 @@
:mask="false"
:width="900"
:footer="false"
:show-full-screen="!isShowEditStepNameInput"
show-full-screen
no-content-padding
@close="handleClose"
>
@ -67,7 +67,7 @@
:disabled-param-value="isQuote"
:request="requestVModel"
:is-priority-local-exec="isPriorityLocalExec"
:file-save-as-source-id="requestVModel.id"
:file-save-as-source-id="requestVModel.resourceId"
:file-module-options-api="getTransferOptionsCase"
:file-save-as-api="transferFileCase"
:upload-temp-file="uploadTempFileCase"
@ -133,6 +133,7 @@
const defaultCaseParams: RequestParam = {
id: `case-${Date.now()}`,
resourceId: '',
type: 'case',
moduleId: 'root',
protocol: 'HTTP',
@ -203,7 +204,7 @@
() =>
activeStep.value?.stepType === ScenarioStepType.API_CASE && activeStep.value?.refType === ScenarioStepRefType.COPY
);
const isCopyNeedInit = computed(() => isCopyCase.value && props.request?.request === null);
const isCopyNeedInit = computed(() => isCopyCase.value && props.request === undefined);
const isQuote = computed(
() =>
activeStep.value?.stepType === ScenarioStepType.API_CASE && activeStep.value?.refType === ScenarioStepRefType.REF
@ -280,10 +281,11 @@
debugSocket(executeType); // 开启websocket
let res;
const params = {
apiDefinitionId: requestVModel.value.apiDefinitionId,
...makeRequestParams,
reportId: reportId.value,
};
if (!(requestVModel.value.id as string).startsWith('c') && executeType === 'serverExec') {
if (!(requestVModel.value.resourceId as string).startsWith('c') && executeType === 'serverExec') {
// 已创建的服务端
res = await runCase(params);
} else {
@ -317,7 +319,7 @@
async function initQuoteCaseDetail() {
try {
loading.value = true;
const res = await getCaseDetail(props.request?.id as string);
const res = await getCaseDetail(activeStep.value?.resourceId || '');
let parseRequestBodyResult;
if (res.protocol === 'HTTP') {
parseRequestBodyResult = parseRequestBodyFiles(res.request.body); // 解析请求体中的文件，将详情中的文件 id 集合收集，更新时以判断文件是否删除以及是否新上传的文件
@ -334,10 +336,11 @@
response: cloneDeep(defaultResponse),
url: res.path,
name: res.name, // request里面还有个name但是是null
id: res.id,
resourceId: res.id,
...parseRequestBodyResult,
};
nextTick(() => {
requestAndResponseRef.value?.setActiveTabByFirst();
// 等待内容渲染出来再隐藏loading
loading.value = false;
});
@ -352,12 +355,10 @@
() => visible.value,
async (val) => {
if (val) {
if (props.request) {
requestVModel.value = { ...cloneDeep(defaultCaseParams), ...props.request };
if (isQuote.value || isCopyNeedInit.value) {
// 引用时，需要初始化引用的详情；复制只在第一次初始化的时候需要加载后台数据(request.request是复制请求时列表参数字段request会为 null，以此判断释放第一次初始化)
initQuoteCaseDetail();
}
requestVModel.value = { ...cloneDeep(defaultCaseParams), ...props.request };
if (isQuote.value || isCopyNeedInit.value) {
// 引用时，需要初始化引用的详情；复制只在第一次初始化的时候需要加载后台数据(request.request是复制请求时列表参数字段request会为 null，以此判断释放第一次初始化)
initQuoteCaseDetail();
}
await initLocalConfig();
}