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);
|
||
});
|
||
}
|
||
}
|
||
}
|