137 lines
3.0 KiB
Vue
137 lines
3.0 KiB
Vue
<template>
|
|
<lay-container style="padding: 20px">
|
|
<lay-card>
|
|
<div style="padding: 10px">
|
|
<span style="font-size: 18px;vertical-align: center;margin-right: 20px">登录日志列表</span>
|
|
</div>
|
|
<lay-table height="600px" @change="changePage" :page="page" size="lg" ref="tableRef" :columns="columns" :data-source="dataSource">
|
|
<template v-slot:event_type="{ data }">
|
|
<span :style="{ color: data.event_type === '登录' ? '#67C23A' : '#409EFF' }">
|
|
{{ data.event_type }}
|
|
</span>
|
|
</template>
|
|
</lay-table>
|
|
</lay-card>
|
|
</lay-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, reactive } from 'vue'
|
|
import { layer } from '@layui/layer-vue'
|
|
import { logList } from '@/api/module/home';
|
|
const page = reactive({
|
|
current: 1,
|
|
limit: 10,
|
|
total: 1
|
|
});
|
|
// 定义接口类型
|
|
interface LoginLog {
|
|
id: number
|
|
user_id: number
|
|
ip_code: string // 登录IP
|
|
createtime: string // 记录时间
|
|
content: string // 事件内容
|
|
nickname: string // 用户姓名
|
|
work_number: string // 工号
|
|
name: string // 科室
|
|
}
|
|
onMounted(() => {
|
|
getLogList();
|
|
});
|
|
// 分页变化
|
|
const changePage = (ppc) => {
|
|
page.current = ppc.current;
|
|
page.limit = ppc.limit;
|
|
getLogList();
|
|
}
|
|
const getLogList = () => {
|
|
logList({ page: page.current, size: page.limit }).then((res) => {
|
|
if (res.code === 1) {
|
|
dataSource.value = res.data.data;
|
|
page.total = res.data.count;
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2 })
|
|
}
|
|
})
|
|
}
|
|
// 列表数据
|
|
const dataSource = ref<LoginLog[]>([])
|
|
|
|
// 表格列定义
|
|
const columns = [
|
|
{
|
|
title: "科室",
|
|
width: "120px",
|
|
key: "name"
|
|
},
|
|
{
|
|
title: "工号",
|
|
width: "120px",
|
|
key: "work_number"
|
|
},
|
|
{
|
|
title: "登录IP",
|
|
width: "150px",
|
|
key: "ip_code"
|
|
},
|
|
{
|
|
title: "用户姓名",
|
|
width: "120px",
|
|
key: "nickname"
|
|
},
|
|
{
|
|
title: "事件内容",
|
|
width: "200px",
|
|
key: "content"
|
|
},
|
|
{
|
|
title: "记录时间",
|
|
width: "180px",
|
|
key: "createtime"
|
|
},
|
|
]
|
|
|
|
onMounted(() => {
|
|
getLoginLogs()
|
|
})
|
|
|
|
// 获取登录日志数据
|
|
const getLoginLogs = () => {
|
|
// 这里替换为实际的API调用
|
|
// getLoginLogList().then((res) => {
|
|
// if (res.code === 1) {
|
|
// dataSource.value = res.data
|
|
// } else {
|
|
// layer.msg(res.msg, {icon: 2})
|
|
// }
|
|
// })
|
|
|
|
// 模拟数据
|
|
dataSource.value = [
|
|
{
|
|
id: 1,
|
|
user_id: 10,
|
|
ip_code: '192.168.1.100',
|
|
createtime: '2024-03-20 10:30:45',
|
|
content: '用户登录成功',
|
|
nickname: '张三',
|
|
work_number: '111111',
|
|
name: '大腿骨折2'
|
|
},
|
|
{
|
|
id: 2,
|
|
department: '外科',
|
|
record_time: '2024-03-20 09:15:22',
|
|
login_name: 'user1',
|
|
username: '张医生',
|
|
ip_address: '192.168.1.101',
|
|
event_type: '登出',
|
|
event_content: '用户主动登出',
|
|
device_info: 'Firefox 123.0 / MacOS'
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|