refactor: lab preferences

src/renderer/components/Preference/Lab.vue

@@ -42,9 +42,11 @@
 <script>
   import is from 'electron-is'
   import { mapState } from 'vuex'
+  import { cloneDeep } from 'lodash'
   import '@/components/Icons/info-square'
   import {
-    calcFormLabelWidth
+    calcFormLabelWidth,
+    diffConfig
   } from '@shared/utils'
 
   const initialForm = (config) => {
@@ -57,14 +59,15 @@
 
   export default {
     name: 'mo-preference-lab',
-    components: {
-    },
     data: function () {
       const { locale } = this.$store.state.preference.config
       const form = initialForm(this.$store.state.preference.config)
+      const formOriginal = cloneDeep(form)
+
       return {
         form,
         formLabelWidth: calcFormLabelWidth(locale),
+        formOriginal,
         rules: {}
       }
     },
@@ -75,27 +78,45 @@
       ...mapState('preference', {
         config: state => state.config
       })
-    },
-    watch: {
-
     },
     methods: {
       isRenderer: is.renderer,
+      syncFormConfig () {
+        this.$store.dispatch('preference/fetchPreference')
+          .then((config) => {
+            this.form = initialForm(config)
+            this.formOriginal = cloneDeep(this.form)
+          })
+      },
       submitForm (formName) {
         this.$refs[formName].validate((valid) => {
           if (!valid) {
             console.log('error submit!!')
             return false
           }
 
-          console.log('this.form===>', this.form)
-          this.$store.dispatch('preference/save', this.form)
+          const changed = diffConfig(this.formOriginal, this.form)
+          const data = {
+            ...changed
+          }
+          console.log('changed====》', data)
+
+          this.$store.dispatch('preference/save', data)
+            .then(() => {
+              this.$store.dispatch('app/fetchEngineOptions')
+              this.syncFormConfig()
+              this.$msg.success(this.$t('preferences.save-success-message'))
+            })
+            .catch(() => {
+              this.$msg.success(this.$t('preferences.save-fail-message'))
+            })
+
           if (this.isRenderer()) {
           }
         })
       },
       resetForm (formName) {
-        this.form = initialForm(this.$store.state.preference.config)
+        this.syncFormConfig()
       }
     }
   }