From 087bfb417f1b153dcdda043e9d19b10a2d8455fe Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Fri, 12 Apr 2024 11:52:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E5=8F=82=E6=95=B0=E7=9A=84=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E5=94=AF=E4=B8=80=E7=9A=84=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?(=E8=AF=B7=E6=B1=82=E5=A4=B4,=E8=AF=B7=E6=B1=82=E4=BD=93,Query,?=
 =?UTF-8?q?REST)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pure/ms-form-table/index.vue   | 335 +++++++++++-------
 .../pure/ms-form-table/locale/zh-CN.ts        |   1 +
 .../components/pure/ms-table/base-table.vue   |   2 +
 .../components/requestComposition/body.vue    |   1 +
 .../components/requestComposition/header.vue  |   1 +
 .../components/requestComposition/index.vue   |  74 ++++
 .../components/requestComposition/query.vue   |   1 +
 .../components/requestComposition/rest.vue    |   1 +
 frontend/src/views/api-test/debug/index.vue   |   1 +
 .../components/management/api/index.vue       |   1 +
 .../case/createAndEditCaseDrawer.vue          |   5 +
 .../components/management/index.vue           |   1 +
 12 files changed, 290 insertions(+), 134 deletions(-)

diff --git a/frontend/src/components/pure/ms-form-table/index.vue b/frontend/src/components/pure/ms-form-table/index.vue
index d15b06d720..d66c2bba88 100644
--- a/frontend/src/components/pure/ms-form-table/index.vue
+++ b/frontend/src/components/pure/ms-form-table/index.vue
@@ -1,148 +1,168 @@
 <template>
-  <MsBaseTable
-    v-bind="propsRes"
-    :hoverable="false"
-    is-simple-setting
-    :span-method="props.spanMethod"
-    :class="!props.selectable && !props.draggable ? 'ms-form-table-no-left-action' : ''"
-    v-on="propsEvent"
-    @drag-change="tableChange"
-  >
-    <!-- 展开行-->
-    <template #expand-icon="{ expanded, record }">
-      <div class="flex items-center gap-[2px] text-[var(--color-text-4)]">
-        <MsIcon :type="expanded ? 'icon-icon_split_turn-down_arrow' : 'icon-icon_split-turn-down-left'" />
-        <div v-if="record.children">{{ record.children.length }}</div>
-      </div>
-    </template>
-    <template
-      v-for="item of props.columns.filter((e) => e.slotName !== undefined)"
-      #[item.slotName!]="{ record, rowIndex, column }"
+  <a-form ref="formRef" :model="propsRes">
+    <MsBaseTable
+      v-bind="propsRes"
+      :hoverable="false"
+      is-simple-setting
+      :span-method="props.spanMethod"
+      :class="!props.selectable && !props.draggable ? 'ms-form-table-no-left-action' : ''"
+      v-on="propsEvent"
+      @drag-change="tableChange"
+      @init-end="validateAndUpdateErrorMessageList"
     >
-      <slot :name="item.slotName" v-bind="{ record, rowIndex, column, dataIndex: item.dataIndex, columnConfig: item }">
-        <a-tooltip
-          v-if="item.hasRequired"
-          :content="t(record.required ? 'msFormTable.paramRequired' : 'msFormTable.paramNotRequired')"
+      <!-- 展开行-->
+      <template #expand-icon="{ expanded, record }">
+        <div class="flex items-center gap-[2px] text-[var(--color-text-4)]">
+          <MsIcon :type="expanded ? 'icon-icon_split_turn-down_arrow' : 'icon-icon_split-turn-down-left'" />
+          <div v-if="record.children">{{ record.children.length }}</div>
+        </div>
+      </template>
+      <template
+        v-for="item of props.columns.filter((e) => e.slotName !== undefined)"
+        :key="item.toString()"
+        #[item.slotName!]="{ record, rowIndex, column }"
+      >
+        <a-form-item
+          :field="`data[${rowIndex}].${item.dataIndex}`"
+          label=""
+          :rules="{
+            validator: (value, callback) => {
+              validRepeat(rowIndex, item.dataIndex as string, value, callback);
+            },
+          }"
         >
-          <MsButton
-            type="icon"
-            :class="[
-              record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
-              '!mr-[4px] !p-[4px]',
-            ]"
-            size="mini"
-            @click="toggleRequired(record, rowIndex, item)"
+          <slot
+            :name="item.slotName"
+            v-bind="{ record, rowIndex, column, dataIndex: item.dataIndex, columnConfig: item }"
           >
