<template>
|
<div class="logLog_box">
|
<My-bread :list="[
|
`${$t('operatManage.operatManage')}`,
|
`${$t('operatManage.blackwhiteList')}`,
|
]"></My-bread>
|
<el-divider />
|
<el-tabs
|
v-model="activeName"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane
|
:label="$t('operatManage.BWL.blackList')"
|
name="first"
|
>
|
<div
|
class="inquire subpage_Div"
|
ref="container"
|
>
|
<el-form
|
ref="queryInfo"
|
:model="queryInfo"
|
:inline="true"
|
>
|
<div class="flex_box">
|
<div style="margin-right: auto">
|
<el-form-item
|
:label="$t('operatManage.BWL.blackListIP')"
|
prop="blackListIP"
|
>
|
<el-input
|
size="small"
|
style="width: 200px"
|
v-model="queryInfo.ip"
|
:placeholder="$t('operatManage.BWL.blackListIPHolder')"
|
>
|
<i
|
slot="suffix"
|
class="el-icon-search"
|
@click="queryBlackInfo"
|
></i>
|
</el-input>
|
</el-form-item>
|
<!-- <el-form-item-->
|
<!-- :label="$t('operatManage.BWL.interceptionNumber')"-->
|
<!-- prop="visit"-->
|
<!-- >-->
|
<!-- <el-input-->
|
<!-- size="small"-->
|
<!-- style="width: 200px"-->
|
<!-- v-model="queryInfo.visit"-->
|
<!-- :placeholder="$t('operatManage.BWL.interceptionNumber')"-->
|
<!-- />-->
|
<!-- </el-form-item>-->
|
</div>
|
<div>
|
<!-- <el-form-item>-->
|
<!-- <el-button-->
|
<!-- type="primary"-->
|
<!-- @click="queryBlackInfo()"-->
|
<!-- size="small"-->
|
<!-- icon="el-icon-search"-->
|
<!-- >{{ $t("operatManage.BWL.search") }}-->
|
<!-- </el-button>-->
|
<!-- </el-form-item>-->
|
<el-form-item>
|
<el-button
|
icon="el-icon-edit"
|
v-if="menuStatus.insert"
|
type="success"
|
size="small"
|
@click="showInsertdialog(1)"
|
>{{ $t("common.append") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
icon="el-icon-delete"
|
v-if="menuStatus.delete"
|
type="danger"
|
size="small"
|
@click="delBWList"
|
>{{ $t("common.delete") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="info"
|
@click="resetInfo('queryInfo')"
|
icon="el-icon-refresh"
|
size="small"
|
>{{ $t("operatManage.BWL.reset") }}</el-button>
|
</el-form-item>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
<div
|
class="table_box subpage_Div"
|
:style="styleVar"
|
>
|
<el-table
|
:data="BTableData"
|
border
|
@selection-change="blackSelectionChange"
|
style="width: 100%"
|
height="calc(100% - 45px)"
|
>
|
<el-table-column
|
type="selection"
|
width="55"
|
/>
|
<el-table-column
|
align="center"
|
type="index"
|
:label="$t('operatManage.BWL.index')"
|
width="70px"
|
/>
|
<el-table-column
|
prop="ip"
|
:label="$t('operatManage.BWL.blackListIP')"
|
/>
|
<el-table-column
|
prop="visit"
|
:label="$t('operatManage.BWL.PageView')"
|
/>
|
<el-table-column
|
prop="descr"
|
:label="$t('operatManage.BWL.description')"
|
/>
|
<el-table-column
|
prop="createName"
|
:label="$t('operatManage.BWL.creator')"
|
/>
|
<el-table-column
|
:formatter="formatData"
|
prop="createTime"
|
:label="$t('operatManage.BWL.creationTime')"
|
/>
|
<el-table-column
|
prop="updateName"
|
:label="$t('operatManage.BWL.update')"
|
/>
|
<el-table-column
|
:formatter="formatData"
|
prop="updateTime"
|
:label="$t('operatManage.BWL.UpdateTime')"
|
/>
|
<el-table-column
|
v-if="menuStatus.update"
|
:label="$t('operatManage.tokentoolObj.operation')"
|
width="120"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-button
|
@click="handleEdit(scope.row)"
|
type="warning"
|
plain
|
size="small"
|
>{{ $t("common.update") }}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div
|
class="pagination_box"
|
style="margin-top: 10px"
|
>
|
<el-pagination
|
@size-change="BhandleSizeChange"
|
@current-change="BhandleCurrentChange"
|
:current-page="BListData.pageIndex"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="BListData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="Bcount"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane
|
:label="$t('operatManage.BWL.whiteList')"
|
name="second"
|
>
|
<div class="inquire subpage_Div">
|
<el-form
|
ref="queryInfo"
|
:model="queryInfo"
|
:inline="true"
|
>
|
<div class="flex_box">
|
<div style="margin-right: auto">
|
<el-form-item
|
:label="$t('operatManage.BWL.whiteListIP')"
|
prop="ip"
|
>
|
<el-input
|
size="small"
|
style="width: 200px"
|
v-model="queryInfo.ip"
|
:placeholder="$t('operatManage.BWL.whiteListIPHolder')"
|
>
|
<i
|
slot="suffix"
|
class="el-icon-search"
|
@click="queryWhiteInfo"
|
></i>
|
</el-input>
|
</el-form-item>
|
<!-- <el-form-item-->
|
<!-- :label="$t('operatManage.BWL.interceptionNumber')"-->
|
<!-- prop="visit"-->
|
<!-- >-->
|
<!-- <el-input-->
|
<!-- size="small"-->
|
<!-- style="width: 200px"-->
|
<!-- v-model="queryInfo.visit"-->
|
<!-- :placeholder="$t('operatManage.BWL.interceptionNumber')"-->
|
<!-- />-->
|
<!-- </el-form-item>-->
|
</div>
|
<div>
|
<!-- <el-form-item>-->
|
<!-- <el-button size="small" type="primary" @click="queryWhiteInfo"-->
|
<!-- ><i class="el-icon-search"></i> {{-->
|
<!-- $t("operatManage.BWL.search")-->
|
<!-- }}</el-button-->
|
<!-- >-->
|
<!-- </el-form-item>-->
|
<el-form-item>
|
<el-button
|
type="success"
|
size="small"
|
icon="el-icon-edit"
|
v-if="menuStatus.insert"
|
@click="showInsertdialog(2)"
|
>{{ $t("common.append") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="danger"
|
size="small"
|
icon="el-icon-delete"
|
v-if="menuStatus.delete"
|
@click="delBWList"
|
>{{ $t("common.delete") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
@click="resetForm('queryInfo')"
|
type="info"
|
size="small"
|
><i class="el-icon-delete"></i> {{
|
$t("operatManage.BWL.reset")
|
}}</el-button>
|
</el-form-item>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
<div
|
class="table_box subpage_Div"
|
:style="styleVar"
|
>
|
<el-table
|
:data="WTableData"
|
border
|
@selection-change="blackSelectionChange"
|
style="width: 100%"
|
height="calc(100% - 45px)"
|
>
|
<el-table-column
|
type="selection"
|
width="55"
|
/>
|
<el-table-column
|
align="center"
|
type="index"
|
:label="$t('operatManage.BWL.index')"
|
width="70px"
|
/>
|
<el-table-column
|
prop="ip"
|
:label="$t('operatManage.BWL.whiteListIP')"
|
/>
|
<el-table-column
|
prop="visit"
|
:label="$t('operatManage.BWL.PageView')"
|
/>
|
<el-table-column
|
prop="descr"
|
:label="$t('operatManage.BWL.description')"
|
/>
|
<el-table-column
|
prop="createName"
|
:label="$t('operatManage.BWL.creator')"
|
/>
|
<el-table-column
|
:formatter="formatData"
|
prop="createTime"
|
:label="$t('operatManage.BWL.creationTime')"
|
/>
|
<el-table-column
|
prop="updateName"
|
:label="$t('operatManage.BWL.update')"
|
/>
|
<el-table-column
|
:formatter="formatData"
|
prop="updateTime"
|
:label="$t('operatManage.BWL.UpdateTime')"
|
/>
|
<el-table-column
|
v-if="menuStatus.update"
|
:label="$t('operatManage.tokentoolObj.operation')"
|
width="120"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-button
|
@click="handleEdit(scope.row)"
|
type="warning"
|
plain
|
size="small"
|
>{{ $t("common.update") }}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div
|
class="pagination_box"
|
style="margin-top: 10px"
|
>
|
<el-pagination
|
@size-change="WhandleSizeChange"
|
@current-change="WhandleCurrentChange"
|
:current-page="WListData.pageIndex"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="WListData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="Wcount"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<el-dialog
|
:title="$t('common.append')"
|
:visible.sync="InsertFormdialog"
|
:before-close="handleClose"
|
>
|
|
<el-form
|
ref="insertform"
|
:model="insertform"
|
label-position="top"
|
>
|
<el-form-item
|
:label-width="formLabelWidth"
|
:label="$t('operatManage.tokentoolObj.ip')"
|
>
|
<el-input
|
v-model="insertform.ip"
|
:placeholder="$t('common.pleaseInput')"
|
style="width:85%"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label-width="formLabelWidth"
|
:label="$t('operatManage.BWL.PageView')"
|
>
|
<el-input
|
v-model="insertform.visit"
|
:placeholder="$t('common.pleaseInput')"
|
style="width:85%"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label-width="formLabelWidth"
|
:label="$t('operatManage.BWL.description')"
|
>
|
<el-input
|
v-model="insertform.descr"
|
:placeholder="$t('common.pleaseInput')"
|
style="width:85%"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<div
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button
|
size="small"
|
@click="insertFromDataClose"
|
>{{
|
$t("common.close")
|
}}</el-button>
|
<el-button
|
@click="insertFromData"
|
type="primary"
|
size="small"
|
>{{
|
$t("common.confirm")
|
}}</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog
|
:title="$t('common.update')"
|
style="overflow: hidden"
|
:visible.sync="updateFormdialog"
|
:before-close="handleCloseEdit"
|
>
|
<el-form
|
ref="editfrom"
|
:model="editfrom"
|
label-position="top"
|
>
|
<el-form-item
|
:label-width="formLabelWidth"
|
label="IP地址"
|
>
|
<el-input
|
v-model="editfrom.ip"
|
:placeholder="$t('common.pleaseInput')"
|
style="width:85%"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label-width="formLabelWidth"
|
label="访问次数"
|
>
|
<el-input
|
v-model="editfrom.visit"
|
:placeholder="$t('common.pleaseInput')"
|
style="width:85%"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label-width="formLabelWidth"
|
label="描述"
|
>
|
<el-input
|
v-model="editfrom.descr"
|
:placeholder="$t('common.pleaseInput')"
|
style="width:85%"
|
/>
|
</el-form-item>
|
</el-form>
|
<div
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button
|
size="small"
|
@click="editFromDataClose"
|
>{{
|
$t("common.close")
|
}}</el-button>
|
<el-button
|
@click="editFromData"
|
type="primary"
|
size="small"
|
>{{
|
$t("common.confirm")
|
}}</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
import {
|
blacklistSelectByPageAndCount,
|
blacklistAppend,
|
deletelacklist,
|
updateblacklist,
|
blacklistSelectCount,
|
} from "../../api/api";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
|
data() {
|
return {
|
menuStatus: {
|
delete: false,
|
insert: false,
|
update: false,
|
},
|
updateFormdialog: false,
|
multipleSelection: [],
|
formLabelWidth: "100px",
|
insertform: {
|
type: null,
|
},
|
editfrom: {},
|
InsertFormdialog: false,
|
activeName: "first",
|
currentPage: 1,
|
queryInfo: {
|
ip: "",
|
visit: "",
|
},
|
initialForm: "",
|
BTableData: [],
|
WTableData: [],
|
BListData: {
|
pageIndex: 1,
|
pageSize: 10,
|
type: 1,
|
},
|
WListData: {
|
pageIndex: 1,
|
pageSize: 10,
|
type: 2,
|
},
|
Wcount: 0,
|
Bcount: 0,
|
tableHeight: 0,
|
timer: 0,
|
styleVar: {
|
height: "calc(100% - 109px)",
|
},
|
};
|
},
|
beforeDestroy() {
|
this.timer && clearTimeout(this.timer);
|
window.removeEventListener("resize", this.onResize);
|
},
|
methods: {
|
onResize() {
|
this.timer && clearTimeout(this.timer);
|
this.timer = setTimeout(() => {
|
this.calHeight();
|
}, 500);
|
},
|
calHeight() {
|
this.$nextTick(() => {
|
const rect = this.$refs.container.getBoundingClientRect();
|
this.tableHeight = `${rect.height + 40}px`;
|
this.styleVar["height"] = `calc(100% - ${rect.height + 0}px)`;
|
});
|
},
|
editFromDataClose() {
|
this.$confirm("关闭后无法保存，是否关闭?")
|
.then((_) => {
|
this.updateFormdialog = false;
|
this.$nextTick(() => {
|
this.editForm = JSON.parse(this.initialForm);
|
});
|
this.BGetList();
|
this.WGetList();
|
})
|
.catch((_) => { });
|
},
|
queryBlackInfo() {
|
let searchData = {
|
ip: this.queryInfo.ip.trim(),
|
visit: this.queryInfo.visit,
|
pageIndex: this.BListData.pageIndex,
|
pageSize: this.BListData.pageSize,
|
type: this.BListData.type,
|
};
|
blacklistSelectByPageAndCount(searchData).then((res) => {
|
if (res.code == 200) {
|
this.BTableData = res.result;
|
this.Bcount = res.count;
|
} else {
|
console.log("查询接口报错");
|
this.$notify.error({
|
title: res.code,
|
message: res.result,
|
});
|
}
|
});
|
},
|
queryWhiteInfo() {
|
let searchData = {
|
ip: this.queryInfo.ip.trim(),
|
visit: this.queryInfo.visit,
|
pageIndex: this.WListData.pageIndex,
|
pageSize: this.WListData.pageSize,
|
type: this.WListData.type,
|
};
|
blacklistSelectByPageAndCount(searchData).then((res) => {
|
if (res.code == 200) {
|
this.WTableData = res.result;
|
this.Wcount = res.count;
|
} else {
|
console.log("查询接口报错");
|
this.$notify.error({
|
title: res.code,
|
message: res.result,
|
});
|
}
|
});
|
},
|
resetInfo(formName) {
|
this.$refs[formName].resetFields();
|
},
|
async editFromData() {
|
var data = await updateblacklist(this.editfrom);
|
if (data.code == 200) {
|
this.updateFormdialog = false;
|
this.editfrom = {};
|
this.$message({
|
message: "修改成功！",
|
type: "success",
|
});
|
this.BGetList();
|
this.WGetList();
|
} else {
|
this.$message({
|
message: "修改失败！",
|
type: "warning",
|
});
|
}
|
},
|
handleEdit(row) {
|
this.initialForm = JSON.stringify(row);
|
this.editfrom = JSON.parse(JSON.stringify(row));
|
this.updateFormdialog = true;
|
},
|
|
async delBWList() {
|
var std = [];
|
for (var i in this.multipleSelection) {
|
std.push(this.multipleSelection[i].id);
|
}
|
//deletes
|
this.$confirm("此操作将永久删除该名单, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(async () => {
|
const data = await deletelacklist({ ids: std.toString() });
|
if (data.code == 200) {
|
this.InsertFormdialog = false;
|
this.$message({
|
message: "删除成功！",
|
type: "success",
|
});
|
this.BGetList();
|
this.WGetList();
|
} else {
|
this.$message({
|
message: "删除失败！",
|
type: "warning",
|
});
|
}
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
// const data = await deletelacklist({ ids: std.toString() });
|
// if (data.code == 200) {
|
// this.$message({
|
// message: "删除成功！",
|
// type: "success",
|
// });
|
// this.BGetList();
|
// this.WGetList();
|
// } else {
|
// this.$message({
|
// message: "删除失败！",
|
// type: "warning",
|
// });
|
// }
|
},
|
blackSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
showInsertdialog(res) {
|
this.insertform.type = res;
|
this.InsertFormdialog = true;
|
},
|
insertFromDataClose() {
|
this.$confirm("关闭后无法保存，是否关闭?")
|
.then((_) => {
|
this.InsertFormdialog = false;
|
this.insertform = {};
|
})
|
.catch((_) => { });
|
},
|
async insertFromData() {
|
var count = await blacklistSelectCount(this.insertform);
|
if (parseInt(count.result) != 0) return;
|
|
var data = await blacklistAppend(this.insertform);
|
if (data.code == 200) {
|
this.InsertFormdialog = false;
|
this.insertform = {};
|
this.$message({
|
message: "添加成功！",
|
type: "success",
|
});
|
this.BGetList();
|
this.WGetList();
|
} else {
|
this.$message({
|
message: "添加失败！",
|
type: "warning",
|
});
|
}
|
},
|
//格式化时间
|
add0(m) {
|
return m < 10 ? "0" + m : m;
|
},
|
//格式化时间
|
format(shijianchuo) {
|
//shijianchuo是整数，否则要parseInt转换
|
var time = new Date(shijianchuo);
|
var y = time.getFullYear();
|
var m = time.getMonth() + 1;
|
var d = time.getDate();
|
var h = time.getHours();
|
var mm = time.getMinutes();
|
var s = time.getSeconds();
|
return (
|
y + "-" + this.add0(m) + "-" + this.add0(d)
|
|
);
|
},
|
//格式化列表
|
formatData(row, column) {
|
let data = row[column.property];
|
if (data == null) {
|
return data;
|
}
|
return this.format(data);
|
},
|
handleClick(tab, event) {
|
// console.log(tab, event);
|
},
|
WhandleSizeChange(val) {
|
this.WListData.pageSize = val;
|
this.getList();
|
},
|
WhandleCurrentChange(val) {
|
this.WListData.pageIndex = val;
|
this.queryBlackInfo();
|
},
|
BhandleSizeChange(val) {
|
this.BListData.pageSize = val;
|
this.queryBlackInfo();
|
},
|
BhandleCurrentChange(val) {
|
this.BListData.pageIndex = val;
|
this.getList();
|
},
|
onSubmit(formName) {
|
this.$refs[formName].resetFields();
|
},
|
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
async WGetList() {
|
const data = await blacklistSelectByPageAndCount(this.WListData);
|
|
if (data.code != 200) {
|
return this.$message.error("列表调用失败");
|
}
|
this.WTableData = data.result;
|
this.Wcount = data.count;
|
},
|
async BGetList() {
|
const data = await blacklistSelectByPageAndCount(this.BListData);
|
if (data.code != 200) {
|
return this.$message.error("列表调用失败");
|
}
|
|
this.BTableData = data.result;
|
this.Bcount = data.count;
|
},
|
showPermsMenu(res) {
|
switch (res.tag) {
|
case "/delete":
|
this.menuStatus.delete = true;
|
break;
|
case "/insert":
|
this.menuStatus.insert = true;
|
break;
|
case "/update":
|
this.menuStatus.update = true;
|
break;
|
}
|
},
|
handleClose() {
|
this.$confirm("关闭后无法保存，是否关闭?")
|
.then((_) => {
|
this.InsertFormdialog = false
|
})
|
.catch((_) => { });
|
},
|
handleCloseEdit() {
|
this.$confirm("关闭后无法保存，是否关闭?")
|
.then((_) => {
|
this.updateFormdialog = false
|
})
|
.catch((_) => { });
|
},
|
},
|
mounted() {
|
window.addEventListener("resize", this.onResize);
|
this.calHeight();
|
},
|
created() {
|
var val = this.$store.state.currentPerms;
|
var permsEntity = this.$store.state.permsEntity;
|
for (var i = 0; i < permsEntity.length; i++) {
|
if (permsEntity[i].perms == val) {
|
this.showPermsMenu(permsEntity[i]);
|
}
|
}
|
this.BGetList();
|
this.WGetList();
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.logLog_box {
|
height: 98%;
|
width: 98%;
|
padding: 0.5% 1%;
|
.el-input {
|
width: 300px;
|
}
|
.inquire {
|
padding: 0 8px;
|
//margin-top: 20px;
|
|
border-radius: 5px;
|
|
//margin-bottom: 20px;
|
.el-form-item {
|
margin: 5px;
|
}
|
}
|
.el-tabs {
|
//height: calc(100% - 70px);
|
height: calc(100% - 30px);
|
}
|
/deep/ .el-tabs__content {
|
height: calc(100% - 54px);
|
//height: calc(100% - 49px);
|
}
|
/deep/ .el-tab-pane {
|
height: 100%;
|
}
|
.text-center {
|
text-align: center;
|
}
|
}
|
</style>
|
