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

<template>
  <div class='table-box'>
    <ProTable
      ref='proTable'
      :columns='columns'
      :request-api='getTableList'
      @selection-change='handleSelectionChange'
      type='selection'
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type='primary' :icon='DataAnalysis' >分析</el-button>
        <el-button type='primary' :icon='Upload'>导出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 { Upload ,DataAnalysis} from '@element-plus/icons-vue'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { reactive,ref,watch } from 'vue'
import {
  getAuditLog,
} from '@/api/system/log/index.ts'


// 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.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
}



</script>

<style scoped>

</style>