-            <div>*</div>
-          </MsButton>
-        </a-tooltip>
-        <a-input
-          v-if="item.inputType === 'input'"
-          v-model:model-value="record[item.dataIndex as string]"
-          :placeholder="t(item.locale)"
-          class="ms-form-table-input"
-          :max-length="255"
-          size="mini"
-          @input="() => handleFormChange(record, rowIndex, item)"
-        />
-        <a-select
-          v-else-if="item.inputType === 'select'"
-          v-model:model-value="record[item.dataIndex as string]"
-          :options="item.typeOptions || []"
-          class="ms-form-table-input w-full"
-          size="mini"
-          @change="() => handleFormChange(record, rowIndex, item)"
-        />
-        <MsTagsInput
-          v-else-if="item.inputType === 'tags'"
-          v-model:model-value="record[item.dataIndex as string]"
-          :max-tag-count="1"
-          input-class="ms-form-table-input"
-          size="mini"
-          @change="() => handleFormChange(record, rowIndex, item)"
-          @clear="() => handleFormChange(record, rowIndex, item)"
-        />
-        <a-switch
-          v-else-if="item.inputType === 'switch'"
-          v-model:model-value="record[item.dataIndex as string]"
-          size="small"
-          class="ms-form-table-input-switch"
-          type="line"
-          @change="() => handleFormChange(record, rowIndex, item)"
-        />
-        <a-checkbox
-          v-else-if="item.inputType === 'checkbox'"
-          v-model:model-value="record[item.dataIndex as string]"
-          @change="() => handleFormChange(record, rowIndex, item)"
-        />
-        <template v-else-if="item.inputType === 'autoComplete'">
-          <a-auto-complete
-            v-model:model-value="record[item.dataIndex as string]"
-            :data="item.autoCompleteParams?.filter((e) => e.isShow === true)"
-            class="ms-form-table-input"
-            :trigger-props="{ contentClass: 'ms-form-table-input-trigger' }"
-            :filter-option="false"
-            size="small"
-            @search="(val) => handleSearchParams(val, item)"
-            @change="() => handleFormChange(record, rowIndex, item)"
-            @select="(val) => selectAutoComplete(val, record, item)"
-          >
-            <template #option="{ data: opt }">
-              <div class="w-[350px]">
-                {{ opt.raw.value }}
-                <a-tooltip :content="t(opt.raw.desc)" position="bl" :mouse-enter-delay="300">
-                  <div class="one-line-text max-w-full text-[12px] leading-[16px] text-[var(--color-text-4)]">
-                    {{ t(opt.raw.desc) }}
+            <a-tooltip
+              v-if="item.hasRequired"
+              :content="t(record.required ? 'msFormTable.paramRequired' : 'msFormTable.paramNotRequired')"
+            >
+              <MsButton
+                type="icon"
+                :class="[
+                  record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
+                  '!mr-[4px] !p-[4px]',
+                ]"
+                size="mini"
+                @click="toggleRequired(record, rowIndex, item)"
+              >
+                <div>*</div>
+              </MsButton>
+            </a-tooltip>
+            <a-input
+              v-if="item.inputType === 'input'"
+              v-model:model-value="record[item.dataIndex as string]"
+              :placeholder="t(item.locale)"
+              class="ms-form-table-input"
+              :max-length="255"
+              size="mini"
+              @input="() => handleFormChange(record, rowIndex, item)"
+            />
+            <a-select
+              v-else-if="item.inputType === 'select'"
+              v-model:model-value="record[item.dataIndex as string]"
+              :options="item.typeOptions || []"
+              class="ms-form-table-input w-full"
+              size="mini"
+              @change="() => handleFormChange(record, rowIndex, item)"
+            />
+            <MsTagsInput
+              v-else-if="item.inputType === 'tags'"
+              v-model:model-value="record[item.dataIndex as string]"
+              :max-tag-count="1"
+              input-class="ms-form-table-input"
+              size="mini"
+              @change="() => handleFormChange(record, rowIndex, item)"
+              @clear="() => handleFormChange(record, rowIndex, item)"
+            />
+            <a-switch
+              v-else-if="item.inputType === 'switch'"
+              v-model:model-value="record[item.dataIndex as string]"
+              size="small"
+              class="ms-form-table-input-switch"
+              type="line"
+              @change="() => handleFormChange(record, rowIndex, item)"
+            />
+            <a-checkbox
+              v-else-if="item.inputType === 'checkbox'"
+              v-model:model-value="record[item.dataIndex as string]"
+              @change="() => handleFormChange(record, rowIndex, item)"
+            />
+            <template v-else-if="item.inputType === 'autoComplete'">
+              <a-auto-complete
+                v-model:model-value="record[item.dataIndex as string]"
+                :data="item.autoCompleteParams?.filter((e) => e.isShow === true)"
+                class="ms-form-table-input"
+                :trigger-props="{ contentClass: 'ms-form-table-input-trigger' }"
+                :filter-option="false"
+                size="small"
+                @search="(val) => handleSearchParams(val, item)"
+                @change="() => handleFormChange(record, rowIndex, item)"
+                @select="(val) => selectAutoComplete(val, record, item)"
+              >
+                <template #option="{ data: opt }">
+                  <div class="w-[350px]">
+                    {{ opt.raw.value }}
+                    <a-tooltip :content="t(opt.raw.desc)" position="bl" :mouse-enter-delay="300">
+                      <div class="one-line-text max-w-full text-[12px] leading-[16px] text-[var(--color-text-4)]">
+                        {{ t(opt.raw.desc) }}
+                      </div>
+                    </a-tooltip>
                   </div>
