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

<template>
  <div class="operation-logs admin-page">
    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form" size="small">
        <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>
            <div class="adm-table-wrap">
<el-table height="100%" :data="logs" v-loading="loading" stripe>
        <el-table-column prop="id" label="ID" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('id', $event)">ID<span v-if="sortIndex('id') !== null" class="sort-index" :class="sortClass('id') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('id') }}</span>{{ sortIcon('id') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户名" width="120">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('nickname', $event)">用户名<span v-if="sortIndex('nickname') !== null" class="sort-index" :class="sortClass('nickname') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('nickname') }}</span>{{ sortIcon('nickname') }}</span>
          </template>
        </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>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('operationType', $event)">操作类型<span v-if="sortIndex('operationType') !== null" class="sort-index" :class="sortClass('operationType') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('operationType') }}</span>{{ sortIcon('operationType') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="操作描述" min-width="200">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('description', $event)">操作描述<span v-if="sortIndex('description') !== null" class="sort-index" :class="sortClass('description') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('description') }}</span>{{ sortIcon('description') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="requestPath" label="请求路径" min-width="180">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('requestPath', $event)">请求路径<span v-if="sortIndex('requestPath') !== null" class="sort-index" :class="sortClass('requestPath') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('requestPath') }}</span>{{ sortIcon('requestPath') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="requestMethod" label="方法" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('requestMethod', $event)">方法<span v-if="sortIndex('requestMethod') !== null" class="sort-index" :class="sortClass('requestMethod') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('requestMethod') }}</span>{{ sortIcon('requestMethod') }}</span>
          </template>
        </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>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('responseStatus', $event)">状态<span v-if="sortIndex('responseStatus') !== null" class="sort-index" :class="sortClass('responseStatus') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('responseStatus') }}</span>{{ sortIcon('responseStatus') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="clientIp" label="IP地址" width="130">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('clientIp', $event)">IP地址<span v-if="sortIndex('clientIp') !== null" class="sort-index" :class="sortClass('clientIp') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('clientIp') }}</span>{{ sortIcon('clientIp') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="操作时间" width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('createdAt', $event)">操作时间<span v-if="sortIndex('createdAt') !== null" class="sort-index" :class="sortClass('createdAt') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('createdAt') }}</span>{{ sortIcon('createdAt') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" @click="handleViewDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>

      <!-- 分页 -->
      <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="用户名">{{ currentLog.nickname || currentLog.userName || '-' }}</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 SortMixin from '@/mixins/SortMixin'
import axios from '@/utils/request'
import { getOperationLogs } from '@/api/operationLog'

export default {
  name: 'OperationLogs',
  mixins: [SortMixin],
  computed: {
    tableHeight() {
      return window.innerHeight - 340
    }
  },
  data() {
    return {
      loading: false,
      logs: [],
      sortableColumns: { id: 'ID', nickname: '用户名', operationType: '操作类型', description: '操作描述', requestPath: '请求路径', requestMethod: '方法', responseStatus: '状态', clientIp: 'IP地址', createdAt: '操作时间' },
      filterForm: {
        userId: null,
        operationType: null
      },
      dateRange: null,
      pagination: {
        page: 1,
        size: 20,
        total: 0
      },
      detailVisible: false,
      currentLog: null
    }
  },
  mounted() {
    this.fetchLogs()
  },
  methods: {
    loadList() {
      this.fetchLogs()
    },
    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
        }
        if (this.sortState.length > 0) params.sort = this.sortState
        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;
}

.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
.sort-header:hover {
  color: #409eff;
}
</style>