|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { useState, useEffect } from 'react'; |
|
|
import { useTranslation } from 'react-i18next'; |
|
|
import { API, showError, showSuccess } from '../../helpers'; |
|
|
import { ITEMS_PER_PAGE } from '../../constants'; |
|
|
import { useTableCompactMode } from '../common/useTableCompactMode'; |
|
|
|
|
|
export const useUsersData = () => { |
|
|
const { t } = useTranslation(); |
|
|
const [compactMode, setCompactMode] = useTableCompactMode('users'); |
|
|
|
|
|
|
|
|
const [users, setUsers] = useState([]); |
|
|
const [loading, setLoading] = useState(true); |
|
|
const [activePage, setActivePage] = useState(1); |
|
|
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); |
|
|
const [searching, setSearching] = useState(false); |
|
|
const [groupOptions, setGroupOptions] = useState([]); |
|
|
const [userCount, setUserCount] = useState(0); |
|
|
|
|
|
|
|
|
const [showAddUser, setShowAddUser] = useState(false); |
|
|
const [showEditUser, setShowEditUser] = useState(false); |
|
|
const [editingUser, setEditingUser] = useState({ |
|
|
id: undefined, |
|
|
}); |
|
|
|
|
|
|
|
|
const formInitValues = { |
|
|
searchKeyword: '', |
|
|
searchGroup: '', |
|
|
}; |
|
|
|
|
|
|
|
|
const [formApi, setFormApi] = useState(null); |
|
|
|
|
|
|
|
|
const getFormValues = () => { |
|
|
const formValues = formApi ? formApi.getValues() : {}; |
|
|
return { |
|
|
searchKeyword: formValues.searchKeyword || '', |
|
|
searchGroup: formValues.searchGroup || '', |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const setUserFormat = (users) => { |
|
|
for (let i = 0; i < users.length; i++) { |
|
|
users[i].key = users[i].id; |
|
|
} |
|
|
setUsers(users); |
|
|
}; |
|
|
|
|
|
|
|
|
const loadUsers = async (startIdx, pageSize) => { |
|
|
setLoading(true); |
|
|
const res = await API.get(`/api/user/?p=${startIdx}&page_size=${pageSize}`); |
|
|
const { success, message, data } = res.data; |
|
|
if (success) { |
|
|
const newPageData = data.items; |
|
|
setActivePage(data.page); |
|
|
setUserCount(data.total); |
|
|
setUserFormat(newPageData); |
|
|
} else { |
|
|
showError(message); |
|
|
} |
|
|
setLoading(false); |
|
|
}; |
|
|
|
|
|
|
|
|
const searchUsers = async ( |
|
|
startIdx, |
|
|
pageSize, |
|
|
searchKeyword = null, |
|
|
searchGroup = null, |
|
|
) => { |
|
|
|
|
|
if (searchKeyword === null || searchGroup === null) { |
|
|
const formValues = getFormValues(); |
|
|
searchKeyword = formValues.searchKeyword; |
|
|
searchGroup = formValues.searchGroup; |
|
|
} |
|
|
|
|
|
if (searchKeyword === '' && searchGroup === '') { |
|
|
|
|
|
await loadUsers(startIdx, pageSize); |
|
|
return; |
|
|
} |
|
|
setSearching(true); |
|
|
const res = await API.get( |
|
|
`/api/user/search?keyword=${searchKeyword}&group=${searchGroup}&p=${startIdx}&page_size=${pageSize}`, |
|
|
); |
|
|
const { success, message, data } = res.data; |
|
|
if (success) { |
|
|
const newPageData = data.items; |
|
|
setActivePage(data.page); |
|
|
setUserCount(data.total); |
|
|
setUserFormat(newPageData); |
|
|
} else { |
|
|
showError(message); |
|
|
} |
|
|
setSearching(false); |
|
|
}; |
|
|
|
|
|
|
|
|
const manageUser = async (userId, action, record) => { |
|
|
|
|
|
setLoading(true); |
|
|
|
|
|
const res = await API.post('/api/user/manage', { |
|
|
id: userId, |
|
|
action, |
|
|
}); |
|
|
|
|
|
const { success, message } = res.data; |
|
|
if (success) { |
|
|
showSuccess('操作成功完成!'); |
|
|
const user = res.data.data; |
|
|
|
|
|
|
|
|
const newUsers = users.map((u) => { |
|
|
if (u.id === userId) { |
|
|
if (action === 'delete') { |
|
|
return { ...u, DeletedAt: new Date() }; |
|
|
} |
|
|
return { ...u, status: user.status, role: user.role }; |
|
|
} |
|
|
return u; |
|
|
}); |
|
|
|
|
|
setUsers(newUsers); |
|
|
} else { |
|
|
showError(message); |
|
|
} |
|
|
|
|
|
setLoading(false); |
|
|
}; |
|
|
|
|
|
const resetUserPasskey = async (user) => { |
|
|
if (!user) { |
|
|
return; |
|
|
} |
|
|
try { |
|
|
const res = await API.delete(`/api/user/${user.id}/reset_passkey`); |
|
|
const { success, message } = res.data; |
|
|
if (success) { |
|
|
showSuccess(t('Passkey 已重置')); |
|
|
} else { |
|
|
showError(message || t('操作失败,请重试')); |
|
|
} |
|
|
} catch (error) { |
|
|
showError(t('操作失败,请重试')); |
|
|
} |
|
|
}; |
|
|
|
|
|
const resetUserTwoFA = async (user) => { |
|
|
if (!user) { |
|
|
return; |
|
|
} |
|
|
try { |
|
|
const res = await API.delete(`/api/user/${user.id}/2fa`); |
|
|
const { success, message } = res.data; |
|
|
if (success) { |
|
|
showSuccess(t('二步验证已重置')); |
|
|
} else { |
|
|
showError(message || t('操作失败,请重试')); |
|
|
} |
|
|
} catch (error) { |
|
|
showError(t('操作失败,请重试')); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const handlePageChange = (page) => { |
|
|
setActivePage(page); |
|
|
const { searchKeyword, searchGroup } = getFormValues(); |
|
|
if (searchKeyword === '' && searchGroup === '') { |
|
|
loadUsers(page, pageSize).then(); |
|
|
} else { |
|
|
searchUsers(page, pageSize, searchKeyword, searchGroup).then(); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const handlePageSizeChange = async (size) => { |
|
|
localStorage.setItem('page-size', size + ''); |
|
|
setPageSize(size); |
|
|
setActivePage(1); |
|
|
loadUsers(activePage, size) |
|
|
.then() |
|
|
.catch((reason) => { |
|
|
showError(reason); |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
const handleRow = (record, index) => { |
|
|
if (record.DeletedAt !== null || record.status !== 1) { |
|
|
return { |
|
|
style: { |
|
|
background: 'var(--semi-color-disabled-border)', |
|
|
}, |
|
|
}; |
|
|
} else { |
|
|
return {}; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const refresh = async (page = activePage) => { |
|
|
const { searchKeyword, searchGroup } = getFormValues(); |
|
|
if (searchKeyword === '' && searchGroup === '') { |
|
|
await loadUsers(page, pageSize); |
|
|
} else { |
|
|
await searchUsers(page, pageSize, searchKeyword, searchGroup); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const fetchGroups = async () => { |
|
|
try { |
|
|
let res = await API.get(`/api/group/`); |
|
|
if (res === undefined) { |
|
|
return; |
|
|
} |
|
|
setGroupOptions( |
|
|
res.data.data.map((group) => ({ |
|
|
label: group, |
|
|
value: group, |
|
|
})), |
|
|
); |
|
|
} catch (error) { |
|
|
showError(error.message); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const closeAddUser = () => { |
|
|
setShowAddUser(false); |
|
|
}; |
|
|
|
|
|
const closeEditUser = () => { |
|
|
setShowEditUser(false); |
|
|
setEditingUser({ |
|
|
id: undefined, |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
loadUsers(0, pageSize) |
|
|
.then() |
|
|
.catch((reason) => { |
|
|
showError(reason); |
|
|
}); |
|
|
fetchGroups().then(); |
|
|
}, []); |
|
|
|
|
|
return { |
|
|
|
|
|
users, |
|
|
loading, |
|
|
activePage, |
|
|
pageSize, |
|
|
userCount, |
|
|
searching, |
|
|
groupOptions, |
|
|
|
|
|
|
|
|
showAddUser, |
|
|
showEditUser, |
|
|
editingUser, |
|
|
setShowAddUser, |
|
|
setShowEditUser, |
|
|
setEditingUser, |
|
|
|
|
|
|
|
|
formInitValues, |
|
|
formApi, |
|
|
setFormApi, |
|
|
|
|
|
|
|
|
compactMode, |
|
|
setCompactMode, |
|
|
|
|
|
|
|
|
loadUsers, |
|
|
searchUsers, |
|
|
manageUser, |
|
|
resetUserPasskey, |
|
|
resetUserTwoFA, |
|
|
handlePageChange, |
|
|
handlePageSizeChange, |
|
|
handleRow, |
|
|
refresh, |
|
|
closeAddUser, |
|
|
closeEditUser, |
|
|
getFormValues, |
|
|
|
|
|
|
|
|
t, |
|
|
}; |
|
|
}; |
|
|
|