feat(接口测试): 忽略全部和配置同步信息展示更改&同步项默认值更改

2024-08-09 13:32:31 +08:00 · 2024-08-09 13:32:31 +08:00 · cb52137fdb
parent 89656beb95
commit cb52137fdb
5 changed files with 50 additions and 30 deletions
--- a/frontend/src/views/api-test/management/components/management/case/apiCaseDetail.vue
+++ b/frontend/src/views/api-test/management/components/management/case/apiCaseDetail.vue
@ -401,8 +401,11 @@
  const isPriorityLocalExec = computed(() => executeRef.value?.isPriorityLocalExec ?? false);
  const caseId = ref<string>(route.query.id as string);
  // 忽略本次变更
-  async function clearThisChangeHandler() {
+  async function clearThisChangeHandler(isEvery: boolean) {
    getCaseDetailInfo(caseId.value);
+    if (isEvery) {
+      showDifferentDrawer.value = false;
+    }
  }

  // 同步参数
--- a/frontend/src/views/api-test/management/components/management/case/caseDetail.vue
+++ b/frontend/src/views/api-test/management/components/management/case/caseDetail.vue
@ -73,7 +73,7 @@
          :active-api-case-id="activeApiCaseId"
          :active-defined-id="activeDefinedId"
          @close="closeDifferent"
-          @clear-this-change="brashChangeHandler"
+          @clear-this-change="(isEvery:boolean)=>brashChangeHandler(isEvery)"
          @sync="syncParamsHandler"
        />
      </a-tab-pane>
@ -95,7 +95,7 @@
      </a-tab-pane>
    </a-tabs>
  </div>
-  <createAndEditCaseDrawer ref="createAndEditCaseDrawerRef" v-bind="$attrs" @load-case="brashChangeHandler" />
+  <createAndEditCaseDrawer ref="createAndEditCaseDrawerRef" v-bind="$attrs" @load-case="() => brashChangeHandler" />
 </template>

 <script setup lang="ts">
@ -347,8 +347,11 @@
  }

  // 忽略本次变更
-  async function brashChangeHandler() {
+  async function brashChangeHandler(isClose = false) {
    emit('loadCase', props.detail.id as string);
+    if (isClose) {
+      showDifferentDrawer.value = false;
+    }
  }

  // 同步参数
--- a/frontend/src/views/api-test/management/components/management/case/caseTable.vue
+++ b/frontend/src/views/api-test/management/components/management/case/caseTable.vue
@ -1025,12 +1025,15 @@
  }
  const showCaseVisible = ref(false);
  // 清除本次变更
