FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Optimize date response. Add system log table.

Browse Source
This commit is contained in:
Fat Snake
2023-11-03 18:25:58 +08:00
parent bc196d4ba9
commit eadc74ca67
9 changed files with 190 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/ant-design.d.ts vendored
View File

@@ -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<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>
| React.ForwardRefExoticComponent<CustomIconComponentProps>
type PaginationConfig = TablePaginationConfig
type FilterVal = FilterValue
}

16
src/assets/css/pages/system-framework.scss Normal file
View File

@@ -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;
}

6
src/components/common/Card.tsx
View File

@@ -4,9 +4,9 @@ import '@/assets/css/components/common/card.scss'
interface CardProps
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
const Card: React.FC<CardProps> = (props) => {
const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
const { className, ..._props } = props
return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} />
}
return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} ref={ref} />
})
export default Card

48
src/global.d.ts vendored
View File

@@ -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<T> {
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<string, FilterVal | null>
}
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
}

9
src/pages/Login.tsx
View File

@@ -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 = () => {
<br />
<span>
上次登录：
{moment(user.lastLoginTime).format(
'yyyy-MM-DD HH:mm:ssZ'
)}
【{user.lastLoginIp}】
{getLocalTime(user.lastLoginTime)}【
{user.lastLoginIp}】
</span>
</>
),

2
src/pages/SystemFramework.tsx
View File

@@ -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'

123
src/pages/system/Log.tsx
View File

@@ -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<SysLogGetVo[]>([])
const tableCardRef = useRef<HTMLDivElement>(null)
const [logData, setLogData] = useState<SysLogGetVo[]>([])
const [loading, setLoading] = useState(false)
const [tableParams, setTableParams] = useState<TableParams>({
pagination: {
current: 1,
pageSize: 20,
position: ['bottomCenter']
}
})
const dataColumns: ColumnsType<SysLogGetVo> = [
{ 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<string, FilterValue | null>,
sorter: SorterResult<SysLogGetVo> | SorterResult<SysLogGetVo>[]
) => {
setTableParams({ pagination, filters, ...sorter })
if (pagination.pageSize !== tableParams.pagination?.pageSize) {
setLogData([])
}
}
const getLog = () => {
r_getSysLog().then((res) => {
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 && setLogList(data.data)
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 (
<>
<FitFullScreen style={{ padding: '20px' }}>
<Card>
<AntdTable dataSource={logList} />
<FitFullScreen>
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
autoHideWaitingTime={500}
>
<Card ref={tableCardRef}>
<AntdTable
dataSource={logData}
columns={dataColumns}
rowKey={(record) => record.id}
pagination={tableParams.pagination}
loading={loading}
onChange={handleOnTableChange}
/>
</Card>
</HideScrollbar>
</FitFullScreen>
</>
)

3
src/services/system.tsx
View File

@@ -1,4 +1,5 @@
import request from '@/services/index'
import { URL_API_SYS_LOG } from '@/constants/urls.constants'
export const r_getSysLog = () => request.get<SysLogGetVo[]>(URL_API_SYS_LOG)
export const r_getSysLog = (param: PageParam) =>
request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })

5
src/utils/common.ts
View File

@@ -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)
}