feat: 登录日志未完善版

config/routes.ts

@@ -284,6 +284,12 @@ const routes: Route[] = [
         name: BackstagePermission.VIEW_SYSTEM_ACCOUNT,
         access: 'authRouteFilter',
         component: './System/Account'
+      },
+      {
+        path: 'log',
+        name: BackstagePermission.VIEW_SYSTEM_LOG,
+        // access: 'authRouteFilter',
+        component: './System/Log'
       }
     ]
   },

src/enums/access.ts

@@ -130,5 +130,7 @@ export enum BackstagePermission {
   /** 系统设置-查看管理员 */
   VIEW_SYSTEM_ADMIN_SETTING = 'viewSystemAdminSetting',
   /** 后台人员管理- */
-  VIEW_SYSTEM_ACCOUNT = 'viewSystemAccount'
+  VIEW_SYSTEM_ACCOUNT = 'viewSystemAccount',
+  /** 后台登录日志- */
+  VIEW_SYSTEM_LOG = 'viewSystemLog'
 }

src/locales/zh-CN/menu.ts

@@ -51,5 +51,6 @@ export default {
   'menu.system.setting': '系统设置',
   'menu.system.viewSystemAdminSetting': '管理员',
   'menu.system.viewSystemAccount': '后台人员管理',
+  'menu.system.viewSystemLog': '登录日志',
   'menu.schema.test': '测试'
 }

src/pages/System/Log/index.tsx

@@ -0,0 +1,93 @@
+import { queryLoginLogs } from '@/services/api/permission'
+import consts from '@/utils/consts'
+import dayjs from 'dayjs'
+import { PageContainer } from '@ant-design/pro-layout'
+import ProTable from '@ant-design/pro-table'
+import React, { useState } from 'react'
+import { Select } from 'antd'
+
+const timeTypeOptions = [
+  { label: '最近三天', value: 'days' },
+  { label: '最近一周', value: 'week' },
+  { label: '最近一个月', value: 'month' }
+]
+const LoginLog = () => {
+  const [state, setState] = useState({
+    params: {
+      search: null
+    }
+  })
+  const columns: ProColumnType<API.LoginLogParams>[] = [
+    {
+      dataIndex: 'userID',
+      title: '账号',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
+    },
+    {
+      dataIndex: 'account',
+      title: '姓名',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
+    },
+    {
+      dataIndex: 'browser',
+      title: '登录设备',
+      align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
+    },
+    {
+      dataIndex: 'createTime',
+      title: '登录时间',
+      align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
+      renderText: text => dayjs(text).format('YYYY-MM-DD')
+    },
+    {
+      dataIndex: 'ipInfo',
+      title: '登录地址',
+      align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
+    }
+  ]
+  return (
+    <PageContainer title={false}>
+      <div className="h-full w-full flex flex-row">
+        <div className="w-full h-full bg-white">
+          <ProTable
+            rowKey="ID"
+            columns={columns}
+            search={false}
+            scroll={{ y: document.body.clientHeight - 315 }}
+            request={async (params, sort, filter) => {
+              const {
+                code = -1,
+                data: { items = [], total = 0 }
+              } = await queryLoginLogs({ ...params, ...sort, ...filter })
+              return {
+                data: items,
+                success: code === consts.RET_CODE.SUCCESS,
+                total
+              }
+            }}
+            toolbar={{
+              search: {
+                onSearch: val => setState({ ...state, params: { ...state.params, search: val } }),
+                style: { width: '250px' },
+                placeholder: '请输入账号或姓名'
+              },
+              actions: [
+                <Select
+                  style={{ width: '100px' }}
+                  key="primary"
+                  defaultValue={'days'}
+                  options={timeTypeOptions}
+                />
+              ]
+            }}
+          />
+        </div>
+      </div>
+    </PageContainer>
+  )
+}
+
+export default LoginLog

src/services/api/permission.ts

@@ -156,3 +156,11 @@ export async function queryRoleDetailByID(params: { ID: string }) {
 export async function queryRoleBgDetailByID(params: { ID: string }) {
   return request('/RoleBg/detail', { params })
 }
+
+/** 登录日志列表 */
+export async function queryLoginLogs(params: API.LoginLogParams) {
+  return request('/LoginLogs/list', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/api/typings.d.ts

@@ -477,4 +477,15 @@ declare namespace API {
     participantInfo?: ParticipantInfo
     conditionInfo?: ConditionInfo[]
   }
+  type LoginLogParams = {
+    ID: string
+    ip: string
+    ipInfo: string
+    browser: string
+    os: string
+    userID: string
+    platform: string
+    createTime: number
+    id: string
+  }
 }