<template>
|
<el-row :gutter="8" class="h100">
|
<el-col :span="4" :xs="24">
|
<el-card shadow="hover" class="h100 left-tree-card" v-loading="treeLoading">
|
<LeftTreeByMgr title-name="用户列表" :treedata="listTreeData" :current-node-key="currentListID" @click="handleClickNode"> </LeftTreeByMgr>
|
</el-card>
|
</el-col>
|
<el-col :span="20" :xs="24" class="flex-column h100">
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<el-form :model="queryParams" :inline="true">
|
<el-form-item label="开始时间">
|
<el-date-picker
|
v-model="queryParams.StartTime"
|
type="date"
|
placeholder="开始时间"
|
value-format="YYYY-MM-DD"
|
:shortcuts="shortcuts"
|
:disabled-date="disabledDate"
|
/>
|
</el-form-item>
|
<el-form-item label="结束时间">
|
<el-date-picker
|
v-model="queryParams.EndTime"
|
type="date"
|
placeholder="结束时间"
|
value-format="YYYY-MM-DD"
|
:shortcuts="shortcuts"
|
:disabled-date="disabledDate"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="ele-Search" @click="getTableData"> 查询 </el-button>
|
<el-button icon="ele-Refresh" @click="resetQueryClick"> 重置 </el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<el-card class="flex-auto scroll-table-card" shadow="hover" style="margin-top: 8px">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
border
|
row-key="ID"
|
:row-class-name="isDragStatus ? 'move-row' : 'cursor-pointer'"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="tableData"
|
style="width: 100%"
|
highlight-current-row
|
>
|
<el-table-column prop="LoginPlatform" label="登录平台" show-overflow-tooltip>
|
<template #default="scope">
|
{{ LOGIN_PLATFORM_MAP[scope.row.LoginPlatform] }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="LoginTypeName" label="登录类型" show-overflow-tooltip />
|
<el-table-column prop="LoginOperation" label="登录操作" show-overflow-tooltip>
|
<template #default="scope">
|
{{ LOGIN_OPERATION_MAP[scope.row.LoginOperation] }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="LoginIP" label="登录IP" show-overflow-tooltip width="140" />
|
|
<el-table-column prop="LoginTime" label="登录时间" show-overflow-tooltip width="170" sortable />
|
|
<el-table-column prop="Message" label="登录信息" show-overflow-tooltip />
|
</el-table>
|
<el-pagination
|
v-model:currentPage="tableParams.PageIndex"
|
v-model:page-size="tableParams.PageSize"
|
:total="total"
|
:page-sizes="[10, 20, 50, 100]"
|
background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
layout="total, sizes, prev, pager, next, jumper"
|
/>
|
</el-card>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script setup lang="ts">
|
import { ElMessage } from 'element-plus';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
import { ref, onMounted, computed } from 'vue';
|
|
import { GetAccessLogPageListByUserID, GetUserListTreeData } from '/@/api/auth/accessLog';
|
import { LOGIN_OPERATION_MAP, LOGIN_PLATFORM_MAP } from '/@/views/types';
|
|
import { formatDate } from '/@/utils/formatTime';
|
import { useUserInfo } from '/@/stores/userInfo';
|
//#region ====================== 左侧树数据，tree with select init ======================
|
const treeLoading = ref(false);
|
|
const CorpID = ref('');
|
const softwareID = ref('');
|
|
const listTreeData = ref([]);
|
const currentListID = ref('');
|
const handleClickNode = (data) => {
|
currentListID.value = data.ID;
|
resetQuery();
|
getTableData();
|
};
|
const getListTreeData = async () => {
|
const res = await GetUserListTreeData({
|
CorpID: CorpID.value,
|
}).finally(() => {
|
treeLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
if (res.Data) {
|
listTreeData.value = res.Data;
|
const firstListTreeNode = res.Data[0];
|
firstListTreeNode && handleClickNode(firstListTreeNode);
|
} else {
|
listTreeData.value = [];
|
tableData.value = [];
|
}
|
} else {
|
ElMessage.error('获取用户列表失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
//#endregion
|
|
//#region ====================== 表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
const startDay = computed(() => queryParams.value.StartTime + ' 00:00:00');
|
const endDay = computed(() => queryParams.value.EndTime + ' 23:59:59');
|
const getTableData = async () => {
|
tableLoading.value = true;
|
|
let res = await GetAccessLogPageListByUserID({
|
UserID: currentListID.value,
|
...tableParams.value,
|
...{
|
StartTime: startDay.value,
|
EndTime: endDay.value,
|
},
|
SoftwareID: softwareID.value,
|
}).finally(() => {
|
tableLoading.value = false;
|
});
|
// res = accessLogRes as any;
|
if (res?.Code === 0) {
|
if (res.Data) {
|
tableData.value = res.Data.List;
|
total.value = res.Data.Total;
|
} else {
|
tableData.value = [];
|
total.value = 0;
|
}
|
} else {
|
ElMessage.error('获取日志失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
|
//#endregion
|
|
//#region ====================== 表格查询======================
|
const shortcuts = [
|
{
|
text: '今天',
|
value: new Date(),
|
},
|
{
|
text: '昨天',
|
value: () => {
|
const date = new Date();
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
return date;
|
},
|
},
|
{
|
text: '上周',
|
value: () => {
|
const date = new Date();
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
return date;
|
},
|
},
|
];
|
const queryParams = ref({
|
StartTime: undefined,
|
EndTime: undefined,
|
});
|
|
const disabledDate = (time) => {
|
return time.getTime() > Date.now();
|
};
|
|
const total = ref(0);
|
|
const tableParams = ref({
|
PageIndex: 1,
|
PageSize: 20,
|
});
|
|
const resetQueryClick = () => {
|
resetQuery();
|
getTableData();
|
};
|
|
const resetQuery = () => {
|
const today = formatDate(new Date(), 'YYYY-mm-dd');
|
const lastWeekDate = new Date();
|
lastWeekDate.setTime(lastWeekDate.getTime() - 3600 * 1000 * 24 * 7);
|
const lastWeek = formatDate(lastWeekDate, 'YYYY-mm-dd');
|
queryParams.value = {
|
StartTime: lastWeek,
|
EndTime: today,
|
};
|
tableParams.value = {
|
PageIndex: 1,
|
PageSize: 20,
|
};
|
total.value = 0;
|
};
|
|
// 改变页面容量
|
const handleSizeChange = (val: number) => {
|
tableParams.value.PageSize = val;
|
getTableData();
|
};
|
// 改变页码序号
|
const handleCurrentChange = (val: number) => {
|
tableParams.value.PageIndex = val;
|
getTableData();
|
};
|
|
//#endregion
|
|
onMounted(async () => {
|
const stores = useUserInfo();
|
let userInfo = (await stores.getUserInfo()) as any;
|
CorpID.value = userInfo.SoftWare?.Project?.Corpration?.ID;
|
softwareID.value = userInfo.SoftWare.ID;
|
|
getListTreeData();
|
});
|
</script>
|
<style scoped lang="scss">
|
:deep(.normal-row) {
|
cursor: default;
|
}
|
:deep(.move-row) {
|
cursor: move;
|
}
|
|
:deep(.scroll-table-card) {
|
.el-card__body {
|
display: flex;
|
flex-direction: column;
|
.el-pagination {
|
align-self: flex-end;
|
}
|
}
|
}
|
</style>
|
