<template>
|
<div class="page">
|
<div class="page-title">
|
<div><h2>操作日志</h2><p>自动记录新增、修改、删除等写操作，登录行为单独记入登录日志</p></div>
|
</div>
|
<div class="table-panel">
|
<div class="toolbar">
|
<el-input v-model="filters.keyword" clearable placeholder="账户名 / 姓名 / 请求地址" style="width:230px" @keyup.enter.native="search"></el-input>
|
<el-select v-model="filters.module" clearable placeholder="模块" style="width:160px">
|
<el-option v-for="item in modules" :key="item" :label="item" :value="item"></el-option>
|
</el-select>
|
<el-select v-model="filters.operationType" clearable placeholder="操作类型" style="width:150px">
|
<el-option v-for="item in operationTypes" :key="item" :label="item" :value="item"></el-option>
|
</el-select>
|
<el-date-picker
|
v-model="filters.dates"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
style="width:260px"
|
></el-date-picker>
|
<el-button type="primary" icon="el-icon-search" v-permission="'system:operation-logs:query'" @click="search">查询</el-button>
|
<el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
|
</div>
|
<el-table v-loading="loading" :data="rows" border stripe height="calc(100vh - 250px)">
|
<el-table-column prop="createTime" label="操作时间" width="180"></el-table-column>
|
<el-table-column prop="userName" label="账户名" width="130"></el-table-column>
|
<el-table-column prop="nickName" label="姓名" width="120"></el-table-column>
|
<el-table-column prop="module" label="模块" width="130"></el-table-column>
|
<el-table-column prop="operationType" label="操作类型" width="110" align="center"></el-table-column>
|
<el-table-column prop="targetType" label="目标类型" width="120"></el-table-column>
|
<el-table-column prop="targetId" label="目标ID" width="180" show-overflow-tooltip></el-table-column>
|
<el-table-column label="结果" width="80" align="center">
|
<template slot-scope="{ row }">
|
<el-tag size="mini" :type="row.result === '成功' ? 'success' : 'danger'">{{ row.result }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="requestMethod" label="方式" width="80" align="center"></el-table-column>
|
<el-table-column prop="requestUri" label="请求地址" min-width="240" show-overflow-tooltip></el-table-column>
|
</el-table>
|
<el-pagination
|
class="pager"
|
background
|
layout="total, sizes, prev, pager, next"
|
:total="total"
|
:current-page="current"
|
:page-size="size"
|
:page-sizes="[20, 50, 100]"
|
@current-change="handleCurrentChange"
|
@size-change="handleSizeChange"
|
></el-pagination>
|
</div>
|
</div>
|
</template>
|
<script>
|
import api from '@/api'
|
export default {
|
name: 'OperationLogManage',
|
data() {
|
return {
|
rows: [],
|
total: 0,
|
current: 1,
|
size: 20,
|
loading: false,
|
modules: ['故障管理', '完工管理', '完工验收', '统计报表', '用户管理', '角色管理', '菜单管理', '承修单位管理', '系统管理', '其他'],
|
operationTypes: ['新增', '修改', '删除', '授权', '审批', '派单', '销项', '提交', '申请', '打印', '评级', '菜单按钮配置'],
|
filters: { keyword: '', module: '', operationType: '', dates: [] }
|
}
|
},
|
created() { this.load() },
|
methods: {
|
load() {
|
this.loading = true
|
const dates = this.filters.dates || []
|
api.get('/system/operation-logs', {
|
params: {
|
keyword: this.filters.keyword || undefined,
|
module: this.filters.module || undefined,
|
operationType: this.filters.operationType || undefined,
|
startDate: dates[0] || undefined,
|
endDate: dates[1] || undefined,
|
current: this.current,
|
size: this.size
|
}
|
}).then(res => {
|
const data = res.data || {}
|
this.rows = data.records || []
|
this.total = data.total || 0
|
}).finally(() => { this.loading = false })
|
},
|
search() { this.current = 1; this.load() },
|
reset() { this.filters = { keyword: '', module: '', operationType: '', dates: [] }; this.search() },
|
handleCurrentChange(page) { this.current = page; this.load() },
|
handleSizeChange(size) { this.size = size; this.current = 1; this.load() }
|
}
|
}
|
</script>
|
<style scoped>
|
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
|
.pager { margin-top: 12px; text-align: right; }
|
</style>
|
