From cb52137fdbf29b05dd0005f1ee896ec5ee85c292 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Fri, 9 Aug 2024 13:32:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E5=BF=BD=E7=95=A5=E5=85=A8=E9=83=A8=E5=92=8C=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9&=E5=90=8C=E6=AD=A5=E9=A1=B9=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=80=BC=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../management/case/apiCaseDetail.vue         |  5 +-
 .../components/management/case/caseDetail.vue |  9 ++--
 .../components/management/case/caseTable.vue  |  5 +-
 .../management/case/differentDrawer.vue       | 51 ++++++++++---------
 .../components/management/case/syncModal.vue  | 10 +++-
 5 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/frontend/src/views/api-test/management/components/management/case/apiCaseDetail.vue b/frontend/src/views/api-test/management/components/management/case/apiCaseDetail.vue
index 5e09711f01..d78a5a03cf 100644
--- 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;
+    }
   }
 
   // 同步参数
diff --git a/frontend/src/views/api-test/management/components/management/case/caseDetail.vue b/frontend/src/views/api-test/management/components/management/case/caseDetail.vue
index 04c2752f96..daa01a95df 100644
--- 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;
+    }
   }
 
   // 同步参数
diff --git a/frontend/src/views/api-test/management/components/management/case/caseTable.vue b/frontend/src/views/api-test/management/components/management/case/caseTable.vue
index e158ba27c5..9b4adf78d9 100644
--- 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;
+    }
   }
 
   // 对比抽屉同步成功打开编辑
diff --git a/frontend/src/views/api-test/management/components/management/case/differentDrawer.vue b/frontend/src/views/api-test/management/components/management/case/differentDrawer.vue
index 4745b39b70..b57d9738d6 100644
--- 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
diff --git a/frontend/src/views/api-test/management/components/management/case/syncModal.vue b/frontend/src/views/api-test/management/components/management/case/syncModal.vue
index 1e1e2e907f..644a220575 100644
--- 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;
   }