133 lines
3.3 KiB
Vue
133 lines
3.3 KiB
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='Upload' @click='handleExport'>导出csv</el-button>
|
|
</template>
|
|
</ProTable>
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
<script setup lang='tsx' name='useProTable'>
|
|
// 根据实际路径调整
|
|
import TimeControl from '@/components/TimeControl/index.vue'
|
|
import {type AuditLog} from '@/api/system/log/interface/log.ts'
|
|
import ProTable from '@/components/ProTable/index.vue'
|
|
import {DataAnalysis, Upload} from '@element-plus/icons-vue'
|
|
import type {ColumnProps, ProTableInstance} from '@/components/ProTable/interface'
|
|
import {reactive, ref} from 'vue'
|
|
import {getAuditLog, exportCsv} from '@/api/system/log/index.ts'
|
|
import {useDownload} from "@/hooks/useDownload";
|
|
import {exportPqDev} from "@/api/device/device";
|
|
|
|
|
|
// 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<AuditLog.ReqAuditLogParams>[]>([
|
|
{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.reCheckType + 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>
|