fix 解决重复调用更新设置接口产生的数据异常

vben28/src/views/admin/settings/Setting.vue

@@ -14,21 +14,15 @@
                     <a-input-number v-model:value="setting.value" :min="1" :max="99999" />
                   </div>
                   <div v-if="setting.type === 'CheckBox'">
-                    <a-checkbox
+                    <a-checkbox :checked="!(setting.value == 'false' || setting.value == false)"
-                      :checked="!(setting.value == 'false' || setting.value == false)"
+                      @update:checked="(val) => (setting.value = val)">
-                      @update:checked="(val) => (setting.value = val)"
-                    >
                     </a-checkbox>
                     {{ setting.description }}
                   </div>
                 </a-form-item>
 
-                <a-button
+                <a-button style="margin-left: 65%" type="primary" :loading="loading"
-                  style="margin-left: 65%"
+                  @click="updateSettingValues(item.settingItemOutput)">{{ t('common.saveText') }}</a-button>
-                  type="primary"
-                  @click="updateSettingValues(item.settingItemOutput)"
-                  >{{ t('common.saveText') }}</a-button
-                >
               </a-form>
             </CollapseContainer>
           </TabPane>
@@ -39,77 +33,79 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
+import { defineComponent, reactive, toRefs, onMounted } from 'vue';
-  import { Tabs } from 'ant-design-vue';
+import { Tabs } from 'ant-design-vue';
-  import { CollapseContainer, ScrollContainer } from '/@/components/Container/index';
+import { CollapseContainer, ScrollContainer } from '/@/components/Container/index';
-  import { SettingOutput, UpdateSettingInput } from '/@/services/ServiceProxies';
+import { SettingOutput, UpdateSettingInput } from '/@/services/ServiceProxies';
-  import { getAllSettingsAsync, updateSettingsAsync } from '/@/views/admin/settings/Setting';
+import { getAllSettingsAsync, updateSettingsAsync } from '/@/views/admin/settings/Setting';
-  import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '/@/hooks/web/useI18n';
-  import { PageWrapper } from '/@/components/Page';
+import { PageWrapper } from '/@/components/Page';
-  import { message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
-  export default defineComponent({
+export default defineComponent({
-    components: {
+  components: {
-      ScrollContainer,
+    ScrollContainer,
-      CollapseContainer,
+    CollapseContainer,
-      Tabs,
+    Tabs,
-      TabPane: Tabs.TabPane,
+    TabPane: Tabs.TabPane,
-      PageWrapper,
+    PageWrapper,
-    },
+  },
-    setup() {
+  setup() {
-      let settingList: SettingOutput[] = [];
+    let settingList: SettingOutput[] = [];
-      const { t } = useI18n();
+    const { t } = useI18n();
-      const state = reactive({
+    const state = reactive({
-        settingList,
+      settingList,
-        loading: true,
+      loading: true,
-      });
+    });
-      onMounted(async () => {
+    onMounted(async () => {
+      state.loading = true;
+      const result = await getAllSettingsAsync();
+      state.settingList = result;
+      state.loading = false;
+    });
+
+    const updateSettingValues = async (item: any) => {
+      try {
+        const prefix = 'setting_';
+        const request = new UpdateSettingInput();
+        request.values as {};
+        let items: { [key: string]: string } = {};
+        item.forEach((e) => {
+          items[prefix + e.name] = String(e.value);
+        });
+        request.values = items;
         state.loading = true;
-        const result = await getAllSettingsAsync();
+        await updateSettingsAsync({ request });
-        state.settingList = result;
         state.loading = false;
-      });
+        message.success(t('common.operationSuccess'));
-
+      } catch (error) {
-      const updateSettingValues = async (item: any) => {
+        message.success(t('common.operationFail'));
-        try {
+      }
-          const prefix = 'setting_';
+    };
-          const request = new UpdateSettingInput();
+    return {
-          request.values as {};
+      prefixCls: 'account-setting',
-          let items: { [key: string]: string } = {};
+      tabBarStyle: {
-          item.forEach((e) => {
+        width: '220px',
-            items[prefix + e.name] = String(e.value);
+      },
-          });
+      labelCol: { span: 4 },
-          request.values = items;
+      wrapperCol: { span: 14 },
-          await updateSettingsAsync({ request });
+      ...toRefs(state),
-          message.success(t('common.operationSuccess'));
+      t,
-        } catch (error) {
+      updateSettingValues,
-          message.success(t('common.operationFail'));
+    };
-        }
+  },
-      };
+});
-      return {
-        prefixCls: 'account-setting',
-        tabBarStyle: {
-          width: '220px',
-        },
-        labelCol: { span: 4 },
-        wrapperCol: { span: 14 },
-        ...toRefs(state),
-        t,
-        updateSettingValues,
-      };
-    },
-  });
 </script>
 <style lang="less">
-  .account-setting {
+.account-setting {
-    margin: 12px;
+  margin: 12px;
-    background-color: @component-background;
+  background-color: @component-background;
 
-    .base-title {
+  .base-title {
-      padding-left: 0;
+    padding-left: 0;
-    }
+  }
 
-    .ant-tabs-tab-active {
+  .ant-tabs-tab-active {
-      background-color: @item-active-bg;
+    background-color: @item-active-bg;
-    }
   }
+}
 </style>