143 lines
4.0 KiB
Vue
143 lines
4.0 KiB
Vue
<template>
|
|
<div class="content-view">
|
|
<div class="table-head-tool">
|
|
<Form ref="formInline" :model="param.seachOption" inline :label-width="80">
|
|
<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="ml10" style="width: 220px" placeholder="模糊/精确" />
|
|
</FormItem>
|
|
<FormItem>
|
|
<Button type="primary" @click="load(1)">查询</Button>
|
|
<Dropdown trigger="click" class="ml10" @on-click="on_toolbar_more">
|
|
<Button type="default">更多 <Icon type="ios-arrow-down" /></Button>
|
|
<DropdownMenu slot="list">
|
|
<DropdownItem name="export">导出 CSV</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</FormItem>
|
|
</Form>
|
|
</div>
|
|
|
|
<div class="table-body">
|
|
<Table :columns="columns" :data="rows" border stripe />
|
|
<div class="table-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>
|
|
</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)
|
|
},
|
|
on_toolbar_more(name) {
|
|
if (name === 'export') this.doExport()
|
|
},
|
|
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 lang="less" scoped>
|
|
.content-view {
|
|
width: 100%;
|
|
max-width: 1720px;
|
|
margin: 0 auto;
|
|
padding: 26px 36px 36px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.table-head-tool {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.ml10 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.table-page-bar {
|
|
margin-top: 12px;
|
|
text-align: right;
|
|
}
|
|
</style>
|