diff --git a/src/components/dialog/UserAddEditDialog.vue b/src/components/dialog/UserAddEditDialog.vue index 6704bca1..d5730093 100644 --- a/src/components/dialog/UserAddEditDialog.vue +++ b/src/components/dialog/UserAddEditDialog.vue @@ -6,6 +6,7 @@ import api from '@/api' import { useDisplay } from 'vuetify' import avatar1 from '@images/avatars/avatar-1.png' import store from '@/store' +import { debounce } from 'lodash' // 显示器宽度 const display = useDisplay() @@ -23,6 +24,9 @@ const props = defineProps({ oper: String, }) +// 防抖时间 +const debounceTime = 500 + // 当前登录用户名称 const currentLoginUser = store.state.auth.userName @@ -115,7 +119,7 @@ async function fetchUserInfo() { } // 调用API 新增用户 -async function addUser() { +const addUser = debounce(async () => { if (isAdding.value) { $toast.error(`正在创建【${userForm.value.name}】用户,请稍后`) return @@ -154,10 +158,10 @@ async function addUser() { } doneNProgress() isAdding.value = false -} +}, debounceTime) // 调用API更新用户信息 -async function updateUser() { +const updateUser = debounce(async () => { if (isUpdating.value) { $toast.error(`正在更新【${userForm.value.name}】用户,请稍后`) return @@ -214,7 +218,7 @@ async function updateUser() { } doneNProgress() isUpdating.value = false -} +}, debounceTime) // 用户状态转换,true/false转换为1/0 const userStatus = computed({ diff --git a/src/views/user/UserProfileView.vue b/src/views/user/UserProfileView.vue index f534f888..f72e6aed 100644 --- a/src/views/user/UserProfileView.vue +++ b/src/views/user/UserProfileView.vue @@ -7,6 +7,7 @@ import type { User } from '@/api/types' import avatar1 from '@images/avatars/avatar-1.png' import { useDisplay } from 'vuetify' import store from '@/store' +import { debounce } from 'lodash' // 显示器宽度 const display = useDisplay() @@ -21,6 +22,12 @@ const $toast = useToast() const refInputEl = ref() +// 防抖时间 +const debounceTime = 500 + +// 正在保存 +const isSaving = ref(false) + // 开启双重验证窗口 const otpDialog = ref(false) @@ -59,9 +66,6 @@ const accountInfo = ref({ }, }) -// 所有用户信息 -const allUsers = ref([]) - // 二维码信息 const qrCode = ref('') @@ -110,7 +114,11 @@ async function loadAccountInfo() { } // 保存用户信息 -async function saveAccountInfo() { +const saveAccountInfo = debounce(async () => { + if (isSaving.value) { + $toast.error('正在保存中,请稍后...') + return + } if (!currentUserName.value) { $toast.error('用户名不能为空') return @@ -126,6 +134,7 @@ async function saveAccountInfo() { const oldAvatar = accountInfo.value.avatar accountInfo.value.avatar = currentAvatar.value accountInfo.value.name = currentUserName.value + isSaving.value = true try { const result: { [key: string]: any } = await api.put('user/', accountInfo.value) if (result.success) { @@ -155,16 +164,8 @@ async function saveAccountInfo() { } catch (error) { console.log(error) } -} - -// 调用API,查询所有用户 -async function loadAllUsers() { - try { - allUsers.value = await api.get('/user/') - } catch (error) { - console.log(error) - } -} + isSaving.value = false +}, debounceTime) // 为当前用户获取Otp Uri async function getOtpUri() { @@ -225,7 +226,6 @@ async function judgeOtpPassword() { // 加载当前用户数据 onMounted(() => { loadAccountInfo() - loadAllUsers() }) // 监听 localStorage 中的用户头像变化 @@ -385,7 +385,13 @@ watch( - 保存 + + 保存中... + 保存 +