fix: 修复编辑资源时没修改表单再离开时仍弹出提示的问题 (#970)

TencentBlueKing · Sep 26, 2024 · fd12ca3 · fd12ca3
1 parent fd76d55
commit fd12ca3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/dashboard-front/src/views/resource/setting/comps/back-config.vue b/src/dashboard-front/src/views/resource/setting/comps/back-config.vue
@@ -207,6 +207,9 @@ const props = defineProps({
   },
 });
 
+// 获取到服务数据后抛出一个事件
+const emit = defineEmits(['service-init']);
+
 const backRef = ref(null);
 const frontPath = ref('');
 const { t } = useI18n();
@@ -243,6 +246,7 @@ const timeInputRef = ref(null)
 const globalProperties = useGetGlobalProperties();
 const { GLOBAL_CONFIG } = globalProperties;
 const addBackendServiceRef = ref(null);
+const isServiceInit = ref(false);
 
 const rules = {
   'config.path': [
@@ -432,6 +436,11 @@ const handleServiceChange = async (backendId: number) => {
     }
     [servicesConfigs.value, servicesConfigsStorage.value] = [cloneDeep(res.configs || []), cloneDeep(resStorage.configs || [])];
     backConfigData.value.name = res.name;
+    // 第一次加载服务数据后，抛出事件
+    if (!isServiceInit.value) {
+      emit('service-init');
+      isServiceInit.value = true;
+    }
   } catch {
     console.log("=>(back-config.vue:415) handleServiceChange error");
   }

diff --git a/src/dashboard-front/src/views/resource/setting/edit.vue b/src/dashboard-front/src/views/resource/setting/edit.vue
@@ -38,7 +38,7 @@
           </div>
         </template>
         <template #content>
-          <BackConfig ref="backConfigRef" :detail="resourceDetail"></BackConfig>
+          <BackConfig ref="backConfigRef" :detail="resourceDetail" @service-init="setupFormDataBack"></BackConfig>
         </template>
       </bk-collapse-panel>
     </bk-collapse>
@@ -189,17 +189,24 @@ const handleCancel = async () => {
   }
 };
 
-onMounted(async () => {
-  await init();
+// 设置离开界面时检查是否有修改过表单时用的数据
+// 页面加载完会默认执行一次，等 back-config 初始化数据之后会再执行一次，避免了错误判断表单是否已修改过的bug
+const setupFormDataBack = () => {
   formDataBack.value = {
     baseFormData: baseInfoRef.value?.formData,
     frontFormData: frontConfigRef.value?.frontConfigData,
     backFormData: backConfigRef.value?.backConfigData,
   };
-  mitt.emit('on-leave-page-change', formDataBack.value);
+
   nextTick(() => {
+    mitt.emit('on-leave-page-change', formDataBack.value);
     initSidebarFormData(formDataBack.value);
   });
+};
+
+onMounted(async () => {
+  await init();
+  setupFormDataBack();
 });
 </script>
 <style lang="scss" scoped>