mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-04-25 16:07:19 +08:00
feat: 新增登录日志页面
This commit is contained in:
valarchie
parent
bc4d29cba0
commit
fac4cc4673
@ -59,3 +59,58 @@ export const deleteOperationLogApi = (data: Array<number>) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** 登录日志查询类 */
|
||||||
|
export interface LoginLogQuery extends BasePageQuery {
|
||||||
|
beginTime?: string;
|
||||||
|
endTime?: string;
|
||||||
|
ipAddress?: string;
|
||||||
|
status?: string;
|
||||||
|
username?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登录日志信息
|
||||||
|
*/
|
||||||
|
export interface LoginLogsDTO {
|
||||||
|
browser?: string;
|
||||||
|
infoId?: string;
|
||||||
|
ipAddress?: string;
|
||||||
|
loginLocation?: string;
|
||||||
|
loginTime?: Date;
|
||||||
|
msg?: string;
|
||||||
|
operationSystem?: string;
|
||||||
|
/** TODO 这个登录状态的设计很奇怪 需要重构掉 */
|
||||||
|
status?: number;
|
||||||
|
statusStr?: string;
|
||||||
|
username?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取操作日志列表 */
|
||||||
|
export const getLoginLogListApi = (params?: LoginLogQuery) => {
|
||||||
|
return http.request<ResponseData<PageDTO<LoginLogsDTO>>>(
|
||||||
|
"get",
|
||||||
|
"/logs/loginLogs",
|
||||||
|
{
|
||||||
|
params
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const exportLoginLogExcelApi = (
|
||||||
|
params: LoginLogQuery,
|
||||||
|
fileName: string
|
||||||
|
) => {
|
||||||
|
return http.download("/logs/loginLogs/excel", fileName, {
|
||||||
|
params
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteLoginLogApi = (data: Array<number>) => {
|
||||||
|
return http.request<ResponseData<void>>("delete", "/logs/loginLogs", {
|
||||||
|
params: {
|
||||||
|
// 需要将数组转换为字符串 否则Axios会将参数变成 noticeIds[0]:1 noticeIds[1]:2 这种格式，后端接收参数不成功
|
||||||
|
ids: data.toString()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|||||||
@ -87,7 +87,7 @@ class PureHttp {
|
|||||||
"/captchaImage",
|
"/captchaImage",
|
||||||
"/getConfig"
|
"/getConfig"
|
||||||
];
|
];
|
||||||
return whiteList.some(v => config.url.indexOf(v) > -1)
|
return whiteList.some(v => config.url.endsWith(v))
|
||||||
? config
|
? config
|
||||||
: new Promise(resolve => {
|
: new Promise(resolve => {
|
||||||
const data = getToken();
|
const data = getToken();
|
||||||
|
|||||||
195
src/views/system/log/loginLog/index.vue
Normal file
195
src/views/system/log/loginLog/index.vue
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useLoginLogHook } from "./utils/hook";
|
||||||
|
import { PureTableBar } from "@/components/RePureTableBar";
|
||||||
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||||
|
|
||||||
|
import Delete from "@iconify-icons/ep/delete";
|
||||||
|
import Search from "@iconify-icons/ep/search";
|
||||||
|
import Refresh from "@iconify-icons/ep/refresh";
|
||||||
|
import { useUserStoreHook } from "@/store/modules/user";
|
||||||
|
// TODO 这个导入声明好长 看看如何优化
|
||||||
|
import { CommonUtils } from "../../../../utils/common";
|
||||||
|
|
||||||
|
/** 组件name最好和菜单表中的router_name一致 */
|
||||||
|
defineOptions({
|
||||||
|
name: "SystemOperationLog"
|
||||||
|
});
|
||||||
|
|
||||||
|
const loginLogStatusList =
|
||||||
|
useUserStoreHook().dictionaryList["sysLoginLog.status"];
|
||||||
|
|
||||||
|
const tableRef = ref();
|
||||||
|
|
||||||
|
const searchFormRef = ref();
|
||||||
|
const {
|
||||||
|
searchFormParams,
|
||||||
|
pageLoading,
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
pagination,
|
||||||
|
timeRange,
|
||||||
|
defaultSort,
|
||||||
|
multipleSelection,
|
||||||
|
onSearch,
|
||||||
|
resetForm,
|
||||||
|
exportAllExcel,
|
||||||
|
getLoginLogList,
|
||||||
|
handleDelete,
|
||||||
|
handleBulkDelete
|
||||||
|
} = useLoginLogHook();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<el-form
|
||||||
|
ref="searchFormRef"
|
||||||
|
:inline="true"
|
||||||
|
:model="searchFormParams"
|
||||||
|
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||||
|
>
|
||||||
|
<el-form-item label="登录IP：" prop="ipAddress">
|
||||||
|
<el-input
|
||||||
|
v-model="searchFormParams.ipAddress"
|
||||||
|
placeholder="请输入IP地址"
|
||||||
|
clearable
|
||||||
|
class="!w-[200px]"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用户名：" prop="username">
|
||||||
|
<el-input
|
||||||
|
v-model="searchFormParams.username"
|
||||||
|
placeholder="请选择用户名称"
|
||||||
|
clearable
|
||||||
|
class="!w-[200px]"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="状态：" prop="status">
|
||||||
|
<el-select
|
||||||
|
v-model="searchFormParams.status"
|
||||||
|
placeholder="请选择状态"
|
||||||
|
clearable
|
||||||
|
class="!w-[180px]"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in loginLogStatusList"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<label class="el-form-item__label is-required font-bold"
|
||||||
|
>登录时间：</label
|
||||||
|
>
|
||||||
|
<!-- TODO 如何消除这个v-model的warning -->
|
||||||
|
<el-date-picker
|
||||||
|
class="!w-[240px]"
|
||||||
|
v-model="timeRange"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="-"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:icon="useRenderIcon(Search)"
|
||||||
|
:loading="pageLoading"
|
||||||
|
@click="onSearch"
|
||||||
|
>
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
:icon="useRenderIcon(Refresh)"
|
||||||
|
@click="resetForm(searchFormRef, tableRef)"
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- table bar 包裹 table -->
|
||||||
|
<PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
|
||||||
|
<!-- 表格操作栏 -->
|
||||||
|
<template #buttons>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
:icon="useRenderIcon(Delete)"
|
||||||
|
@click="handleBulkDelete(tableRef)"
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="CommonUtils.exportExcel(columns, dataList, '登录日志列表')"
|
||||||
|
>单页导出</el-button
|
||||||
|
>
|
||||||
|
<el-button type="primary" @click="exportAllExcel">全部导出</el-button>
|
||||||
|
</template>
|
||||||
|
<template v-slot="{ size, dynamicColumns }">
|
||||||
|
<pure-table
|
||||||
|
border
|
||||||
|
ref="tableRef"
|
||||||
|
align-whole="center"
|
||||||
|
showOverflowTooltip
|
||||||
|
table-layout="auto"
|
||||||
|
:loading="pageLoading"
|
||||||
|
:size="size"
|
||||||
|
adaptive
|
||||||
|
:data="dataList"
|
||||||
|
:columns="dynamicColumns"
|
||||||
|
:default-sort="defaultSort"
|
||||||
|
:pagination="pagination"
|
||||||
|
:paginationSmall="size === 'small' ? true : false"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: 'var(--el-table-row-hover-bg-color)',
|
||||||
|
color: 'var(--el-text-color-primary)'
|
||||||
|
}"
|
||||||
|
@page-size-change="getLoginLogList"
|
||||||
|
@page-current-change="getLoginLogList"
|
||||||
|
@sort-change="getLoginLogList"
|
||||||
|
@selection-change="
|
||||||
|
rows => (multipleSelection = rows.map(item => item.logId))
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<template #operation="{ row }">
|
||||||
|
<el-popconfirm
|
||||||
|
:title="`是否确认删除编号为${row.logId}的这条日志`"
|
||||||
|
@confirm="handleDelete(row)"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<el-button
|
||||||
|
class="reset-margin"
|
||||||
|
link
|
||||||
|
type="danger"
|
||||||
|
:size="size"
|
||||||
|
:icon="useRenderIcon(Delete)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</pure-table>
|
||||||
|
</template>
|
||||||
|
</PureTableBar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-dropdown-menu__item i) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
234
src/views/system/log/loginLog/utils/hook.tsx
Normal file
234
src/views/system/log/loginLog/utils/hook.tsx
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
import dayjs from "dayjs";
|
||||||
|
import { message } from "@/utils/message";
|
||||||
|
import { ElMessageBox, Sort } from "element-plus";
|
||||||
|
import {
|
||||||
|
getLoginLogListApi,
|
||||||
|
deleteLoginLogApi,
|
||||||
|
exportLoginLogExcelApi,
|
||||||
|
LoginLogQuery
|
||||||
|
} from "@/api/system/log";
|
||||||
|
import { reactive, ref, onMounted, toRaw } from "vue";
|
||||||
|
import { useUserStoreHook } from "@/store/modules/user";
|
||||||
|
import { CommonUtils } from "@/utils/common";
|
||||||
|
import { PaginationProps } from "@pureadmin/table";
|
||||||
|
|
||||||
|
const loginLogStatusMap =
|
||||||
|
useUserStoreHook().dictionaryMap["sysLoginLog.status"];
|
||||||
|
|
||||||
|
export function useLoginLogHook() {
|
||||||
|
const defaultSort: Sort = {
|
||||||
|
prop: "loginTime",
|
||||||
|
order: "descending"
|
||||||
|
};
|
||||||
|
|
||||||
|
const pagination: PaginationProps = {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
currentPage: 1,
|
||||||
|
background: true
|
||||||
|
};
|
||||||
|
|
||||||
|
const timeRange = ref([]);
|
||||||
|
|
||||||
|
const searchFormParams = reactive<LoginLogQuery>({
|
||||||
|
ipAddress: undefined,
|
||||||
|
username: undefined,
|
||||||
|
status: undefined,
|
||||||
|
beginTime: undefined,
|
||||||
|
endTime: undefined,
|
||||||
|
timeRangeColumn: defaultSort.prop
|
||||||
|
});
|
||||||
|
|
||||||
|
const dataList = ref([]);
|
||||||
|
const pageLoading = ref(true);
|
||||||
|
const multipleSelection = ref([]);
|
||||||
|
|
||||||
|
const columns: TableColumnList = [
|
||||||
|
{
|
||||||
|
type: "selection",
|
||||||
|
align: "left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "日志编号",
|
||||||
|
prop: "logId",
|
||||||
|
minWidth: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "用户名",
|
||||||
|
prop: "username",
|
||||||
|
minWidth: 120,
|
||||||
|
sortable: "custom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "IP地址",
|
||||||
|
prop: "ipAddress",
|
||||||
|
minWidth: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "登录地点",
|
||||||
|
prop: "loginLocation",
|
||||||
|
minWidth: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "操作系统",
|
||||||
|
prop: "operationSystem",
|
||||||
|
minWidth: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "浏览器",
|
||||||
|
prop: "browser",
|
||||||
|
minWidth: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "状态",
|
||||||
|
prop: "status",
|
||||||
|
minWidth: 120,
|
||||||
|
cellRenderer: ({ row, props }) => (
|
||||||
|
<el-tag
|
||||||
|
size={props.size}
|
||||||
|
type={loginLogStatusMap[row.status].cssTag}
|
||||||
|
effect="plain"
|
||||||
|
>
|
||||||
|
{loginLogStatusMap[row.status].label}
|
||||||
|
</el-tag>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "状态名",
|
||||||
|
prop: "statusStr",
|
||||||
|
minWidth: 120,
|
||||||
|
hide: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "登录时间",
|
||||||
|
minWidth: 160,
|
||||||
|
prop: "loginTime",
|
||||||
|
sortable: "custom",
|
||||||
|
formatter: ({ loginTime }) =>
|
||||||
|
dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
width: 140,
|
||||||
|
slot: "operation"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
async function onSearch() {
|
||||||
|
// 点击搜索的时候 需要重置分页
|
||||||
|
pagination.currentPage = 1;
|
||||||
|
getLoginLogList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetForm(formEl, tableRef) {
|
||||||
|
if (!formEl) return;
|
||||||
|
// 清空查询参数
|
||||||
|
formEl.resetFields();
|
||||||
|
// 清空排序
|
||||||
|
searchFormParams.orderColumn = undefined;
|
||||||
|
searchFormParams.orderDirection = undefined;
|
||||||
|
// 清空时间查询 TODO 这块有点繁琐 有可以优化的地方吗？
|
||||||
|
// Form组件的resetFields方法无法清除datepicker里面的数据。
|
||||||
|
timeRange.value = [];
|
||||||
|
searchFormParams.beginTime = undefined;
|
||||||
|
searchFormParams.endTime = undefined;
|
||||||
|
tableRef.getTableRef().clearSort();
|
||||||
|
// 重置分页并查询
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getLoginLogList(sort: Sort = defaultSort) {
|
||||||
|
pageLoading.value = true;
|
||||||
|
if (sort != null) {
|
||||||
|
CommonUtils.fillSortParams(searchFormParams, sort);
|
||||||
|
}
|
||||||
|
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||||
|
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||||
|
|
||||||
|
const { data } = await getLoginLogListApi(toRaw(searchFormParams)).finally(
|
||||||
|
() => {
|
||||||
|
pageLoading.value = false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
dataList.value = data.rows;
|
||||||
|
pagination.total = data.total;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function exportAllExcel(sort: Sort = defaultSort) {
|
||||||
|
if (sort != null) {
|
||||||
|
CommonUtils.fillSortParams(searchFormParams, sort);
|
||||||
|
}
|
||||||
|
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||||
|
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
|
||||||
|
|
||||||
|
exportLoginLogExcelApi(toRaw(searchFormParams), "登录日志.xls");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(row) {
|
||||||
|
await deleteLoginLogApi([row.logId]).then(() => {
|
||||||
|
message(`您删除了操作编号为${row.logId}的这条数据`, {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
// 刷新列表
|
||||||
|
getLoginLogList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleBulkDelete(tableRef) {
|
||||||
|
if (multipleSelection.value.length === 0) {
|
||||||
|
message("请选择需要删除的数据", { type: "warning" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
`确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的日志吗?`,
|
||||||
|
"系统提示",
|
||||||
|
{
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
dangerouslyUseHTMLString: true,
|
||||||
|
draggable: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(async () => {
|
||||||
|
await deleteLoginLogApi(multipleSelection.value).then(() => {
|
||||||
|
message(`您删除了日志编号为[ ${multipleSelection.value} ]的数据`, {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
// 刷新列表
|
||||||
|
getLoginLogList();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message("取消删除", {
|
||||||
|
type: "info"
|
||||||
|
});
|
||||||
|
// 清空checkbox选择的数据
|
||||||
|
tableRef.getTableRef().clearSelection();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getLoginLogList();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
searchFormParams,
|
||||||
|
pageLoading,
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
pagination,
|
||||||
|
defaultSort,
|
||||||
|
timeRange,
|
||||||
|
multipleSelection,
|
||||||
|
onSearch,
|
||||||
|
exportAllExcel,
|
||||||
|
// exportExcel,
|
||||||
|
getLoginLogList,
|
||||||
|
resetForm,
|
||||||
|
handleDelete,
|
||||||
|
handleBulkDelete
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -133,7 +133,7 @@ const {
|
|||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<!-- table bar 包裹 table -->
|
<!-- table bar 包裹 table -->
|
||||||
<PureTableBar title="通知列表" :columns="columns" @refresh="onSearch">
|
<PureTableBar title="操作日志列表" :columns="columns" @refresh="onSearch">
|
||||||
<!-- 表格操作栏 -->
|
<!-- 表格操作栏 -->
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<el-button
|
<el-button
|
||||||
|
|||||||
@ -12,6 +12,7 @@ import {
|
|||||||
import { reactive, ref, onMounted, h, toRaw } from "vue";
|
import { reactive, ref, onMounted, h, toRaw } from "vue";
|
||||||
import { useUserStoreHook } from "@/store/modules/user";
|
import { useUserStoreHook } from "@/store/modules/user";
|
||||||
import { CommonUtils } from "@/utils/common";
|
import { CommonUtils } from "@/utils/common";
|
||||||
|
import { PaginationProps } from "@pureadmin/table";
|
||||||
|
|
||||||
const operationLogStatusMap =
|
const operationLogStatusMap =
|
||||||
useUserStoreHook().dictionaryMap["sysOperationLog.status"];
|
useUserStoreHook().dictionaryMap["sysOperationLog.status"];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user