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

canyanol650 · Apr 30, 2024 · 5b80e30 · 5b80e30
1 parent 1ce32cc
commit 5b80e30
Showing 1 changed file with 72 additions and 76 deletions.
diff --git a/vben28/src/views/admin/settings/Setting.vue b/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
-                      :checked="!(setting.value == 'false' || setting.value == false)"
-                      @update:checked="(val) => (setting.value = val)"
-                    >
+                    <a-checkbox :checked="!(setting.value == 'false' || setting.value == false)"
+                      @update:checked="(val) => (setting.value = val)">
                     </a-checkbox>
                     {{ setting.description }}
                   </div>
                 </a-form-item>
 
-                <a-button
-                  style="margin-left: 65%"
-                  type="primary"
-                  @click="updateSettingValues(item.settingItemOutput)"
-                  >{{ t('common.saveText') }}</a-button
-                >
+                <a-button style="margin-left: 65%" type="primary" :loading="loading"
+                  @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 { Tabs } from 'ant-design-vue';
-  import { CollapseContainer, ScrollContainer } from '/@/components/Container/index';
-  import { SettingOutput, UpdateSettingInput } from '/@/services/ServiceProxies';
-  import { getAllSettingsAsync, updateSettingsAsync } from '/@/views/admin/settings/Setting';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { PageWrapper } from '/@/components/Page';
-  import { message } from 'ant-design-vue';
-  export default defineComponent({
-    components: {
-      ScrollContainer,
-      CollapseContainer,
-      Tabs,
-      TabPane: Tabs.TabPane,
-      PageWrapper,
-    },
-    setup() {
-      let settingList: SettingOutput[] = [];
-      const { t } = useI18n();
-      const state = reactive({
-        settingList,
-        loading: true,
-      });
-      onMounted(async () => {
+import { defineComponent, reactive, toRefs, onMounted } from 'vue';
+import { Tabs } from 'ant-design-vue';
+import { CollapseContainer, ScrollContainer } from '/@/components/Container/index';
+import { SettingOutput, UpdateSettingInput } from '/@/services/ServiceProxies';
+import { getAllSettingsAsync, updateSettingsAsync } from '/@/views/admin/settings/Setting';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { PageWrapper } from '/@/components/Page';
+import { message } from 'ant-design-vue';
+export default defineComponent({
+  components: {
+    ScrollContainer,
+    CollapseContainer,
+    Tabs,
+    TabPane: Tabs.TabPane,
+    PageWrapper,
+  },
+  setup() {
+    let settingList: SettingOutput[] = [];
+    const { t } = useI18n();
+    const state = reactive({
+      settingList,
+      loading: true,
+    });
+    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();
-        state.settingList = result;
+        await updateSettingsAsync({ request });
         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;
-          await updateSettingsAsync({ request });
-          message.success(t('common.operationSuccess'));
-        } catch (error) {
-          message.success(t('common.operationFail'));
-        }
-      };
-      return {
-        prefixCls: 'account-setting',
-        tabBarStyle: {
-          width: '220px',
-        },
-        labelCol: { span: 4 },
-        wrapperCol: { span: 14 },
-        ...toRefs(state),
-        t,
-        updateSettingValues,
-      };
-    },
-  });
+        message.success(t('common.operationSuccess'));
+      } catch (error) {
+        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 {
-    margin: 12px;
-    background-color: @component-background;
+.account-setting {
+  margin: 12px;
+  background-color: @component-background;
 
-    .base-title {
-      padding-left: 0;
-    }
+  .base-title {
+    padding-left: 0;
+  }
 
-    .ant-tabs-tab-active {
-      background-color: @item-active-bg;
-    }
+  .ant-tabs-tab-active {
+    background-color: @item-active-bg;
   }
+}
 </style>