-                </a-tooltip>
+                </template>
+              </a-auto-complete>
+            </template>
+            <template v-else-if="item.inputType === 'text'">
+              {{
+                typeof item.valueFormat === 'function'
+                  ? item.valueFormat(record)
+                  : record[item.dataIndex as string] || '-'
+              }}
+            </template>
+            <template v-else-if="item.dataIndex === 'action'">
+              <div
+                :key="item.dataIndex"
+                class="flex flex-row items-center"
+                :class="{ 'justify-end': item.align === 'right' }"
+              >
+                <slot
+                  name="operationPre"
+                  v-bind="{ record, rowIndex, column, dataIndex: item.dataIndex, columnConfig: item }"
+                ></slot>
+                <MsTableMoreAction
+                  v-if="item.moreAction"
+                  :list="getMoreActionList(item.moreAction, record)"
+                  @select="(e) => handleMoreActionSelect(e, record, item, rowIndex)"
+                />
+                <icon-minus-circle
+                  v-if="dataLength > 1 && rowIndex !== dataLength - 1"
+                  class="ml-[8px] cursor-pointer text-[var(--color-text-4)]"
+                  size="20"
+                  @click="deleteParam(record, rowIndex)"
+                />
               </div>
             </template>
-          </a-auto-complete>
-        </template>
-        <template v-else-if="item.inputType === 'text'">
-          {{
-            typeof item.valueFormat === 'function' ? item.valueFormat(record) : record[item.dataIndex as string] || '-'
-          }}
-        </template>
-        <template v-else-if="item.dataIndex === 'action'">
-          <div
-            :key="item.dataIndex"
-            class="flex flex-row items-center"
-            :class="{ 'justify-end': item.align === 'right' }"
-          >
-            <slot
-              name="operationPre"
-              v-bind="{ record, rowIndex, column, dataIndex: item.dataIndex, columnConfig: item }"
-            ></slot>
-            <MsTableMoreAction
-              v-if="item.moreAction"
-              :list="getMoreActionList(item.moreAction, record)"
-              @select="(e) => handleMoreActionSelect(e, record, item, rowIndex)"
-            />
-            <icon-minus-circle
-              v-if="dataLength > 1 && rowIndex !== dataLength - 1"
-              class="ml-[8px] cursor-pointer text-[var(--color-text-4)]"
-              size="20"
-              @click="deleteParam(record, rowIndex)"
-            />
-          </div>
-        </template>
-      </slot>
-    </template>
-    <template
-      v-for="item of props.columns.filter((e) => e.titleSlotName !== undefined)"
-      #[item.titleSlotName!]="{ record, rowIndex, column }"
-    >
-      <slot
-        :name="item.titleSlotName"
-        v-bind="{ record, rowIndex, column, dataIndex: item.dataIndex, columnConfig: item }"
+          </slot>
+        </a-form-item>
+      </template>
+      <template
+        v-for="item of props.columns.filter((e) => e.titleSlotName !== undefined)"
+        #[item.titleSlotName!]="{ record, rowIndex, column }"
       >
-      </slot>
-    </template>
-  </MsBaseTable>
+        <slot
+          :name="item.titleSlotName"
+          v-bind="{ record, rowIndex, column, dataIndex: item.dataIndex, columnConfig: item }"
+        >
+        </slot>
+      </template>
+    </MsBaseTable>
+  </a-form>
 </template>
 
 <script setup lang="ts">
+  import { FormInstance } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
@@ -167,6 +187,7 @@
     required?: boolean; // 是否必填
     inputType?: 'input' | 'select' | 'tags' | 'switch' | 'text' | 'checkbox' | 'autoComplete'; // 输入组件类型
     autoCompleteParams?: SelectOptionData[]; // 自动补全参数
+    needValidRepeat?: boolean; // 是否需要判断重复
     valueFormat?: (record: Record<string, any>) => string; // 展示值格式化，仅在inputType为text时生效
     [key: string]: any; // 扩展属性
   }
@@ -258,6 +279,35 @@
 
   const dataLength = computed(() => propsRes.value.data.length);
 
+  // 校验重复
+  const formRef = ref<FormInstance>();
+  async function validRepeat(rowIndex: number, dataIndex: string, value: any, callback: (error?: string) => void) {
+    const currentColumn = props.columns.find((item) => item.dataIndex === dataIndex);
+    if (!currentColumn?.needValidRepeat) {
+      callback();
+      return;
+    }
+    propsRes.value.data?.forEach((row, index) => {
+      if (row[dataIndex].length && index !== rowIndex && row[dataIndex] === value) {
+        callback(`${t(currentColumn?.title as string)}${t('msFormTable.paramRepeatMessage')}`);
+      }
+    });
+    callback();
+  }
+
+  // 校验并更新错误信息列表
+  const setErrorMessageList: ((params: string[]) => void) | undefined = inject('setErrorMessageList', undefined);
+  const errorMessageList = ref<string[]>([]); // 错误信息列表
+  async function validateAndUpdateErrorMessageList() {
+    if (typeof setErrorMessageList === 'function' && props.columns.some((item) => item.needValidRepeat)) {
+      await nextTick();
+      formRef.value?.validate((errors) => {
+        errorMessageList.value = !errors ? [] : [...new Set(Object.values(errors).map(({ message }) => message))];
+        setErrorMessageList(errorMessageList.value);
+      });
+    }
+  }
+
   watch(
     () => selectedKeys.value,
     (arr) => {
@@ -276,6 +326,7 @@
     () => props.data,
     (arr) => {
       propsRes.value.data = arr as any[];
+      validateAndUpdateErrorMessageList();
     },
     {
       immediate: true,
@@ -468,4 +519,20 @@
     line-height: 16px;
     color: var(--color-text-1);
   }
+  :deep(.arco-form-item) {
+    margin-bottom: 0;
+    .arco-form-item-label-col {
+      display: none;
+    }
+    .arco-form-item-content,
+    .arco-form-item-wrapper-col {
+      min-height: auto;
+    }
+    .arco-form-item-message {
+      margin-bottom: 0;
+    }
+    .arco-form-item-content-flex {
+      flex-wrap: nowrap;
+    }
+  }
 </style>
diff --git a/frontend/src/components/pure/ms-form-table/locale/zh-CN.ts b/frontend/src/components/pure/ms-form-table/locale/zh-CN.ts
index c5a3da9df6..1de516c3f7 100644
--- a/frontend/src/components/pure/ms-form-table/locale/zh-CN.ts
+++ b/frontend/src/components/pure/ms-form-table/locale/zh-CN.ts
@@ -1,4 +1,5 @@
 export default {
   'msFormTable.paramRequired': '必填',
   'msFormTable.paramNotRequired': '非必填',
+  'msFormTable.paramRepeatMessage': '唯一，不能重复',
 };
diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
index acac20e6d1..5b48bfcd89 100644
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@@ -331,6 +331,7 @@
     (e: 'clearSelector'): void;
     (e: 'filterChange', dataIndex: string, value: (string | number)[], multiple: boolean, isCustomParam: boolean): void;
     (e: 'moduleChange'): void;
+    (e: 'initEnd'): void;
   }>();
   const attrs = useAttrs();
 
@@ -408,6 +409,7 @@
         scrollObj.value = {};
         currentColumns.value = arr || tmpArr;
       }
+      emit('initEnd');
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error('InitColumn failed', error);
diff --git a/frontend/src/views/api-test/components/requestComposition/body.vue b/frontend/src/views/api-test/components/requestComposition/body.vue
index 67ad80b950..e866457ee9 100644
--- a/frontend/src/views/api-test/components/requestComposition/body.vue
+++ b/frontend/src/views/api-test/components/requestComposition/body.vue
@@ -208,6 +208,7 @@
       {
         title: 'apiTestDebug.paramName',
         dataIndex: 'key',
+        needValidRepeat: true,
         slotName: 'key',
         width: 240,
       },
diff --git a/frontend/src/views/api-test/components/requestComposition/header.vue b/frontend/src/views/api-test/components/requestComposition/header.vue
index c03aa5584d..b71a97afaf 100644
--- a/frontend/src/views/api-test/components/requestComposition/header.vue
+++ b/frontend/src/views/api-test/components/requestComposition/header.vue
@@ -59,6 +59,7 @@
       dataIndex: 'key',
       slotName: 'key',
       inputType: 'autoComplete',
+      needValidRepeat: true,
       autoCompleteParams: responseHeaderOption,
     },
     {
diff --git a/frontend/src/views/api-test/components/requestComposition/index.vue b/frontend/src/views/api-test/components/requestComposition/index.vue
index 50da0e44e4..8409c6bd0d 100644
--- a/frontend/src/views/api-test/components/requestComposition/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/index.vue
@@ -496,6 +496,12 @@
     () => import('@/views/api-test/management/components/addDependencyDrawer.vue')
   );
 
+  export interface TabErrorMessage {
+    value: string;
+    label: string;
+    messageList: string[];
+  }
+
   export interface RequestCustomAttr {
     type: 'api' | 'case' | 'mock' | 'doc'; // 展示的请求 tab 类型；api包含了接口调试和接口定义
     isNew: boolean;
@@ -505,6 +511,9 @@
     executeLoading: boolean; // 执行中loading
     isCopy?: boolean; // 是否是复制
     isExecute?: boolean; // 是否是执行
+    errorMessageInfo?: {
+      [key: string]: Record<string, any>;
+    };
   }
   export type RequestParam = ExecuteApiRequestFullParams & {
     responseDefinition?: ResponseItem[];
@@ -1346,6 +1355,59 @@
     }
   }
 
