From 4aac1609c95a097de0e8da843a9ed2f211303d4e Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 27 十月 2022 14:21:37 +0800
Subject: [PATCH] 黑白名单，系统配置，综合展示权限管理添加
---
src/views/maintenance/blackwhiteList.vue | 620 ++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 472 insertions(+), 148 deletions(-)
diff --git a/src/views/maintenance/blackwhiteList.vue b/src/views/maintenance/blackwhiteList.vue
index a706941..65e64f6 100644
--- a/src/views/maintenance/blackwhiteList.vue
+++ b/src/views/maintenance/blackwhiteList.vue
@@ -8,10 +8,7 @@
></My-bread>
<el-divider />
<el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane
- :label="$t('operatManage.BWL.blackList')"
- :name="$t('operatManage.BWL.blackList')"
- >
+ <el-tab-pane :label="$t('operatManage.BWL.blackList')" name="first">
<div class="inquire">
<el-form ref="ruleForm" :model="form" :inline="true">
<el-form-item
@@ -20,7 +17,7 @@
>
<el-input
v-model="form.blackListIP"
- :placeholder="$t('operatManage.BWL.blackListIPInfo')"
+ :placeholder="$t('operatManage.BWL.listIPInfo')"
/>
</el-form-item>
<el-form-item
@@ -62,17 +59,42 @@
:placeholder="$t('operatManage.BWL.interceptionNumber')"
/>
</el-form-item>
+
<el-form-item>
- <el-button @click="onSubmit"
+ <el-button
><i class="el-icon-search"></i> {{
- $t("operatManage.BWL.change")
+ $t('operatManage.BWL.search')
}}</el-button
>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ ><i class="el-icon-delete"></i> {{
+ $t('operatManage.BWL.reset')
+ }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button v-if="menuStatus.insert" @click="showInsertdialog(1)">{{
+ $t('common.append')
+ }}</el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button v-if="menuStatus.delete" @click="delBWList">{{
+ $t('common.delete')
+ }}</el-button>
</el-form-item>
</el-form>
</div>
<div class="table_box">
- <el-table :data="tableData" stripe style="width: 100%" height="99%">
+ <el-table
+ :data="BTableData"
+ stripe
+ @selection-change="blackSelectionChange"
+ style="width: 100%"
+ height="85%"
+ >
+ <el-table-column type="selection" width="55" />
<el-table-column
align="center"
type="index"
@@ -80,68 +102,270 @@
width="70px"
/>
<el-table-column
- align="center"
- prop="username"
- :label="$t('operatManage.BWL.username')"
- />
- <el-table-column
- align="center"
prop="ip"
- :label="$t('operatManage.BWL.ip')"
+ :label="$t('operatManage.BWL.whiteListIP')"
/>
<el-table-column
- align="center"
- prop="IPState"
- :label="$t('operatManage.BWL.IPState')"
+ prop="visit"
+ :label="$t('operatManage.BWL.PageView')"
/>
<el-table-column
- align="center"
- prop="largeModuleName"
- :label="$t('operatManage.BWL.largeModuleName')"
+ prop="descr"
+ :label="$t('operatManage.BWL.description')"
/>
<el-table-column
- align="center"
- prop="smallModuleName"
- :label="$t('operatManage.BWL.smallModuleName')"
+ prop="createName"
+ :label="$t('operatManage.BWL.creator')"
/>
<el-table-column
- align="center"
- prop="resourceName"
- :label="$t('operatManage.BWL.resourceName')"
+ :formatter="formatData"
+ prop="createTime"
+ :label="$t('operatManage.BWL.creationTime')"
/>
<el-table-column
- align="center"
- prop="date"
- :label="$t('operatManage.BWL.date')"
+ prop="updateName"
+ :label="$t('operatManage.BWL.update')"
/>
<el-table-column
- align="center"
- prop="operationType"
- :label="$t('operatManage.BWL.operationType')"
+ :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.$index, scope.row)"
+ type="warning"
+ plain
+ size="small"
+ >{{ $t('common.update') }}</el-button
+ >
+ </template>
+ </el-table-column>
</el-table>
<div style="margin-top: 40px" class="pagination_box">
<el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="currentPage"
+ @size-change="BhandleSizeChange"
+ @current-change="BhandleCurrentChange"
+ :current-page="BListData.pageIndex"
:page-sizes="[10, 20, 30, 40]"
- :page-size="10"
+ :page-size="BListData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
- :total="9"
+ :total="Bcount"
>
</el-pagination>
</div>
</div>
</el-tab-pane>
- <el-tab-pane label="閰嶇疆绠＄悊" name="second">閰嶇疆绠＄悊</el-tab-pane>
+ <el-tab-pane :label="$t('operatManage.BWL.whiteList')" name="second"
+ ><div class="inquire">
+ <el-form ref="ruleForm" :model="form" :inline="true">
+ <el-form-item
+ :label="$t('operatManage.BWL.whiteListIP')"
+ prop="whiteListIP"
+ >
+ <el-input
+ v-model="form.blackListIP"
+ :placeholder="$t('operatManage.BWL.listIPInfo')"
+ />
+ </el-form-item>
+ <el-form-item
+ :label="$t('operatManage.BWL.IPState')"
+ prop="IPState"
+ >
+ <el-select v-model="form.IPState">
+ <el-option :label="$t('operatManage.BWL.all')" value="0" />
+ <el-option :label="$t('operatManage.BWL.validity')" value="1" />
+ <el-option
+ :label="$t('operatManage.BWL.invalidity')"
+ value="2"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="onSubmit"
+ ><i class="el-icon-search"></i> {{
+ $t('operatManage.BWL.search')
+ }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="onSubmit"
+ ><i class="el-icon-delete"></i> {{
+ $t('operatManage.BWL.reset')
+ }}</el-button
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button v-if="menuStatus.insert" @click="showInsertdialog(2)">{{
+ $t('common.append')
+ }}</el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button v-if="menuStatus.delete" @click="delBWList">{{
+ $t('common.delete')
+ }}</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="table_box">
+ <el-table :data="WTableData" stripe @selection-change="blackSelectionChange" style="width: 100%" height="85%">
+ <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.$index, scope.row)"
+ type="warning"
+ plain
+ size="small"
+ >{{ $t('common.update') }}</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-table>
+ <div style="margin-top: 40px" class="pagination_box">
+ <el-pagination
+ @size-change="WhandleSizeChange"
+ @current-change="WhandleCurrentChange"
+ :current-page="WListData.pageIndex"
+ :page-sizes="[10, 20, 30, 40]"
+ :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="IP鍦板潃">
+ <el-input
+ v-model="insertform.ip"
+ :placeholder="$t('common.pleaseInput')"
+ />
+ </el-form-item>
+ <el-form-item :label-width="formLabelWidth" label="璁块棶娆℃暟">
+ <el-input
+ v-model="insertform.visit"
+ :placeholder="$t('common.pleaseInput')"
+ />
+ </el-form-item>
+ <el-form-item :label-width="formLabelWidth" label="鎻忚堪">
+ <el-input
+ v-model="insertform.descr"
+ :placeholder="$t('common.pleaseInput')"
+ />
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="insertFromDataClose">{{
+ $t('common.close')
+ }}</el-button>
+ <el-button @click="insertFromData" type="primary">{{
+ $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 @click="editFromDataClose">{{
+ $t('common.close')
+ }}</el-button>
+ <el-button @click="editFromData" type="primary">{{
+ $t('common.confirm')
+ }}</el-button>
+ </div>
+ </el-dialog>
</div>
</template>
-
- <script>
-import MyBread from "../../components/MyBread.vue";
+<script>
+import MyBread from '../../components/MyBread.vue';
+import {
+ blacklistSelectByPageAndCount,
+ blacklistAppend,
+ deletelacklist,
+ updateblacklist,
+ blacklistSelectCount,
+} from '../../api/api';
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -150,130 +374,226 @@
data() {
return {
- activeName: this.$t("operatManage.BWL.blackList"),
+ menuStatus: {
+ delete: false,
+ insert: false,
+ update: false,
+ },
+ updateFormdialog: false,
+ multipleSelection: [],
+ formLabelWidth: '100px',
+ insertform: {},
+ editfrom: {},
+ InsertFormdialog: false,
+ activeName: 'first',
currentPage: 1,
form: {
- blackListIP: "",
- IPState: this.$t("operatManage.BWL.all"),
- interceptionCycle: "",
- unit: this.$t("operatManage.BWL.seconds"),
- interceptionNumber: "",
+ blackListIP: '',
+ IPState: '',
+ interceptionCycle: '',
+ unit: '',
+ interceptionNumber: '',
},
- tableData: [
- {
- username: "绠＄悊鍛�",
- ip: "221.182.31.12",
- date: "2022-08-05",
- IPState: "",
- largeModuleName: "杩愮淮鐩戞帶",
- smallModuleName: "璧勬簮鎿嶄綔鏃ュ織",
- resourceName: "",
- operationType: "鏌ヨ",
- },
- {
- date: "2022-08-05",
- username: "绠＄悊鍛�",
- IPState: "",
- largeModuleName: "杩愮淮鐩戞帶",
- smallModuleName: "璧勬簮鎿嶄綔鏃ュ織",
- resourceName: "",
- operationType: "鏌ヨ",
- ip: "221.182.31.12",
- },
- {
- date: "2022-08-05",
- username: "绠＄悊鍛�",
- IPState: "",
- largeModuleName: "杩愮淮鐩戞帶",
- smallModuleName: "璧勬簮鎿嶄綔鏃ュ織",
- resourceName: "",
- operationType: "鏌ヨ",
- ip: "221.182.31.12",
- },
- {
- date: "2022-08-05",
- username: "绠＄悊鍛�",
- IPState: "",
- largeModuleName: "杩愮淮鐩戞帶",
- smallModuleName: "璧勬簮鎿嶄綔鏃ュ織",
- resourceName: "",
- operationType: "鏌ヨ",
- ip: "221.182.31.12",
- },
- {
- date: "2022-08-05",
- username: "绠＄悊鍛�",
- IPState: "",
- largeModuleName: "杩愮淮鐩戞帶",
- smallModuleName: "璧勬簮鎿嶄綔鏃ュ織",
- resourceName: "",
- operationType: "鏌ヨ",
- ip: "221.182.31.12",
- },
- {
- date: "2022-08-05",
- username: "绠＄悊鍛�",
- IPState: "",
- largeModuleName: "杩愮淮鐩戞帶",
- smallModuleName: "璧勬簮鎿嶄綔鏃ュ織",
- resourceName: "",
- operationType: "鏌ヨ",
- ip: "221.182.31.12",
- },
- {
- date: "2022-08-05",
- username: "绠＄悊鍛�",
- IPState: "",
- largeModuleName: "杩愮淮鐩戞帶",
- smallModuleName: "璧勬簮鎿嶄綔鏃ュ織",
- resourceName: "",
- operationType: "鏌ヨ",
- ip: "221.182.31.12",
- },
- {
- date: "2022-08-05",
- username: "绠＄悊鍛�",
- IPState: "",
- largeModuleName: "杩愮淮鐩戞帶",
- smallModuleName: "璧勬簮鎿嶄綔鏃ュ織",
- resourceName: "",
- operationType: "鏌ヨ",
- ip: "221.182.31.12",
- },
- {
- date: "2022-08-05",
- username: "绠＄悊鍛�",
- IPState: "",
- largeModuleName: "杩愮淮鐩戞帶",
- smallModuleName: "璧勬簮鎿嶄綔鏃ュ織",
- resourceName: "",
- operationType: "鏌ヨ",
- ip: "221.182.31.12",
- },
- ],
+ 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.editfrom = {};
+ },
+ 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(index, row) {
+ this.editfrom = row;
+ this.updateFormdialog = true;
+ },
+
+ async delBWList() {
+ var std = [];
+ for (var i in this.multipleSelection) {
+ std.push(this.multipleSelection[i].id);
+ }
+ //deletes
+ 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鏄暣鏁帮紝鍚﹀垯瑕乸arseInt杞崲
+ 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);
},
- handleSizeChange(val) {
- console.log(`姣忛〉 ${val} 鏉);
+ WhandleSizeChange(val) {
+ this.WListData.pageSize = val;
+ this.getList();
},
- handleCurrentChange(val) {
- console.log(`褰撳墠椤�: ${val}`);
+ WhandleCurrentChange(val) {
+ this.WListData.pageIndex = val;
+ this.getList();
+ },
+ BhandleSizeChange(val) {
+ this.BListData.pageSize = val;
+ this.getList();
+ },
+ BhandleCurrentChange(val) {
+ this.BListData.pageIndex = val;
+ this.getList();
},
onSubmit() {
- console.log("submit!");
+ console.log('submit!');
},
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() {},
+ 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>
+<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
.logLog_box {
background: rgb(240, 242, 245);
@@ -297,10 +617,14 @@
background: #fff;
border-radius: 5px;
border: 1px solid rgb(202, 201, 204);
+ overflow: auto;
+ height: 70%;
}
.text-center {
text-align: center;
}
+ .el-tab-pane {
+ height: 82vh;
+ }
}
</style>
-
\ No newline at end of file
--
Gitblit v1.9.3