fix settings bug

src/views/games/details/settings/SettingPanel.vue

@@ -64,7 +64,12 @@
           </el-select>
           <div class="btn-group">
             <el-button type="success" size="small" @click="addSetting">添加新的配置项</el-button>
-            <el-button type="danger" size="small" @click="clearSettings">清空</el-button>
+            <el-button
+              type="danger"
+              size="small"
+              @click="clearSettings"
+              v-show="selectedSettings.length> 0"
+            >清空</el-button>
           </div>
         </div>
       </el-col>
@@ -194,6 +199,10 @@ export default {
     this.getSettingsList()
   },
   methods: {
+    changeState(changed) {
+      this.$emit('change', changed)
+      console.log('子change', changed)
+    },
     // left
     getGameInfo(cb) {
       request({
@@ -245,6 +254,7 @@ export default {
           this.tip = '配置已发布'
         }
         if (this.settingsForm.settings.length === 0) this.tip = ''
+        this.changeState(false)
       })
     },
     openEditor(index) {
@@ -348,12 +358,14 @@ export default {
           }
           this.$message.success('配置保存成功！')
           this.tip = '配置已保存，待发布'
+          this.changeState(false)
           resolve()
         })
       })
     },
     changTip() {
       this.tip = '配置已修改'
+      this.changeState(true)
     },
     // right
     getSettingsList() {
@@ -373,9 +385,18 @@ export default {
       })
     },
     clearSettings() {
-      this.selectedSettings = []
-      this.settingKeys = []
-      this.settingsForm.settings = []
+      this.$confirm('是否要清空配置项?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.selectedSettings = []
+          this.settingKeys = []
+          this.settingsForm.settings = []
+          this.$message.success('已清空配置项！')
+        })
+        .catch(() => {})
     },
     addSetting() {
       this.openNewSettingModal()
@@ -391,8 +412,10 @@ export default {
         let index1 = 0
         const index2 = this.settingKeys.indexOf(key)
         for (let i = 0; i < this.settingsForm.settings.length; i++) {
-          if (this.settingsForm.settings[i].key === key) index1 = i
-          break
+          if (this.settingsForm.settings[i].key === key) {
+            index1 = i
+            break
+          }
         }
         this.settingsForm.settings.splice(index1, 1)
         this.settingKeys.splice(index2, 1)

src/views/games/details/settings/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="main-content p-game-settings">
-    <el-tabs tab-position="left">
-      <el-tab-pane label="普通配置">
-        <setting-panle type="normal"/>
+    <el-tabs tab-position="left" :value="active" :before-leave="handleLeave">
+      <el-tab-pane label="普通配置" name="normal">
+        <setting-panle type="normal" @change="handleChange"/>
       </el-tab-pane>
-      <el-tab-pane label="私有配置">
-        <setting-panle type="private"/>
+      <el-tab-pane label="私有配置" name="private">
+        <setting-panle type="private" @change="handleChange"/>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -16,8 +16,38 @@ import SettingPanle from './SettingPanel.vue'
 
 export default {
   name: 'GameDetailsSettings',
+  data() {
+    return {
+      changed: false,
+      active: 'normal',
+    }
+  },
   components: {
     SettingPanle
+  },
+  methods: {
+    handleLeave(activeName, oldActiveName) {
+      if (this.changed) {
+        this.$confirm('配置项已修改未保存，是否离开', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {})
+          .catch(() => {
+            return false
+          })
+      }
+    },
+    handleChange(val) {
+      this.changed = val
+    },
+    openModal() {
+      this.modaleVisible = true
+    },
+    closeModal() {
+      this.modaleVisible = false
+    },
   }
 }
 </script>