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

fix(接口调试): 组件显隐切换问题解决&前后置详情问题解决

This commit is contained in:
baiqi 2024-02-27 15:46:02 +08:00 committed by Craftsman
parent ee9928ebca
commit 558dbcfff6
5 changed files with 116 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/business/ms-params-input/locale/zh-CN.ts
View File

@ -19,8 +19,8 @@ export default {
'ms.paramsInput.minIntegerPlaceholder': '输入整数，如 1', 'ms.paramsInput.minIntegerPlaceholder': '输入整数，如 1',
'ms.paramsInput.float': '浮点数', 'ms.paramsInput.float': '浮点数',
'ms.paramsInput.floatDesc': '返回一个随机的浮点数，整数1-10，小数部分位数的最小值2，最大值5', 'ms.paramsInput.floatDesc': '返回一个随机的浮点数，整数1-10，小数部分位数的最小值2，最大值5',
'ms.paramsInput.floatMin': '小数位数最小值', 'ms.paramsInput.floatMin': '小数部分位数最小值',
'ms.paramsInput.floatMax': '小数位数最大值', 'ms.paramsInput.floatMax': '小数部分位数最大值',
'ms.paramsInput.floatIntegerMin': '整数部分最小值', 'ms.paramsInput.floatIntegerMin': '整数部分最小值',
'ms.paramsInput.floatIntegerMax': '整数部分最大值', 'ms.paramsInput.floatIntegerMax': '整数部分最大值',
'ms.paramsInput.commonPlaceholder': '请输入', 'ms.paramsInput.commonPlaceholder': '请输入',

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

@ -317,10 +317,9 @@
/> />
<InsertCommonScript <InsertCommonScript
v-model:visible="showQuoteDrawer" v-model:visible="showQuoteDrawer"
:checked-id="condition.scriptId" :checked-id="condition.commonScriptInfo?.id"
enable-radio-selected enable-radio-selected
@save="saveQuoteScriptHandler" @save="saveQuoteScriptHandler"
@add-script="showAddScriptDrawer = true"
/> />
<AddScriptDrawer <AddScriptDrawer
v-model:visible="showAddScriptDrawer" v-model:visible="showAddScriptDrawer"

27
frontend/src/views/api-test/components/condition/index.vue
View File

@ -17,7 +17,7 @@
<slot name="titleRight"></slot> <slot name="titleRight"></slot>
</div> </div>
</div> </div>
<div v-if="data.length > 0" class="flex h-[calc(100%-40px)] gap-[8px]"> <div v-if="data.length > 0 && activeItem" class="flex h-[calc(100%-40px)] gap-[8px]">
<div class="h-full w-[20%] min-w-[220px]"> <div class="h-full w-[20%] min-w-[220px]">
<conditionList <conditionList
v-model:list="data" v-model:list="data"
@ -38,8 +38,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useVModel } from '@vueuse/core';
import { LanguageEnum } from '@/components/pure/ms-code-editor/types'; import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
import conditionContent from './content.vue'; import conditionContent from './content.vue';
import conditionList from './list.vue'; import conditionList from './list.vue';
@ -64,7 +62,9 @@
const { t } = useI18n(); const { t } = useI18n();
const data = useVModel(props, 'list', emit); const data = defineModel<ExecuteConditionProcessor[]>('list', {
required: true,
});
const activeItem = ref<ExecuteConditionProcessor>(data.value[0]); const activeItem = ref<ExecuteConditionProcessor>(data.value[0]);
function handleListActiveChange(item: ExecuteConditionProcessor) { function handleListActiveChange(item: ExecuteConditionProcessor) {
@ -156,6 +156,25 @@
activeItem.value = data.value[data.value.length - 1]; activeItem.value = data.value[data.value.length - 1];
emit('change'); emit('change');
} }
watchEffect(() => {
// 后台存储无id，渲染时需要手动添加一次
let hasNoIdItem = false;
const tempArr = props.list.map((item, i) => {
if (!item.id) {
hasNoIdItem = true;
return {
...item,
id: new Date().getTime() + i,
};
}
return item;
});
if (hasNoIdItem) {
data.value = tempArr.map((e) => e);
[activeItem.value] = data.value;
}
});
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>

