Commit 87261d32 authored by yangkaiyi's avatar yangkaiyi

改日志页UI

parent e88d106d
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row class="toolbar"> <el-row class="toolbar">
<el-col :span="24"> <el-col :span="24">
<el-form :inline="true" :model="filters"> <el-form :inline="true" :model="filters">
<el-select v-model="filters.status" placeholder="状态"> <el-select v-model="filters.status" placeholder="状态">
<el-option <el-option
v-for="item in optionStatus" v-for="item in optionStatus"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-select v-model="filters.column" placeholder="请选择"> <el-select v-model="filters.column" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-form-item> <el-form-item>
<el-input v-model="filters.keyword" placeholder="关键字"></el-input> <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" v-on:click="init">查询</el-button> <el-button type="primary" v-on:click="init">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-table :data="data.list" element-loading-text="Loading" highlight-current-row> <el-table :data="data.list" element-loading-text="Loading" highlight-current-row>
<el-table-column label='序号' width="80" type="index"> <el-table-column label='序号' width="80" type="index">
</el-table-column> </el-table-column>
<el-table-column label="帐号" prop="account" width="80"> <el-table-column label="帐号" prop="account" width="120">
</el-table-column> </el-table-column>
<el-table-column label="动作" prop="action"> <el-table-column label="动作" prop="action">
</el-table-column> </el-table-column>
<el-table-column label="描述" prop="remark"> <el-table-column label="描述" prop="remark">
</el-table-column> </el-table-column>
<el-table-column label="IP" prop="ip"> <el-table-column label="IP" prop="ip">
</el-table-column> </el-table-column>
<el-table-column label="时间"> <el-table-column label="时间">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.time/1000|moment("YYYY-MM-DD HH:mm:ss")}} {{scope.row.time/1000|moment("YYYY-MM-DD HH:mm:ss")}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="参数"> <el-table-column label="参数">
<template slot-scope="scope"> <template slot-scope="scope">
<el-popover trigger="hover" placement="top"> <el-popover trigger="hover" placement="top">
{{ scope.row.params }} {{ scope.row.params }}
<div slot="reference" class="name-wrapper"> <div slot="reference" class="name-wrapper">
<el-tag size="medium">参数</el-tag> <el-tag size="medium">参数</el-tag>
</div> </div>
</el-popover> </el-popover>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="返回" prop="result"> <el-table-column label="返回" prop="result">
<template slot-scope="scope"> <template slot-scope="scope">
<el-popover trigger="hover" placement="top"> <el-popover trigger="hover" placement="top">
{{ scope.row.result }} {{ scope.row.result }}
<div slot="reference" class="name-wrapper"> <div slot="reference" class="name-wrapper">
<el-tag size="medium"> {{ JSON.parse(scope.row.result).msg }}</el-tag> <el-tag size="medium"> {{ JSON.parse(scope.row.result).msg }}</el-tag>
</div> </div>
</el-popover> </el-popover>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="结果"> <el-table-column label="结果">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.status===0?'success':'danger'">{{scope.row.status===0?'成功':'失败'}}</el-tag> <el-tag :type="scope.row.status===0?'success':'danger'">{{scope.row.status===0?'成功':'失败'}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="toolbar"> <el-row class="toolbar">
<el-col :span="24"> <el-col :span="24">
<el-pagination <el-pagination
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:page-sizes="this.$store.state.common.pageSizes" :page-sizes="this.$store.state.common.pageSizes"
:page-size="this.$store.state.common.pageSize" :page-size="this.$store.state.common.pageSize"
:total="data.total" :total="data.total"
style="float:right;"> style="float:right;">
</el-pagination> </el-pagination>
</el-col> </el-col>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import { getLogs } from '@/api/api' import { getLogs } from '@/api/api'
export default { export default {
data() { data() {
return { return {
page: 1, page: 1,
data:{}, data:{},
filters: { filters: {
column:'', column:'',
keyword:'', keyword:'',
status:-1 status:-1
}, },
optionStatus:[ optionStatus:[
{ {
value: -1, value: -1,
label: '全部' label: '全部'
}, },
{ {
value: 0, value: 0,
label: '成功' label: '成功'
}, { }, {
value: 1, value: 1,
label: '失败' label: '失败'
} }
], ],
options: [{ options: [{
value: 'account', value: 'account',
label: '账号' label: '账号'
}, { }, {
value: 'ip', value: 'ip',
label: 'IP' label: 'IP'
}, { }, {
value: 'action', value: 'action',
label: '动作' label: '动作'
}, { }, {
value: 'remark', value: 'remark',
label: '描述' label: '描述'
}], }],
} }
}, },
created() { created() {
this.init() this.init()
}, },
methods: { methods: {
init() { init() {
let para = { let para = {
page: this.page, page: this.page,
pageSize:this.$store.state.common.pageSize, pageSize:this.$store.state.common.pageSize,
column:this.filters.column, column:this.filters.column,
keyword:this.filters.keyword, keyword:this.filters.keyword,
status:this.filters.status status:this.filters.status
}; };
getLogs(para).then(data => { getLogs(para).then(data => {
this.data = data this.data = data
}) })
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.$store.dispatch('updatePageSize',val); this.$store.dispatch('updatePageSize',val);
this.init(); this.init();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.page = val; this.page = val;
this.init(); this.init();
}, },
} }
} }
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment