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

2024-02-27 15:46:02 +08:00 · 2024-02-27 15:46:02 +08:00 · 558dbcfff6
parent ee9928ebca
commit 558dbcfff6
5 changed files with 116 additions and 113 deletions
--- a/frontend/src/components/business/ms-params-input/locale/zh-CN.ts
+++ b/frontend/src/components/business/ms-params-input/locale/zh-CN.ts
@ -19,8 +19,8 @@ export default {
  'ms.paramsInput.minIntegerPlaceholder': '输入整数，如 1',
  'ms.paramsInput.float': '浮点数',
  'ms.paramsInput.floatDesc': '返回一个随机的浮点数，整数1-10，小数部分位数的最小值2，最大值5',
-  'ms.paramsInput.floatMin': '小数位数最小值',
-  'ms.paramsInput.floatMax': '小数位数最大值',
+  'ms.paramsInput.floatMin': '小数部分位数最小值',
+  'ms.paramsInput.floatMax': '小数部分位数最大值',
  'ms.paramsInput.floatIntegerMin': '整数部分最小值',
  'ms.paramsInput.floatIntegerMax': '整数部分最大值',
  'ms.paramsInput.commonPlaceholder': '请输入',
--- a/frontend/src/views/api-test/components/condition/content.vue
+++ b/frontend/src/views/api-test/components/condition/content.vue
@ -317,10 +317,9 @@
  />
  <InsertCommonScript
    v-model:visible="showQuoteDrawer"
-    :checked-id="condition.scriptId"
+    :checked-id="condition.commonScriptInfo?.id"
    enable-radio-selected
    @save="saveQuoteScriptHandler"
-    @add-script="showAddScriptDrawer = true"
  />
  <AddScriptDrawer
    v-model:visible="showAddScriptDrawer"
--- a/frontend/src/views/api-test/components/condition/index.vue
+++ b/frontend/src/views/api-test/components/condition/index.vue
@ -17,7 +17,7 @@
      <slot name="titleRight"></slot>
    </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]">
      <conditionList
        v-model:list="data"
@ -38,8 +38,6 @@
 </template>

 <script setup lang="ts">
-  import { useVModel } from '@vueuse/core';
-
  import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
  import conditionContent from './content.vue';
  import conditionList from './list.vue';
@ -64,7 +62,9 @@

  const { t } = useI18n();

-  const data = useVModel(props, 'list', emit);
+  const data = defineModel<ExecuteConditionProcessor[]>('list', {
+    required: true,
+  });
  const activeItem = ref<ExecuteConditionProcessor>(data.value[0]);

  function handleListActiveChange(item: ExecuteConditionProcessor) {
@ -156,6 +156,25 @@
    activeItem.value = data.value[data.value.length - 1];
    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>

 <style lang="less" scoped></style>
--- a/frontend/src/views/api-test/components/condition/list.vue
+++ b/frontend/src/views/api-test/components/condition/list.vue
@ -83,21 +83,6 @@
  ];

  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] || {};
    emit('activeChange', activeItem.value);
  });
--- a/frontend/src/views/api-test/components/requestComposition/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/index.vue
@ -105,7 +105,6 @@
      />
    </div>
    <div ref="splitContainerRef" class="h-[calc(100%-40px)]">
-      <a-spin class="h-full w-full" :loading="requestVModel.executeLoading">
      <MsSplitBox
        ref="splitBoxRef"
        v-model:size="splitBoxSize"
@ -116,6 +115,7 @@
        @expand-change="handleExpandChange"
      >
        <template #first>
+          <a-spin class="block h-full w-full" :loading="requestVModel.executeLoading">
            <div
              :class="`flex h-full min-w-[800px] flex-col px-[18px] pb-[16px] ${
                activeLayout === 'horizontal' ? ' pr-[16px]' : ''
@ -130,8 +130,11 @@
                />
              </div>
              <div class="tab-pane-container">
-                <div v-show="requestVModel.activeTab === RequestComposition.PLUGIN">
-                  <a-spin :loading="pluginLoading" class="min-h-[100px] w-full">
+                <a-spin
+                  v-if="requestVModel.activeTab === RequestComposition.PLUGIN"
+                  :loading="pluginLoading"
+                  class="min-h-[100px] w-full"
+                >
                  <MsFormCreate
                    v-model:api="fApi"
                    :rule="currentPluginScript"