15
frontend/src/views/api-test/components/condition/list.vue
View File

@ -83,21 +83,6 @@
]; ];
watchEffect(() => { watchEffect(() => {
// 后台存储无id，渲染时需要手动添加一次
let hasNoIdItem = false;
const tempArr = props.list.map((item, i) => {
if (!item.id) {
hasNoIdItem = true;
return {
...item,
id: new Date().getTime() + i,
};
}
return item;
});
if (hasNoIdItem) {
data.value = tempArr;
}
activeItem.value = data.value.find((item) => item.id === props.activeId) || data.value[0] || {}; activeItem.value = data.value.find((item) => item.id === props.activeId) || data.value[0] || {};
emit('activeChange', activeItem.value); emit('activeChange', activeItem.value);
}); });

180
frontend/src/views/api-test/components/requestComposition/index.vue
View File

@ -105,17 +105,17 @@
/> />
</div> </div>
<div ref="splitContainerRef" class="h-[calc(100%-40px)]"> <div ref="splitContainerRef" class="h-[calc(100%-40px)]">
<a-spin class="h-full w-full" :loading="requestVModel.executeLoading"> <MsSplitBox
<MsSplitBox ref="splitBoxRef"
ref="splitBoxRef" v-model:size="splitBoxSize"
v-model:size="splitBoxSize" :max="0.98"
:max="0.98" min="10px"
min="10px" :direction="activeLayout"
:direction="activeLayout" second-container-class="!overflow-y-hidden"
second-container-class="!overflow-y-hidden" @expand-change="handleExpandChange"
@expand-change="handleExpandChange" >
> <template #first>
<template #first> <a-spin class="block h-full w-full" :loading="requestVModel.executeLoading">
<div <div
:class="`flex h-full min-w-[800px] flex-col px-[18px] pb-[16px] ${ :class="`flex h-full min-w-[800px] flex-col px-[18px] pb-[16px] ${
activeLayout === 'horizontal' ? ' pr-[16px]' : '' activeLayout === 'horizontal' ? ' pr-[16px]' : ''
@ -130,88 +130,88 @@
/> />
</div> </div>
<div class="tab-pane-container"> <div class="tab-pane-container">
<div v-show="requestVModel.activeTab === RequestComposition.PLUGIN"> <a-spin
<a-spin :loading="pluginLoading" class="min-h-[100px] w-full"> v-if="requestVModel.activeTab === RequestComposition.PLUGIN"
<MsFormCreate :loading="pluginLoading"
v-model:api="fApi" class="min-h-[100px] w-full"
:rule="currentPluginScript" >
:option="currentPluginOptions" <MsFormCreate
@change="handlePluginFormChange" v-model:api="fApi"
/> :rule="currentPluginScript"
</a-spin> :option="currentPluginOptions"
</div> @change="handlePluginFormChange"
<div v-show="requestVModel.activeTab === RequestComposition.HEADER">
<debugHeader
v-show="requestVModel.activeTab === RequestComposition.HEADER"
v-model:params="requestVModel.headers"
:layout="activeLayout"
:second-box-height="secondBoxHeight"
@change="handleActiveDebugChange"
/> />
</div> </a-spin>
<div v-show="requestVModel.activeTab === RequestComposition.BODY"> <debugHeader
<debugBody v-if="requestVModel.activeTab === RequestComposition.HEADER"
v-model:params="requestVModel.body" v-model:params="requestVModel.headers"
:layout="activeLayout" :layout="activeLayout"
:second-box-height="secondBoxHeight" :second-box-height="secondBoxHeight"
:upload-temp-file-api="props.uploadTempFileApi" @change="handleActiveDebugChange"
@change="handleActiveDebugChange" />
/> <debugBody
</div> v-else-if="requestVModel.activeTab === RequestComposition.BODY"
<div v-show="requestVModel.activeTab === RequestComposition.QUERY"> v-model:params="requestVModel.body"
<debugQuery :layout="activeLayout"
v-model:params="requestVModel.query" :second-box-height="secondBoxHeight"
:layout="activeLayout" :upload-temp-file-api="props.uploadTempFileApi"
:second-box-height="secondBoxHeight" @change="handleActiveDebugChange"
@change="handleActiveDebugChange" />
/> <debugQuery
</div> v-else-if="requestVModel.activeTab === RequestComposition.QUERY"
<div v-show="requestVModel.activeTab === RequestComposition.REST"> v-model:params="requestVModel.query"
<debugRest :layout="activeLayout"
v-model:params="requestVModel.rest" :second-box-height="secondBoxHeight"
:layout="activeLayout" @change="handleActiveDebugChange"
:second-box-height="secondBoxHeight" />
@change="handleActiveDebugChange" <debugRest
/> v-else-if="requestVModel.activeTab === RequestComposition.REST"
</div> v-model:params="requestVModel.rest"
<div v-show="requestVModel.activeTab === RequestComposition.PRECONDITION"> :layout="activeLayout"
<precondition :second-box-height="secondBoxHeight"
v-model:config="requestVModel.children[0].preProcessorConfig" @change="handleActiveDebugChange"
@change="handleActiveDebugChange" />
/> <precondition
</div> v-else-if="requestVModel.activeTab === RequestComposition.PRECONDITION"
<div v-show="requestVModel.activeTab === RequestComposition.POST_CONDITION"> v-model:config="requestVModel.children[0].preProcessorConfig"
<postcondition @change="handleActiveDebugChange"
v-model:config="requestVModel.children[0].postProcessorConfig" />
:response="requestVModel.response.requestResults[0]?.responseResult.body" <postcondition
:layout="activeLayout" v-else-if="requestVModel.activeTab === RequestComposition.POST_CONDITION"
:second-box-height="secondBoxHeight" v-model:config="requestVModel.children[0].postProcessorConfig"
@change="handleActiveDebugChange" :response="requestVModel.response.requestResults[0]?.responseResult.body"
/> :layout="activeLayout"
</div> :second-box-height="secondBoxHeight"
<div v-show="requestVModel.activeTab === RequestComposition.AUTH"> @change="handleActiveDebugChange"
<debugAuth v-model:params="requestVModel.authConfig" @change="handleActiveDebugChange" /> />
</div> <debugAuth
<div v-show="requestVModel.activeTab === RequestComposition.SETTING"> v-else-if="requestVModel.activeTab === RequestComposition.AUTH"
<debugSetting v-model:params="requestVModel.otherConfig" @change="handleActiveDebugChange" /> v-model:params="requestVModel.authConfig"
</div> @change="handleActiveDebugChange"
/>
<debugSetting
v-else-if="requestVModel.activeTab === RequestComposition.SETTING"
v-model:params="requestVModel.otherConfig"
@change="handleActiveDebugChange"
/>
</div> </div>
</div> </div>
</template> </a-spin>
<template #second> </template>
<response <template #second>
v-model:active-layout="activeLayout" <response
v-model:active-tab="requestVModel.responseActiveTab" v-model:active-layout="activeLayout"
:is-expanded="isExpanded" v-model:active-tab="requestVModel.responseActiveTab"
:response="requestVModel.response" :is-expanded="isExpanded"
:hide-layout-switch="props.hideResponseLayoutSwitch" :response="requestVModel.response"
:request="requestVModel" :hide-layout-switch="props.hideResponseLayoutSwitch"
@change-expand="changeExpand" :request="requestVModel"
@change-layout="handleActiveLayoutChange" :loading="requestVModel.executeLoading"
/> @change-expand="changeExpand"
</template> @change-layout="handleActiveLayoutChange"
</MsSplitBox> />
</a-spin> </template>
</MsSplitBox>
</div> </div>
</div> </div>
<a-modal <a-modal