From 757184c4593faa52c25fad8bb65b8ee00a554a81 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Wed, 12 Jun 2024 18:38:53 +0800
Subject: [PATCH] fix: Fixed the issue that the region was displayed
 incorrectly when updating the cloud platform account

---
 .../Cloud/Account/components/AccountPanel.vue | 22 +++++++++++++++++--
 .../Cloud/Account/components/AuthPanel.vue    | 17 ++++++++++----
 .../Cloud/Account/components/RegionPanel.vue  | 21 +++++++++++-------
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/views/assets/Cloud/Account/components/AccountPanel.vue b/src/views/assets/Cloud/Account/components/AccountPanel.vue
index d608c69e0..1b6eaebd1 100644
--- a/src/views/assets/Cloud/Account/components/AccountPanel.vue
+++ b/src/views/assets/Cloud/Account/components/AccountPanel.vue
@@ -19,10 +19,10 @@
     </el-row>
     <el-divider />
     <el-row :gutter="20" style="height: 80%;">
-      <el-col :span="5" class="image">
+      <el-col :span="6" class="image">
         <el-image :src="cloudImage" fit="contain" />
       </el-col>
-      <el-col :span="19">
+      <el-col :span="18">
         <InfoPanel :content="iTask.regions.length" :title="$tc('TotalSyncRegion')" />
         <InfoPanel :content="iTask.instance_count || 0" :title="$tc('TotalSyncAsset')" />
         <InfoPanel :content="iTask.strategy.length" :title="$tc('TotalSyncStrategy')" />
@@ -31,6 +31,7 @@
       </el-col>
     </el-row>
     <Dialog
+      v-if="updateVisible"
       :destroy-on-close="true"
       :show-buttons="false"
       :title="$tc('CloudAccountUpdate')"
@@ -41,6 +42,7 @@
         :object="object"
         :provider="object.provider.value"
         :visible.sync="updateVisible"
+        origin="update"
         @submitSuccess="onSubmitSuccess"
       />
     </Dialog>
@@ -112,6 +114,22 @@ export default {
       return ACCOUNT_PROVIDER_ATTRS_MAP[`${this.object.provider.value}`].image
     }
   },
+  watch: {
+    onlineSyncVisible: {
+      handler(newValue) {
+        if (newValue === false) {
+          this.$emit('refresh')
+        }
+      }
+    },
+    updateVisible: {
+      handler(newValue) {
+        if (newValue === false) {
+          this.$emit('refresh')
+        }
+      }
+    }
+  },
   methods: {
     toSafeLocalDateStr,
     handleDelete() {
diff --git a/src/views/assets/Cloud/Account/components/AuthPanel.vue b/src/views/assets/Cloud/Account/components/AuthPanel.vue
index 049b52e62..4f5733d20 100644
--- a/src/views/assets/Cloud/Account/components/AuthPanel.vue
+++ b/src/views/assets/Cloud/Account/components/AuthPanel.vue
@@ -29,6 +29,10 @@ export default {
     object: {
       type: Object,
       default: () => {}
+    },
+    origin: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -106,12 +110,12 @@ export default {
             el: {
               provider: this.provider,
               regions: this.object.task?.regions || [],
-              getAuthInfo: async() => {
+              getAuthInfo: () => {
                 if (this.object?.id) {
                   return this.object.id
                 }
                 const form = this.$refs.form.$refs.form.dataForm
-                await form.submitForm('form', true)
+                form.$refs.form.validate()
                 return form.getFormValue()['attrs']
               }
             }
@@ -161,8 +165,6 @@ export default {
       }
     }
   },
-  mounted() {
-  },
   methods: {
     submitForm(form, btn, submitType) {
       form.validate((valid) => {
@@ -171,6 +173,13 @@ export default {
         }
       })
       this.$refs.form.$refs.form.dataForm.submitForm('form', false)
+
+      if (this.origin === 'update') {
+        setTimeout(() => {
+          this.$emit('refresh')
+          this.$emit('update:visible', false)
+        }, 500)
+      }
       this.submitType = submitType
     },
     handleSubmitSuccess(res) {
diff --git a/src/views/assets/Cloud/Account/components/RegionPanel.vue b/src/views/assets/Cloud/Account/components/RegionPanel.vue
index 1e081eead..18579628d 100644
--- a/src/views/assets/Cloud/Account/components/RegionPanel.vue
+++ b/src/views/assets/Cloud/Account/components/RegionPanel.vue
@@ -8,6 +8,7 @@
       {{ content }}
     </el-link>
     <Dialog
+      :destroy-on-close="true"
       :title="$tc('Region')"
       :visible.sync="regionVisible"
       :show-cancel="false"
@@ -78,11 +79,18 @@ export default {
     }
   },
   watch: {
-    checkedRegion() {
-      this.updateCheckedStatus()
+    regions: {
+      immediate: true,
+      handler(newVal) {
+        this.checkedRegion = newVal
+        this.refreshContent()
+      }
     }
   },
   mounted() {
+    if (this.regions) {
+      this.checkedRegion = this.regions
+    }
     this.refreshContent()
   },
   methods: {
@@ -95,7 +103,6 @@ export default {
       let method = 'get'
       let data = {}
       let url = `/api/v1/xpack/cloud/regions/?account_id=${authInfo}`
-
       if (typeof authInfo === 'object') {
         const attrs = JSON.parse(JSON.stringify(authInfo))
 
@@ -103,15 +110,13 @@ export default {
         url = `/api/v1/xpack/cloud/regions/?provider=${this.provider}`
         data = { 'attrs': encryptAttrsField(attrs) }
       }
+
       this.content = this.$t('Loading')
 
       this.$axios[method](url, data).then(resp => {
         this.allRegions = resp?.regions
-        console.log(Object.getOwnPropertyNames(data.attrs).length)
-        if (this.allRegions.length && Object.getOwnPropertyNames(data.attrs).length > 0) {
-          this.regionVisible = true
-          this.updateCheckedStatus()
-        }
+        this.regionVisible = true
+        this.updateCheckedStatus()
       }).catch(error => {
         this.$message.error(this.$tc('CloudRegionTip' + ' ' + error))
       }).finally(() => {