Vue3 重构:操作日志的列表

This commit is contained in:
YunaiV 2023-03-18 19:00:58 +08:00
parent 0f4c74fef0
commit c9a30e6fbf
4 changed files with 184 additions and 71 deletions

View File

@ -23,19 +23,11 @@ export type OperateLogVO = {
resultData: string
}
export interface OperateLogPageReqVO extends PageParam {
module?: string
userNickname?: string
type?: number
success?: boolean
startTime?: Date[]
}
// 查询操作日志列表
export const getOperateLogPageApi = (params: OperateLogPageReqVO) => {
export const getOperateLogPage = (params: PageParam) => {
return request.get({ url: '/system/operate-log/page', params })
}
// 导出操作日志
export const exportOperateLogApi = (params: OperateLogPageReqVO) => {
export const exportOperateLog = (params) => {
return request.download({ url: '/system/operate-log/export', params })
}

View File

@ -59,7 +59,7 @@
<!-- 列表 -->
<content-wrap>
<el-table v-loading="loading" :data="list" align="center">
<el-table v-loading="loading" :data="list">
<el-table-column label="参数主键" align="center" prop="id" />
<el-table-column label="参数分类" align="center" prop="category" />
<el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />

View File

@ -1,7 +1,7 @@
<template>
<content-wrap>
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form-item label="公告标题" prop="title">
<el-input
v-model="queryParams.title"
@ -32,9 +32,11 @@
</el-button>
</el-form-item>
</el-form>
</content-wrap>
<!-- 列表 -->
<el-table v-loading="loading" :data="list" align="center">
<content-wrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="公告编号" align="center" prop="id" />
<el-table-column label="公告标题" align="center" prop="title" />
<el-table-column label="公告类型" align="center" prop="type">

View File

@ -1,67 +1,186 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['system:operate-log:export']"
@click="exportList('操作日志.xls')"
<content-wrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form-item label="系统模块" prop="module">
<el-input
v-model="queryParams.module"
placeholder="请输入系统模块"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="操作人员" prop="userNickname">
<el-input
v-model="queryParams.userNickname"
placeholder="请输入操作人员"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="queryParams.type" placeholder="操作类型" clearable>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
:key="parseInt(dict.value)"
:label="dict.label"
:value="parseInt(dict.value)"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="success">
<el-select v-model="queryParams.success" placeholder="操作状态" clearable>
<el-option :key="true" label="成功" :value="true" />
<el-option :key="false" label="失败" :value="false" />
</el-select>
</el-form-item>
<el-form-item label="操作时间" prop="startTime">
<el-date-picker
v-model="queryParams.startTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
/>
</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 v-loading="loading" :data="list">
<el-table-column label="日志编号" align="center" prop="id" />
<el-table-column label="操作模块" align="center" prop="module" width="180" />
<el-table-column label="操作名" align="center" prop="name" width="180" />
<el-table-column label="操作类型" align="center" prop="type">
<template #default="scope">
<dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type" />
</template>
<template #duration="{ row }">
<span>{{ row.duration + 'ms' }}</span>
</el-table-column>
<el-table-column label="操作人" align="center" prop="userNickname" />
<el-table-column label="操作结果" align="center" prop="status">
<template #default="scope">
<span>{{ scope.row.resultCode === 0 ? '成功' : '失败' }}</span>
</template>
<template #resultCode="{ row }">
<span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
</el-table-column>
<el-table-column
label="操作时间"
align="center"
prop="startTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="执行时长" align="center" prop="startTime">
<template #default="scope">
<span>{{ scope.row.duration }} ms</span>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openModal('update', scope.row.id)"
v-hasPermi="['infra:config:query']"
>
详情
</el-button>
</template>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="postModel" v-model="dialogVisible" :title="t('action.detail')">
<!-- 对话框(详情) -->
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
<template #resultCode="{ row }">
<span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
</template>
<template #duration="{ row }">
<span>{{ row.duration + 'ms' }}</span>
</template>
</Descriptions>
<template #footer>
<!-- 按钮关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
</template>
<script setup lang="ts" name="OperateLog">
// import
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as OperateLogApi from '@/api/system/operatelog'
import { allSchemas } from './operatelog.data'
// import ConfigForm from './form.vue'
const message = useMessage() //
const { t } = useI18n() //
//
const [registerTable, { exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: OperateLogApi.getOperateLogPageApi,
exportListApi: OperateLogApi.exportOperateLogApi
const loading = ref(true) //
const total = ref(0) //
const list = ref([]) //
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
module: undefined,
userNickname: undefined,
type: undefined,
success: undefined,
startTime: []
})
const queryFormRef = ref() //
const exportLoading = ref(false) //
//
const dialogVisible = ref(false) //
const actionLoading = ref(false) // Loading
const detailData = ref() // Ref
//
const handleDetail = (row: OperateLogApi.OperateLogVO) => {
//
detailData.value = row
dialogVisible.value = true
/** 查询参数列表 */
const getList = async () => {
loading.value = true
try {
const data = await OperateLogApi.getOperateLogPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
// const modalRef = ref()
// const openModal = (type: string, id?: number) => {
// modalRef.value.openModal(type, id)
// }
/** 导出按钮操作 */
const handleExport = async () => {
try {
//
await message.exportConfirm()
//
exportLoading.value = true
const data = await OperateLogApi.exportOperateLog(queryParams)
download.excel(data, '操作日志.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>