fix(接口测试): 修复接口测试部分bug (#29807)

Co-authored-by: xinxin.wu <xinxin.wu@fit2cloud.com>

frontend/src/components/business/ms-common-script/insertCommonScript.vue

@@ -16,7 +16,7 @@
     @cancel="handleDrawerCancel"
   >
     <div class="mb-4 flex items-center justify-between">
-      <a-button type="outline" @click="addCommonScript">
+      <a-button v-permission="['PROJECT_CUSTOM_FUNCTION:READ+ADD']" type="outline" @click="addCommonScript">
         {{ t('project.commonScript.addPublicScript') }}
       </a-button>
       <a-input-search

frontend/src/components/business/ms-common-script/utils.ts

@@ -1,12 +1,26 @@
 import { Language, LanguageEnum } from '@/components/pure/ms-code-editor/types';
 
 import { useI18n } from '@/hooks/useI18n';
+import { hasAnyPermission } from '@/utils/permission';
 
 import type { CommonScriptMenu } from '@/models/projectManagement/commonScript';
 import { RequestConditionScriptLanguage } from '@/enums/apiEnum';
 
 const { t } = useI18n();
 
+function getInsertCommonScript() {
+  if (hasAnyPermission(['PROJECT_CUSTOM_FUNCTION:READ'])) {
+    return [
+      {
+        title: t('project.processor.insertPublicScript'),
+        value: 'custom_function',
+        command: 'custom_function',
+      },
+    ];
+  }
+  return [];
+}
+
 export const SCRIPT_MENU: CommonScriptMenu[] = [
   {
     title: t('project.code_segment.importApiTest'),
@@ -42,11 +56,7 @@ export const SCRIPT_MENU: CommonScriptMenu[] = [
     title: t('project.processor.paramEnvironmentSetGlobalVariable'),
     value: `vars.put(\${__metersphere_env_id}+"key","value");\nvars.put("key","value");`,
   },
-  {
+  ...getInsertCommonScript(),
-    title: t('project.processor.insertPublicScript'),
-    value: 'custom_function',
-    command: 'custom_function',
-  },
   {
     title: t('project.processor.terminationTest'),
     value: 'ctx.getEngine().stopTest();',

frontend/src/components/pure/ms-advance-filter/index.vue

@@ -28,10 +28,11 @@
           </span>
         </span>
       </MsTag> -->
+
+      <slot name="right"></slot>
       <MsTag no-margin size="large" class="cursor-pointer" theme="outline" @click="handleRefresh">
         <MsIcon class="text-[var(color-text-4)]" :size="16" type="icon-icon_reset_outlined" />
       </MsTag>
-      <slot name="right"></slot>
     </div>
   </div>
   <FilterForm

frontend/src/store/modules/setting/useProjectEnvStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { number } from 'echarts';
+import { cloneDeep } from 'lodash-es';
 import localforage from 'localforage';
 
 import { getDetailEnv, getGlobalParamDetail } from '@/api/modules/project-management/envManagement';
@@ -17,6 +17,7 @@ import {
 export const ALL_PARAM = 'allParam';
 export const NEW_ENV_PARAM = 'newEnvParam';
 export const NEW_ENV_GROUP = 'newEnvGroup';
+// 环境默认配置项
 const envParamsDefaultConfig: EnvConfig = {
   commonVariables: [],
   httpConfig: [],
@@ -70,6 +71,7 @@ const useProjectEnvStore = defineStore(
     const backupEnvDetailInfo = ref<EnvDetailItem>({
       projectId: '',
       name: '',
+      description: '',
       config: envParamsDefaultConfig,
     });
     const allParamDetailInfo = ref<GlobalParams>(); // 全局参数详情
@@ -106,14 +108,14 @@ const useProjectEnvStore = defineStore(
           backupEnvDetailInfo.value = {
             projectId: appStore.currentProjectId,
             name: '',
-            config: envParamsDefaultConfig,
+            config: cloneDeep(envParamsDefaultConfig),
           };
         } else if (id === ALL_PARAM) {
           allParamDetailInfo.value = await getGlobalParamDetail(appStore.currentProjectId);
         } else if (id !== ALL_PARAM && id) {
           const tmpObj = await getDetailEnv(id);
           currentEnvDetailInfo.value = { ...tmpObj };
-          backupEnvDetailInfo.value = tmpObj;
+          backupEnvDetailInfo.value = cloneDeep(tmpObj);
         }
       } catch (e) {
         // eslint-disable-next-line no-console

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

@@ -207,7 +207,12 @@
             {{ condition.commonScriptInfo?.name || '-' }}
           </div>
           <a-divider margin="8px" direction="vertical" />
-          <MsButton type="text" class="font-medium" @click="showQuoteDrawer = true">
+          <MsButton
+            v-permission="['PROJECT_CUSTOM_FUNCTION:READ']"
+            type="text"
+            class="font-medium"
+            @click="showQuoteDrawer = true"
+          >
             {{ t('apiTestDebug.quote') }}
           </MsButton>
         </div>

frontend/src/views/api-test/components/requestComposition/response/result/index.vue

@@ -77,7 +77,7 @@
   <a-spin
     v-else
     :loading="loading"
-    :class="[props.isResponseModel ? 'h-[300px] w-full' : 'h-[calc(100%-35px)] w-full px-[18px] pb-[18px]']"
+    :class="[props.isResponseModel ? 'h-full w-full' : 'h-[calc(100%-35px)] w-full px-[18px] pb-[18px]']"
   >
     <result
       v-model:active-tab="activeTab"
@@ -256,7 +256,10 @@
         stepDetailInfo.value = cloneDeep(res) as any;
         // TODO 子请求后台数据不全--需要后边有数据进行测试
         activeStepDetail.value = stepDetailInfo.value[activeIndex.value];
-        subRequestResults.value = stepDetailInfo.value[activeIndex.value].content.subRequestResults;
+        if (stepDetailInfo.value.length) {
+          subRequestResults.value = stepDetailInfo.value[activeIndex.value].content.subRequestResults;
+        }
+
         if (activeType.value === 'ResContent') {
           activeStepDetailCopy.value = cloneDeep(activeStepDetail.value);
         } else {

frontend/src/views/api-test/components/requestComposition/response/result/tiledDisplay.vue

@@ -35,7 +35,7 @@
             <div v-if="!expandIds.includes(item.value) && item.value === ResponseComposition.CONSOLE" class="res-item">
               <ResConsole :console="props.console?.trim()" />
             </div>
-            <div v-if="!expandIds.includes(item.value) && item.value === ResponseComposition.HEADER" class="res-item">
+            <div v-if="!expandIds.includes(item.value) && item.value === ResponseComposition.HEADER" class="">
               <ResValueScript :active-tab="item.value" :request-result="props.requestResult" />
             </div>
             <div v-if="!expandIds.includes(item.value) && item.value === ResponseComposition.REAL_REQUEST">

frontend/src/views/api-test/report/component/caseReportCom.vue

@@ -5,7 +5,7 @@
       <span>
         {{ detail.poolName || '-' }}
         <a-divider direction="vertical" :margin="4"></a-divider>
-        {{ detail.requestDuration || '-' }}
+        {{ detail.environmentName || '-' }}
         <a-divider direction="vertical" :margin="4"></a-divider>
         {{ detail.creatUserName || '-' }}
       </span>

frontend/src/views/api-test/report/component/reportList.vue

@@ -29,7 +29,7 @@
           type="text"
           class="one-text-line flex w-full text-[rgb(var(--primary-5))]"
           @click="showReportDetail(record.id, rowIndex, record.integrated)"
-          >{{ characterLimit(record.name) }}</div
+          >{{ characterLimit(record.name) }}-{{ dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss') }}</div
         >
       </template>
       <!-- 报告类型 -->
@@ -185,7 +185,7 @@
       title: 'report.name',
       dataIndex: 'name',
       slotName: 'name',
-      width: 200,
+      width: 300,
       showInTable: true,
       showTooltip: true,
       editType: hasAnyPermission(['PROJECT_API_REPORT:READ+UPDATE']) ? ColumnEditTypeEnum.INPUT : undefined,

frontend/src/views/api-test/report/component/step/stepTree.vue

@@ -30,7 +30,7 @@
             >
               {{ step.sort }}
             </div>
-            <div class="step-node-content flex justify-between">
+            <div class="step-node-content flex justify-between" @click.stop="showDetail(step)">
               <div class="flex items-center">
                 <!-- 步骤展开折叠按钮 -->
                 <a-tooltip
@@ -68,7 +68,7 @@
                   :status="step.stepType || ''"
                 />
                 <a-tooltip :content="step.name">
-                  <div class="step-name-container" @click.stop="showDetail(step)">
+                  <div class="step-name-container">
                     <div class="one-line-text mx-[4px] max-w-[150px] text-[var(--color-text-1)]">
                       {{ step.name }}
                     </div>
@@ -137,11 +137,11 @@
             <div v-if="!step.fold" class="line"></div>
           </div>
           <!-- 折叠展开内容 -->
-          <div v-if="showResContent(step)" class="mt-4 h-[210px] pl-2">
+          <div v-if="showResContent(step)" class="foldContent mt-4 pl-2">
             <a-scrollbar
               :style="{
                 overflow: 'auto',
-                height: '210px',
+                height: 'calc(100vh - 540px)',
                 width: '100%',
               }"
             >
@@ -427,4 +427,7 @@
     height: 1px;
     background: var(--color-text-n8);
   }
+  :deep(.foldContent .arco-scrollbar-track-direction-vertical) {
+    left: -12px !important;
+  }
 </style>

frontend/src/views/api-test/scenario/components/assertion.vue

@@ -1,5 +1,5 @@
 <template>
-  <assertion v-model:params="assertions" :is-definition="false" :assertion-config="assertionConfig" />
+  <assertion v-model:params="assertionConfig.assertions" :is-definition="false" :assertion-config="assertionConfig" />
 </template>
 
 <script setup lang="ts">
@@ -7,7 +7,6 @@
 
   import { AssertionConfig } from '@/models/apiTest/scenario';
 
-  const assertions = ref([]);
   const assertionConfig = defineModel<AssertionConfig>('assertionConfig', {
     required: true,
   });

frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue

@@ -197,7 +197,13 @@
                   height: 200,
                 },
               }"
-            ></a-tree-select>
+            >
+              <template #tree-slot-title="node">
+                <div class="inline-flex w-full">
+                  <div class="one-line-text w-[300px] text-[var(--color-text-1)]">{{ node.name }}</div>
+                </div>
+              </template>
+            </a-tree-select>
           </a-form-item>
           <MsFormCreate
             v-if="formRules.length"

frontend/src/views/case-management/caseManagementFeature/components/export/exportCaseModal.vue

@@ -74,8 +74,8 @@
           <a-button
             class="ml-3"
             type="primary"
-            :disabled="isDisabled"
             :loading="props.confirmLoading"
+            :disabled="fileList.length < 1"
             @click="saveConfirm"
             >{{ t('caseManagement.featureCase.checkTemplate') }}</a-button
           >
@@ -125,13 +125,6 @@
     emit('close');
   };
 
-  // const versionOptions = ref([
-  //   {
-  //     id: '1001',
-  //     name: 'V1.0',
-  //   },
-  // ]);
-
   const fileTypeTip = computed(() => {
     return props.validateType === 'Excel'
       ? t('caseManagement.featureCase.excelImportTip')
@@ -140,8 +133,6 @@
 
   const isRecover = ref<boolean>(false);
 
-  const isDisabled = ref<boolean>(false);
-
   // 下载excel|| xmind模板
   async function downloadExcelTemplate() {
     try {

frontend/src/views/project-management/taskCenter/component/apiCase.vue

@@ -54,7 +54,7 @@
         <span>{{ dayjs(record.operationTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
       </template>
       <template #operation="{ record }">
-        <MsButton class="!mr-0">{{ t('project.taskCenter.viewReport') }}</MsButton>
+        <MsButton class="!mr-0" @click="viewReport">{{ t('project.taskCenter.viewReport') }}</MsButton>
         <a-divider v-if="['RUNNING', 'RERUNNING'].includes(record.status)" direction="vertical" />
         <MsButton
           v-if="['RUNNING', 'RERUNNING'].includes(record.status) && hasAnyPermission(permissionsMap[props.group].stop)"
@@ -91,10 +91,12 @@
   } from '@/api/modules/project-management/taskCenter';
   import { useI18n } from '@/hooks/useI18n';
   import useModal from '@/hooks/useModal';
+  import useOpenNewPage from '@/hooks/useOpenNewPage';
   import { characterLimit } from '@/utils';
   import { hasAnyPermission } from '@/utils/permission';
 
   import { BatchApiParams } from '@/models/common';
+  import { RouteEnum } from '@/enums/routeEnum';
   import { ExecutionMethodsLabel, TaskCenterEnum } from '@/enums/taskCenter';
 
   import { TaskStatus } from './utils';
@@ -110,7 +112,7 @@
   const keyword = ref<string>('');
   const statusFilterVisible = ref(false);
   const statusListFilters = ref<string[]>(Object.keys(TaskStatus[props.moduleType]));
-
+  const { openNewPage } = useOpenNewPage();
   const filterOptions = computed(() => {
     return statusListFilters.value.map((item) => {
       return {
@@ -330,12 +332,17 @@
   const statusFilters = computed(() => {
     return Object.keys(TaskStatus[props.moduleType]);
   });
+
   function handleFilterHidden(val: boolean) {
     if (!val) {
       initData();
     }
   }
 
+  function viewReport() {
+    openNewPage(RouteEnum.API_TEST_REPORT);
+  }
+
   watch(
     () => props.moduleType,
     (val) => {

frontend/src/views/project-management/taskCenter/component/scheduledTask.vue

@@ -95,7 +95,6 @@
       dataIndex: 'value',
       slotName: 'value',
       showInTable: true,
-      isTag: true,
       width: 150,
       showDrag: true,
     },
@@ -138,7 +137,7 @@
     project: getScheduleProApiCaseList,
   });
 
-  const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector, setProps } = useTable(
+  const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(
     loadRealMap.value[props.group],
     {
       columns,
@@ -148,8 +147,8 @@
       showSetting: false,
       selectable: true,
       heightUsed: 300,
-      enableDrag: true,
+      enableDrag: false,
-      showSelectAll: true,
+      showSelectorAll: true,
     }
   );