Vue3 重构:登录日志

This commit is contained in:
lour6498 2023-03-21 10:01:06 +08:00
parent 33a9b5af86
commit a750332210
5 changed files with 225 additions and 100 deletions

View File

@ -21,10 +21,10 @@ export interface LoginLogReqVO extends PageParam {
} }
// 查询登录日志列表 // 查询登录日志列表
export const getLoginLogPageApi = (params: LoginLogReqVO) => { export const getLoginLogPage = (params: LoginLogReqVO) => {
return request.get({ url: '/system/login-log/page', params }) return request.get({ url: '/system/login-log/page', params })
} }
// 导出登录日志 // 导出登录日志
export const exportLoginLogApi = (params: LoginLogReqVO) => { export const exportLoginLog = (params: LoginLogReqVO) => {
return request.download({ url: '/system/login-log/export', params }) return request.download({ url: '/system/login-log/export', params })
} }

View File

@ -26,3 +26,9 @@
border-left-color: var(--el-color-primary); border-left-color: var(--el-color-primary);
} }
} }
// 添加表头样式
.el-table.yudao-table {
--el-table-header-bg-color: #f8f8f9;
--el-table-header-text-color: #606266;
}

View File

@ -0,0 +1,49 @@
<template>
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
<el-descriptions border :column="1">
<el-descriptions-item label="日志编号" min-width="120">
{{ detailData.id }}
</el-descriptions-item>
<el-descriptions-item label="操作类型">
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="detailData.logType" />
</el-descriptions-item>
<el-descriptions-item label="用户名称">
{{ detailData.username }}
</el-descriptions-item>
<el-descriptions-item label="登录地址">
{{ detailData.userIp }}
</el-descriptions-item>
<el-descriptions-item label="浏览器">
{{ detailData.userAgent }}
</el-descriptions-item>
<el-descriptions-item label="登陆结果">
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="detailData.result" />
</el-descriptions-item>
<el-descriptions-item label="登录日期">
{{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
</el-descriptions-item>
</el-descriptions>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as LoginLogApi from '@/api/system/loginLog'
const modelVisible = ref(false) //
const detailLoading = ref(false) //
const detailData = ref() //
/** 打开弹窗 */
const openModal = async (data: LoginLogApi.LoginLogVO) => {
modelVisible.value = true
//
detailLoading.value = true
try {
detailData.value = data
} finally {
detailLoading.value = false
}
}
defineExpose({ openModal }) // openModal
</script>

View File

@ -1,53 +1,176 @@
<template> <template>
<ContentWrap> <content-wrap>
<!-- 列表 --> <!-- 搜索工作栏 -->
<XTable @register="registerTable"> <el-form
<!-- 操作导出 --> class="-mb-15px"
<template #toolbar_buttons> :model="queryParams"
<XButton ref="queryFormRef"
type="warning" :inline="true"
preIcon="ep:download" label-width="68px"
:title="t('action.export')" >
@click="exportList('登录列表.xls')" <el-form-item label="用户名称" prop="username">
<el-input
v-model="queryParams.username"
placeholder="请输入用户名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/> />
</template> </el-form-item>
<template #actionbtns_default="{ row }"> <el-form-item label="登录地址" prop="userIp">
<!-- 操作详情 --> <el-input
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" /> v-model="queryParams.userIp"
</template> placeholder="请输入登录地址"
</XTable> clearable
</ContentWrap> @keyup.enter="handleQuery"
<!-- 弹窗 --> class="!w-240px"
<XModal id="postModel" v-model="dialogVisible" :title="dialogTitle"> />
<!-- 表单详情 --> </el-form-item>
<Descriptions :schema="allSchemas.detailSchema" :data="detailData" /> <el-form-item label="登录日期" prop="createTime">
<template #footer> <el-date-picker
<!-- 按钮关闭 --> v-model="queryParams.createTime"
<XButton :title="t('dialog.close')" @click="dialogVisible = false" /> value-format="YYYY-MM-DD HH:mm:ss"
</template> type="daterange"
</XModal> start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['infra:config:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</content-wrap>
<!-- 列表 -->
<content-wrap>
<el-table class="yudao-table" v-loading="loading" :data="list">
<el-table-column label="日志编号" align="center" prop="id" />
<el-table-column label="操作类型" align="center" prop="logType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
</template>
</el-table-column>
<el-table-column label="用户名称" align="center" prop="username" width="180" />
<el-table-column label="登录地址" align="center" prop="userIp" width="180" />
<el-table-column label="浏览器" align="center" prop="userAgent" />
<el-table-column label="登陆结果" align="center" prop="result">
<template #default="scope">
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
</template>
</el-table-column>
<el-table-column
label="登录日期"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openModal(scope.row)"
v-hasPermi="['infra:config:query']"
>
详情
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
<!-- 表单弹窗详情 -->
<login-log-detail ref="modalRef" />
</template> </template>
<script setup lang="ts" name="Loginlog"> <script setup lang="ts" name="LoginLog">
// import import { DICT_TYPE } from '@/utils/dict'
import { allSchemas } from './loginLog.data' import { dateFormatter } from '@/utils/formatTime'
import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/loginLog' import download from '@/utils/download'
import * as LoginLogApi from '@/api/system/loginLog'
import LoginLogDetail from './detail.vue'
const message = useMessage() //
const { t } = useI18n() // const loading = ref(true) //
// const total = ref(0) //
const [registerTable, { exportList }] = useXTable({ const list = ref([]) //
allSchemas: allSchemas, const queryParams = reactive({
getListApi: getLoginLogPageApi, pageNo: 1,
exportListApi: exportLoginLogApi pageSize: 10,
username: undefined,
userIp: undefined,
createTime: []
}) })
const queryFormRef = ref() //
const exportLoading = ref(false) //
// /** 查询参数列表 */
const detailData = ref() // Ref const getList = async () => {
const dialogVisible = ref(false) // loading.value = true
const dialogTitle = ref(t('action.detail')) // try {
// const data = await LoginLogApi.getLoginLogPage(queryParams)
const handleDetail = async (row: LoginLogVO) => { list.value = data.list
// total.value = data.total
detailData.value = row } finally {
dialogVisible.value = true loading.value = false
}
} }
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 详情操作 */
const modalRef = ref()
const openModal = (data: LoginLogApi.LoginLogVO) => {
modalRef.value.openModal(data)
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
//
await message.exportConfirm()
//
exportLoading.value = true
const data = await LoginLogApi.exportLoginLog(queryParams)
download.excel(data, '登录日志.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script> </script>

View File

@ -1,53 +0,0 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'id',
primaryTitle: '日志编号',
action: true,
actionWidth: '100px',
columns: [
{
title: '日志类型',
field: 'logType',
dictType: DICT_TYPE.SYSTEM_LOGIN_TYPE,
dictClass: 'number'
},
{
title: '用户名称',
field: 'username',
isSearch: true
},
{
title: '登录地址',
field: 'userIp',
isSearch: true
},
{
title: '浏览器',
field: 'userAgent'
},
{
title: '登陆结果',
field: 'result',
dictType: DICT_TYPE.SYSTEM_LOGIN_RESULT,
dictClass: 'number'
},
{
title: '登录日期',
field: 'createTime',
formatter: 'formatDate',
table: {
width: 150
},
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)