Merge pull request #3381 from Daryl0819/3.2.x_dev

UI: 添加sideslider关闭提示

Author: joe511230

src/ui/src/views/model-association/_detail.vue

@@ -128,7 +128,8 @@
                     src_des: '',
                     dest_des: '',
                     direction: 'src_to_dest' // none, src_to_dest, bidirectional
-                }
+                },
+                originRelationInfo: {}
             }
         },
         computed: {
@@ -141,14 +142,25 @@
                 const updateParams = {...this.relationInfo}
                 delete updateParams['bk_asst_id']
                 return updateParams
+            },
+            changedValues () {
+                const values = {}
+                Object.keys(this.relationInfo).forEach(key => {
+                    if (this.relationInfo[key] !== this.originRelationInfo[key]) {
+                        values[key] = this.relationInfo[key]
+                    }
+                })
+                return values
             }
+
         },
         created () {
             if (this.isEdit) {
                 for (let key in this.relationInfo) {
                     this.relationInfo[key] = this.$tools.clone(this.relation[key])
                 }
             }
+            this.originRelationInfo = this.$tools.clone(this.relationInfo)
         },
         methods: {
             ...mapActions('objectAssociation', [

src/ui/src/views/model-association/index.vue

@@ -45,14 +45,16 @@
             class="relation-slider"
             :width="450"
             :title="slider.title"
-            :isShow.sync="slider.isShow">
+            :isShow.sync="slider.isShow"
+            :beforeClose="handleSliderBeforeClose">
             <the-relation
+                ref="relationForm"
                 slot="content"
                 class="slider-content"
                 :isEdit="slider.isEdit"
                 :relation="slider.relation"
                 @saved="saveRelation"
-                @cancel="slider.isShow = false"
+                @cancel="handleSliderBeforeClose"
             ></the-relation>
         </cmdb-slider>
     </div>
@@ -227,6 +229,25 @@
             handleSortChange (sort) {
                 this.table.sort = sort
                 this.searchRelation()
+            },
+            handleSliderBeforeClose () {
+                const hasChanged = Object.keys(this.$refs.relationForm.changedValues).length
+                if (hasChanged) {
+                    return new Promise((resolve, reject) => {
+                        this.$bkInfo({
+                            title: this.$t('Common["退出会导致未保存信息丢失，是否确认？"]'),
+                            confirmFn: () => {
+                                this.slider.isShow = false
+                                resolve(true)
+                            },
+                            cancelFn: () => {
+                                resolve(false)
+                            }
+                        })
+                    })
+                }
+                this.slider.isShow = false
+                return true
             }
         }
     }

src/ui/src/views/model-manage/children/verification.vue

@@ -46,7 +46,7 @@
             :width="450"
             :title="slider.title"
             :isShow.sync="slider.isShow"
-            :beforeClose="handleSliderBeforeClose">>
+            :beforeClose="handleSliderBeforeClose">
             <the-verification-detail
                 ref="verificationForm"
                 class="slider-content"