disinfector_vue/src/components/audit/OperationRecord.vue

<script lang="ts" setup>
import { sendCmd, syncSendCmd } from 'apis/system'
import type { TableColumnCtx } from 'element-plus'
import { ElLoading } from 'element-plus'
import { onMounted, ref } from 'vue'

import { FtMessage } from '@/libs/message'

/**
 * 操作记录组件
 */

// 分页控制
const pageNum = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示数量
const totle = ref(0) // 总记录数

// 表格数据
const tableData = ref<Audit.AuditItem[]>([]) // 审计日志表格数据

/**
 * @hook 生命周期钩子 - 组件挂载完成时执行
 * @description 初始化加载审计日志列表
 */
onMounted(() => {
  getAuditList()
})

/**
 * @function 获取审计日志列表
 * @desc 从服务端获取分页后的审计日志数据
 */
const getAuditList = async () => {
  const params = {
    className: 'AuditMgrService',
    fnName: 'getRecords',
    params: {
      page: pageNum.value,
      pageSize: pageSize.value,
    },
  }
  try {
    const res = await sendCmd(params)
    tableData.value = res.items || []
    totle.value = res.total || 0
  }
  catch (error) {
    FtMessage.error('获取日志列表失败')
    console.error('获取审计日志失败:', error)
  }
}

/**
 * @function 导出全部审计记录
 * @desc 导出单条审计记录，需先选择一条记录
 */
const onExportRecord = () => {
  // if (selectedUserList.value.length !== 1) {
  //   FtMessage.warning('请选择一条数据进行导出')
  //   return
  // }
  const loading = ElLoading.service({
    lock: true,
    text: '正在导出',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  const params = {
    className: 'AuditMgrService',
    fnName: 'exportData',
  }
  syncSendCmd(params)
    .then((res) => {
      if (res.ackcode === 0) {
        FtMessage.success('导出成功')
      }
    })
    .catch((error) => {
      console.error('导出审计记录失败:', error)
    })
    .finally(() => {
      loading.close()
    })
}

/**
 * @function 页码变更处理
 * @param {number} page - 新的页码
 * @desc 更新页码并重新加载数据
 */
const handleCurrentChange = (page: number) => {
  pageNum.value = page
  getAuditList()
}

const formatIndex = (_row: unknown, _column: TableColumnCtx<unknown>, _cellValue: unknown, index: number): number => {
  return (pageNum.value - 1) * pageSize.value + index + 1
}
</script>

<template>
  <div class="dashboard-container">
    <main class="main-content">
      <div class="audit-export">
        <bt-button type="primary" button-text="全部导出" @click="onExportRecord" />
      </div>
      <div class="audit-table">
        <el-table :data="tableData" style="width: 100%" height="100%">
          <el-table-column label="序号" width="100" :formatter="formatIndex" />
          <el-table-column prop="usrName" label="操作人" width="120" />
          <el-table-column prop="behaviorinfo" label="操作内容" />
          <el-table-column prop="date" label="操作时间" width="250" />
        </el-table>
      </div>
      <div class="audit-pagination">
        <el-pagination layout="prev, pager, next" :total="totle" @current-change="handleCurrentChange" />
      </div>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.main-content {
  height: $main-container-height;
  overflow: hidden;
  background: $gradient-color;
  .audit-export {
    height: 50px;
    //padding: 0 10px;
    display: flex;
    align-items: center;
  }
  .audit-table {
    overflow: auto;
    height: calc(100% - 110px);
  }
  .audit-pagination {
    height: 50px;
    display: flex;
    align-items: center;
    float: right;
  }
}
</style>