1

admin/src/views/subscription/audit_log.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="sub-page">
+    <div class="sub-toolbar">
+      <h2 class="sub-title">审计日志</h2>
+      <Button type="primary" @click="load(1)">刷新</Button>
+      <Button class="ml8" @click="doExport">导出 CSV</Button>
+    </div>
+    <div class="sub-search">
+      <Form inline>
+        <FormItem label="动作">
+          <Select v-model="param.seachOption.key" style="width: 140px">
+            <Option value="action">action</Option>
+            <Option value="resource_type">resource_type</Option>
+          </Select>
+          <Input v-model="param.seachOption.value" class="ml8" style="width: 220px" placeholder="模糊/精确" />
+        </FormItem>
+        <Button type="primary" @click="load(1)">查询</Button>
+      </Form>
+    </div>
+    <Table :columns="columns" :data="rows" border stripe />
+    <div class="sub-page-bar">
+      <Page
+        :total="total"
+        :current="param.pageOption.page"
+        :page-size="param.pageOption.pageSize"
+        show-total
+        @on-change="onPage"
+        @on-page-size-change="onSize"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import auditServer from '@/api/subscription/audit_server.js'
+import { downloadCsvFromRows } from '@/utils/csvExport.js'
+
+export default {
+  name: 'SubscriptionAuditLog',
+  data() {
+    return {
+      rows: [],
+      total: 0,
+      param: {
+        seachOption: { key: 'action', value: '' },
+        pageOption: { page: 1, pageSize: 20, total: 0 },
+      },
+    }
+  },
+  computed: {
+    columns() {
+      return [
+        { title: 'ID', key: 'id', width: 80 },
+        { title: '后台用户', key: 'admin_user_id', width: 100 },
+        { title: '业务用户', key: 'biz_user_id', width: 100 },
+        { title: '动作', key: 'action', minWidth: 160 },
+        { title: '资源类型', key: 'resource_type', width: 120 },
+        { title: '资源ID', key: 'resource_id', width: 90 },
+        {
+          title: '详情',
+          key: 'detail',
+          minWidth: 200,
+          render: (h, p) => {
+            const d = p.row.detail
+            const s = d == null ? '' : typeof d === 'string' ? d : JSON.stringify(d)
+            return h('span', { attrs: { title: s } }, s.length > 80 ? s.slice(0, 80) + '…' : s)
+          },
+        },
+        { title: '时间', key: 'created_at', minWidth: 160 },
+      ]
+    },
+  },
+  mounted() {
+    this.load(1)
+  },
+  methods: {
+    async load(page) {
+      if (page) this.param.pageOption.page = page
+      const res = await auditServer.page({ param: this.param })
+      if (res && res.code === 0) {
+        this.rows = res.data.rows || []
+        this.total = res.data.count || 0
+      } else {
+        this.$Message.error((res && res.message) || '加载失败')
+      }
+    },
+    onPage(p) {
+      this.param.pageOption.page = p
+      this.load()
+    },
+    onSize(s) {
+      this.param.pageOption.pageSize = s
+      this.load(1)
+    },
+    async doExport() {
+      const res = await auditServer.exportRows({ param: this.param })
+      if (res && res.code === 0 && res.data && res.data.rows) {
+        const rows = res.data.rows.map((r) => ({
+          ...r,
+          detail: r.detail == null ? '' : typeof r.detail === 'object' ? JSON.stringify(r.detail) : r.detail,
+        }))
+        downloadCsvFromRows(rows, 'audit_log.csv')
+        this.$Message.success('已导出')
+      } else {
+        this.$Message.error((res && res.message) || '导出失败')
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.sub-page {
+  padding: 16px;
+}
+.sub-title {
+  display: inline-block;
+  margin: 0 16px 0 0;
+  font-size: 18px;
+}
+.ml8 {
+  margin-left: 8px;
+}
+.sub-search {
+  margin-bottom: 12px;
+}
+.sub-page-bar {
+  margin-top: 12px;
+  text-align: right;
+}
+</style>