fix(接口测试): 报告循环次数&Style微调整

2024-04-01 12:56:53 +08:00 · 2024-04-01 12:56:53 +08:00 · 56d253714c
parent 6a89c25a92
commit 56d253714c
7 changed files with 103 additions and 76 deletions
--- a/frontend/src/components/business/ms-assertion/comp/ResponseHeaderTab.vue
+++ b/frontend/src/components/business/ms-assertion/comp/ResponseHeaderTab.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="w-full">
    <paramsTable
      v-model:params="condition.assertions"
      :selectable="true"
@ -63,6 +63,7 @@
      showInTable: true,
      showDrag: true,
      options: statusCodeOptions,
+      addLineDisabled: true,
    },
    {
      title: 'ms.assertion.matchValue', // 匹配值
--- a/frontend/src/components/business/ms-assertion/index.vue
+++ b/frontend/src/components/business/ms-assertion/index.vue
@ -72,54 +72,62 @@
      <div
        class="ms-assertion-body-right h-full"
        :class="{
-          'p-4': getCurrentItemState.assertionType !== ResponseAssertionType.SCRIPT,
+          'p-4 pr-0': getCurrentItemState.assertionType !== ResponseAssertionType.SCRIPT,
          'border border-solid border-[var(--color-text-n8)]':
            getCurrentItemState.assertionType !== ResponseAssertionType.SCRIPT,
        }"
      >
-        <!-- 响应头 -->
-        <ResponseHeaderTab
-          v-if="getCurrentItemState.assertionType === ResponseAssertionType.RESPONSE_HEADER"
-          v-model:data="getCurrentItemState"
-          :disabled="props.disabled"
-          @change="handleChange"
-        />
-        <!-- 状态码 -->
-        <StatusCodeTab
-          v-if="getCurrentItemState.assertionType === ResponseAssertionType.RESPONSE_CODE"
-          v-model:data="getCurrentItemState"
-          :disabled="props.disabled"
-          @change="handleChange"
-        />
-        <!-- 响应体 -->
-        <ResponseBodyTab
-          v-if="getCurrentItemState.assertionType === ResponseAssertionType.RESPONSE_BODY"
-          v-model:data="getCurrentItemState"
-          :disabled="props.disabled"
-          :response="props.response"
-          @change="handleChange"
-        />
-        <!-- 响应时间 -->
-        <ResponseTimeTab
-          v-if="getCurrentItemState.assertionType === ResponseAssertionType.RESPONSE_TIME"
-          v-model:data="getCurrentItemState"
-          :disabled="props.disabled"
-          @change="handleChange"
-        />
-        <!-- 变量 -->
-        <VariableTab
-          v-if="getCurrentItemState.assertionType === ResponseAssertionType.VARIABLE"
-          v-model:data="getCurrentItemState"
-          :disabled="props.disabled"
-          @change="handleChange"
-        />
-        <!-- 脚本 -->
-        <ScriptTab
-          v-if="getCurrentItemState.assertionType === ResponseAssertionType.SCRIPT"
-          v-model:data="getCurrentItemState"
-          @change="handleChange"
-        />
-        <!-- </a-scrollbar> -->
+        <a-scrollbar
+          :style="{
+            overflow: 'auto',
+            height: '100%',
+            width: '100%',
+          }"
+        >
+          <!-- 响应头 -->
+          <ResponseHeaderTab
+            v-if="getCurrentItemState.assertionType === ResponseAssertionType.RESPONSE_HEADER"
+            v-model:data="getCurrentItemState"
+            class="pr-4"
+            :disabled="props.disabled"
+            @change="handleChange"
+          />
+          <!-- 状态码 -->
+          <StatusCodeTab
+            v-if="getCurrentItemState.assertionType === ResponseAssertionType.RESPONSE_CODE"
+            v-model:data="getCurrentItemState"
+            :disabled="props.disabled"
+            @change="handleChange"
+          />
+          <!-- 响应体 -->
+          <ResponseBodyTab
+            v-if="getCurrentItemState.assertionType === ResponseAssertionType.RESPONSE_BODY"
+            v-model:data="getCurrentItemState"
+            :disabled="props.disabled"
+            :response="props.response"
+            @change="handleChange"
+          />
+          <!-- 响应时间 -->
+          <ResponseTimeTab
+            v-if="getCurrentItemState.assertionType === ResponseAssertionType.RESPONSE_TIME"
+            v-model:data="getCurrentItemState"
+            :disabled="props.disabled"
+            @change="handleChange"
+          />
+          <!-- 变量 -->
+          <VariableTab
+            v-if="getCurrentItemState.assertionType === ResponseAssertionType.VARIABLE"
+            v-model:data="getCurrentItemState"
+            :disabled="props.disabled"
+            @change="handleChange"
+          />
+          <!-- 脚本 -->
+          <ScriptTab
+            v-if="getCurrentItemState.assertionType === ResponseAssertionType.SCRIPT"
+            v-model:data="getCurrentItemState"
+            @change="handleChange"
+          />
+        </a-scrollbar>
      </div>
    </div>
  </div>
