From eadc74ca67ae8d056e1572af303302e46d97fefa Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Fri, 3 Nov 2023 18:25:58 +0800 Subject: [PATCH] Optimize date response. Add system log table. --- src/ant-design.d.ts | 6 + src/assets/css/pages/system-framework.scss | 16 +++ src/components/common/Card.tsx | 6 +- src/global.d.ts | 48 +++++--- src/pages/Login.tsx | 9 +- src/pages/SystemFramework.tsx | 2 +- src/pages/system/Log.tsx | 131 +++++++++++++++++++-- src/services/system.tsx | 3 +- src/utils/common.ts | 5 + 9 files changed, 190 insertions(+), 36 deletions(-) create mode 100644 src/assets/css/pages/system-framework.scss diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts index 5ec575f..e9d563c 100644 --- a/src/ant-design.d.ts +++ b/src/ant-design.d.ts @@ -1,8 +1,14 @@ import * as React from 'react' import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon' +import { TablePaginationConfig } from 'antd/lib' +import { FilterValue } from 'antd/es/table/interface' declare global { type IconComponent = | React.ComponentType> | React.ForwardRefExoticComponent + + type PaginationConfig = TablePaginationConfig + + type FilterVal = FilterValue } diff --git a/src/assets/css/pages/system-framework.scss b/src/assets/css/pages/system-framework.scss new file mode 100644 index 0000000..937d667 --- /dev/null +++ b/src/assets/css/pages/system-framework.scss @@ -0,0 +1,16 @@ +@use "@/assets/css/constants" as constants; +@use "@/assets/css/mixins" as mixins; + +body { + background-color: constants.$background-color; +} + +.left-panel { + background-color: constants.$origin-color; +} + +.right-panel { + flex: 1; + width: 0; + background-color: constants.$background-color; +} \ No newline at end of file diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx index 712bfde..633326e 100644 --- a/src/components/common/Card.tsx +++ b/src/components/common/Card.tsx @@ -4,9 +4,9 @@ import '@/assets/css/components/common/card.scss' interface CardProps extends React.DetailedHTMLProps, HTMLDivElement> {} -const Card: React.FC = (props) => { +const Card = forwardRef((props, ref) => { const { className, ..._props } = props - return
-} + return
+}) export default Card diff --git a/src/global.d.ts b/src/global.d.ts index 6275a94..cdc11bb 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -61,13 +61,13 @@ interface UserWithPowerInfoVo { id: string username: string locking: boolean - expiration: Date - credentialsExpiration: Date + expiration: string + credentialsExpiration: string enable: number - lastLoginTime: Date + lastLoginTime: string lastLoginIp: string - createTime: Date - updateTime: Date + createTime: string + updateTime: string userInfo: UserInfoVo modules: ModuleVo[] menus: MenuVo[] @@ -79,13 +79,13 @@ interface UserWithRoleInfoVo { id: string username: string locking: boolean - expiration: Date - credentialsExpiration: Date + expiration: string + credentialsExpiration: string enable: number - lastLoginTime: Date + lastLoginTime: string lastLoginIp: string - createTime: Date - updateTime: Date + createTime: string + updateTime: string userInfo: UserInfoVo roles: RoleVo[] groups: GroupVo[] @@ -146,20 +146,40 @@ interface LoginForm { password: string } +interface PageVo { + current: number + pages: number + size: number + total: number + records: T[] +} + +interface PageParam { + currentPage?: number + pageSize?: number +} + +interface TableParams { + pagination?: PaginationConfig + sortField?: string + sortOrder?: string + filters?: Record +} + interface SysLogGetVo { id: string logType: string operateUserId: string - operateTime: Date + operateTime: string requestUri: string requestMethod: string requestParams: string requestIp: string requestServerAddress: string - isException: boolean + exception: boolean exceptionInfo: string - startTime: Date - endTime: Date + startTime: string + endTime: string executeTime: number userAgent: string } diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 7b5a9b5..8a45882 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,8 +1,7 @@ import React from 'react' import { notification } from 'antd' -import moment from 'moment' import '@/assets/css/pages/login.scss' -import { setToken } from '@/utils/common' +import { getLocalTime, setToken } from '@/utils/common' import { getUserInfo, login } from '@/utils/auth' import { SYSTEM_LOGIN_SUCCESS, @@ -44,10 +43,8 @@ const Login: React.FC = () => {
上次登录： - {moment(user.lastLoginTime).format( - 'yyyy-MM-DD HH:mm:ssZ' - )} - 【{user.lastLoginIp}】 + {getLocalTime(user.lastLoginTime)}【 + {user.lastLoginIp}】 ), diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx index 21e6b53..2525e74 100644 --- a/src/pages/SystemFramework.tsx +++ b/src/pages/SystemFramework.tsx @@ -1,6 +1,6 @@ import React from 'react' import system from '@/router/system' -import '@/assets/css/pages/tools-framework.scss' +import '@/assets/css/pages/system-framework.scss' import FitFullScreen from '@/components/common/FitFullScreen' import Sidebar from '@/components/common/sidebar' import SidebarItemList from '@/components/common/sidebar/SidebarItemList' diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx index 53e3d05..ae7ec32 100644 --- a/src/pages/system/Log.tsx +++ b/src/pages/system/Log.tsx @@ -1,31 +1,140 @@ import React, { useState } from 'react' +import { ColumnsType, FilterValue, SorterResult } from 'antd/es/table/interface' +import { TablePaginationConfig } from 'antd/lib' import FitFullScreen from '@/components/common/FitFullScreen.tsx' import Card from '@/components/common/Card' import { r_getSysLog } from '@/services/system.tsx' import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts' +import HideScrollbar from '@/components/common/HideScrollbar.tsx' +import { getLocalTime } from '@/utils/common.ts' const Log: React.FC = () => { - const [logList, setLogList] = useState([]) + const tableCardRef = useRef(null) + const [logData, setLogData] = useState([]) + const [loading, setLoading] = useState(false) + const [tableParams, setTableParams] = useState({ + pagination: { + current: 1, + pageSize: 20, + position: ['bottomCenter'] + } + }) + + const dataColumns: ColumnsType = [ + { title: '类型', dataIndex: 'logType' }, + { + title: '操作者', + dataIndex: 'operateUserId' + }, + { + title: '操作时间', + dataIndex: 'operateTime', + render: (value) => getLocalTime(value) + }, + { + title: '请求 Uri', + dataIndex: 'requestUri' + }, + { + title: '请求方式', + dataIndex: 'requestMethod' + }, + { + title: '请求参数', + dataIndex: 'requestParams' + }, + { + title: '请求 IP', + dataIndex: 'requestIp' + }, + { + title: '请求服务器地址', + dataIndex: 'requestServerAddress' + }, + { + title: '异常信息', + dataIndex: 'exceptionInfo' + }, + { + title: '执行时间', + dataIndex: 'executeTime', + render: (value) => `${value}ms` + }, + { + title: '用户代理', + dataIndex: 'userAgent' + } + ] + + const handleOnTableChange = ( + pagination: TablePaginationConfig, + filters: Record, + sorter: SorterResult | SorterResult[] + ) => { + setTableParams({ pagination, filters, ...sorter }) + + if (pagination.pageSize !== tableParams.pagination?.pageSize) { + setLogData([]) + } + } const getLog = () => { - r_getSysLog().then((res) => { - const data = res.data - if (data.code === DATABASE_SELECT_SUCCESS) { - data.data && setLogList(data.data) - } + if (loading) { + return + } + + r_getSysLog({ + currentPage: tableParams.pagination?.current, + pageSize: tableParams.pagination?.pageSize }) + .then((res) => { + const data = res.data + if (data.code === DATABASE_SELECT_SUCCESS) { + data.data && setLogData(data.data.records) + data.data && + setTableParams({ + ...tableParams, + pagination: { + ...tableParams.pagination, + total: data.data.total + } + }) + } + }) + .finally(() => { + setLoading(false) + }) } useEffect(() => { getLog() - }, []) + }, [ + JSON.stringify(tableParams.filters), + JSON.stringify(tableParams.sortField), + JSON.stringify(tableParams.sortOrder), + JSON.stringify(tableParams.pagination?.pageSize), + JSON.stringify(tableParams.pagination?.current) + ]) return ( <> - - - - + + + + record.id} + pagination={tableParams.pagination} + loading={loading} + onChange={handleOnTableChange} + /> + + ) diff --git a/src/services/system.tsx b/src/services/system.tsx index 6c73239..23125c0 100644 --- a/src/services/system.tsx +++ b/src/services/system.tsx @@ -1,4 +1,5 @@ import request from '@/services/index' import { URL_API_SYS_LOG } from '@/constants/urls.constants' -export const r_getSysLog = () => request.get(URL_API_SYS_LOG) +export const r_getSysLog = (param: PageParam) => + request.get>(URL_API_SYS_LOG, { ...param }) diff --git a/src/utils/common.ts b/src/utils/common.ts index ebae83a..ffe9f7e 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -1,4 +1,5 @@ import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants' +import moment from 'moment' export const getQueryVariable = (variable: string) => { const query = window.location.search.substring(1) @@ -139,3 +140,7 @@ const randomColor = (start: number, end: number) => { export const getRedirectUrl = (path: string, redirectUrl: string): string => { return `${path}?redirect=${encodeURIComponent(redirectUrl)}` } + +export const getLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => { + return moment.utc(utcTime).local().format(format) +}