fix(项目管理): 修复环境管理tab展示bug&报告bug

frontend/src/components/pure/ms-table/base-table.vue

@@ -51,7 +51,7 @@
               v-model:model-value="record.tableChecked"
               @change="(val) => handleRadioChange(val as boolean, record)"
             />
-            <div v-if="attrs.showPagination" class="w-[16px]"></div>
+            <div v-if="attrs.showPagination && props.showSelectorAll" class="w-[16px]"></div>
           </template>
         </a-table-column>
         <a-table-column

frontend/src/enums/envEnum.ts

@@ -9,3 +9,15 @@ export enum EnvAuthTypeEnum {
   ENVIRONMENT_PARAM = 'ENVIRONMENT_PARAM', // 环境参数
   ENVIRONMENT_GROUP = 'ENVIRONMENT_GROUP', // 环境组
 }
+
+// 环境的tab
+export enum EnvTabTypeEnum {
+  ENVIRONMENT_PARAM = 'ENVIRONMENT_PARAM', // 环境变量
+  ENVIRONMENT_HTTP = 'ENVIRONMENT_HTTP', // Http
+  ENVIRONMENT_DATABASE = 'ENVIRONMENT_DATABASE', // 数据库
+  ENVIRONMENT_HOST = 'ENVIRONMENT_HOST', // 域名
+  ENVIRONMENT_PRE = 'ENVIRONMENT_PRE', // 前置
+  ENVIRONMENT_POST = 'ENVIRONMENT_POST', // 后置
+  ENVIRONMENT_ASSERT = 'ENVIRONMENT_ASSERT', // 断言
+  ENVIRONMENT_SETTING = 'SETTING', // 设置
+}

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

@@ -343,10 +343,10 @@
   }
 
   function showStatus(item: ScenarioItemType) {
-    if (showApiType.value.includes(item.stepType)) {
+    if (showApiType.value.includes(item.stepType) && item.status && item.status !== 'PENDING') {
       return true;
     }
-    return item.children && item.children.length > 0;
+    return item.children && item.children.length > 0 && item.status && item.status !== 'PENDING';
   }
 
   function handleStop(event: Event, step: ScenarioItemType) {

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

@@ -89,11 +89,11 @@
         color: 'rgb(var(--success-6))',
       },
       {
-        percentage: (props.reportDetail.stepFakeErrorCount / getCountTotal.value) * 100,
+        percentage: (props.reportDetail.stepErrorCount / getCountTotal.value) * 100,
         color: 'rgb(var(--danger-6))',
       },
       {
-        percentage: (props.reportDetail.stepErrorCount / getCountTotal.value) * 100,
+        percentage: (props.reportDetail.stepFakeErrorCount / getCountTotal.value) * 100,
         color: 'rgb(var(--warning-6))',
       },
       {

frontend/src/views/api-test/scenario/create/index.vue

@@ -35,15 +35,24 @@
             v-model:pre-processor-config="scenario.scenarioConfig.preProcessorConfig"
           />
         </a-tab-pane>
-        <a-tab-pane
+        <a-tab-pane :key="ScenarioCreateComposition.ASSERTION" class="scenario-create-tab-pane">
-          :key="ScenarioCreateComposition.ASSERTION"
-          :title="t('apiScenario.assertion')"
-          class="scenario-create-tab-pane"
-        >
           <assertion
             v-if="activeKey === ScenarioCreateComposition.ASSERTION"
             v-model:assertion-config="scenario.scenarioConfig.assertionConfig"
           />
+          <template #title>
+            <div class="flex items-center">
+              <div> {{ t('apiScenario.assertion') }}</div>
+              <a-badge
+                v-if="scenario.scenarioConfig.assertionConfig.assertions.length"
+                class="-mb-[2px] ml-2"
+                :class="activeKey === ScenarioCreateComposition.ASSERTION ? 'active-badge' : ''"
+                :max-count="99"
+                :text="assertCount"
+              >
+              </a-badge>
+            </div>
+          </template>
         </a-tab-pane>
         <a-tab-pane
           :key="ScenarioCreateComposition.SETTING"
@@ -159,6 +168,12 @@
     });
   }
 
