adminBigData/src/views/logMonitor/index.vue

<template>
    <div class="main_container custom_container">
        <div class="page_item end_item" >
            <div class="page_search">
                <div class="search_content">
                    <div class="content_left">
                        <div class="grade_title">后台操作日志监控</div>
                    </div>
                </div>
            </div>

            <div class="page_jg_20"></div>

            <div class="page_search">
                <div class="search_content" style="justify-content: flex-start; gap: 20px;">
                    <div class="content_left" >
                        <FormSearchGroup :searchList="differentTypeLogSearchList" @searchChange="handleSearchChange"></FormSearchGroup>
                    </div>
                    <div class="content_right">
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                    </div>
                </div>
            </div>
            <div class="page_jg_10"></div>
            <Table :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum" :tableColumns="tableColumns"
                :tableData="logTableData" @paginationChange="handlePaginationChange">

                <template #num="{ row, currentIndex }">
                    {{ (currentIndex ?? 0) + pageSize * (currentPage - 1) }}
                </template>

                <template #action="{ row }">
                    <div class="table_row_option">
                        <span class="option_button_editor" @click="GoToLogMonitorDetail(row)">查看详情</span>
                    </div>
                </template>
            </Table>
            <LogMonitorDetail v-model="detailVisible" :rowData="currentRow"></LogMonitorDetail>
        </div>
    </div>

    
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
import Table from '@/baseComponents/Table.vue';
import LogMonitorDetail from './LogMonitorDetail.vue';

import { differentTypeLogSearchList } from './formSearchGroup'

import { tableColumns } from './table'

import { getLogHeadApi, getLogPageApi } from '@/api/logMonitor'
const currentPage = ref(1)
const totalNum = ref(0)
const pageSize = ref(20)

// 日志表格数据
const logTableData = ref<any[]>([])

// 搜索参数
const searchParams = ref({
    schoolId: 0,
    accountTypeCode: 0,
    moduleCode: 0,
    operationTypeCode: 0,
    userAccount: '',
})

// 详情弹窗
const detailVisible = ref(false)
const currentRow = ref<any>({})

// 打开日志详情弹窗
const GoToLogMonitorDetail = (row: any) => {
    currentRow.value = row
    detailVisible.value = true
}

// 处理搜索变化
const handleSearchChange = (data: Record<string, any>, key: string) => {
    const fieldMap: Record<string, string> = {
        schoolId: 'schoolId',
        accountType: 'accountTypeCode',
        moduleType: 'moduleCode',
        operationType: 'operationTypeCode',
        userAccount: 'userAccount',
    }
    
    if (fieldMap[key]) {
        const val = data[key]
        const field = fieldMap[key] as keyof typeof searchParams.value
        // userAccount 是字符串类型，其他是数字类型
        if (field === 'userAccount') {
            searchParams.value[field] = (val !== undefined && val !== null) ? String(val) : ''
        } else {
            searchParams.value[field] = (val !== undefined && val !== null && val !== '') ? Number(val) : 0
        }
    }
    
    currentPage.value = 1
    getLogTableData()
}

// 处理查询
const handleSearch = () => {
    currentPage.value = 1
    getLogTableData()
}

// 获取日志表格数据
const getLogTableData = async () => {
    try {
        const params = {
            ...searchParams.value,
            pageParam: {
                pageNum: currentPage.value,
                pageSize: pageSize.value,
            },
        }
        const res = await getLogPageApi(params)
        const data = res.data || res
        
        logTableData.value = data.records || []
        totalNum.value = data.total || 0
    } catch (err) {
        console.error('getLogPageApi 请求失败:', err)
    }
}

// 处理分页变化
const handlePaginationChange = (data: { type: string; val: number }) => {
    if (data.type === 'currentPage') {
        currentPage.value = data.val
    } else if (data.type === 'pageSize') {
        pageSize.value = data.val
        currentPage.value = 1
    }
    getLogTableData()
}
// 获取日志头
const getLogHead = async () => {
    try {
        const res = await getLogHeadApi()
        const data = res.data || res
        const optionMap: Record<string, { label: string; value: any }[]> = {
            accountType: (data.accountTypeList || []).map((item: any) => ({ label: item.name, value: item.code })),
            moduleType: (data.moduleTypeList || []).map((item: any) => ({ label: item.name, value: item.code })),
            operationType: (data.operationTypeList || []).map((item: any) => ({ label: item.name, value: item.code })),
            schoolId: (data.schoolList || []).map((item: any) => ({ label: item.schoolName, value: item.schoolId })),
        }

        differentTypeLogSearchList.value = differentTypeLogSearchList.value.map(item => {
            if (optionMap[item.key]) {
                item.options = optionMap[item.key]
            }
            return { ...item }
        })
    } catch (err) {
        console.error('getLogHeadApi 请求失败:', err)
    }
}
// 获取日志表格数据
onMounted(async () => {
    await getLogHead()
    await getLogTableData()
})


</script>




<style lang="scss" scoped>
.page_search{
    .search_content{
        .content_right{
            :deep(.el-button){
                width: 100px !important;
                background-color: #2e64fa !important;
                color: #fff !important;
                border: none !important;
            }
        }
    }
}
</style>