diff --git a/frontend/src/store/modules/api/requestComposition.ts b/frontend/src/store/modules/api/requestComposition.ts new file mode 100644 index 0000000000..72aa385fbb --- /dev/null +++ b/frontend/src/store/modules/api/requestComposition.ts @@ -0,0 +1,21 @@ +import { defineStore } from 'pinia'; +import { cloneDeep } from 'lodash-es'; + +import type { RequestCompositionState } from './types'; + +// 用于记录请求组合的临时插件表单数据 +const useRequestCompositionStore = defineStore('visit', { + state: (): RequestCompositionState => ({ + temporaryPluginFormMap: {}, + }), + getters: { + pluginFormMap: (state) => state.temporaryPluginFormMap, + }, + actions: { + setPluginFormMap(id: string | number, pluginForm?: Record) { + this.temporaryPluginFormMap[id] = pluginForm ? cloneDeep(pluginForm) : {}; + }, + }, +}); + +export default useRequestCompositionStore; diff --git a/frontend/src/store/modules/api/types.ts b/frontend/src/store/modules/api/types.ts new file mode 100644 index 0000000000..727f317d80 --- /dev/null +++ b/frontend/src/store/modules/api/types.ts @@ -0,0 +1,7 @@ +export interface TemporaryPluginForm { + [key: string]: any; +} + +export interface RequestCompositionState { + temporaryPluginFormMap: TemporaryPluginForm; +} diff --git a/frontend/src/views/api-test/components/requestComposition/index.vue b/frontend/src/views/api-test/components/requestComposition/index.vue index 01cacf7c77..ab06cb276a 100644 --- a/frontend/src/views/api-test/components/requestComposition/index.vue +++ b/frontend/src/views/api-test/components/requestComposition/index.vue @@ -451,6 +451,7 @@ import { getSocket } from '@/api/modules/project-management/commonScript'; import { getProjectOptions } from '@/api/modules/project-management/projectMember'; import { useI18n } from '@/hooks/useI18n'; + import useRequestCompositionStore from '@/store/modules/api/requestComposition'; import useAppStore from '@/store/modules/app'; import useUserStore from '@/store/modules/user'; import { filterTree, filterTreeNode, getGenerateId, parseQueryParams } from '@/utils'; @@ -556,6 +557,7 @@ const appStore = useAppStore(); const userStore = useUserStore(); const { t } = useI18n(); + const requestCompositionStore = useRequestCompositionStore(); const loading = defineModel('detailLoading', { default: false }); const requestVModel = defineModel('request', { required: true }); @@ -738,7 +740,6 @@ const localExecuteUrl = computed(() => userStore.localExecuteUrl); // 本地执行地址 const pluginScriptMap = ref>({}); // 存储初始化过后的插件配置 - const temporaryPluginFormMap: Record = {}; // 缓存插件表单,避免切换tab导致动态表单数据丢失 const pluginLoading = ref(false); const fApi = ref(); const currentPluginOptions = computed>( @@ -750,7 +751,7 @@ // 处理插件表单输入框变化 const handlePluginFormChange = debounce(() => { - temporaryPluginFormMap[requestVModel.value.id] = fApi.value?.formData(); + requestCompositionStore.setPluginFormMap(requestVModel.value.id, fApi.value?.formData()); handleActiveDebugChange(); }, 300); @@ -783,7 +784,7 @@ * 设置插件表单数据 */ async function setPluginFormData() { - const tempForm = temporaryPluginFormMap[requestVModel.value.id]; + const tempForm = requestCompositionStore.pluginFormMap[requestVModel.value.id]; if (tempForm || !requestVModel.value.isNew || requestVModel.value.isCopy) { // 如果缓存的表单数据存在或者是编辑状态,则需要将之前的输入数据填充 const formData = tempForm || requestVModel.value; diff --git a/frontend/src/views/api-test/management/components/management/api/index.vue b/frontend/src/views/api-test/management/components/management/api/index.vue index 03b31183a6..c636e37ac3 100644 --- a/frontend/src/views/api-test/management/components/management/api/index.vue +++ b/frontend/src/views/api-test/management/components/management/api/index.vue @@ -14,7 +14,7 @@ @open-edit-api-tab="openApiTab" /> -
+