<script setup>
|
import { ref, onMounted } from "vue";
|
import { getAllUserName } from "@/api/user";
|
import { getAreaUserLock } from '@/api/lockManager.js';
|
|
import { getSysLog, getTypes } from '@/api/loginfo.js';
|
const userName = ref('');
|
const startTime = ref('');
|
const endTime = ref('');
|
const userList = ref([]);
|
const logList = ref([]);
|
const lockList = ref([]);
|
const pageCurr = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const typeList = ref([]);
|
|
async function getList() {
|
let params = {
|
pageNum: pageCurr.value,
|
pageSize: pageSize.value,
|
startTime: startTime.value || undefined,
|
endTime: endTime.value || undefined,
|
userName: userName.value || undefined,
|
};
|
|
let res = await getSysLog(params);
|
let { code, data } = res;
|
let _total = 0;
|
let _list = [];
|
if (code && data) {
|
_list = data.list;
|
_total = data.total
|
}
|
logList.value = _list;
|
total.vvalue = _total;
|
}
|
|
const handleSizeChange = (params) => {
|
pageSize.value = params;
|
getList();
|
}
|
|
function handleCurrentChange(params) {
|
pageCurr.value = params;
|
getList();
|
}
|
|
async function getTypeList() {
|
let res = await getTypes();
|
let { code, data } = res;
|
let _list = [];
|
if (code && data) {
|
// console.log(data);
|
Object.keys(data).forEach((v) => {
|
data[v].forEach((vv) => {
|
_list.push({ label: vv.type2Name, value: vv.type2 });
|
});
|
});
|
}
|
typeList.value = _list;
|
}
|
|
async function getLockList() {
|
let res = await getAreaUserLock();
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
lockList.value = _list;
|
}
|
async function getUsers() {
|
let res = await getAllUserName();
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
userList.value = _list;
|
}
|
|
onMounted(() => {
|
getUsers();
|
getLockList();
|
getTypeList();
|
getList();
|
});
|
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header">
|
</div>
|
<div class="page-content">
|
<hdw-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-tools">
|
<div class="tools-filter">
|
<div class="tools-filter-item">
|
<div class="filter-label">操作人</div>
|
<div class="filter-content">
|
<el-select v-model="userName" clearable placeholder="请选择" size="small" filterable style="width: 180px"
|
@change="getList">
|
<el-option v-for="(item, idx) in userList" size="small" :key="'user_' + idx" :label="item"
|
:value="item" />
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">操作时间</div>
|
<div class="filter-content">
|
<el-date-picker v-model="startTime" @change="getList" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
|
size="small" placeholder="" />至<el-date-picker v-model="endTime" type="datetime"
|
value-format="YYYY-MM-DD HH:mm:ss" size="small" @change="getList" placeholder="" />
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">操作类型</div>
|
<div class="filter-content">
|
<el-select v-model="ctlType" @change="getList" placeholder="请选择" size="small" style="width: 180px">
|
<el-option v-for="(item, idx) in typeList" :key="'type_' + idx" :label="item.label"
|
:value="item.value" />
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<el-button type="primary" size="small" :icon="Search" @click="getList">查询</el-button>
|
</div>
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table :data="logList" border style="width: 100%; height: 100%">
|
<el-table-column type="index" width="50" />
|
<el-table-column prop="userName" align="center" label="操作人" width="120" />
|
<el-table-column prop="msg" align="center" label="操作类型" width="180" />
|
<el-table-column prop="detail" align="center" width="" label="详情" />
|
<el-table-column prop="ip" align="center" label="ip" width="120" />
|
<el-table-column prop="createTime" align="center" label="操作时间" width="180" />
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
<div class="el-page-container">
|
<el-pagination v-model:current-page="pageCurr" v-model:page-size="pageSize"
|
:page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]" size="small"
|
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
|
@current-change="handleCurrentChange" />
|
</div>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</hdw-card>
|
</div>
|
<div class="page-footer"></div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
|
.page-content-table {
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 240px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
|
.filter-label {
|
display: inline-block;
|
|
&::after {
|
content: ":";
|
}
|
}
|
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
</style>
|
