Skip to content

phsl / admin

Go to a project
Commit 8e032d98 by 芋道源码 Committed by Gitee
Options

!41 Vue3 重构：登录日志 

Merge pull request !41 from lour6498/dev
parents 12b60da9 a7503322
Showing with 227 additions and 102 deletions
src/api/system/loginLog/index.ts
...@@ -21,10 +21,10 @@ export interface LoginLogReqVO extends PageParam { ...@@ -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 })
} }
src/styles/index.scss
...@@ -26,3 +26,9 @@ ...@@ -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;
}
src/views/infra/codegen/components/ImportTable.vue
...@@ -63,7 +63,7 @@ const dbLoading = ref(true) ...@@ -63,7 +63,7 @@ const dbLoading = ref(true)
const queryParams = reactive({ const queryParams = reactive({
name: undefined, name: undefined,
comment: undefined, comment: undefined,
dataSourceConfigId: 0 dataSourceConfigId: 0 as number | undefined
}) })
const dataSourceConfigs = ref<DataSourceConfigVO[]>([]) const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
const show = async () => { const show = async () => {
......
src/views/system/loginlog/detail.vue 0 → 100644
<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>
src/views/system/loginlog/index.vue
<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'
const { t } = useI18n() // 国际化 import LoginLogDetail from './detail.vue'
// 列表相关的变量 const message = useMessage() // 消息弹窗
const [registerTable, { exportList }] = useXTable({
allSchemas: allSchemas, const loading = ref(true) // 列表的加载中
getListApi: getLoginLogPageApi, const total = ref(0) // 列表的总页数
exportListApi: exportLoginLogApi const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
username: undefined,
userIp: undefined,
createTime: []
}) })
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询参数列表 */
const getList = async () => {
loading.value = true
try {
const data = await LoginLogApi.getLoginLogPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
// 详情操作 /** 搜索按钮操作 */
const detailData = ref() // 详情 Ref const handleQuery = () => {
const dialogVisible = ref(false) // 是否显示弹出层 queryParams.pageNo = 1
const dialogTitle = ref(t('action.detail')) // 弹出层标题 getList()
// 详情
const handleDetail = async (row: LoginLogVO) => {
// 设置数据
detailData.value = row
dialogVisible.value = true
} }
/** 重置按钮操作 */
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>
src/views/system/loginlog/loginLog.data.ts deleted 100644 → 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)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment