浅念
117 lines
3.1 KiB
Vue
117 lines
3.1 KiB
Vue
<template>
|
|
<div class="page-content">
|
|
<div class="customer-toolbar boxshadow">
|
|
<div class="customer-search-group">
|
|
<el-form-item label="关键字:" label-width="70px">
|
|
<el-input style="min-width: 120px" v-model="keyword" placeholder="请输入关键字" />
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<div class="boxshadow">
|
|
<ArtTable
|
|
ref="tableRef"
|
|
row-key="id"
|
|
:loading="loading"
|
|
:data="tableData"
|
|
:currentPage="pagination.currentPage"
|
|
:pageSize="pagination.pageSize"
|
|
:total="pagination.total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
>
|
|
<template #default>
|
|
<ElTableColumn label="ID" prop="id" />
|
|
<ElTableColumn label="操作人" prop="user_name" />
|
|
<ElTableColumn label="请求路由" prop="route" />
|
|
<ElTableColumn label="用户ip" prop="ip" />
|
|
<ElTableColumn label="用户ua" prop="ua" />
|
|
<ElTableColumn label="入参摘要" prop="params_brief" />
|
|
<ElTableColumn label="异常" prop="message" />
|
|
<ElTableColumn label="创建时间" prop="created_at" />
|
|
</template>
|
|
</ArtTable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { logService } from '@/api/admin/log'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
const { hasAuth } = useAuth()
|
|
defineOptions({ name: 'Operationlog' })
|
|
const keyword = ref('')
|
|
const loading = ref(false)
|
|
const pagination = reactive({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
})
|
|
// 表格数据
|
|
const tableData = ref<any[]>([])
|
|
|
|
// 表格实例引用
|
|
const tableRef = ref()
|
|
|
|
onMounted(() => {
|
|
getWorkList()
|
|
})
|
|
watch([keyword], () => {
|
|
pagination.currentPage = 1
|
|
getWorkList()
|
|
})
|
|
// 处理表格分页变化
|
|
const handleSizeChange = (newPageSize: number) => {
|
|
pagination.pageSize = newPageSize
|
|
getWorkList()
|
|
}
|
|
const handleCurrentChange = (newCurrentPage: number) => {
|
|
pagination.currentPage = newCurrentPage
|
|
getWorkList()
|
|
}
|
|
// 获取列表数据
|
|
const getWorkList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const { currentPage, pageSize } = pagination
|
|
|
|
const { records, current, size, total } = await logService.getOperationLogList({
|
|
current: currentPage,
|
|
size: pageSize,
|
|
keyword: keyword.value
|
|
})
|
|
tableData.value = records.map((item: any) => ({
|
|
...item
|
|
}))
|
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
|
} catch (error) {
|
|
console.error('获取列表失败:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-table__empty-block) {
|
|
height: 100% !important;
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.page-content {
|
|
.svg-icon {
|
|
width: 1.8em;
|
|
height: 1.8em;
|
|
overflow: hidden;
|
|
vertical-align: -8px;
|
|
fill: currentcolor;
|
|
}
|
|
}
|
|
.customer-search-group {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
</style>
|