cfc/cfc-web/src/views/OperationLogs.vue

<template>
  <div class="operation-logs">
    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="用户ID">
          <el-input v-model="filterForm.userId" placeholder="请输入用户ID" clearable></el-input>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="filterForm.operationType" placeholder="请选择" clearable>
            <el-option label="登录" value="login"></el-option>
            <el-option label="登出" value="logout"></el-option>
            <el-option label="创建" value="create"></el-option>
            <el-option label="更新" value="update"></el-option>
            <el-option label="删除" value="delete"></el-option>
            <el-option label="查询" value="query"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" :loading="loading">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 日志列表 -->
    <el-card>
      <el-table :data="logs" v-loading="loading" stripe>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="userId" label="用户ID" width="100"></el-table-column>
        <el-table-column prop="nickname" label="用户名" width="120"></el-table-column>
        <el-table-column prop="operationType" label="操作类型" width="100">
          <template slot-scope="scope">
            <el-tag :type="getOperationTypeTag(scope.row.operationType)" size="small">
              {{ scope.row.operationType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="操作描述" min-width="200"></el-table-column>
        <el-table-column prop="requestPath" label="请求路径" min-width="180"></el-table-column>
        <el-table-column prop="requestMethod" label="方法" width="80"></el-table-column>
        <el-table-column prop="responseStatus" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.responseStatus === 200 ? 'success' : 'danger'" size="small">
              {{ scope.row.responseStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="clientIp" label="IP地址" width="130"></el-table-column>
        <el-table-column prop="createdAt" label="操作时间" width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleViewDetail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @current-change="handlePageChange"
        :current-page="pagination.page"
        :page-size="pagination.size"
        :total="pagination.total"
        layout="total, prev, pager, next"
        class="pagination">
      </el-pagination>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog title="操作日志详情" :visible.sync="detailVisible" width="600px">
      <el-descriptions :column="1" border v-if="currentLog">
        <el-descriptions-item label="ID">{{ currentLog.id }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ currentLog.userId }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ currentLog.nickname }}</el-descriptions-item>
        <el-descriptions-item label="操作类型">{{ currentLog.operationType }}</el-descriptions-item>
        <el-descriptions-item label="操作描述">{{ currentLog.description }}</el-descriptions-item>
        <el-descriptions-item label="请求路径">{{ currentLog.requestPath }}</el-descriptions-item>
        <el-descriptions-item label="请求方法">{{ currentLog.requestMethod }}</el-descriptions-item>
        <el-descriptions-item label="请求参数">{{ currentLog.requestParams || '-' }}</el-descriptions-item>
        <el-descriptions-item label="响应状态">{{ currentLog.responseStatus }}</el-descriptions-item>
        <el-descriptions-item label="客户端IP">{{ currentLog.clientIp }}</el-descriptions-item>
        <el-descriptions-item label="User-Agent">{{ currentLog.userAgent || '-' }}</el-descriptions-item>
        <el-descriptions-item label="操作时间">{{ formatDate(currentLog.createdAt) }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import axios from '@/utils/request'
import { getOperationLogs } from '@/api/operationLog'

export default {
  name: 'OperationLogs',
  data() {
    return {
      loading: false,
      logs: [],
      filterForm: {
        userId: null,
        operationType: null
      },
      dateRange: null,
      pagination: {
        page: 1,
        size: 20,
        total: 0
      },
      detailVisible: false,
      currentLog: null
    }
  },
  mounted() {
    this.fetchLogs()
  },
  methods: {
    async fetchLogs() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.page,
          size: this.pagination.size,
          userId: this.filterForm.userId || undefined,
          operationType: this.filterForm.operationType || undefined,
          startDate: this.dateRange ? this.dateRange[0] : undefined,
          endDate: this.dateRange ? this.dateRange[1] : undefined
        }
        const res = await getOperationLogs(params)
        if (res.code === 200) {
          this.logs = res.data.records || []
          this.pagination.total = res.data.total || 0
        }
      } catch (e) {
        this.$message.error('获取日志失败')
      } finally {
        this.loading = false
      }
    },
    handleQuery() {
      this.pagination.page = 1
      this.fetchLogs()
    },
    handleReset() {
      this.filterForm = { userId: null, operationType: null }
      this.dateRange = null
      this.pagination.page = 1
      this.fetchLogs()
    },
    handlePageChange(page) {
      this.pagination.page = page
      this.fetchLogs()
    },
    handleViewDetail(row) {
      this.currentLog = row
      this.detailVisible = true
    },
    getOperationTypeTag(type) {
      const tags = {
        login: 'success',
        logout: 'info',
        create: 'primary',
        update: 'warning',
        delete: 'danger',
        query: ''
      }
      return tags[type] || ''
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      return new Date(dateStr).toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.operation-logs {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  margin-bottom: 0;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>