Skip to content

phsl / admin

Go to a project
Commit c9a30e6f by YunaiV
Options

Vue3 重构：操作日志的列表

parent 0f4c74fe
Showing with 184 additions and 71 deletions
src/api/system/operatelog/index.ts
...@@ -23,19 +23,11 @@ export type OperateLogVO = { ...@@ -23,19 +23,11 @@ export type OperateLogVO = {
resultData: string 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 }) 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 }) return request.download({ url: '/system/operate-log/export', params })
} }
src/views/infra/config/index.vue
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<!-- 列表 --> <!-- 列表 -->
<content-wrap> <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="id" />
<el-table-column label="参数分类" align="center" prop="category" /> <el-table-column label="参数分类" align="center" prop="category" />
<el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" /> <el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
......
src/views/system/notice/index.vue
<template> <template>
<content-wrap> <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-form-item label="公告标题" prop="title">
<el-input <el-input
v-model="queryParams.title" v-model="queryParams.title"
...@@ -32,9 +32,11 @@ ...@@ -32,9 +32,11 @@
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </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="id" />
<el-table-column label="公告标题" align="center" prop="title" /> <el-table-column label="公告标题" align="center" prop="title" />
<el-table-column label="公告类型" align="center" prop="type"> <el-table-column label="公告类型" align="center" prop="type">
......
src/views/system/operatelog/index.vue
<template> <template>
<ContentWrap> <content-wrap>
<!-- 列表 --> <!-- 搜索工作栏 -->
<XTable @register="registerTable"> <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<template #toolbar_buttons> <el-form-item label="系统模块" prop="module">
<!-- 操作：新增 --> <el-input
<XButton v-model="queryParams.module"
type="warning" placeholder="请输入系统模块"
preIcon="ep:download" clearable
:title="t('action.export')" @keyup.enter="handleQuery"
v-hasPermi="['system:operate-log:export']"
@click="exportList('操作日志.xls')"
/> />
</template> </el-form-item>
<template #duration="{ row }"> <el-form-item label="操作人员" prop="userNickname">
<span>{{ row.duration + 'ms' }}</span> <el-input
</template> v-model="queryParams.userNickname"
<template #resultCode="{ row }"> placeholder="请输入操作人员"
<span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span> clearable
</template> @keyup.enter="handleQuery"
<template #actionbtns_default="{ row }"> />
<!-- 操作：详情 --> </el-form-item>
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" /> <el-form-item label="类型" prop="type">
</template> <el-select v-model="queryParams.type" placeholder="操作类型" clearable>
</XTable> <el-option
</ContentWrap> v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
<!-- 弹窗 --> :key="parseInt(dict.value)"
<XModal id="postModel" v-model="dialogVisible" :title="t('action.detail')"> :label="dict.label"
<!-- 对话框(详情) --> :value="parseInt(dict.value)"
<Descriptions :schema="allSchemas.detailSchema" :data="detailData"> />
<template #resultCode="{ row }"> </el-select>
<span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span> </el-form-item>
</template> <el-form-item label="状态" prop="success">
<template #duration="{ row }"> <el-select v-model="queryParams.success" placeholder="操作状态" clearable>
<span>{{ row.duration + 'ms' }}</span> <el-option :key="true" label="成功" :value="true" />
</template> <el-option :key="false" label="失败" :value="false" />
</Descriptions> </el-select>
<template #footer> </el-form-item>
<!-- 按钮：关闭 --> <el-form-item label="操作时间" prop="startTime">
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" /> <el-date-picker
</template> v-model="queryParams.startTime"
</XModal> 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>
</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>
</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>
</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>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
</template> </template>
<script setup lang="ts" name="OperateLog"> <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 * as OperateLogApi from '@/api/system/operatelog'
import { allSchemas } from './operatelog.data' // import ConfigForm from './form.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: OperateLogApi.getOperateLogPageApi, pageNo: 1,
exportListApi: OperateLogApi.exportOperateLogApi pageSize: 10,
module: undefined,
userNickname: undefined,
type: undefined,
success: undefined,
startTime: []
}) })
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询参数列表 */
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 dialogVisible = ref(false) // 是否显示弹出层 // const modalRef = ref()
const actionLoading = ref(false) // 按钮 Loading // const openModal = (type: string, id?: number) => {
const detailData = ref() // 详情 Ref // modalRef.value.openModal(type, id)
// 详情 // }
const handleDetail = (row: OperateLogApi.OperateLogVO) => {
// 设置数据 /** 导出按钮操作 */
detailData.value = row const handleExport = async () => {
dialogVisible.value = true 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> </script>
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