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

<template>
  <div class='table-box'>
    <ProTable
      ref='proTable'
      :columns='columns'
      :data='logData'
      @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 Sys_Log_Audit } from '@/api/system/interface/log'
import ProTable from '@/components/ProTable/index.vue'
import { Upload ,DataAnalysis} from '@element-plus/icons-vue'
import logDataList from '@/api/system/log/logData'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { reactive,ref,watch } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
let multipleSelection = ref<string[]>([])
const logData = logDataList
const dictStore = useDictStore()
// 定义包含和排除的单位
const includedUnits = ['日', '周', '月', '自定义']; // 可以根据需要包含的单位
const excludedUnits = ['季度','年']; // 要排除的单位
const defaultUnits = '日'; // 默认的单位
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 表格配置项
const columns = reactive<ColumnProps<Sys_Log_Audit.Audit_LogList>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  {
    prop: 'id',
    label: '序号',
    width: 70,
  },
  {
    prop: 'create_By',
    label: '操作用户',
    search: { el: 'input' },
    minWidth: 100,
  },
  {
    prop: 'ip',
    label: 'IP',
    minWidth: 120,
  },
  {
    prop: 'create_Time',
    label: '记录时间',
    minWidth: 180,
    search: {
      span: 2,
      render: () => {
        return (
          <div class='flx-flex-start'>
            <TimeControl 
            include={includedUnits} 
            exclude={excludedUnits} 
            default={defaultUnits} 
            />
          </div>
        )
      },
    },
  },
  {
    prop: 'remark',
    label: '事件描述',
    minWidth: 400,
  },
  {
    prop: 'result',
    label: '事件结果',
    minWidth: 120,
  },
  {
    prop: 'warn',
    label: '告警标志',
      minWidth: 100,
      render: scope => {
        return (
           <el-tag type={scope.row.warn ? 'danger' : 'success'}>{scope.row.warn ? '告警' : '未告警'}</el-tag>
        )
      },
  },
  {
    prop: 'operate_Type',
    label: '日志类型',
    width: 100,
    search: { el: 'select', props: { filterable: true } },
  },
])

//选中
// 处理选择变化
const handleSelectionChange = (selection: Sys_Log_Audit.Audit_LogList[]) => {
  multipleSelection.value = selection.map(row => row.id) // 更新选中的行
  
}


</script>

<style scoped>

</style>