pqs-9100_client/frontend/src/views/log/index.vue

<template>
    <div class="table-box">
        <ProTable ref="proTable" :columns="columns" :request-api="getTableList">
            <!-- 表格 header 按钮 -->
            <template #tableHeader>
                <!--                <el-button type="primary" :icon="DataAnalysis">分析</el-button>-->
                <el-button type="primary" icon="Download" @click="handleExport">导出csv</el-button>
            </template>
        </ProTable>
    </div>
</template>
<script setup lang="tsx" name="useProTable">
// 根据实际路径调整
import TimeControl from '@/components/TimeControl/index.vue'
import ProTable from '@/components/ProTable/index.vue'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { reactive, ref } from 'vue'
import { exportCsv, getAuditLog } from '@/api/system/log'
import { useDownload } from '@/hooks/useDownload'

// defineOptions({
// name: 'log'
// })

const startDate = ref('')
const endDate = ref('')
// ProTable 实例
const proTable = ref<ProTableInstance>()

const getTableList = async (params: any) => {
    let newParams = JSON.parse(JSON.stringify(params))
    newParams.searchEndTime = endDate.value
    newParams.searchBeginTime = startDate.value
    return getAuditLog(newParams)
}

// 表格配置项
const columns = reactive<ColumnProps[]>([
    { type: 'selection', fixed: 'left', width: 70 },
    { type: 'index', fixed: 'left', width: 70, label: '序号' },
    {
        prop: 'userName',
        label: '操作用户',
        search: { el: 'input' },
        minWidth: 100
    },
    {
        prop: 'ip',
        label: 'IP',
        minWidth: 120
    },
    {
        prop: 'logTime',
        label: '记录时间',
        minWidth: 180,
        search: {
            render: () => {
                return (
                    <div class="flx-flex-start">
                        <TimeControl
                            include={['日', '周', '月', '自定义']}
                            default={'月'}
                            onUpdate-dates={handleDateChange}
                        />
                    </div>
                )
            }
        }
    },
    {
        label: '事件描述',
        minWidth: 450,
        render(scope) {
            return `${scope.row.userName}在${scope.row.logTime}执行了【${scope.row.operateType}】${scope.row.operate}操作，结果为${scope.row.result}。`
        }
    },
    {
        prop: 'result',
        label: '事件结果',
        minWidth: 120
    },
    {
        prop: 'warn',
        label: '告警标志',
        minWidth: 100,
        render: scope => {
            return (
                <el-tag type={scope.row.warn == 1 ? 'danger' : 'success'}>
                    {scope.row.warn == 1 ? '已告警' : '未告警'}
                </el-tag>
            )
        }
    },
    {
        prop: 'operateType',
        label: '日志类型',
        width: 100
    }
])

// 处理日期变化的回调函数
const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
    startDate.value = startDateTemp
    endDate.value = endDateTemp
}

const handleExport = () => {
    // 获取当前的搜索参数
    let searchParam = proTable.value?.searchParam || {}

    // 将开始时间和结束时间添加到搜索参数中
    searchParam.searchBeginTime = startDate.value
    searchParam.searchEndTime = endDate.value

    useDownload(exportCsv, '日志列表', searchParam, false, '.csv')
}
</script>

<style scoped></style>