Skip to content

Commit 8e032d9

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!41 Vue3 重构：登录日志
Merge pull request !41 from lour6498/dev
2 parents 12b60da + a750332 commit 8e032d9

File tree

6 files changed

+227
-102
lines changed

6 files changed

+227
-102
lines changed

‎src/api/system/loginLog/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export interface LoginLogReqVO extends PageParam {
2121
}
2222

2323
// 查询登录日志列表
24-
export const getLoginLogPageApi = (params: LoginLogReqVO) => {
24+
export const getLoginLogPage = (params: LoginLogReqVO) => {
2525
return request.get({ url: '/system/login-log/page', params })
2626
}
2727
// 导出登录日志
28-
export const exportLoginLogApi = (params: LoginLogReqVO) => {
28+
export const exportLoginLog = (params: LoginLogReqVO) => {
2929
return request.download({ url: '/system/login-log/export', params })
3030
}

‎src/styles/index.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,9 @@
2626
border-left-color: var(--el-color-primary);
2727
}
2828
}
29+
30+
// 添加表头样式
31+
.el-table.yudao-table {
32+
--el-table-header-bg-color: #f8f8f9;
33+
--el-table-header-text-color: #606266;
34+
}

‎src/views/infra/codegen/components/ImportTable.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const dbLoading = ref(true)
6363
const queryParams = reactive({
6464
name: undefined,
6565
comment: undefined,
66-
dataSourceConfigId: 0
66+
dataSourceConfigId: 0 as number | undefined
6767
})
6868
const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
6969
const show = async () => {

‎src/views/system/loginlog/detail.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
3+
<el-descriptions border :column="1">
4+
<el-descriptions-item label="日志编号" min-width="120">
5+
{{ detailData.id }}
6+
</el-descriptions-item>
7+
<el-descriptions-item label="操作类型">
8+
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="detailData.logType" />
9+
</el-descriptions-item>
10+
<el-descriptions-item label="用户名称">
11+
{{ detailData.username }}
12+
</el-descriptions-item>
13+
<el-descriptions-item label="登录地址">
14+
{{ detailData.userIp }}
15+
</el-descriptions-item>
16+
<el-descriptions-item label="浏览器">
17+
{{ detailData.userAgent }}
18+
</el-descriptions-item>
19+
<el-descriptions-item label="登陆结果">
20+
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="detailData.result" />
21+
</el-descriptions-item>
22+
<el-descriptions-item label="登录日期">
23+
{{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
24+
</el-descriptions-item>
25+
</el-descriptions>
26+
</Dialog>
27+
</template>
28+
<script setup lang="ts">
29+
import { DICT_TYPE } from '@/utils/dict'
30+
import { formatDate } from '@/utils/formatTime'
31+
import * as LoginLogApi from '@/api/system/loginLog'
32+
33+
const modelVisible = ref(false) // 弹窗的是否展示
34+
const detailLoading = ref(false) // 表单的加载中
35+
const detailData = ref() // 详情数据
36+
37+
/** 打开弹窗 */
38+
const openModal = async (data: LoginLogApi.LoginLogVO) => {
39+
modelVisible.value = true
40+
// 设置数据
41+
detailLoading.value = true
42+
try {
43+
detailData.value = data
44+
} finally {
45+
detailLoading.value = false
46+
}
47+
}
48+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
49+
</script>

‎src/views/system/loginlog/index.vue

Lines changed: 169 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,176 @@
11
<template>
2-
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<!-- 操作：导出 -->
6-
<template #toolbar_buttons>
7-
<XButton
8-
type="warning"
9-
preIcon="ep:download"
10-
:title="t('action.export')"
11-
@click="exportList('登录列表.xls')"
2+
<content-wrap>
3+
<!-- 搜索工作栏 -->
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
10+
>
11+
<el-form-item label="用户名称" prop="username">
12+
<el-input
13+
v-model="queryParams.username"
14+
placeholder="请输入用户名称"
15+
clearable
16+
@keyup.enter="handleQuery"
17+
class="!w-240px"
1218
/>
13-
</template>
14-
<template #actionbtns_default="{ row }">
15-
<!-- 操作：详情 -->
16-
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
17-
</template>
18-
</XTable>
19-
</ContentWrap>
20-
<!-- 弹窗 -->
21-
<XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
22-
<!-- 表单：详情 -->
23-
<Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
24-
<template #footer>
25-
<!-- 按钮：关闭 -->
26-
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
27-
</template>
28-
</XModal>
19+
</el-form-item>
20+
<el-form-item label="登录地址" prop="userIp">
21+
<el-input
22+
v-model="queryParams.userIp"
23+
placeholder="请输入登录地址"
24+
clearable
25+
@keyup.enter="handleQuery"
26+
class="!w-240px"
27+
/>
28+
</el-form-item>
29+
<el-form-item label="登录日期" prop="createTime">
30+
<el-date-picker
31+
v-model="queryParams.createTime"
32+
value-format="YYYY-MM-DD HH:mm:ss"
33+
type="daterange"
34+
start-placeholder="开始日期"
35+
end-placeholder="结束日期"
36+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
37+
class="!w-240px"
38+
/>
39+
</el-form-item>
40+
<el-form-item>
41+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
42+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
43+
<el-button
44+
type="success"
45+
plain
46+
@click="handleExport"
47+
:loading="exportLoading"
48+
v-hasPermi="['infra:config:export']"
49+
>
50+
<Icon icon="ep:download" class="mr-5px" /> 导出
51+
</el-button>
52+
</el-form-item>
53+
</el-form>
54+
</content-wrap>
55+
56+
<!-- 列表 -->
57+
<content-wrap>
58+
<el-table class="yudao-table" v-loading="loading" :data="list">
59+
<el-table-column label="日志编号" align="center" prop="id" />
60+
<el-table-column label="操作类型" align="center" prop="logType">
61+
<template #default="scope">
62+
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
63+
</template>
64+
</el-table-column>
65+
<el-table-column label="用户名称" align="center" prop="username" width="180" />
66+
<el-table-column label="登录地址" align="center" prop="userIp" width="180" />
67+
68+
<el-table-column label="浏览器" align="center" prop="userAgent" />
69+
<el-table-column label="登陆结果" align="center" prop="result">
70+
<template #default="scope">
71+
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
72+
</template>
73+
</el-table-column>
74+
<el-table-column
75+
label="登录日期"
76+
align="center"
77+
prop="createTime"
78+
width="180"
79+
:formatter="dateFormatter"
80+
/>
81+
<el-table-column label="操作" align="center">
82+
<template #default="scope">
83+
<el-button
84+
link
85+
type="primary"
86+
@click="openModal(scope.row)"
87+
v-hasPermi="['infra:config:query']"
88+
>
89+
详情
90+
</el-button>
91+
</template>
92+
</el-table-column>
93+
</el-table>
94+
<!-- 分页 -->
95+
<Pagination
96+
:total="total"
97+
v-model:page="queryParams.pageNo"
98+
v-model:limit="queryParams.pageSize"
99+
@pagination="getList"
100+
/>
101+
</content-wrap>
102+
103+
<!-- 表单弹窗：详情 -->
104+
<login-log-detail ref="modalRef" />
29105
</template>
30-
<script setup lang="ts" name="Loginlog">
31-
// 业务相关的 import
32-
import { allSchemas } from './loginLog.data'
33-
import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/loginLog'
34-
35-
const { t } = useI18n() // 国际化
36-
// 列表相关的变量
37-
const [registerTable, { exportList }] = useXTable({
38-
allSchemas: allSchemas,
39-
getListApi: getLoginLogPageApi,
40-
exportListApi: exportLoginLogApi
106+
<script setup lang="ts" name="LoginLog">
107+
import { DICT_TYPE } from '@/utils/dict'
108+
import { dateFormatter } from '@/utils/formatTime'
109+
import download from '@/utils/download'
110+
import * as LoginLogApi from '@/api/system/loginLog'
111+
import LoginLogDetail from './detail.vue'
112+
const message = useMessage() // 消息弹窗
113+
114+
const loading = ref(true) // 列表的加载中
115+
const total = ref(0) // 列表的总页数
116+
const list = ref([]) // 列表的数据
117+
const queryParams = reactive({
118+
pageNo: 1,
119+
pageSize: 10,
120+
username: undefined,
121+
userIp: undefined,
122+
createTime: []
41123
})
124+
const queryFormRef = ref() // 搜索的表单
125+
const exportLoading = ref(false) // 导出的加载中
126+
127+
/** 查询参数列表 */
128+
const getList = async () => {
129+
loading.value = true
130+
try {
131+
const data = await LoginLogApi.getLoginLogPage(queryParams)
132+
list.value = data.list
133+
total.value = data.total
134+
} finally {
135+
loading.value = false
136+
}
137+
}
42138
43-
// 详情操作
44-
const detailData = ref() // 详情 Ref
45-
const dialogVisible = ref(false) // 是否显示弹出层
46-
const dialogTitle = ref(t('action.detail')) // 弹出层标题
47-
// 详情
48-
const handleDetail = async (row: LoginLogVO) => {
49-
// 设置数据
50-
detailData.value = row
51-
dialogVisible.value = true
139+
/** 搜索按钮操作 */
140+
const handleQuery = () => {
141+
queryParams.pageNo = 1
142+
getList()
52143
}
144+
145+
/** 重置按钮操作 */
146+
const resetQuery = () => {
147+
queryFormRef.value.resetFields()
148+
handleQuery()
149+
}
150+
151+
/** 详情操作 */
152+
const modalRef = ref()
153+
const openModal = (data: LoginLogApi.LoginLogVO) => {
154+
modalRef.value.openModal(data)
155+
}
156+
157+
/** 导出按钮操作 */
158+
const handleExport = async () => {
159+
try {
160+
// 导出的二次确认
161+
await message.exportConfirm()
162+
// 发起导出
163+
exportLoading.value = true
164+
const data = await LoginLogApi.exportLoginLog(queryParams)
165+
download.excel(data, '登录日志.xls')
166+
} catch {
167+
} finally {
168+
exportLoading.value = false
169+
}
170+
}
171+
172+
/** 初始化 **/
173+
onMounted(() => {
174+
getList()
175+
})
53176
</script>

‎src/views/system/loginlog/loginLog.data.ts

Lines changed: 0 additions & 53 deletions
This file was deleted.

0 commit comments

Comments
 (0)