-  async function handleClearThisChange() {
+  async function handleClearThisChange(isEvery: boolean) {
    await loadCaseList();
    await getCaseDetailInfo(activeApiCaseId.value);
    if (showCaseVisible.value) {
      createAndEditCaseDrawerRef.value?.open(caseDetail.value.apiDefinitionId, caseDetail.value as RequestParam, false);
    }
+    if (isEvery) {
+      showDifferentDrawer.value = false;
+    }
  }

  // 对比抽屉同步成功打开编辑
--- a/frontend/src/views/api-test/management/components/management/case/differentDrawer.vue
+++ b/frontend/src/views/api-test/management/components/management/case/differentDrawer.vue
@ -13,8 +13,8 @@
      <div class="flex w-full items-center justify-between">
        <div>{{ t('case.apiAndCaseDiff') }}</div>
        <div class="flex items-center text-[14px]">
-          <div v-if="caseDetail.inconsistentWithApi" class="-mt-[2px] mr-[8px]"> {{ t('case.syncItem') }}</div>
-          <a-checkbox-group v-if="caseDetail.inconsistentWithApi" v-model="checkType">
+          <div v-if="showSyncConfig" class="-mt-[2px] mr-[8px]"> {{ t('case.syncItem') }}</div>
+          <a-checkbox-group v-if="showSyncConfig" v-model="checkType">
            <a-checkbox v-for="item of checkList" :key="item.value" :value="item.value">
              <div class="flex items-center">
                {{ item.label }}
@ -29,7 +29,7 @@
              </div>
            </a-checkbox>
          </a-checkbox-group>
-          <a-divider v-if="caseDetail.inconsistentWithApi" direction="vertical" :margin="0" class="!mr-[8px]" />
+          <a-divider v-if="showSyncConfig" direction="vertical" :margin="0" class="!mr-[8px]" />
          <a-switch
            v-model:model-value="form.ignoreApiChange"
            :before-change="(val) => changeIgnore(val)"
@ -37,26 +37,17 @@
          />
          <div class="ml-[8px]">{{ t('case.ignoreAllChange') }}</div>
          <a-divider direction="vertical" :margin="8"></a-divider>
-          <a-switch
-            v-if="caseDetail.inconsistentWithApi"
-            v-model:model-value="form.deleteRedundantParam"
-            size="small"
-          />
-          <div v-if="caseDetail.inconsistentWithApi" class="ml-[8px] font-normal text-[var(--color-text-1)]">{{
+          <a-switch v-if="showSyncConfig" v-model:model-value="form.deleteRedundantParam" size="small" />
+          <div v-if="showSyncConfig" class="ml-[8px] font-normal text-[var(--color-text-1)]">{{
            t('case.deleteNotCorrespondValue')
          }}</div>
-          <a-divider direction="vertical" :margin="0" class="!ml-[8px]"></a-divider>
+          <a-divider v-if="showSyncConfig" direction="vertical" :margin="0" class="!ml-[8px]" />
          <a-button class="mx-[12px]" type="secondary" @click="cancel">{{ t('common.cancel') }}</a-button>
-          <a-button
-            v-if="caseDetail.inconsistentWithApi"
-            class="mr-[12px]"
-            type="outline"
-            @click="clearThisChangeHandler"
-          >
+          <a-button v-if="showSyncConfig" class="mr-[12px]" type="outline" @click="clearThisChangeHandler">
            {{ t('case.ignoreThisChange') }}
          </a-button>
          <a-button type="primary" :loading="syncLoading" :disabled="!checkType.length" @click="confirmSync">
-            {{ caseDetail.inconsistentWithApi ? t('case.apiSyncChange') : t('common.confirm') }}
+            {{ showSyncConfig ? t('case.apiSyncChange') : t('common.confirm') }}
          </a-button>
        </div>
      </div>
@ -142,7 +133,7 @@

  const emit = defineEmits<{
    (e: 'close'): void;
-    (e: 'clearThisChange'): void;
+    (e: 'clearThisChange', isEvery: boolean): void;
    (e: 'sync', mergeRequest: RequestParam): void;
  }>();

@ -181,13 +172,20 @@
    ignoreApiChange: false,
  };

-  const checkType = ref([]);
+  const initCheckList = [
+    RequestComposition.HEADER,
+    RequestComposition.BODY,
+    RequestComposition.QUERY,
+    RequestComposition.REST,
+  ];
+
+  const checkType = ref([...initCheckList]);

  const form = ref({ ...initForm });

  function cancel() {
    form.value = { ...initForm };
-    checkType.value = [];
+    checkType.value = [...initCheckList];
    showDiffVisible.value = false;
    emit('close');
  }
@ -321,11 +319,14 @@
    getBodyData(RequestBodyFormat.FORM_DATA);
    getBodyData(RequestBodyFormat.WWW_FORM);
  }
+  // 是否显示配置项
+  const showSyncConfig = computed(() => caseDetail.value.inconsistentWithApi && !form.value.ignoreApiChange);
+
  const syncCaseDetail = ref<Record<string, any>>({});

  // 同步
  async function confirmSync() {
-    if (!caseDetail.value.inconsistentWithApi) {
+    if (!caseDetail.value.inconsistentWithApi || form.value.ignoreApiChange) {
      cancel();
      return;
    }
@ -410,16 +411,20 @@
      loading.value = false;
    }
  }
+  const ignoreThisChangeLoading = ref(false);
  // 忽略并清除本次变更
  async function clearThisChangeHandler() {
    if (props.activeApiCaseId) {
+      ignoreThisChangeLoading.value = true;
      try {
        await clearThisChange(props.activeApiCaseId);
        getRequestDetail(props.activeDefinedId, props.activeApiCaseId);
-        emit('clearThisChange');
+        emit('clearThisChange', true);
      } catch (error) {
        // eslint-disable-next-line no-console
        console.log(error);
+      } finally {
+        ignoreThisChangeLoading.value = false;
      }
    }
  }
@ -429,7 +434,7 @@
      await ignoreEveryTimeChange(props.activeApiCaseId, newValue as boolean);
      Message.success(newValue ? t('case.eachHasBeenIgnored') : t('case.eachHasBeenIgnoredClosed'));
      getRequestDetail(props.activeDefinedId, props.activeApiCaseId);
-      emit('clearThisChange');
+      emit('clearThisChange', false);
      return false;
    } catch (error) {
      // eslint-disable-next-line no-console
--- a/frontend/src/views/api-test/management/components/management/case/syncModal.vue
+++ b/frontend/src/views/api-test/management/components/management/case/syncModal.vue
@ -112,7 +112,13 @@
  };

  const form = ref<batchSyncForm>(cloneDeep(initForm));
-  const checkType = ref([]);
+  const initCheckList = [
+    RequestComposition.HEADER,
+    RequestComposition.BODY,
+    RequestComposition.QUERY,
+    RequestComposition.REST,
+  ];
+  const checkType = ref([...initCheckList]);

  const checkList = ref([
    {
@ -136,7 +142,7 @@

  function resetForm() {
    form.value = cloneDeep(initForm);
-    checkType.value = [];
+    checkType.value = [...initCheckList];
    showBatchSyncModal.value = false;
  }