404 lines
12 KiB
Vue
404 lines
12 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div class="searchBox whiteBlock" v-if="dialogFormVisible">
|
||
<el-form
|
||
:inline="true"
|
||
size="medium"
|
||
:model="searchForm"
|
||
ref="searchForm"
|
||
>
|
||
<el-form-item :label="'操作名称'" prop="operName">
|
||
<el-input
|
||
v-model="searchForm.operName"
|
||
:placeholder="$t('message.docManage.placeholder')"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="'操作人'" prop="userName">
|
||
<el-input
|
||
v-model="searchForm.userName"
|
||
:placeholder="$t('message.docManage.placeholder')"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="'操作时间'" prop="userName" class="last">
|
||
<el-date-picker
|
||
v-model="daterange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" plain @click="getListData"
|
||
>{{ $t("message.docManage.query") }}
|
||
</el-button>
|
||
<el-button type="warning" plain @click="resetForm">{{
|
||
$t("message.docManage.refresh")
|
||
}}</el-button>
|
||
<el-button type="primary" plain @click="exportFn" v-permission="{key: 'user_export', menuPath: '/project/configManage/operationLog'}">
|
||
<!-- 导出 -->
|
||
{{ $t("message.projectInfo.export") }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="table_wrap whiteBlock" v-if="dialogFormVisible">
|
||
<el-table class="tables" style="height: calc(100% - 80px);" :data="tableData">
|
||
<el-table-column
|
||
type="index"
|
||
width="50"
|
||
align="center"
|
||
label="序号"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="operLogTime"
|
||
label="操作时间"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="operDesc"
|
||
label="操作描述"
|
||
align="center"
|
||
></el-table-column>
|
||
<!-- <el-table-column
|
||
prop="operMethod"
|
||
label="操作方法"
|
||
align="center"
|
||
></el-table-column> -->
|
||
<el-table-column
|
||
prop="operModul"
|
||
label="功能模块"
|
||
align="center"
|
||
></el-table-column>
|
||
<!-- <el-table-column
|
||
prop="operRequParam"
|
||
label="请求参数"
|
||
align="center"
|
||
></el-table-column> -->
|
||
<el-table-column
|
||
prop="operIp"
|
||
label="操作IP"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="operUri"
|
||
label="请求URI"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="realName"
|
||
label="操作员姓名"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column label="操作" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="tableBtns">
|
||
<div class="operationText last" @click="deilBtn(scope.row)">
|
||
<i
|
||
class="el-icon-tickets"
|
||
style="color: #8dacfa; font-size: 16px; margin-right: 2px"
|
||
></i>
|
||
<span>查看详情</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
style="margin-top: 40px;"
|
||
class="pagerBox"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
<div class="whiteBlock" style="height: 100%" v-else>
|
||
<el-page-header
|
||
@back="goBack"
|
||
:content="dialogTitle"
|
||
class="backText"
|
||
></el-page-header>
|
||
<el-form class="form-box">
|
||
<el-form-item label="操作时间：" :label-width="formLabelWidthDetail">
|
||
{{ detailRow.operCreateTime }}
|
||
</el-form-item>
|
||
<el-form-item label="操作描述：" :label-width="formLabelWidthDetail">
|
||
{{ detailRow.operDesc }}
|
||
</el-form-item>
|
||
<el-form-item label="功能模块：" :label-width="formLabelWidthDetail">
|
||
{{ detailRow.operModul }}
|
||
</el-form-item>
|
||
<el-form-item label="操作IP：" :label-width="formLabelWidthDetail">
|
||
{{ detailRow.operIp }}
|
||
</el-form-item>
|
||
<el-form-item label="请求URL：" :label-width="formLabelWidthDetail">
|
||
{{ detailRow.operUri }}
|
||
</el-form-item>
|
||
<el-form-item label="操作员姓名：" :label-width="formLabelWidthDetail">
|
||
{{ detailRow.realName }}
|
||
</el-form-item>
|
||
<el-form-item label="数据变更前：" :label-width="formLabelWidthDetail">
|
||
{{ detailRow.dataChangeBefore }}
|
||
</el-form-item>
|
||
<el-form-item label="数据变更后：" :label-width="formLabelWidthDetail">
|
||
{{ detailRow.dataChangeAfter }}
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getOperationLogListApi } from "@/assets/js/api/company/project";
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
searchForm: {
|
||
operName: "",
|
||
startTime: "",
|
||
endTime: "",
|
||
userName: "",
|
||
},
|
||
total: 0,
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
daterange: [],
|
||
dialogFormVisible: true,
|
||
dialogTitle: "",
|
||
detailRow: {},
|
||
formLabelWidthDetail: "110px",
|
||
};
|
||
},
|
||
mounted() {
|
||
this.selectNowDate();
|
||
this.getListData();
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
this.dialogFormVisible = true;
|
||
},
|
||
deilBtn(val) {
|
||
console.log("!!!!!!!!!!!!!!!!!!", val);
|
||
this.dialogFormVisible = false;
|
||
// 详细
|
||
this.dialogTitle = "详细";
|
||
this.detailRow = val;
|
||
},
|
||
exportFn() {
|
||
let requestData = {
|
||
sn: this.$store.state.projectSn,
|
||
// sn: this.$store.state.userInfo.sn || this.$store.state.userInfo.headquartersSn,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
// projectSn: this.$store.state.projectSn,
|
||
userName: this.searchForm.userName,
|
||
// operModul: this.searchForm.operModul,
|
||
};
|
||
if (this.$store.state.userInfo.accountType == 6) {
|
||
requestData.operUserId = this.$store.state.userInfo.userId;
|
||
}
|
||
if (this.daterange) {
|
||
requestData.startTime = this.daterange[0];
|
||
requestData.endTime = this.daterange[1];
|
||
} else {
|
||
requestData.startTime = "";
|
||
requestData.endTime = "";
|
||
}
|
||
fetch(this.$http.defaults.baseURL + "xmgl/operationLog/exportXls", {
|
||
method: "post",
|
||
headers: {
|
||
Authorization: this.$store.state.userInfo.token,
|
||
"Content-Type": "application/json", // 设置请求头的内容类型为JSON
|
||
},
|
||
body: JSON.stringify(requestData), // 将data对象转换为JSON字符串并作为请求体发送
|
||
})
|
||
.then((response) => {
|
||
// 处理响应
|
||
if (!response.ok) {
|
||
throw new Error("下载失败");
|
||
}
|
||
return response.blob();
|
||
})
|
||
.then((blob) => {
|
||
// 创建一个下载链接
|
||
const url = window.URL.createObjectURL(blob);
|
||
// 创建一个<a>元素
|
||
const link = document.createElement("a");
|
||
link.href = url;
|
||
link.download = "安全日志.xlsx"; // 指定下载文件的文件名
|
||
// 模拟点击下载链接
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
// 释放URL对象
|
||
window.URL.revokeObjectURL(url);
|
||
// 处理导出的文件
|
||
// 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
|
||
console.log("下载", link, url);
|
||
})
|
||
.catch((error) => {
|
||
// 处理错误
|
||
console.error(error);
|
||
});
|
||
},
|
||
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
|
||
selectNowDate() {
|
||
var date = new Date(),
|
||
year = date.getFullYear(),
|
||
month = date.getMonth() + 1,
|
||
day = date.getDate(),
|
||
hours = date.getHours(), //获取当前小时数(0-23)
|
||
minutes = date.getMinutes(), //获取当前分钟数(0-59)
|
||
seconds = date.getSeconds()
|
||
month >= 1 && month <= 9 ? (month = '0' + month) : ''
|
||
day >= 0 && day <= 9 ? (day = '0' + day) : ''
|
||
hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
|
||
minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
|
||
seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
|
||
// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
|
||
var timer = year + '-' + month + '-' + day
|
||
this.daterange = [timer, timer]
|
||
console.log(timer)
|
||
// return timer;
|
||
},
|
||
resetForm() {
|
||
this.$refs["searchForm"].resetFields();
|
||
// this.daterange = [];
|
||
this.selectNowDate();
|
||
this.getListData();
|
||
},
|
||
//获取列表数据
|
||
getListData() {
|
||
let data = this.searchForm;
|
||
data.pageNo = this.pageNo;
|
||
data.pageSize = this.pageSize;
|
||
// data.sn = this.$store.state.userInfo.sn ||
|
||
// this.$store.state.userInfo.headquartersSn;
|
||
// data.projectSn = this.$store.state.projectSn;
|
||
data.sn = this.$store.state.projectSn
|
||
if (this.daterange) {
|
||
data.startTime = this.daterange[0];
|
||
data.endTime = this.daterange[1];
|
||
} else {
|
||
data.startTime = "";
|
||
data.endTime = "";
|
||
}
|
||
getOperationLogListApi(data).then((res) => {
|
||
this.tableData = res.result.records;
|
||
this.total = res.result.total;
|
||
});
|
||
},
|
||
//查看条数
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.getListData();
|
||
},
|
||
//查看页
|
||
handleCurrentChange(val) {
|
||
this.pageNo = val;
|
||
this.getListData();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.form-box {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
max-height: calc(100% - 50px);
|
||
overflow-y:scroll;
|
||
|
||
/deep/.el-form-item {
|
||
width: 50%;
|
||
padding-right: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// /deep/.el-col-12{
|
||
// padding-left: 20px;
|
||
// }
|
||
/deep/.el-input__inner {
|
||
width: 100%;
|
||
}
|
||
|
||
/deep/.el-select {
|
||
width: 100%;
|
||
}
|
||
|
||
/deep/.el-cascader {
|
||
width: 100%;
|
||
}
|
||
}
|
||
// 美化滚动条
|
||
.form-box::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 5px;
|
||
}
|
||
|
||
.form-box::-webkit-scrollbar-track {
|
||
width: 6px;
|
||
background: rgba(#101F1C, 0.1);
|
||
-webkit-border-radius: 2em;
|
||
-moz-border-radius: 2em;
|
||
border-radius: 2em;
|
||
}
|
||
|
||
.form-box::-webkit-scrollbar-thumb {
|
||
background-color: rgba(144,147,153,.5);
|
||
background-clip: padding-box;
|
||
min-height: 28px;
|
||
-webkit-border-radius: 2em;
|
||
-moz-border-radius: 2em;
|
||
border-radius: 2em;
|
||
transition: background-color .3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-box::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(144,147,153,.3);
|
||
}
|
||
|
||
.tables {
|
||
min-height: 0;
|
||
max-height: calc(100% - 56px);
|
||
}
|
||
.table_wrap {
|
||
position: relative;
|
||
}
|
||
.pagerBox {
|
||
margin-top: 0;
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.backText {
|
||
padding: 8px 0;
|
||
padding-left: 10px;
|
||
|
||
/deep/.el-page-header__content {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.dark {
|
||
/deep/.el-page-header__content {
|
||
color: #fff;
|
||
}
|
||
|
||
/deep/ .print-btn {
|
||
background: none;
|
||
color: #262d47;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style> |