From 7a551f25a3c047fe0796b91eeb88a58a05ecdd1d Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Mon, 15 Jul 2024 17:32:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(json-schema):=20=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/style/global.less         |  6 +++-
 .../components/pure/ms-form-table/index.vue   |  6 ++--
 .../components/pure/ms-json-schema/index.vue  |  2 ++
 .../components/requestComposition/body.vue    | 16 +++++++---
 .../components/common/customApiDrawer.vue     |  2 +-
 .../scenario/components/step/stepTree.vue     | 14 ++++++++-
 .../src/views/api-test/scenario/index.vue     | 29 +++++++++++++++++++
 7 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/frontend/src/assets/style/global.less b/frontend/src/assets/style/global.less
index dbe4e94db7..dc6e6daa7d 100644
--- a/frontend/src/assets/style/global.less
+++ b/frontend/src/assets/style/global.less
@@ -159,11 +159,15 @@ body {
   color: var(--color-text-1);
 }
 .ms-params-popover-value {
+  @apply overflow-y-auto;
+  .ms-scroll-bar();
+
   min-width: 100px;
   max-width: 280px;
+  max-height: 300px;
   font-size: 12px;
-  line-height: 16px;
   color: var(--color-text-1);
+  line-height: 16px;
 }
 
 /* 表格必填按钮 button */
diff --git a/frontend/src/components/pure/ms-form-table/index.vue b/frontend/src/components/pure/ms-form-table/index.vue
index b2b0d873ec..fe79f97273 100644
--- a/frontend/src/components/pure/ms-form-table/index.vue
+++ b/frontend/src/components/pure/ms-form-table/index.vue
@@ -229,7 +229,7 @@
 
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
-  import type { MsTableColumnData } from '@/components/pure/ms-table/type';
+  import type { MsTableColumnData, MsTableProps } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
@@ -332,7 +332,7 @@
     }
   }
 