@ -139,64 +142,61 @@
                    @change="handlePluginFormChange"
                  />
                </a-spin>
-                </div>
-                <div v-show="requestVModel.activeTab === RequestComposition.HEADER">
                <debugHeader
-                    v-show="requestVModel.activeTab === RequestComposition.HEADER"
+                  v-if="requestVModel.activeTab === RequestComposition.HEADER"
                  v-model:params="requestVModel.headers"
                  :layout="activeLayout"
                  :second-box-height="secondBoxHeight"
                  @change="handleActiveDebugChange"
                />
-                </div>
-                <div v-show="requestVModel.activeTab === RequestComposition.BODY">
                <debugBody
+                  v-else-if="requestVModel.activeTab === RequestComposition.BODY"
                  v-model:params="requestVModel.body"
                  :layout="activeLayout"
                  :second-box-height="secondBoxHeight"
                  :upload-temp-file-api="props.uploadTempFileApi"
                  @change="handleActiveDebugChange"
                />
-                </div>
-                <div v-show="requestVModel.activeTab === RequestComposition.QUERY">
                <debugQuery
+                  v-else-if="requestVModel.activeTab === RequestComposition.QUERY"
                  v-model:params="requestVModel.query"
                  :layout="activeLayout"
                  :second-box-height="secondBoxHeight"
                  @change="handleActiveDebugChange"
                />
-                </div>
-                <div v-show="requestVModel.activeTab === RequestComposition.REST">
                <debugRest
+                  v-else-if="requestVModel.activeTab === RequestComposition.REST"
                  v-model:params="requestVModel.rest"
                  :layout="activeLayout"
                  :second-box-height="secondBoxHeight"
                  @change="handleActiveDebugChange"
                />
-                </div>
-                <div v-show="requestVModel.activeTab === RequestComposition.PRECONDITION">
                <precondition
+                  v-else-if="requestVModel.activeTab === RequestComposition.PRECONDITION"
                  v-model:config="requestVModel.children[0].preProcessorConfig"
                  @change="handleActiveDebugChange"
                />
-                </div>
-                <div v-show="requestVModel.activeTab === RequestComposition.POST_CONDITION">
                <postcondition
+                  v-else-if="requestVModel.activeTab === RequestComposition.POST_CONDITION"
                  v-model:config="requestVModel.children[0].postProcessorConfig"
                  :response="requestVModel.response.requestResults[0]?.responseResult.body"
                  :layout="activeLayout"
                  :second-box-height="secondBoxHeight"
                  @change="handleActiveDebugChange"
                />
-                </div>
-                <div v-show="requestVModel.activeTab === RequestComposition.AUTH">
-                  <debugAuth v-model:params="requestVModel.authConfig" @change="handleActiveDebugChange" />
-                </div>
-                <div v-show="requestVModel.activeTab === RequestComposition.SETTING">
-                  <debugSetting v-model:params="requestVModel.otherConfig" @change="handleActiveDebugChange" />
-                </div>
+                <debugAuth
+                  v-else-if="requestVModel.activeTab === RequestComposition.AUTH"
+                  v-model:params="requestVModel.authConfig"
+                  @change="handleActiveDebugChange"
+                />
+                <debugSetting
+                  v-else-if="requestVModel.activeTab === RequestComposition.SETTING"
+                  v-model:params="requestVModel.otherConfig"
+                  @change="handleActiveDebugChange"
+                />
              </div>
            </div>
+          </a-spin>
        </template>
        <template #second>
          <response
@ -206,12 +206,12 @@
            :response="requestVModel.response"
            :hide-layout-switch="props.hideResponseLayoutSwitch"
            :request="requestVModel"
+            :loading="requestVModel.executeLoading"
            @change-expand="changeExpand"
            @change-layout="handleActiveLayoutChange"
          />
        </template>
      </MsSplitBox>
-      </a-spin>
    </div>
  </div>
  <a-modal