diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 1a155b5..36d67c3 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -58,6 +58,7 @@ export const DATABASE_DELETE_SUCCESS = 30030
export const DATABASE_DELETE_FILED = 30035
export const DATABASE_EXECUTE_ERROR = 30050
export const DATABASE_DUPLICATE_KEY = 30051
+export const DATABASE_NO_RECORD_FOUND = 30052
export const API_AVATAR_SUCCESS = 50100
export const API_AVATAR_ERROR = 50150
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index a3bab52..181effc 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -1,11 +1,13 @@
-export const URL_API_LOGIN = '/login'
-export const URL_API_TOKEN = '/token'
-export const URL_API_LOGOUT = '/logout'
-export const URL_API_SYS_LOG = '/system/log'
-export const URL_API_SYS_USER_INFO = '/system/user/info'
-export const URL_API_SYS_USER = '/system/user'
-export const URL_API_SYS_ROLE = '/system/role'
-export const URL_API_SYS_POWER_LIST = '/system/power/list'
-export const URL_API_SYS_ROLE_LIST = '/system/role/list'
-export const URL_API_SYS_GROUP = '/system/group'
-export const URL_API_SYS_GROUP_LIST = '/system/group/list'
+export const URL_LOGIN = '/login'
+export const URL_TOKEN = '/token'
+export const URL_LOGOUT = '/logout'
+export const URL_SYS_LOG = '/system/log'
+export const URL_SYS_USER_INFO = '/system/user/info'
+export const URL_SYS_USER = '/system/user'
+export const URL_SYS_ROLE = '/system/role'
+export const URL_SYS_POWER_LIST = '/system/power/list'
+export const URL_SYS_ROLE_LIST = '/system/role/list'
+export const URL_SYS_GROUP = '/system/group'
+export const URL_SYS_GROUP_LIST = '/system/group/list'
+
+export const URL_API_V1_AVATAR_RANDOM_BASE64 = '/api/v1/avatar/base64'
diff --git a/src/global.d.ts b/src/global.d.ts
index 02562f2..587ba46 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -63,7 +63,9 @@ interface UserWithPowerInfoVo {
locking: boolean
expiration: string
credentialsExpiration: string
- enable: number
+ enable: boolean
+ currentLoginTime: string
+ currentLoginIp: string
lastLoginTime: string
lastLoginIp: string
createTime: string
@@ -81,7 +83,9 @@ interface UserWithRoleInfoVo {
locking: boolean
expiration: string
credentialsExpiration: string
- enable: number
+ enable: boolean
+ currentLoginTime: string
+ currentLoginIp: string
lastLoginTime: string
lastLoginIp: string
createTime: string
@@ -91,6 +95,21 @@ interface UserWithRoleInfoVo {
groups: GroupVo[]
}
+interface UserAddEditParam {
+ id?: string
+ username: string
+ password?: string
+ locking?: boolean
+ expiration?: string
+ credentialsExpiration?: string
+ enable?: boolean
+ nickname?: string
+ avatar?: string
+ email?: string
+ roleIds: number[]
+ groupIds: number[]
+}
+
interface UserInfoVo {
id: string
userId: string
@@ -242,7 +261,7 @@ interface GroupGetParam extends PageParam {
interface GroupWithRoleGetVo {
id: string
name: string
- enable: string
+ enable: boolean
createTime: string
updateTime: string
roles: RoleVo[]
@@ -259,3 +278,7 @@ interface GroupChangeStatusParam {
id: string
enable: boolean
}
+
+interface AvatarBase64Vo {
+ base64: string
+}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 6f1feae..f59a5c9 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -42,9 +42,12 @@ const Login: React.FC = () => {
- 上次登录：
- {getLocalTime(user.lastLoginTime)}【
- {user.lastLoginIp}】
+ 最近登录：
+ {user.lastLoginTime
+ ? `${getLocalTime(user.lastLoginTime)}【${
+ user.lastLoginIp
+ }】`
+ : '无'}
),
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index cf0215f..25512dd 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -1,15 +1,68 @@
-import React from 'react'
-import { r_sys_user } from '@/services/system'
-import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import React, { useEffect, useState } from 'react'
+import {
+ COLOR_BACKGROUND,
+ COLOR_ERROR_SECONDARY,
+ COLOR_FONT_SECONDARY,
+ COLOR_PRODUCTION,
+ DATABASE_DELETE_SUCCESS,
+ DATABASE_DUPLICATE_KEY,
+ DATABASE_INSERT_SUCCESS,
+ DATABASE_SELECT_SUCCESS,
+ DATABASE_UPDATE_SUCCESS
+} from '@/constants/common.constants'
import { ColumnsType } from 'antd/es/table/interface'
+import FitFullScreen from '@/components/common/FitFullScreen.tsx'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import Card from '@/components/common/Card.tsx'
+import Icon from '@ant-design/icons'
+import {
+ r_sys_group_get_list,
+ r_sys_role_get_list,
+ r_sys_user_add,
+ r_sys_user_delete,
+ r_sys_user_delete_list,
+ r_sys_user_get,
+ r_sys_user_update
+} from '@/services/system.tsx'
+import { getLocalTime, isPastTime } from '@/utils/common.tsx'
+import { r_api_avatar_random_base64 } from '@/services/api/avatar.ts'
+import moment from 'moment'
const User: React.FC = () => {
- const [userList, setUserList] = useState([])
+ const [modal, contextHolder] = AntdModal.useModal()
+ const [form] = AntdForm.useForm()
+ const formValues = AntdForm.useWatch([], form)
+ const [newFormValues, setNewFormValues] = useState()
+ const [userData, setUserData] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
+ const [tableParams, setTableParams] = useState({
+ pagination: {
+ current: 1,
+ pageSize: 20,
+ position: ['bottomCenter']
+ }
+ })
+ const [searchValue, setSearchValue] = useState('')
+ const [isUseRegex, setIsUseRegex] = useState(false)
+ const [isRegexLegal, setIsRegexLegal] = useState(true)
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+ const [isDrawerEdit, setIsDrawerEdit] = useState(false)
+ const [submittable, setSubmittable] = useState(false)
+ const [roleData, setRoleData] = useState([])
+ const [groupData, setGroupData] = useState([])
+ const [isLoadingRole, setIsLoadingRole] = useState(false)
+ const [isLoadingGroup, setIsLoadingGroup] = useState(false)
+ const [isSubmitting, setIsSubmitting] = useState(false)
+ const [tableSelectedItem, setTableSelectedItem] = useState([])
+ const [avatar, setAvatar] = useState('')
- const tableColumns: ColumnsType = [
+ const dataColumns: ColumnsType = [
{
- dataIndex: 'id',
- title: 'ID'
+ dataIndex: 'username',
+ title: '用户',
+ render: (value, record) => `${value}(${record.id})`,
+ width: '0'
},
{
dataIndex: ['userInfo', 'avatar'],
@@ -19,30 +72,731 @@ const User: React.FC = () => {
src={
}
style={{ background: COLOR_BACKGROUND }}
/>
- )
- },
- {
- dataIndex: 'username',
- title: '用户名'
+ ),
+ width: '0',
+ align: 'center'
},
{
dataIndex: ['userInfo', 'nickname'],
title: '昵称'
+ },
+ {
+ dataIndex: ['userInfo', 'email'],
+ title: '邮箱'
+ },
+ {
+ dataIndex: ['roles'],
+ title: '角色',
+ render: (value: RoleVo[], record) =>
+ record.id === '0' ? (
+ 管理员
+ ) : value.length ? (
+ value.map((role) => (
+
+ {role.name}
+
+ ))
+ ) : (
+ 无
+ ),
+ align: 'center'
+ },
+ {
+ dataIndex: ['groups'],
+ title: '用户组',
+ render: (value: GroupVo[], record) =>
+ record.id === '0' ? (
+ 管理员
+ ) : value.length ? (
+ value.map((role) => (
+
+ {role.name}
+
+ ))
+ ) : (
+ 无
+ ),
+ align: 'center'
+ },
+ {
+ title: '最近登录',
+ render: (_, record) =>
+ record.currentLoginTime
+ ? `${getLocalTime(record.currentLoginTime)}【${record.currentLoginIp}】`
+ : '无',
+ align: 'center'
+ },
+ {
+ title: '状态',
+ render: (_, record) =>
+ !record.locking &&
+ (!record.expiration || !isPastTime(record.expiration)) &&
+ (!record.credentialsExpiration || !isPastTime(record.credentialsExpiration)) &&
+ record.enable ? (
+ 正常
+ ) : (
+ <>
+ {record.locking ? 锁定 : undefined}
+ {record.expiration && isPastTime(record.expiration) ? (
+ 过期
+ ) : undefined}
+ {record.credentialsExpiration &&
+ isPastTime(record.credentialsExpiration) ? (
+ 改密
+ ) : undefined}
+ {!record.enable ? 禁用 : undefined}
+
+ ),
+ align: 'center'
+ },
+ {
+ title: '操作',
+ width: '10em',
+ align: 'center',
+ render: (_, record) => (
+ <>
+
+
+ 编辑
+
+
+ 删除
+
+
+
+ )
}
]
- useEffect(() => {
- r_sys_user().then((res) => {
- const data = res.data
- if (data.code === DATABASE_SELECT_SUCCESS) {
- data.data && setUserList(data.data)
+ const handleOnTableChange = (
+ pagination: _TablePaginationConfig,
+ filters: Record,
+ sorter: _SorterResult | _SorterResult[]
+ ) => {
+ if (Array.isArray(sorter)) {
+ setTableParams({
+ pagination,
+ filters,
+ sortField: sorter.map((value) => value.field).join(',')
+ })
+ } else {
+ setTableParams({
+ pagination,
+ filters,
+ sortField: sorter.field,
+ sortOrder: sorter.order
+ })
+ }
+
+ if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+ setGroupData([])
+ }
+ }
+
+ const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+ setTableSelectedItem(selectedRowKeys)
+ }
+
+ const handleOnAddBtnClick = () => {
+ setIsDrawerEdit(false)
+ setIsDrawerOpen(true)
+ form.setFieldValue('id', undefined)
+ form.setFieldValue('username', newFormValues?.username)
+ form.setFieldValue('password', undefined)
+ form.setFieldValue('locking', newFormValues?.locking ?? false)
+ form.setFieldValue('expiration', newFormValues?.expiration)
+ form.setFieldValue('credentialsExpiration', newFormValues?.credentialsExpiration)
+ form.setFieldValue('enable', newFormValues?.enable ?? true)
+ form.setFieldValue('nickname', newFormValues?.nickname)
+ form.setFieldValue('avatar', newFormValues?.avatar)
+ form.setFieldValue('email', newFormValues?.email)
+ form.setFieldValue('roleIds', newFormValues?.roleIds)
+ form.setFieldValue('groupIds', newFormValues?.groupIds)
+
+ getAvatar()
+ }
+
+ const handleOnListDeleteBtnClick = () => {
+ modal
+ .confirm({
+ title: '确定删除',
+ content: `确定删除选中的 ${tableSelectedItem.length} 个用户吗？`
+ })
+ .then(
+ (confirmed) => {
+ if (confirmed) {
+ setIsLoading(true)
+
+ void r_sys_user_delete_list(tableSelectedItem)
+ .then((res) => {
+ const data = res.data
+
+ if (data.code === DATABASE_DELETE_SUCCESS) {
+ void message.success('删除成功')
+ setTimeout(() => {
+ getUser()
+ })
+ } else {
+ void message.error('删除失败，请稍后重试')
+ }
+ })
+ .finally(() => {
+ setIsLoading(false)
+ })
+ }
+ },
+ () => {}
+ )
+ }
+
+ const handleOnEditBtnClick = (value: UserWithRoleInfoVo) => {
+ return () => {
+ setIsDrawerEdit(true)
+ setIsDrawerOpen(true)
+
+ form.setFieldValue('id', value.id)
+ form.setFieldValue('username', value.username)
+ form.setFieldValue('password', undefined)
+ form.setFieldValue('locking', value.locking)
+ form.setFieldValue('expiration', value.expiration)
+ form.setFieldValue('credentialsExpiration', value.credentialsExpiration)
+ form.setFieldValue('enable', value.enable)
+ form.setFieldValue('nickname', value.userInfo.nickname)
+ form.setFieldValue('avatar', value.userInfo.avatar)
+ form.setFieldValue('email', value.userInfo.email)
+ form.setFieldValue(
+ 'roleIds',
+ value.roles.map((role) => role.id)
+ )
+ form.setFieldValue(
+ 'groupIds',
+ value.groups.map((group) => group.id)
+ )
+ void form.validateFields()
+ }
+ }
+
+ const handleOnDeleteBtnClick = (value: UserWithRoleInfoVo) => {
+ return () => {
+ modal
+ .confirm({
+ title: '确定删除',
+ content: `确定删除用户 ${value.username} 吗？`
+ })
+ .then(
+ (confirmed) => {
+ if (confirmed) {
+ setIsLoading(true)
+
+ void r_sys_user_delete(value.id)
+ .then((res) => {
+ const data = res.data
+ if (data.code === DATABASE_DELETE_SUCCESS) {
+ void message.success('删除成功')
+ setTimeout(() => {
+ getUser()
+ })
+ } else {
+ void message.error('删除失败，请稍后重试')
+ }
+ })
+ .finally(() => {
+ setIsLoading(false)
+ })
+ }
+ },
+ () => {}
+ )
+ }
+ }
+
+ const handleOnDrawerClose = () => {
+ setIsDrawerOpen(false)
+ }
+
+ const filterOption = (input: string, option?: { label: string; value: string }) =>
+ (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+
+ const handleOnSubmit = () => {
+ if (isSubmitting) {
+ return
+ }
+
+ setIsSubmitting(true)
+
+ if (isDrawerEdit) {
+ void r_sys_user_update({
+ ...formValues,
+ expiration: formValues.expiration
+ ? new Date(formValues.expiration).toISOString()
+ : undefined,
+ credentialsExpiration: formValues.credentialsExpiration
+ ? new Date(formValues.credentialsExpiration).toISOString()
+ : undefined
+ })
+ .then((res) => {
+ const data = res.data
+ switch (data.code) {
+ case DATABASE_UPDATE_SUCCESS:
+ setIsDrawerOpen(false)
+ void message.success('更新成功')
+ getUser()
+ break
+ case DATABASE_DUPLICATE_KEY:
+ void message.error('已存在相同用户名')
+ break
+ default:
+ void message.error('更新失败，请稍后重试')
+ }
+ })
+ .finally(() => {
+ setIsSubmitting(false)
+ })
+ } else {
+ void r_sys_user_add({
+ ...formValues,
+ expiration: formValues.expiration
+ ? new Date(formValues.expiration).toISOString()
+ : undefined,
+ credentialsExpiration: formValues.credentialsExpiration
+ ? new Date(formValues.credentialsExpiration).toISOString()
+ : undefined
+ })
+ .then((res) => {
+ const data = res.data
+ switch (data.code) {
+ case DATABASE_INSERT_SUCCESS:
+ setIsDrawerOpen(false)
+ void message.success('添加成功')
+ setNewFormValues(undefined)
+ getUser()
+ break
+ case DATABASE_DUPLICATE_KEY:
+ void message.error('已存在相同用户名')
+ break
+ default:
+ void message.error('添加失败，请稍后重试')
+ }
+ })
+ .finally(() => {
+ setIsSubmitting(false)
+ })
+ }
+ }
+
+ const handleOnSearchValueChange = (e: React.ChangeEvent) => {
+ setSearchValue(e.target.value)
+
+ if (isUseRegex) {
+ try {
+ RegExp(e.target.value)
+ setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
+ } catch (e) {
+ setIsRegexLegal(false)
+ }
+ } else {
+ setIsRegexLegal(true)
+ }
+ }
+
+ const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ getUser()
+ }
+ }
+
+ const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
+ setIsUseRegex(e.target.checked)
+ if (e.target.checked) {
+ try {
+ RegExp(searchValue)
+ setIsRegexLegal(!(searchValue.includes('{}') || searchValue.includes('[]')))
+ } catch (e) {
+ setIsRegexLegal(false)
+ }
+ } else {
+ setIsRegexLegal(true)
+ }
+ }
+
+ const handleOnQueryBtnClick = () => {
+ getUser()
+ }
+
+ const getUser = () => {
+ if (isLoading) {
+ return
+ }
+
+ if (!isRegexLegal) {
+ void message.error('非法正则表达式')
+ return
+ }
+
+ setIsLoading(true)
+
+ void r_sys_user_get()
+ .then((res) => {
+ const data = res.data
+ if (data.code === DATABASE_SELECT_SUCCESS) {
+ const records = data.data?.records
+
+ records && setUserData(records)
+ data.data &&
+ setTableParams({
+ ...tableParams,
+ pagination: {
+ ...tableParams.pagination,
+ total: data.data.total
+ }
+ })
+ } else {
+ void message.error('获取失败，请稍后重试')
+ }
+ })
+ .finally(() => {
+ setIsLoading(false)
+ })
+ }
+
+ const handleOnDrawerRefresh = () => {
+ getRoleData()
+ getGroupData()
+ }
+
+ const getRoleData = () => {
+ if (isLoadingRole) {
+ return
+ }
+
+ setIsLoadingRole(true)
+
+ void r_sys_role_get_list()
+ .then((res) => {
+ const data = res.data
+
+ if (data.code === DATABASE_SELECT_SUCCESS) {
+ data.data && setRoleData(data.data)
+ } else {
+ void message.error('获取角色列表失败，请稍后重试')
+ }
+ })
+ .finally(() => {
+ setIsLoadingRole(false)
+ })
+ }
+
+ const getGroupData = () => {
+ if (isLoadingGroup) {
+ return
+ }
+
+ setIsLoadingGroup(true)
+
+ void r_sys_group_get_list()
+ .then((res) => {
+ const data = res.data
+
+ if (data.code === DATABASE_SELECT_SUCCESS) {
+ data.data && setGroupData(data.data)
+ } else {
+ void message.error('获取用户组列表失败，请稍后重试')
+ }
+ })
+ .finally(() => {
+ setIsLoadingGroup(false)
+ })
+ }
+
+ const getAvatar = () => {
+ void r_api_avatar_random_base64().then((res) => {
+ const response = res.data
+ if (response.success) {
+ response.data && setAvatar(response.data.base64)
+ response.data && form.setFieldValue('avatar', response.data.base64)
}
})
+ }
+
+ useEffect(() => {
+ form.validateFields({ validateOnly: true }).then(
+ () => {
+ setSubmittable(true)
+ },
+ () => {
+ setSubmittable(false)
+ }
+ )
+
+ if (!isDrawerEdit && formValues) {
+ setNewFormValues({
+ username: formValues.username,
+ locking: formValues.locking,
+ expiration: formValues.expiration,
+ credentialsExpiration: formValues.credentialsExpiration,
+ enable: formValues.enable,
+ nickname: formValues.nickname,
+ avatar: formValues.avatar,
+ email: formValues.email,
+ roleIds: formValues.roleIds,
+ groupIds: formValues.groupIds
+ })
+ }
+ }, [formValues])
+
+ useEffect(() => {
+ handleOnDrawerRefresh()
}, [])
+ useEffect(() => {
+ getUser()
+ }, [
+ JSON.stringify(tableParams.filters),
+ JSON.stringify(tableParams.sortField),
+ JSON.stringify(tableParams.sortOrder),
+ JSON.stringify(tableParams.pagination?.pageSize),
+ JSON.stringify(tableParams.pagination?.current)
+ ])
+
+ const addAndEditForm = (
+
+
+
+
+ }
+ size={100}
+ style={{ background: COLOR_BACKGROUND }}
+ onClick={getAvatar}
+ />
+
+