create-simpleadmin-ui 2.0.0

package/template/src/views/monitor/operlog/index.vue

@@ -0,0 +1,492 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Refresh, Search, Document, View, Delete } from '@element-plus/icons-vue'
+import { get, del } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+import { formatDateTime } from '@/utils/datetime'
+
+interface OperLogItem {
+  id: number
+  title?: string
+  businessType: number
+  operName?: string
+  operUrl?: string
+  operIp?: string
+  status: number
+  operTime?: string
+  costTime: number
+}
+
+interface OperLogDetail extends OperLogItem {
+  method?: string
+  requestMethod?: string
+  operatorType?: number
+  deptName?: string
+  operLocation?: string
+  operParam?: string
+  jsonResult?: string
+  errorMsg?: string
+}
+
+const loading = ref(false)
+const detailLoading = ref(false)
+const total = ref(0)
+const list = ref<OperLogItem[]>([])
+const detailVisible = ref(false)
+const current = ref<OperLogDetail | null>(null)
+
+const query = reactive({
+  pageIndex: 1,
+  pageSize: 10,
+  keyword: '',
+  status: undefined as number | undefined,
+  businessType: undefined as number | undefined,
+})
+
+const stats = reactive({ total: 0, ok: 0, fail: 0 })
+
+const bizLabels: Record<number, string> = {
+  0: '其它',
+  1: '新增',
+  2: '修改',
+  3: '删除',
+  4: '授权',
+  5: '导出',
+  6: '导入',
+  7: '强退',
+  8: '生成代码',
+  9: '清空',
+}
+
+function bizLabel(t: number) {
+  return bizLabels[t] ?? `类型${t}`
+}
+
+function bizTagType(t: number) {
+  if (t === 1) return 'success'
+  if (t === 2) return 'warning'
+  if (t === 3 || t === 7 || t === 9) return 'danger'
+  if (t === 4) return 'primary'
+  return 'info'
+}
+
+async function loadStats(pageTotal?: number) {
+  const base = { pageIndex: 1, pageSize: 1, keyword: query.keyword || undefined }
+  const unfiltered =
+    (query.status === undefined || query.status === null) &&
+    (query.businessType === undefined || query.businessType === null)
+  try {
+    const tasks: Promise<void>[] = []
+    if (unfiltered && pageTotal != null) {
+      stats.total = pageTotal
+    } else {
+      tasks.push(
+        get<{ total: number }>('/oper-logs', base).then((all) => {
+          stats.total = all.total
+        }),
+      )
+    }
+    tasks.push(
+      get<{ total: number }>('/oper-logs', { ...base, status: 0 }).then((r) => {
+        stats.ok = r.total
+      }),
+      get<{ total: number }>('/oper-logs', { ...base, status: 1 }).then((r) => {
+        stats.fail = r.total
+      }),
+    )
+    await Promise.all(tasks)
+  } catch {
+    stats.total = total.value
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const params: Record<string, unknown> = {
+      pageIndex: query.pageIndex,
+      pageSize: query.pageSize,
+      keyword: query.keyword || undefined,
+    }
+    if (query.status !== undefined && query.status !== null) params.status = query.status
+    if (query.businessType !== undefined && query.businessType !== null) {
+      params.businessType = query.businessType
+    }
+    const data = await get<{ total: number; items: OperLogItem[] }>('/oper-logs', params)
+    total.value = data.total
+    list.value = data.items || []
+    await loadStats(data.total)
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  query.pageIndex = 1
+  load()
+}
+
+function resetQuery() {
+  query.keyword = ''
+  query.status = undefined
+  query.businessType = undefined
+  query.pageIndex = 1
+  load()
+}
+
+function formatPrettyJson(raw?: string | null) {
+  if (!raw || !raw.trim()) return ''
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2)
+  } catch {
+    return raw
+  }
+}
+
+async function openDetail(row: OperLogItem) {
+  detailVisible.value = true
+  detailLoading.value = true
+  current.value = null
+  try {
+    current.value = await get<OperLogDetail>(`/oper-logs/${row.id}`)
+  } catch {
+    detailVisible.value = false
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+async function remove(row: OperLogItem) {
+  await ElMessageBox.confirm(`确认删除该操作日志？`, '提示', { type: 'warning' })
+  await del('/oper-logs', { ids: [row.id] })
+  ElMessage.success('已删除')
+  load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <AppPage title="操作日志" description="审计后台关键操作与接口调用记录">
+    <div class="mon-stats">
+      <div class="mon-stats__item">
+        <span class="mon-stats__num">{{ stats.total }}</span>
+        <span class="mon-stats__label">全部记录</span>
+      </div>
+      <div class="mon-stats__item mon-stats__item--ok">
+        <span class="mon-stats__num">{{ stats.ok }}</span>
+        <span class="mon-stats__label">成功</span>
+      </div>
+      <div class="mon-stats__item mon-stats__item--fail">
+        <span class="mon-stats__num">{{ stats.fail }}</span>
+        <span class="mon-stats__label">失败</span>
+      </div>
+      <div class="mon-stats__item mon-stats__item--hit">
+        <span class="mon-stats__num">{{ total }}</span>
+        <span class="mon-stats__label">当前筛选</span>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <el-input
+        v-model="query.keyword"
+        clearable
+        placeholder="搜索模块 / 操作人"
+        style="width: 200px"
+        @keyup.enter="search"
+      />
+      <el-select
+        v-model="query.businessType"
+        clearable
+        placeholder="业务类型"
+        style="width: 130px"
+        @change="search"
+      >
+        <el-option v-for="(label, key) in bizLabels" :key="key" :label="label" :value="Number(key)" />
+      </el-select>
+      <el-select v-model="query.status" clearable placeholder="状态" style="width: 110px" @change="search">
+        <el-option label="成功" :value="0" />
+        <el-option label="失败" :value="1" />
+      </el-select>
+      <el-button type="primary" :icon="Search" @click="search">查询</el-button>
+      <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+    </div>
+
+    <div class="table-wrap" v-loading="loading">
+      <el-table :data="list" border stripe empty-text="暂无操作日志">
+        <el-table-column label="模块" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="name-cell">
+              <span class="name-cell__icon">
+                <el-icon :size="14"><Document /></el-icon>
+              </span>
+              <strong>{{ row.title || '—' }}</strong>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="业务类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="bizTagType(row.businessType)">{{ bizLabel(row.businessType) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="operName" label="操作人" width="110" show-overflow-tooltip />
+        <el-table-column prop="operIp" label="IP" width="130" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code class="mono">{{ row.operIp || '—' }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column prop="operUrl" label="请求地址" min-width="180" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code class="mono url">{{ row.operUrl || '—' }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.status === 0 ? 'success' : 'danger'">
+              {{ row.status === 0 ? '成功' : '失败' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="耗时" width="90" align="right">
+          <template #default="{ row }">
+            <span class="muted">{{ row.costTime ?? 0 }} ms</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="时间" width="170" class-name="is-datetime" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span class="datetime-cell">{{ formatDateTime(row.operTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button size="small" type="primary" :icon="View" @click="openDetail(row)">详情</el-button>
+              <el-button
+                size="small"
+                type="danger"
+                :icon="Delete"
+                v-permission="'monitor:operlog:remove'"
+                @click="remove(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="pager">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+        v-model:current-page="query.pageIndex"
+        v-model:page-size="query.pageSize"
+        :page-sizes="[10, 20, 50]"
+        @current-change="load"
+        @size-change="
+          () => {
+            query.pageIndex = 1
+            load()
+          }
+        "
+      />
+    </div>
+
+    <el-dialog
+      v-model="detailVisible"
+      title="操作日志详情"
+      width="720px"
+      class="operlog-detail-dialog"
+      append-to-body
+      align-center
+      destroy-on-close
+    >
+      <div v-loading="detailLoading">
+        <template v-if="current">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="模块" :span="2">{{ current.title || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="业务类型">
+              <el-tag size="small" :type="bizTagType(current.businessType)">
+                {{ bizLabel(current.businessType) }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="状态">
+              <el-tag size="small" :type="current.status === 0 ? 'success' : 'danger'">
+                {{ current.status === 0 ? '成功' : '失败' }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="操作人">{{ current.operName || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="部门">{{ current.deptName || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="请求方式">{{ current.requestMethod || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="耗时">{{ current.costTime ?? 0 }} ms</el-descriptions-item>
+            <el-descriptions-item label="IP">{{ current.operIp || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="地点">{{ current.operLocation || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="请求地址" :span="2">{{ current.operUrl || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="方法" :span="2">{{ current.method || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="时间" :span="2">{{ formatDateTime(current.operTime) }}</el-descriptions-item>
+            <el-descriptions-item v-if="current.errorMsg" label="错误信息" :span="2">
+              <span class="fail-msg">{{ current.errorMsg }}</span>
+            </el-descriptions-item>
+          </el-descriptions>
+
+          <div class="detail-block">
+            <div class="detail-block__title">请求参数</div>
+            <pre class="detail-block__code">{{ formatPrettyJson(current.operParam) || '（无）' }}</pre>
+          </div>
+          <div class="detail-block">
+            <div class="detail-block__title">返回结果</div>
+            <pre class="detail-block__code">{{ formatPrettyJson(current.jsonResult) || '（无）' }}</pre>
+          </div>
+        </template>
+      </div>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </AppPage>
+</template>
+
+<style scoped lang="scss">
+.mon-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.mon-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--sa-border);
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.mon-stats__num {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--sa-ink);
+  font-variant-numeric: tabular-nums;
+}
+.mon-stats__label {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+.mon-stats__item--ok .mon-stats__num {
+  color: var(--sa-accent);
+}
+.mon-stats__item--fail .mon-stats__num {
+  color: #be123c;
+}
+.mon-stats__item--hit .mon-stats__num {
+  color: #0369a1;
+}
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 12px 14px;
+  background: var(--sa-toolbar-bg);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+}
+.table-wrap {
+  border: 1px solid var(--sa-border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.name-cell__icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  background: var(--sa-accent-soft);
+  color: var(--sa-accent);
+}
+.name-cell strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sa-ink-secondary);
+  background: var(--sa-toolbar-bg);
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+.mono.url {
+  word-break: break-all;
+}
+.muted {
+  color: var(--sa-ink-muted);
+  font-size: 12px;
+}
+.pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+.fail-msg {
+  color: #be123c;
+}
+.detail-block {
+  margin-top: 14px;
+}
+.detail-block__title {
+  font-size: 13px;
+  font-weight: 650;
+  color: var(--sa-ink);
+  margin-bottom: 8px;
+}
+.detail-block__code {
+  margin: 0;
+  padding: 12px 14px;
+  max-height: 220px;
+  overflow: auto;
+  border-radius: 10px;
+  border: 1px solid var(--sa-border);
+  background: #0f172a;
+  color: #e2e8f0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+@media (max-width: 900px) {
+  .mon-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
+
+<style>
+.operlog-detail-dialog.el-dialog {
+  width: min(720px, calc(100vw - 32px)) !important;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.operlog-detail-dialog .el-dialog__body {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc(90vh - 140px);
+}
+</style>