<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>
|
<div class="inquire subpage_Div">
|
<el-form
|
ref="queryInfo"
|
:model="queryInfo"
|
:inline="true"
|
>
|
<el-form-item
|
:label="$t('operatManage.BWL.blackListIP')"
|
prop="blackListIP"
|
>
|
<el-input
|
v-model="queryInfo.ip"
|
:placeholder="$t('operatManage.BWL.listIPInfo')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label="$t('operatManage.BWL.interceptionNumber')"
|
prop="visit"
|
>
|
<el-input
|
v-model="queryInfo.visit"
|
:placeholder="$t('operatManage.BWL.interceptionNumber')"
|
/>
|
</el-form-item>
|
<el-form-item style="float:right">
|
<el-button
|
type="info"
|
@click="resetInfo('queryInfo')"
|
icon="el-icon-refresh"
|
size="small"
|
>{{ $t("operatManage.BWL.reset") }}</el-button>
|
</el-form-item>
|
<el-form-item style="float:right">
|
<el-button
|
type="primary"
|
@click="queryBlackInfo()"
|
size="small"
|
icon="el-icon-search"
|
>{{ $t("operatManage.BWL.search") }}
|
</el-button>
|
</el-form-item>
|
<el-form-item style="float:right">
|
<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 style="float:right">
|
<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>
|
</div>
|
<div class="table_box subpage_Div">
|
<el-table
|
:data="BTableData"
|
@selection-change="blackSelectionChange"
|
style="width: 100%"
|
>
|
<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="320"
|
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
|
style="margin-top: 20px"
|
class="pagination_box"
|
>
|
<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>
|
</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"
|
>
|
<el-form-item
|
:label="$t('operatManage.BWL.whiteListIP')"
|
prop="ip"
|
>
|
<el-input
|
v-model="queryInfo.ip"
|
:placeholder="$t('operatManage.BWL.listIPInfo')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label="$t('operatManage.BWL.interceptionNumber')"
|
prop="visit"
|
>
|
<el-input
|
v-model="queryInfo.visit"
|
:placeholder="$t('operatManage.BWL.interceptionNumber')"
|
/>
|
</el-form-item>
|
<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
|
@click="resetForm('queryInfo')"
|
type="info" size="small"
|
><i class="el-icon-delete"></i> {{
|
$t('operatManage.BWL.reset')
|
}}</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>
|
</div>
|
<div class="table_box1 subpage_Div">
|
<el-table
|
:data="WTableData"
|
@selection-change="blackSelectionChange"
|
style="width: 100%"
|
>
|
<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="320"
|
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>
|
</el-table>
|
<div
|
style="margin-top: 20px"
|
class="pagination_box"
|
>
|
<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')"
|
style="overflow: hidden"
|
:visible.sync="InsertFormdialog"
|
width="30%"
|
>
|
<el-form
|
ref="insertform"
|
:model="insertform"
|
>
|
<el-form-item
|
:label-width="formLabelWidth"
|
:label="$t('operatManage.tokentoolObj.ip')"
|
>
|
<el-input
|
v-model="insertform.ip"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label-width="formLabelWidth"
|
:label="$t('operatManage.BWL.PageView')"
|
>
|
<el-input
|
v-model="insertform.visit"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label-width="formLabelWidth"
|
:label="$t('operatManage.BWL.description')"
|
>
|
<el-input
|
v-model="insertform.descr"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</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"
|
width="30%"
|
>
|
<el-form
|
ref="editfrom"
|
:model="editfrom"
|
>
|
<el-form-item
|
:label-width="formLabelWidth"
|
label="IP地址"
|
>
|
<el-input
|
v-model="editfrom.ip"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label-width="formLabelWidth"
|
label="访问次数"
|
>
|
<el-input
|
v-model="editfrom.visit"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label-width="formLabelWidth"
|
label="描述"
|
>
|
<el-input
|
v-model="editfrom.descr"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</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,
|
};
|
},
|
methods: {
|
editFromDataClose() {
|
this.updateFormdialog = false;
|
this.$nextTick(() => {
|
this.editForm = JSON.parse(this.initialForm);
|
});
|
},
|
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.InsertFormdialog = false;
|
this.insertform = {};
|
},
|
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)
|
// " " +
|
// this.add0(h) +
|
// ":" +
|
// this.add0(mm) +
|
// ":" +
|
// this.add0(s)
|
);
|
},
|
//格式化列表
|
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;
|
}
|
},
|
},
|
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: 1%;
|
overflow: auto;
|
.el-input {
|
width: 300px;
|
}
|
.inquire {
|
padding: 10px;
|
margin-top: 20px;
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
}
|
.table_box {
|
padding: 10px;
|
border-radius: 5px;
|
|
|
|
}
|
.table_box1 {
|
padding: 10px;
|
border-radius: 5px;
|
|
|
|
}
|
.text-center {
|
text-align: center;
|
}
|
|
}
|
</style>
|