+  const assertCount = computed(() => {
+    return scenario.value.scenarioConfig.assertionConfig.assertions.length > 99
+      ? '99+'
+      : `${scenario.value.scenarioConfig.assertionConfig.assertions.length}` || '';
+  });
+
   defineExpose({
     validScenarioForm,
   });
@@ -182,4 +197,10 @@
       padding: 8px 16px;
     }
   }
+  :deep(.active-badge) {
+    .arco-badge-text,
+    .arco-badge-number {
+      background-color: rgb(var(--primary-5));
+    }
+  }
 </style>

frontend/src/views/project-management/environmental/components/EnvParamBox.vue

@@ -32,30 +32,27 @@
           />
         </a-form-item>
       </a-form>
-
+      <MsTab
-      <a-tabs v-if="contentTabList.length" v-model:active-key="activeKey" class="no-content" @change="handleTabChange">
+        v-model:active-key="activeKey"
-        <a-tab-pane v-for="item of contentTabList" :key="item.value" :title="t(item.label)" />
+        :content-tab-list="contentTabList"
-        <a-tab-pane key="displaySetting" :title="t('project.environmental.displaySetting')" />
+        :get-text-func="getTabBadge"
-      </a-tabs>
+        class="no-content relative mb-[16px] border-b"
-    </div>
+        @change="handleTabChange"
-    <a-divider
-      :margin="0"
-      :class="{
-        '!mb-[16px]': !(activeKey === 'pre' || activeKey === 'post'),
-      }"
       />
+    </div>
     <div class="content h-full">
-      <EnvParamsTab v-if="activeKey === 'envParams'" />
+      <EnvParamsTab v-if="activeKey === EnvTabTypeEnum.ENVIRONMENT_PARAM" />
-      <HttpTab v-else-if="activeKey === 'http'" />
+      <HttpTab v-else-if="activeKey === EnvTabTypeEnum.ENVIRONMENT_HTTP" />
-      <DataBaseTab v-else-if="activeKey === 'database'" />
+      <DataBaseTab v-else-if="activeKey === EnvTabTypeEnum.ENVIRONMENT_DATABASE" />
-      <HostTab v-else-if="activeKey === 'host'" ref="hostTabRef" />
+      <HostTab v-else-if="activeKey === EnvTabTypeEnum.ENVIRONMENT_HOST" ref="hostTabRef" />
-      <!-- <PreTab v-else-if="activeKey === 'pre'" />
+      <div
-      <PostTab v-else-if="activeKey === 'post'" /> -->
+        v-else-if="activeKey === EnvTabTypeEnum.ENVIRONMENT_PRE || activeKey === EnvTabTypeEnum.ENVIRONMENT_POST"
-      <div v-else-if="activeKey === 'pre' || activeKey === 'post'" class="h-full">
+        class="h-full"
+      >
         <PreAndPostTab :active-type="activeKey" />
       </div>
 
-      <AssertTab v-else-if="activeKey === 'assert'" />
+      <AssertTab v-else-if="activeKey === EnvTabTypeEnum.ENVIRONMENT_ASSERT" />
       <template v-for="item in envPluginList" :key="item.pluginId">
         <PluginTab
           v-if="activeKey === item.pluginId"
@@ -81,6 +78,7 @@
   import { Message } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
 
+  import MsTab from '@/components/pure/ms-tab/index.vue';
   import TabSettingDrawer from './common/TabSettingDrawer.vue';
   import AssertTab from './envParams/AssertTab.vue';
   import DataBaseTab from './envParams/DatabaseTab.vue';
@@ -98,6 +96,7 @@
   import { hasAnyPermission } from '@/utils/permission';
 
   import { ContentTabItem, EnvPluginListItem } from '@/models/projectManagement/environmental';
+  import { EnvTabTypeEnum } from '@/enums/envEnum';
 
   import { defaultHeaderParamsItem } from '@/views/api-test/components/config';
   import { filterKeyValParams } from '@/views/api-test/components/utils';
@@ -109,7 +108,7 @@
     (e: 'resetEnv'): void;
   }>();
 
-  const activeKey = ref('envParams');
+  const activeKey = ref<string>(EnvTabTypeEnum.ENVIRONMENT_PARAM);
   const envForm = ref();
   const { t } = useI18n();
   const loading = ref(false);
@@ -136,46 +135,55 @@
   const contentTabList = ref<ContentTabItem[]>([]);
   const isDisabled = computed(() => !hasAnyPermission(['PROJECT_ENVIRONMENT:READ+UPDATE']));
 
