feat: 日志管理

src/api/log.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+import { LogListPageParam, LogListPageRes } from './types/log';
+
+// 日志管理列表
+export function getLogList(params: LogListPageParam): Promise<LogListPageRes> {
+  return axios.post('/api/log/list', { params });
+}

src/api/types/log.ts

@@ -0,0 +1,30 @@
+import { PageResult, PageParams } from './common';
+
+// 日志
+export interface LogItem {
+  // 登录名
+  loginName: string;
+  // 用户类型
+  userType: string;
+  // 操作类型
+  operationType: string;
+  // 登录IP
+  loginIp: string;
+  // 功能模块
+  function: string;
+  // 操作时间
+  operationTime: string;
+  // 详情
+  detail: string;
+}
+export type LogListPageRes = PageResult<LogItem>;
+
+export interface LogListFilter {
+  // 登录名
+  loginName: string;
+  // 用户类型
+  userType: string;
+  // 操作类型
+  operationType: string;
+}
+export type LogListPageParam = PageParams<LogListFilter>;

src/router/routes/modules/base.ts

@@ -36,6 +36,15 @@ const BASE: AppRouteRecordRaw = {
         requiresAuth: true,
       },
     },
+    {
+      path: '/log-manage',
+      name: 'LogManage',
+      component: () => import('@/views/log/LogManage.vue'),
+      meta: {
+        title: '操作日志',
+        requiresAuth: true,
+      },
+    },
   ],
 };
 

src/store/modules/app/menuData.ts

@@ -240,7 +240,7 @@ export const adminMenus = [
   {
     id: 24,
     name: '操作日志',
-    url: 'OperationLog',
+    url: 'LogManage',
     type: 'MENU',
     parentId: -1,
     sequence: 2,

src/views/log/LogManage.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="part-box is-filter">
+    <el-form inline>
+      <el-form-item label="登录名">
+        <el-input
+          v-model.trim="searchModel.loginName"
+          placeholder="请输入"
+          clearable
+          style="width: 120px"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label="用户类型">
+        <el-select
+          v-model="searchModel.userType"
+          placeholder="请选择"
+          clearable
+          style="width: 120px"
+        >
+          <el-option label="请选择" value="" />
+          <el-option label="管理员" value="管理员" />
+          <el-option label="普通用户" value="普通用户" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作类型">
+        <el-select
+          v-model="searchModel.operationType"
+          placeholder="请选择"
+          clearable
+          style="width: 120px"
+        >
+          <el-option label="请选择" value="" />
+          <el-option label="登录" value="登录" />
+          <el-option label="登出" value="登出" />
+          <el-option label="查询" value="查询" />
+          <el-option label="新增" value="新增" />
+          <el-option label="修改" value="修改" />
+          <el-option label="删除" value="删除" />
+          <el-option label="导入" value="导入" />
+          <el-option label="导出" value="导出" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-space wrap>
+      <el-button type="primary" @click="toPage(1)">查询</el-button>
+      <el-button @click="exportData">导出</el-button>
+    </el-space>
+  </div>
+  <div class="part-box">
+    <el-table class="page-table" :data="dataList" :loading="loading">
+      <el-table-column type="index" label="序号" width="60" />
+      <el-table-column property="loginName" label="登录名" min-width="120" />
+      <el-table-column property="userType" label="用户类型" width="100" />
+      <el-table-column property="operationType" label="操作类型" width="100" />
+      <el-table-column property="loginIp" label="登录IP" width="140" />
+      <el-table-column property="function" label="功能模块" min-width="200" />
+      <el-table-column property="operationTime" label="操作时间" width="180" />
+      <el-table-column property="detail" label="详情" width="180" />
+    </el-table>
+    <el-pagination
+      v-model:current-page="pagination.pageNumber"
+      v-model:page-size="pagination.pageSize"
+      :layout="pagination.layout"
+      :total="pagination.total"
+      @size-change="pageSizeChange"
+      @current-change="toPage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive } from 'vue';
+  import { getLogList } from '@/api/log';
+  import { LogItem, LogListFilter } from '@/api/types/log';
+  import useTable from '@/hooks/table';
+
+  defineOptions({
+    name: 'LogManage',
+  });
+
+  const searchModel = reactive<LogListFilter>({
+    loginName: '',
+    userType: '',
+    operationType: '',
+  });
+
+  const { dataList, pagination, loading, toPage, pageSizeChange } =
+    useTable<LogItem>(getLogList, searchModel, false);
+
+  function exportData() {
+    // TODO: 实现导出功能
+  }
+</script>