--- a/frontend/src/views/api-test/components/paramTable.vue
+++ b/frontend/src/views/api-test/components/paramTable.vue
@ -331,7 +331,7 @@
        :disabled="props.disabledExceptParam"
        size="mini"
        class="ms-form-table-input"
-        @change="() => addTableLine(rowIndex)"
+        @change="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
      >
        <a-option v-for="item in columnConfig.options" :key="item.value" :value="item.value">{{
          t(item.label)
@ -1012,7 +1012,6 @@
  function handleFormTableChange(data: any[]) {
    paramsData.value = [...data];
    emitChange('handleFormTableChange');
-    addTableLine(data.length - 1);
  }

  /**
--- a/frontend/src/views/api-test/components/requestComposition/response/result/assertionTable.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result/assertionTable.vue
@ -1,11 +1,13 @@
 <template>
-  <MsBaseTable v-bind="propsRes" v-on="propsEvent">
-    <template #status="{ record }">
-      <MsTag :type="record.pass === true ? 'success' : 'danger'" theme="light">
-        {{ record.pass === true ? t('common.success') : t('common.fail') }}
-      </MsTag>
-    </template>
-  </MsBaseTable>
+  <a-scrollbar class="overflow-y-auto" :style="{ height: '300px' }">
+    <MsBaseTable v-bind="propsRes" v-on="propsEvent">
+      <template #status="{ record }">
+        <MsTag :type="record.pass === true ? 'success' : 'danger'" theme="light">
+          {{ record.pass === true ? t('common.success') : t('common.fail') }}
+        </MsTag>
+      </template>
+    </MsBaseTable>
+  </a-scrollbar>
 </template>

 <script setup lang="ts">
--- a/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
@ -1,10 +1,12 @@
 <template>
-  <div v-if="isShowLoopControl?.stepType === ScenarioStepType.LOOP_CONTROLLER" class="my-4 flex justify-start">
-    <MsPagination
-      v-model:page-size="pageSize"
+  <div v-if="isShowLoopControl" class="my-4 flex items-center justify-start" @click.stop="() => {}">
+    <a-pagination
+      v-model:page-size="controlPageSize"
      v-model:current="controlCurrent"
      :total="controlTotal"
      size="mini"
+      show-total
+      :show-jumper="controlTotal > 5"
      @change="loadControlLoop"
    />
  </div>
@ -191,7 +193,7 @@

  const total = computed(() => (activeStepDetail.value?.content.subRequestResults || []).length);
  const current = ref(1);
-  const pageSize = ref(10);
+  const pageSize = ref(1);

  const activeType = ref<'ResContent' | 'SubRequest'>('ResContent');
  const subRequestResults = ref<any[]>([]);
@ -257,6 +259,7 @@
  });

  const loading = ref<boolean>(false);
+  const showApiType = ref<string[]>([ScenarioStepType.API, ScenarioStepType.API_CASE, ScenarioStepType.CUSTOM_REQUEST]);
  // 获取详情
  async function getStepDetail(stepId: string) {
    try {
@ -304,24 +307,25 @@
   */

  const isShowLoopControl = computed(() => {
-    if (props.steps && props.steps.length && props.stepItem) {
-      return findNodeByKey<ScenarioItemType>(props.steps, props.stepItem?.parentId, 'stepId');
-    }
+    return (
+      props.stepItem?.children && props.stepItem.children.length && showApiType.value.includes(props.stepItem.stepType)
+    );
  });

  const controlCurrent = ref(1);
-  const controlTotal = computed(() => (isShowLoopControl.value?.children || []).length);
+  const controlTotal = computed(() => {
+    if (props.stepItem?.children) {
+      return props.stepItem.children.length;
+    }
+    return 0;
+  });
+  const controlPageSize = ref(1);
  /**
   *  循环次数控制器
   */
  function loadControlLoop() {
-    if (
-      isShowLoopControl.value &&
-      isShowLoopControl.value?.stepType === ScenarioStepType.LOOP_CONTROLLER &&
-      isShowLoopControl.value.children &&
-      isShowLoopControl.value.children.length
-    ) {
-      const loopStepId = isShowLoopControl.value?.children[controlCurrent.value - 1].stepId;
+    if (isShowLoopControl.value) {
+      const loopStepId = props?.stepItem?.children[controlCurrent.value - 1].stepId;
      if (loopStepId) {
        getStepDetail(loopStepId);
      }
@ -330,11 +334,21 @@

  const originStepId = ref<string | undefined>('');

-  watchEffect(() => {
-    if (props?.stepItem?.stepId && props.stepItem.stepId !== originStepId.value) {
-      getStepDetail(props?.stepItem?.stepId);
+  watch(
+    () => props?.stepItem?.stepId,
+    (val) => {
+      if (val) {
+        if (isShowLoopControl.value) {
+          getStepDetail(props?.stepItem?.children[controlCurrent.value - 1].stepId as string);
+        } else {
+          getStepDetail(val);
+        }
+      }
+    },
+    {
+      immediate: true,
    }
-  });
+  );

  onMounted(() => {
    originStepId.value = props.stepItem?.stepId;
--- a/frontend/src/views/api-test/report/component/reportDetailHeader.vue
+++ b/frontend/src/views/api-test/report/component/reportDetailHeader.vue
@ -1,11 +1,14 @@
 <template>
  <div class="report-header flex items-center justify-between">
    <div class="flex items-center">
-      <div v-if="route.query.shareId" class="font-medium"
+      <div v-if="route.query.shareId" class="flex items-center font-medium"
        >{{ t('report.name') }}
-        <div class="one-line-text max-w-[150px]">【{{ props.detail.name }}】</div>
+        <a-tooltip :content="props.detail.name" :mouse-enter-delay="300"
+          ><div class="one-line-text max-w-[300px]">【{{ props.detail.name }}】</div>
+        </a-tooltip>
        <a-divider direction="vertical" :margin="4" class="!mx-2"></a-divider
      ></div>
+
      <a-popover position="left" content-class="response-popover-content">
        <div class="one-line-text max-w-[150px]"> {{ props.detail.environmentName || '-' }}</div>
        <a-divider direction="vertical" :margin="4" class="!mx-2"></a-divider>
--- a/frontend/src/views/project-management/projectAndPermission/member/index.vue
+++ b/frontend/src/views/project-management/projectAndPermission/member/index.vue
@ -202,7 +202,7 @@
    getProjectMemberList,
    {
      tableKey: TableKeyEnum.PROJECT_MEMBER,
-      selectable: !!hasAnyPermission(['PROJECT_USER:READ+DELETE', 'ORGANIZATION_MEMBER:READ+UPDATE']),
+      selectable: hasAnyPermission(['ORGANIZATION_MEMBER:READ+UPDATE']),
      showSetting: true,
      heightUsed: 288,
      scroll: {