+  const settingList = [
+    {
+      value: EnvTabTypeEnum.ENVIRONMENT_SETTING,
+      label: t('project.environmental.displaySetting'),
+      canHide: false,
+      isShow: true,
+    },
+  ];
+
   const sourceTabList = [
     {
-      value: 'envParams',
+      value: EnvTabTypeEnum.ENVIRONMENT_PARAM,
-      label: 'project.environmental.envParams',
+      label: t('project.environmental.envParams'),
       canHide: false,
       isShow: true,
     },
     {
-      value: 'http',
+      value: EnvTabTypeEnum.ENVIRONMENT_HTTP,
-      label: 'project.environmental.HTTP',
+      label: t('project.environmental.HTTP'),
       canHide: true,
       isShow: true,
     },
     {
-      value: 'database',
+      value: EnvTabTypeEnum.ENVIRONMENT_DATABASE,
-      label: 'project.environmental.database',
+      label: t('project.environmental.database'),
       canHide: true,
       isShow: true,
     },
     {
-      value: 'host',
+      value: EnvTabTypeEnum.ENVIRONMENT_HOST,
-      label: 'project.environmental.HOST',
+      label: t('project.environmental.HOST'),
       canHide: true,
       isShow: true,
     },
     {
-      value: 'pre',
+      value: EnvTabTypeEnum.ENVIRONMENT_PRE,
-      label: 'project.environmental.pre',
+      label: t('project.environmental.pre'),
       canHide: true,
       isShow: true,
     },
     {
-      value: 'post',
+      value: EnvTabTypeEnum.ENVIRONMENT_POST,
-      label: 'project.environmental.post',
+      label: t('project.environmental.post'),
       canHide: true,
       isShow: true,
     },
     {
-      value: 'assert',
+      value: EnvTabTypeEnum.ENVIRONMENT_ASSERT,
-      label: 'project.environmental.assert',
+      label: t('project.environmental.assert'),
       canHide: true,
       isShow: true,
     },
@@ -191,7 +199,7 @@
     }
   };
   await initPlugin();
-  await store.initContentTabList([...sourceTabList, ...pluginTabList.value]);
+  await store.initContentTabList([...sourceTabList, ...pluginTabList.value, ...settingList]);
   contentTabList.value = ((await store.getContentTabList()) || []).filter((item) => item.isShow);
   // 插件状态存储
 
@@ -274,10 +282,20 @@
   };
 
   const handleTabChange = (key: string | number) => {
-    if (key === 'displaySetting') {
+    if (key === 'SETTING') {
       tabSettingVisible.value = true;
     }
   };
+
+  function getTabBadge(tabKey: string) {
+    switch (tabKey) {
+      case EnvTabTypeEnum.ENVIRONMENT_ASSERT:
+        const assertLength = store.currentEnvDetailInfo.config.assertionConfig.assertions.length;
+        return `${assertLength > 99 ? '99+' : assertLength || ''}`;
+      default:
+        return '';
+    }
+  }
 </script>
 
 <style lang="less" scoped>

frontend/src/views/project-management/environmental/components/common/TabSettingDrawer.vue

@@ -73,7 +73,7 @@
 
   const loadColumn = async () => {
     const res = (await store.getContentTabList()) || [];
-    nonCloseColumn.value = res.filter((item) => !item.canHide);
+    nonCloseColumn.value = res.filter((item) => !item.canHide && item.value !== 'SETTING');
     couldCloseColumn.value = res.filter((item) => item.canHide);
   };
 

frontend/src/views/project-management/environmental/components/envParams/preAndPost.vue

@@ -13,13 +13,13 @@
         }"
       >
         <PreTab
-          v-if="props.activeType === 'pre'"
+          v-if="props.activeType === EnvTabTypeEnum.ENVIRONMENT_PRE"
           :show-associated-scene="showAssociatedScene"
           :show-pre-post-request="!showAssociatedScene"
           :active-tab="activeTab"
         />
         <PostTab
-          v-if="props.activeType === 'post'"
+          v-if="props.activeType === EnvTabTypeEnum.ENVIRONMENT_POST"
           :show-associated-scene="showAssociatedScene"
           :show-pre-post-request="!showAssociatedScene"
           :active-tab="activeTab"
@@ -29,14 +29,14 @@
     <div v-if="activeTab === 'requestProcessorConfig'" class="mt-4 h-full">
       <a-alert class="mb-4" closable> {{ t('project.environmental.requestAlertDesc') }} </a-alert>
       <PreTab
-        v-if="props.activeType === 'pre'"
+        v-if="props.activeType === EnvTabTypeEnum.ENVIRONMENT_PRE"
         :show-associated-scene="showAssociatedScene"
         :show-pre-post-request="!showAssociatedScene"
         :request-radio-text-props="requestPropsText"
         :active-tab="activeTab"
       />
       <PostTab
-        v-if="props.activeType === 'post'"
+        v-if="props.activeType === EnvTabTypeEnum.ENVIRONMENT_POST"
         :show-associated-scene="showAssociatedScene"
         :show-pre-post-request="!showAssociatedScene"
         :request-radio-text-props="requestPropsText"
@@ -52,10 +52,11 @@
   import PostTab from './PostTab.vue';
   import PreTab from './PreTab.vue';
 
-  import { getEnvironment } from '@/api/modules/api-test/common';
   import { useI18n } from '@/hooks/useI18n';
   import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore';
 
+  import { EnvTabTypeEnum } from '@/enums/envEnum';
+
   const store = useProjectEnvStore();
 
   const { t } = useI18n();
@@ -67,11 +68,11 @@
   const tabList = ref<{ key: string; label: string }[]>([
     {
       key: 'scenarioProcessorConfig',
-      label: '场景',
+      label: t('project.environmental.scenario'),
     },
     {
       key: 'requestProcessorConfig',
-      label: '请求',
+      label: t('project.environmental.request'),
     },
   ]);
   const activeTab = ref<string>('scenarioProcessorConfig');
@@ -81,7 +82,7 @@
 
   const requestPropsText = computed(() => {
     if (activeTab.value === 'requestProcessorConfig') {
-      return props.activeType === 'pre'
+      return props.activeType === EnvTabTypeEnum.ENVIRONMENT_PRE
         ? {
             pre: t('project.environmental.preScriptBefore'),
             post: t('project.environmental.preScriptAfter'),

frontend/src/views/project-management/environmental/locale/en-US.ts

@@ -23,6 +23,8 @@ export default {
   'project.environmental.envDescPlaceholder': 'Please enter the description',
   'project.environmental.envDesc': 'description',
   'project.environmental.envNameRequired': 'Environment name cannot be empty',
+  'project.environmental.scenario': 'scenario',
+  'project.environmental.request': 'request',
   'project.environmental.database': 'Database',
   'project.environmental.HTTP': 'HTTP',
   'project.environmental.HOST': 'HOST',
@@ -129,4 +131,5 @@ export default {
   'project.environmental.http.noneDataExist': 'There is already a domain name with an enabled range of none!',
   'project.environmental.http.selectModule': 'Please select module',
   'script.delete.confirm': 'After deletion, it cannot be restored. Please exercise caution.',
+  'script.delete.scenario': 'scenario',
 };

frontend/src/views/project-management/environmental/locale/zh-CN.ts

@@ -30,6 +30,8 @@ export default {
   'project.environmental.envDescPlaceholder': '请输入描述',
   'project.environmental.envDesc': '描述',
   'project.environmental.envNameRequired': '环境名称不能为空',
+  'project.environmental.scenario': '场景',
+  'project.environmental.request': '请求',
   'project.environmental.HTTP': 'HTTP',
   'project.environmental.HOST': 'HOST',
   'project.environmental.TCP': 'TCP',

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

@@ -10,6 +10,7 @@
           class="mx-[8px] w-[240px]"
           @search="searchList"
           @press-enter="searchList"
+          @clear="searchList"
         ></a-input-search>
       </div>
     </div>
@@ -179,7 +180,7 @@
 
   const { t } = useI18n();
   const props = defineProps<{
-    group: string;
+    group: 'system' | 'organization' | 'project';
     moduleType: keyof typeof TaskCenterEnum;
     name: string;
   }>();

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

@@ -14,6 +14,7 @@
           class="mx-[8px] w-[240px]"
           @search="searchList"
           @press-enter="searchList"
+          @clear="searchList"
         ></a-input-search>
       </div>
     </div>