as-partner-frontend/src/views/modules/sys/audit-log.vue

<template>
  <div class="mod-audit-log">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item label="操作者">
        <el-input v-model="dataForm.actorName" placeholder="按用户名模糊" clearable style="width: 180px"></el-input>
      </el-form-item>
      <el-form-item label="操作行为">
        <el-input v-model="dataForm.head" placeholder="按操作行为模糊" clearable style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="接口">
        <el-input v-model="dataForm.api" placeholder="类#方法 等" clearable style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="createdAtRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
          style="width: 360px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-page-wrap">
      <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%">
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        width="80"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        width="100"
        label="操作者">
      </el-table-column>
      <el-table-column
        prop="head"
        header-align="center"
        align="center"
        min-width="160"
        :show-overflow-tooltip="true"
        label="操作行为">
      </el-table-column>

      <el-table-column
        prop="createdAt"
        header-align="center"
        align="center"
        width="170"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="api"
        header-align="center"
        align="center"
        min-width="200"
        :show-overflow-tooltip="true"
        label="接口">
      </el-table-column>
      <el-table-column
        prop="param"
        header-align="center"
        align="left"
        min-width="200"
        :show-overflow-tooltip="true"
        label="参数">
      </el-table-column>
      <el-table-column
        prop="paramDesc"
        header-align="center"
        align="left"
        min-width="200"
        :show-overflow-tooltip="true"
        label="参数描述">
      </el-table-column>
      <el-table-column
        prop="result"
        header-align="center"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
        label="结果">
      </el-table-column>
      <el-table-column
        prop="ip"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="IP">
      </el-table-column>
      <el-table-column
        prop="deviceInfo"
        header-align="center"
        align="left"
        min-width="180"
        :show-overflow-tooltip="true"
        label="客户端">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { getAuditLogList } from '@/api/sys'
import type { AuditLogInfo } from '@/api/sys'
import type { PageParams, PageResult } from '@/types/api'

interface DataForm {
  actorName: string
  head: string
  api: string
}

/** 列表接口可能返回根级 page，或包在 data / data.page 下 */
type AuditListResponsePayload = {
  data?: { page?: PageResult<AuditLogInfo> } & Partial<PageResult<AuditLogInfo>>
  page?: PageResult<AuditLogInfo>
}

const dataForm = reactive<DataForm>({
  actorName: '',
  head: '',
  api: ''
})

const createdAtRange = ref<[string, string] | null>(null)
const dataList = ref<AuditLogInfo[]>([])
const pageIndex = ref<number>(1)
const pageSize = ref<number>(10)
const totalPage = ref<number>(0)
const dataListLoading = ref<boolean>(false)

function buildListParams (): PageParams {
  const p: PageParams = { page: pageIndex.value, limit: pageSize.value }
  const t = (s: string | null | undefined): string => (s != null && String(s).trim() !== '' ? String(s).trim() : '')
  const actor = t(dataForm.actorName)
  if (actor) p.actorName = actor
  const head = t(dataForm.head)
  if (head) p.head = head
  const api = t(dataForm.api)
  if (api) p.api = api
  const r = createdAtRange.value
  if (Array.isArray(r) && r.length === 2 && r[0] && r[1]) {
    p.beginTime = r[0]
    p.endTime = r[1]
  }
  return p
}

function getDataList (): void {
  dataListLoading.value = true
  getAuditLogList(buildListParams()).then((data) => {
    if (data && data.code === 0) {
      // 兼容：{ code, page }；或 { code, data: { page } }；或 data 本体即分页字段
      const raw = data as AuditListResponsePayload
      const page = raw.data?.page ?? raw.page ?? raw.data
      if (page && (Array.isArray(page.list) || page.totalCount != null)) {
        dataList.value = page.list || []
        totalPage.value = page.totalCount || 0
      } else {
        dataList.value = []
        totalPage.value = 0
      }
    } else {
      dataList.value = []
      totalPage.value = 0
    }
    dataListLoading.value = false
  })
}

function sizeChangeHandle (val: number): void {
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}

function currentChangeHandle (val: number): void {
  pageIndex.value = val
  getDataList()
}

onMounted(() => {
  getDataList()
})
</script>