256 lines
7.1 KiB
JavaScript
256 lines
7.1 KiB
JavaScript
|
//组件
|
|||
|
|
var Logcomponent = {
|
|||
|
|
template: `
|
|||
|
|
<div>
|
|||
|
|
<div id="" style="display: inline-block;width: 100%;">
|
|||
|
|
<div style="float: left; width: 20%;">
|
|||
|
|
<!-- <el-input v-model="input" placeholder="请输入用户" clearable @change="input_change"></el-input>-->
|
|||
|
|
<!-- <el-autocomplete v-model="input" :fetch-suggestions="querySearch" placeholder="请输入内容" clearable @change="input_change" style="width: 100%;"></el-autocomplete>-->
|
|||
|
|
<el-select v-model="input" filterable multiple placeholder="请选择用户" clearable @change="input_change" style="width: 100%;">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div style="float: left;">
|
|||
|
|
<el-button id ="bt_search" plain type="primary" icon="el-icon-search" @click="getLogsByName">搜索</el-button>
|
|||
|
|
<el-button id ="bt_search" plain type="primary" icon="el-icon-document" @click="exportLogs">导出</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="span">
|
|||
|
|
<el-table
|
|||
|
|
:data="tableData"
|
|||
|
|
style="width: 100%"
|
|||
|
|
:height="tHeight"
|
|||
|
|
:cell-style="{background:'#fff'}"
|
|||
|
|
border
|
|||
|
|
>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="username"
|
|||
|
|
label="用户名"
|
|||
|
|
:width="flexColumnWidth('username', tableData,3)">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="operation_time"
|
|||
|
|
label="操作时间"
|
|||
|
|
width="140">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="operation"
|
|||
|
|
label="操作记录"
|
|||
|
|
:width="flexColumnWidth('operation', tableData,4)"
|
|||
|
|
class-name="left-aligned-column">
|
|||
|
|
</el-table-column>
|
|||
|
|
<!-- <el-table-column
|
|||
|
|
label="操作"
|
|||
|
|
width="50">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button @click="delLogs(scope.row)" type="text" size="medium" >删除</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table> -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="block">
|
|||
|
|
<span class="demonstration"></span>
|
|||
|
|
<el-pagination
|
|||
|
|
@size-change="handleSizeChange"
|
|||
|
|
@current-change="handleCurrentChange"
|
|||
|
|
:current-page="currentPage"
|
|||
|
|
:page-sizes="[50,100, 200, 300]"
|
|||
|
|
:page-size="pagesize"
|
|||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|||
|
|
:total="recordTotal">
|
|||
|
|
</el-pagination>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
// 获取当前屏幕的分辨率
|
|||
|
|
let screenW = window.screen.width;
|
|||
|
|
let screenH = window.innerHeight;
|
|||
|
|
console.log("screen width:", screenW);
|
|||
|
|
console.log("screen height:", screenH);
|
|||
|
|
return {
|
|||
|
|
tHeight: screenH - 40 - 232,
|
|||
|
|
tableData: [],
|
|||
|
|
input: '', //搜索框
|
|||
|
|
currentPage: 1, //当前页码
|
|||
|
|
pagesize: 50, //每页条数
|
|||
|
|
recordTotal: 0,//记录总数
|
|||
|
|
options: [], //搜索框下拉选项
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getLogs();
|
|||
|
|
this.getUserNames();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//获取日志
|
|||
|
|
getLogs(input = '') {
|
|||
|
|
var _this = this;
|
|||
|
|
var objs;
|
|||
|
|
axios.post('/pp/get_operation_log', {
|
|||
|
|
opuser: localStorage.getItem("online_user"),
|
|||
|
|
opuser_uuid: localStorage.getItem("uuid"),
|
|||
|
|
username: input,
|
|||
|
|
index: this.$data.currentPage,
|
|||
|
|
count: this.$data.pagesize
|
|||
|
|
}).then(function (response) {
|
|||
|
|
console.log(response.data);
|
|||
|
|
objs = response.data.data;
|
|||
|
|
rcnt = response.data.total;
|
|||
|
|
_this.$data.tableData = objs;
|
|||
|
|
_this.$data.recordTotal = rcnt;
|
|||
|
|
}).catch(function (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getLogsByName() {
|
|||
|
|
// console.log("getLogsByName");
|
|||
|
|
// this.getLogs(this.$data.input);
|
|||
|
|
let str = '('
|
|||
|
|
for (var i = 0; i < this.$data.input.length; i++) {
|
|||
|
|
str += "'" + this.$data.input[i] + "',"
|
|||
|
|
}
|
|||
|
|
str = str.substring(0, str.length - 1)
|
|||
|
|
str += ')'
|
|||
|
|
if (str == '()' || str == ')') {
|
|||
|
|
str = ''
|
|||
|
|
}
|
|||
|
|
console.log(str);
|
|||
|
|
this.getLogs(str);
|
|||
|
|
},
|
|||
|
|
//获取输入联想用户名
|
|||
|
|
getUserNames() {
|
|||
|
|
var _this = this;
|
|||
|
|
axios.post('/pp/get_operation_log_user', {
|
|||
|
|
opuser: localStorage.getItem("online_user"),
|
|||
|
|
opuser_uuid: localStorage.getItem("uuid"),
|
|||
|
|
}).then(function (response) {
|
|||
|
|
console.log(response.data.data);
|
|||
|
|
var objs = response.data.data;
|
|||
|
|
for (var i = 0; i < objs.length; i++) {
|
|||
|
|
_this.$data.options.push({ value: objs[i] });
|
|||
|
|
}
|
|||
|
|
}).catch(function (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取建议列表的方法
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
// 过滤匹配的选项
|
|||
|
|
const results = queryString ? this.options.filter(option =>
|
|||
|
|
option.value.toLowerCase().includes(queryString.toLowerCase())
|
|||
|
|
) : this.options;
|
|||
|
|
// 调用回调函数返回结果
|
|||
|
|
cb(results || []);
|
|||
|
|
},
|
|||
|
|
//删除日志
|
|||
|
|
delLogs(row) {
|
|||
|
|
var _this = this;
|
|||
|
|
axios.post('/pp/del_operation_log', {
|
|||
|
|
opuser: localStorage.getItem("online_user"),
|
|||
|
|
opuser_uuid: localStorage.getItem("uuid"),
|
|||
|
|
ID: row.id
|
|||
|
|
}).then(function (response) {
|
|||
|
|
console.log(response.data);
|
|||
|
|
//刷新页面
|
|||
|
|
_this.getLogs();
|
|||
|
|
}).catch(function (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
input_change() {
|
|||
|
|
console.log("input_change");
|
|||
|
|
this.getLogs();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
//分页
|
|||
|
|
//每页条数改变时触发
|
|||
|
|
handleSizeChange(val) {
|
|||
|
|
console.log(`每页 ${val} 条`);
|
|||
|
|
this.pagesize = val;
|
|||
|
|
this.getLogs(this.$data.input);
|
|||
|
|
},
|
|||
|
|
//当前页码改变时触发
|
|||
|
|
handleCurrentChange(val) {
|
|||
|
|
console.log(`当前页: ${val}`);
|
|||
|
|
this.currentPage = val;
|
|||
|
|
this.getLogs(this.$data.input);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 根据内容设置列表宽度
|
|||
|
|
flexColumnWidth(str, arr1, fontNum = 4, flag = 'max') {
|
|||
|
|
return window.flexColumnWidth(str, arr1, fontNum, flag);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//导出日志
|
|||
|
|
exportLogs() {
|
|||
|
|
var _this = this;
|
|||
|
|
var _this = this;
|
|||
|
|
let str = '('
|
|||
|
|
for (var i = 0; i < this.$data.input.length; i++) {
|
|||
|
|
str += "'" + this.$data.input[i] + "',"
|
|||
|
|
}
|
|||
|
|
str = str.substring(0, str.length - 1)
|
|||
|
|
str += ')'
|
|||
|
|
if (str == '()' || str == ')') {
|
|||
|
|
str = ''
|
|||
|
|
}
|
|||
|
|
axios.post('/pp/export_operation_log', {
|
|||
|
|
opuser: localStorage.getItem("online_user"),
|
|||
|
|
opuser_uuid: localStorage.getItem("uuid"),
|
|||
|
|
username: str,
|
|||
|
|
}).then(function (response) {
|
|||
|
|
|
|||
|
|
var date = new Date();
|
|||
|
|
//年 getFullYear()：四位数字返回年份
|
|||
|
|
var year = date.getFullYear() % 2000; //getFullYear()代替getYear()
|
|||
|
|
console.log(year.toString());
|
|||
|
|
//月 getMonth()：0 ~ 11
|
|||
|
|
var month = date.getMonth() + 1;
|
|||
|
|
if (month < 10) {
|
|||
|
|
month = '0' + month
|
|||
|
|
}
|
|||
|
|
//日 getDate()：(1 ~ 31)
|
|||
|
|
var day = date.getDate();
|
|||
|
|
if (day < 10) {
|
|||
|
|
day = '0' + day;
|
|||
|
|
}
|
|||
|
|
//时 getHours()：(0 ~ 23)
|
|||
|
|
var hour = date.getHours();
|
|||
|
|
if (hour < 10) {
|
|||
|
|
hour = '0' + hour;
|
|||
|
|
}
|
|||
|
|
//分 getMinutes()： (0 ~ 59)
|
|||
|
|
var minute = date.getMinutes();
|
|||
|
|
if (minute < 10) {
|
|||
|
|
minute = '0' + minute;
|
|||
|
|
}
|
|||
|
|
//秒 getSeconds()：(0 ~ 59)
|
|||
|
|
var second = date.getSeconds();
|
|||
|
|
if (second < 10) {
|
|||
|
|
second = '0' + second;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var filename = year.toString() + month.toString() + day.toString() + " " + hour.toString() + minute.toString() + second.toString();
|
|||
|
|
filename = "用户日志 " + filename + ".csv"
|
|||
|
|
console.log(response.data);
|
|||
|
|
var fileid = response.data.fileId;
|
|||
|
|
|
|||
|
|
var downUrl = '/pp/download_file' + "?id=" + fileid;
|
|||
|
|
downloadUrl(filename, downUrl);
|
|||
|
|
}).catch(function (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|