-  const { propsRes, propsEvent } = useTable(() => Promise.resolve([]), {
+  const tableProps = ref<Partial<MsTableProps<Record<string, any>>>>({
     firstColumnWidth: 32,
     tableKey: props.showSetting ? props.tableKey : undefined,
     scroll: props.scroll,
@@ -346,6 +346,8 @@
     showPagination: false,
     rowSelection: props.selectable ? undefined : props.rowSelection,
   });
+
+  const { propsRes, propsEvent } = useTable(() => Promise.resolve([]), tableProps.value);
   const selectedKeys = computed(() => propsRes.value.data.filter((e) => e.enable).map((e) => e.id));
   propsEvent.value.rowSelectChange = (record: Record<string, any>) => {
     propsRes.value.data = propsRes.value.data.map((e) => {
diff --git a/frontend/src/components/pure/ms-json-schema/index.vue b/frontend/src/components/pure/ms-json-schema/index.vue
index 4ab51b6732..e9d9f20472 100644
--- a/frontend/src/components/pure/ms-json-schema/index.vue
+++ b/frontend/src/components/pure/ms-json-schema/index.vue
@@ -309,6 +309,7 @@
     :width="600"
     :title="t('ms.json.schema.advancedSettings')"
     :ok-text="t('common.save')"
+    :footer="!props.disabled"
     @confirm="applySetting"
   >
     <a-form ref="setting" :model="activeRecord" :disabled="props.disabled" layout="vertical">
@@ -606,6 +607,7 @@
       width: 32,
     };
   });
+
   // 初始化根节点
   watchEffect(() => {
     if (data.value.length === 0) {
diff --git a/frontend/src/views/api-test/components/requestComposition/body.vue b/frontend/src/views/api-test/components/requestComposition/body.vue
index e56e675472..01612c5633 100644
--- a/frontend/src/views/api-test/components/requestComposition/body.vue
+++ b/frontend/src/views/api-test/components/requestComposition/body.vue
@@ -96,7 +96,7 @@
               ? 'font-medium !text-[rgb(var(--primary-5))]'
               : '!text-[var(--color-text-4)]'
           "
-          @click="innerParams.jsonBody.enableJsonSchema = true"
+          @click="handleChangeJsonType('Schema')"
           >Schema</MsButton
         >
         <a-divider :margin="0" direction="vertical"></a-divider>
@@ -108,7 +108,7 @@
               ? 'font-medium !text-[rgb(var(--primary-5))]'
               : '!text-[var(--color-text-4)]'
           "
-          @click="innerParams.jsonBody.enableJsonSchema = false"
+          @click="handleChangeJsonType('Json')"
           >Json</MsButton
         >
       </div>
@@ -147,11 +147,12 @@
     >
       <template #rightTitle>
         <a-button
-          v-if="innerParams.bodyType === RequestBodyFormat.JSON"
+          v-if="
+            innerParams.bodyType === RequestBodyFormat.JSON && !props.disabledExceptParam && !props.disabledParamValue
+          "
           type="outline"
           class="arco-btn-outline--secondary p-[0_8px]"
           size="mini"
-          :disabled="props.disabledExceptParam || props.disabledParamValue"
           @click="autoMakeJson"
         >
           <div class="text-[var(--color-text-1)]">{{ t('apiTestManagement.autoMake') }}</div>
@@ -465,6 +466,13 @@
     innerParams.value.bodyType = val;
     emit('change');
   }
+
+  function handleChangeJsonType(type: 'Schema' | 'Json') {
+    innerParams.value.jsonBody.enableJsonSchema = type === 'Schema';
+    if (!props.disabledExceptParam && !props.disabledParamValue && innerParams.value.jsonBody.jsonValue === '') {
+      autoMakeJson();
+    }
+  }
 </script>
 
 <style lang="less" scoped></style>
diff --git a/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue b/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
index d953b98439..9db392badd 100644
--- a/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
@@ -215,7 +215,7 @@
           class="sticky-content no-content relative top-0 mx-[16px] border-b"
           @tab-click="requestTabClick"
         />
-        <div :class="`request-content-and-response ${activeLayout}`">
+        <div v-if="visible" :class="`request-content-and-response ${activeLayout}`">
           <a-spin class="request block h-full w-full" :loading="requestVModel.executeLoading || loading">
             <div class="request-tab-pane flex flex-col p-[16px]">
               <a-spin
diff --git a/frontend/src/views/api-test/scenario/components/step/stepTree.vue b/frontend/src/views/api-test/scenario/components/step/stepTree.vue
index ac3ba87aae..5c107e104f 100644
--- a/frontend/src/views/api-test/scenario/components/step/stepTree.vue
+++ b/frontend/src/views/api-test/scenario/components/step/stepTree.vue
@@ -457,6 +457,7 @@
   import { cloneDeep } from 'lodash-es';
 
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import { parseTableDataToJsonSchema } from '@/components/pure/ms-json-schema/utils';
   import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
   import MsTree from '@/components/business/ms-tree/index.vue';
@@ -1244,7 +1245,18 @@
       }
       if (realStep && !realStep.isQuoteScenarioStep) {
         request.isNew = false;
-        stepDetails.value[realStep.id] = request;
+        stepDetails.value[realStep.id] = {
+          ...request,
+          body: {
+            ...request.body,
+            jsonBody: {
+              ...request.body.jsonBody,
+              jsonSchema: request.body.jsonBody.jsonSchemaTableData
+                ? parseTableDataToJsonSchema(request.body.jsonBody.jsonSchemaTableData[0])
+                : undefined,
+            },
+          },
+        };
         scenario.value.stepFileParam[realStep?.id] = {
           linkFileIds: request.linkFileIds,
           uploadFileIds: request.uploadFileIds,
diff --git a/frontend/src/views/api-test/scenario/index.vue b/frontend/src/views/api-test/scenario/index.vue
index 0e28c801de..b417f2932b 100644
--- a/frontend/src/views/api-test/scenario/index.vue
+++ b/frontend/src/views/api-test/scenario/index.vue
@@ -112,6 +112,7 @@
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
   import MsEnvironmentSelect from '@/components/business/ms-environment-select/index.vue';
+  import { RequestParam } from './components/common/customApiDrawer.vue';
   import scenarioModuleTree from './components/scenarioModuleTree.vue';
   import executeButton from '@/views/api-test/components/executeButton.vue';
   import ScenarioTable from '@/views/api-test/scenario/components/scenarioTable.vue';
@@ -530,6 +531,33 @@
     apiTableRef.value?.loadScenarioList();
   }
 
+  function getStepDetails() {
+    const stepDetails: Record<string, ScenarioStepDetails> = {};
+    activeScenarioTab.value.steps.forEach((step) => {
+      const currentDetail = activeScenarioTab.value.stepDetails[step.id] as RequestParam;
+      if (
+        currentDetail &&
+        [ScenarioStepType.API, ScenarioStepType.API_CASE, ScenarioStepType.CUSTOM_REQUEST].includes(step.stepType)
+      ) {
+        // 接口类型需要处理 json-schema 的循环引用
+        stepDetails[step.id] = {
+          ...currentDetail,
+          body: {
+            ...currentDetail.body,
+            jsonBody: {
+              ...currentDetail.body.jsonBody,
+              jsonSchema: currentDetail.body.jsonBody.jsonSchema,
+              jsonSchemaTableData: [], // 原树形结构存在循环引用，这里要去掉以免 axios 序列化失败
+            },
+          },
+        };
+      } else {
+        stepDetails[step.id] = activeScenarioTab.value.stepDetails[step.id];
+      }
+    });
+    return stepDetails;
+  }
+
   async function realSaveScenario() {
     try {
       saveLoading.value = true;
@@ -537,6 +565,7 @@
       if (activeScenarioTab.value.isNew) {
         const res = await addScenario({
           ...activeScenarioTab.value,
+          stepDetails: getStepDetails(),
           steps: mapTree(activeScenarioTab.value.steps, (node) => {
             return {
               ...node,