+  function initErrorMessageInfoItem(key) {
+    if (requestVModel.value.errorMessageInfo && !requestVModel.value.errorMessageInfo[key]) {
+      requestVModel.value.errorMessageInfo[key] = {};
+    }
+  }
+
+  function changeTabErrorMessageList(tabKey: string, formErrorMessageList: string[]) {
+    if (!requestVModel.value.errorMessageInfo) return;
+    const label = contentTabList.value.find((item) => item.value === tabKey)?.label ?? '';
+    const listItem: TabErrorMessage = {
+      value: tabKey,
+      label,
+      messageList: formErrorMessageList,
+    };
+    // TODO: 处理前置的sql 后置的sql和提取 断言的响应头和变量
+    if (requestVModel.value.activeTab === RequestComposition.BODY) {
+      initErrorMessageInfoItem(RequestComposition.BODY);
+      requestVModel.value.errorMessageInfo[RequestComposition.BODY][requestVModel.value.body.bodyType] =
+        cloneDeep(listItem);
+    } else {
+      requestVModel.value.errorMessageInfo[requestVModel.value.activeTab] = cloneDeep(listItem);
+    }
+  }
+
+  const setErrorMessageList = debounce((list: string[]) => {
+    changeTabErrorMessageList(requestVModel.value.activeTab, list);
+  }, 300);
+  provide('setErrorMessageList', setErrorMessageList);
+
+  // 需要最终提示的信息
+  function getFlattenedMessages() {
+    if (!requestVModel.value.errorMessageInfo) return;
+    const flattenedMessages: { label: string; messageList: string[] }[] = [];
+    const { errorMessageInfo } = requestVModel.value;
+    Object.values(errorMessageInfo).forEach((item) => {
+      const label = item.label || (Object.values(item)[0] && Object.values(item)[0].label);
+      const messageList: string[] =
+        item.messageList || [...new Set(Object.values(item).flatMap((bodyType) => bodyType.messageList))] || [];
+      if (messageList.length) {
+        flattenedMessages.push({ label, messageList: [...new Set(messageList)] });
+      }
+    });
+    return flattenedMessages;
+  }
+
+  function showMessage() {
+    getFlattenedMessages()?.forEach(({ label, messageList }) => {
+      messageList?.forEach((message) => {
+        Message.error(`${label}${message}`);
+      });
+    });
+  }
+
   function handleSave(done: (closed: boolean) => void) {
     saveModalFormRef.value?.validate(async (errors) => {
       if (!errors) {
@@ -1368,6 +1430,11 @@
         // 插件需要校验动态表单
         await fApi.value?.validate();
       }
+      // 检查全部的校验信息
+      if (getFlattenedMessages()?.length) {
+        showMessage();
+        return;
+      }
       if (!requestVModel.value.isNew) {
         // 更新接口不需要弹窗，直接更新保存
         updateRequest();
@@ -1487,6 +1554,11 @@
       if (errors) {
         requestVModel.value.activeTab = RequestComposition.BASE_INFO;
       } else {
+        // 检查全部的校验信息
+        if (getFlattenedMessages()?.length) {
+          showMessage();
+          return;
+        }
         switch (value) {
           case 'save':
             handleSaveShortcut();
@@ -1565,6 +1637,8 @@
     execute,
     makeRequestParams,
     changeVerticalExpand,
+    getFlattenedMessages,
+    showMessage,
   });
 </script>
 
diff --git a/frontend/src/views/api-test/components/requestComposition/query.vue b/frontend/src/views/api-test/components/requestComposition/query.vue
index 1eb43c6f62..109accb621 100644
--- a/frontend/src/views/api-test/components/requestComposition/query.vue
+++ b/frontend/src/views/api-test/components/requestComposition/query.vue
@@ -68,6 +68,7 @@
       title: 'apiTestDebug.paramName',
       dataIndex: 'key',
       slotName: 'key',
+      needValidRepeat: true,
     },
     {
       title: 'apiTestDebug.paramType',
diff --git a/frontend/src/views/api-test/components/requestComposition/rest.vue b/frontend/src/views/api-test/components/requestComposition/rest.vue
index bc82099345..d7b5dc2f9d 100644
--- a/frontend/src/views/api-test/components/requestComposition/rest.vue
+++ b/frontend/src/views/api-test/components/requestComposition/rest.vue
@@ -69,6 +69,7 @@
       title: 'apiTestDebug.paramName',
       dataIndex: 'key',
       slotName: 'key',
+      needValidRepeat: true,
     },
     {
       title: 'apiTestDebug.paramType',
diff --git a/frontend/src/views/api-test/debug/index.vue b/frontend/src/views/api-test/debug/index.vue
index 1dcdafce7a..d11ad15573 100644
--- a/frontend/src/views/api-test/debug/index.vue
+++ b/frontend/src/views/api-test/debug/index.vue
@@ -212,6 +212,7 @@
     response: cloneDeep(defaultResponse),
     isNew: true,
     executeLoading: false,
+    errorMessageInfo: {},
   };
   const debugTabs = ref<RequestParam[]>([cloneDeep(defaultDebugParams)]);
   const activeDebug = ref<RequestParam>(debugTabs.value[0]);
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 2a2e8cfe4a..017847f4db 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
@@ -275,6 +275,7 @@
     executeLoading: false,
     preDependency: [], // 前置依赖
     postDependency: [], // 后置依赖
+    errorMessageInfo: {},
   };
 
   function addApiTab(defaultProps?: Partial<TabItem>) {
diff --git a/frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue b/frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue
index 1358f95659..d056f2848d 100644
--- a/frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue
+++ b/frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue
@@ -237,6 +237,11 @@
   function handleDrawerConfirm(isContinue: boolean) {
     formRef.value?.validate(async (errors) => {
       if (!errors) {
+        // 检查全部的校验信息
+        if (requestCompositionRef.value?.getFlattenedMessages()?.length) {
+          requestCompositionRef.value?.showMessage();
+          return;
+        }
         drawerLoading.value = true;
         // 给后端传的参数
         if (!requestCompositionRef.value?.makeRequestParams()) return;
diff --git a/frontend/src/views/api-test/management/components/management/index.vue b/frontend/src/views/api-test/management/components/management/index.vue
index 5a42217c0f..daa417fd4e 100644
--- a/frontend/src/views/api-test/management/components/management/index.vue
+++ b/frontend/src/views/api-test/management/components/management/index.vue
@@ -205,6 +205,7 @@
     executeLoading: false,
     preDependency: [], // 前置依赖
     postDependency: [], // 后置依赖
+    errorMessageInfo: {},
   };
 
   // 监听模块树的激活节点变化，记录表格数据的模块 id