Skip to content

Commit c9a30e6

Browse files
YunaiVYunaiV
committed
Vue3 重构：操作日志的列表
1 parent 0f4c74f commit c9a30e6

File tree

4 files changed

+184
-71
lines changed

4 files changed

+184
-71
lines changed

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,11 @@ export type OperateLogVO = {
2323
resultData: string
2424
}
2525

26-
export interface OperateLogPageReqVO extends PageParam {
27-
module?: string
28-
userNickname?: string
29-
type?: number
30-
success?: boolean
31-
startTime?: Date[]
32-
}
33-
3426
// 查询操作日志列表
35-
export const getOperateLogPageApi = (params: OperateLogPageReqVO) => {
27+
export const getOperateLogPage = (params: PageParam) => {
3628
return request.get({ url: '/system/operate-log/page', params })
3729
}
3830
// 导出操作日志
39-
export const exportOperateLogApi = (params: OperateLogPageReqVO) => {
31+
export const exportOperateLog = (params) => {
4032
return request.download({ url: '/system/operate-log/export', params })
4133
}

‎src/views/infra/config/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959

6060
<!-- 列表 -->
6161
<content-wrap>
62-
<el-table v-loading="loading" :data="list" align="center">
62+
<el-table v-loading="loading" :data="list">
6363
<el-table-column label="参数主键" align="center" prop="id" />
6464
<el-table-column label="参数分类" align="center" prop="category" />
6565
<el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<content-wrap>
33
<!-- 搜索工作栏 -->
4-
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
4+
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
55
<el-form-item label="公告标题" prop="title">
66
<el-input
77
v-model="queryParams.title"
@@ -32,9 +32,11 @@
3232
</el-button>
3333
</el-form-item>
3434
</el-form>
35+
</content-wrap>
3536

36-
<!-- 列表 -->
37-
<el-table v-loading="loading" :data="list" align="center">
37+
<!-- 列表 -->
38+
<content-wrap>
39+
<el-table v-loading="loading" :data="list">
3840
<el-table-column label="公告编号" align="center" prop="id" />
3941
<el-table-column label="公告标题" align="center" prop="title" />
4042
<el-table-column label="公告类型" align="center" prop="type">

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

Lines changed: 176 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,186 @@
11
<template>
2-
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<template #toolbar_buttons>
6-
<!-- 操作：新增 -->
7-
<XButton
8-
type="warning"
9-
preIcon="ep:download"
10-
:title="t('action.export')"
11-
v-hasPermi="['system:operate-log:export']"
12-
@click="exportList('操作日志.xls')"
2+
<content-wrap>
3+
<!-- 搜索工作栏 -->
4+
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
5+
<el-form-item label="系统模块" prop="module">
6+
<el-input
7+
v-model="queryParams.module"
8+
placeholder="请输入系统模块"
9+
clearable
10+
@keyup.enter="handleQuery"
1311
/>
14-
</template>
15-
<template #duration="{ row }">
16-
<span>{{ row.duration + 'ms' }}</span>
17-
</template>
18-
<template #resultCode="{ row }">
19-
<span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
20-
</template>
21-
<template #actionbtns_default="{ row }">
22-
<!-- 操作：详情 -->
23-
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
24-
</template>
25-
</XTable>
26-
</ContentWrap>
27-
<!-- 弹窗 -->
28-
<XModal id="postModel" v-model="dialogVisible" :title="t('action.detail')">
29-
<!-- 对话框(详情) -->
30-
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
31-
<template #resultCode="{ row }">
32-
<span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
33-
</template>
34-
<template #duration="{ row }">
35-
<span>{{ row.duration + 'ms' }}</span>
36-
</template>
37-
</Descriptions>
38-
<template #footer>
39-
<!-- 按钮：关闭 -->
40-
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
41-
</template>
42-
</XModal>
12+
</el-form-item>
13+
<el-form-item label="操作人员" prop="userNickname">
14+
<el-input
15+
v-model="queryParams.userNickname"
16+
placeholder="请输入操作人员"
17+
clearable
18+
@keyup.enter="handleQuery"
19+
/>
20+
</el-form-item>
21+
<el-form-item label="类型" prop="type">
22+
<el-select v-model="queryParams.type" placeholder="操作类型" clearable>
23+
<el-option
24+
v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
25+
:key="parseInt(dict.value)"
26+
:label="dict.label"
27+
:value="parseInt(dict.value)"
28+
/>
29+
</el-select>
30+
</el-form-item>
31+
<el-form-item label="状态" prop="success">
32+
<el-select v-model="queryParams.success" placeholder="操作状态" clearable>
33+
<el-option :key="true" label="成功" :value="true" />
34+
<el-option :key="false" label="失败" :value="false" />
35+
</el-select>
36+
</el-form-item>
37+
<el-form-item label="操作时间" prop="startTime">
38+
<el-date-picker
39+
v-model="queryParams.startTime"
40+
value-format="YYYY-MM-DD HH:mm:ss"
41+
type="daterange"
42+
start-placeholder="开始日期"
43+
end-placeholder="结束日期"
44+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
45+
/>
46+
</el-form-item>
47+
<el-form-item>
48+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
49+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
50+
<el-button
51+
type="success"
52+
plain
53+
@click="handleExport"
54+
:loading="exportLoading"
55+
v-hasPermi="['infra:config:export']"
56+
>
57+
<Icon icon="ep:download" class="mr-5px" /> 导出
58+
</el-button>
59+
</el-form-item>
60+
</el-form>
61+
</content-wrap>
62+
63+
<!-- 列表 -->
64+
<content-wrap>
65+
<el-table v-loading="loading" :data="list">
66+
<el-table-column label="日志编号" align="center" prop="id" />
67+
<el-table-column label="操作模块" align="center" prop="module" width="180" />
68+
<el-table-column label="操作名" align="center" prop="name" width="180" />
69+
<el-table-column label="操作类型" align="center" prop="type">
70+
<template #default="scope">
71+
<dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type" />
72+
</template>
73+
</el-table-column>
74+
<el-table-column label="操作人" align="center" prop="userNickname" />
75+
<el-table-column label="操作结果" align="center" prop="status">
76+
<template #default="scope">
77+
<span>{{ scope.row.resultCode === 0 ? '成功' : '失败' }}</span>
78+
</template>
79+
</el-table-column>
80+
<el-table-column
81+
label="操作时间"
82+
align="center"
83+
prop="startTime"
84+
width="180"
85+
:formatter="dateFormatter"
86+
/>
87+
<el-table-column label="执行时长" align="center" prop="startTime">
88+
<template #default="scope">
89+
<span>{{ scope.row.duration }} ms</span>
90+
</template>
91+
</el-table-column>
92+
<el-table-column label="操作" align="center">
93+
<template #default="scope">
94+
<el-button
95+
link
96+
type="primary"
97+
@click="openModal('update', scope.row.id)"
98+
v-hasPermi="['infra:config:query']"
99+
>
100+
详情
101+
</el-button>
102+
</template>
103+
</el-table-column>
104+
</el-table>
105+
<!-- 分页 -->
106+
<Pagination
107+
:total="total"
108+
v-model:page="queryParams.pageNo"
109+
v-model:limit="queryParams.pageSize"
110+
@pagination="getList"
111+
/>
112+
</content-wrap>
43113
</template>
44114
<script setup lang="ts" name="OperateLog">
45-
// 业务相关的 import
115+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
116+
import { dateFormatter } from '@/utils/formatTime'
117+
import download from '@/utils/download'
46118
import * as OperateLogApi from '@/api/system/operatelog'
47-
import { allSchemas } from './operatelog.data'
119+
// import ConfigForm from './form.vue'
120+
const message = useMessage() // 消息弹窗
48121
49-
const { t } = useI18n() // 国际化
50-
// 列表相关的变量
51-
const [registerTable, { exportList }] = useXTable({
52-
allSchemas: allSchemas,
53-
getListApi: OperateLogApi.getOperateLogPageApi,
54-
exportListApi: OperateLogApi.exportOperateLogApi
122+
const loading = ref(true) // 列表的加载中
123+
const total = ref(0) // 列表的总页数
124+
const list = ref([]) // 列表的数据
125+
const queryParams = reactive({
126+
pageNo: 1,
127+
pageSize: 10,
128+
module: undefined,
129+
userNickname: undefined,
130+
type: undefined,
131+
success: undefined,
132+
startTime: []
55133
})
134+
const queryFormRef = ref() // 搜索的表单
135+
const exportLoading = ref(false) // 导出的加载中
136+
137+
/** 查询参数列表 */
138+
const getList = async () => {
139+
loading.value = true
140+
try {
141+
const data = await OperateLogApi.getOperateLogPage(queryParams)
142+
list.value = data.list
143+
total.value = data.total
144+
} finally {
145+
loading.value = false
146+
}
147+
}
148+
149+
/** 搜索按钮操作 */
150+
const handleQuery = () => {
151+
queryParams.pageNo = 1
152+
getList()
153+
}
154+
155+
/** 重置按钮操作 */
156+
const resetQuery = () => {
157+
queryFormRef.value.resetFields()
158+
handleQuery()
159+
}
56160
57-
// 弹窗相关的变量
58-
const dialogVisible = ref(false) // 是否显示弹出层
59-
const actionLoading = ref(false) // 按钮 Loading
60-
const detailData = ref() // 详情 Ref
61-
// 详情
62-
const handleDetail = (row: OperateLogApi.OperateLogVO) => {
63-
// 设置数据
64-
detailData.value = row
65-
dialogVisible.value = true
161+
/** 添加/修改操作 */
162+
// const modalRef = ref()
163+
// const openModal = (type: string, id?: number) => {
164+
// modalRef.value.openModal(type, id)
165+
// }
166+
167+
/** 导出按钮操作 */
168+
const handleExport = async () => {
169+
try {
170+
// 导出的二次确认
171+
await message.exportConfirm()
172+
// 发起导出
173+
exportLoading.value = true
174+
const data = await OperateLogApi.exportOperateLog(queryParams)
175+
download.excel(data, '操作日志.xls')
176+
} catch {
177+
} finally {
178+
exportLoading.value = false
179+
}
66180
}
181+
182+
/** 初始化 **/
183+
onMounted(() => {
184+
getList()
185+
})
67186
</script>

0 commit comments

Comments
 (0)