From c40e3de17653a10a06ead765813783a5614a32ce Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期四, 16 二月 2023 17:40:43 +0800
Subject: [PATCH] 调整运维管理部分页面格式
---
src/views/maintenance/blackwhiteList.vue | 590 ++++++++++++++++++++++++++++------------------------------
1 files changed, 289 insertions(+), 301 deletions(-)
diff --git a/src/views/maintenance/blackwhiteList.vue b/src/views/maintenance/blackwhiteList.vue
index 924b75f..bf05707 100644
--- a/src/views/maintenance/blackwhiteList.vue
+++ b/src/views/maintenance/blackwhiteList.vue
@@ -1,241 +1,233 @@
<template>
<div class="logLog_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.blackwhiteList')}`,
- ]"></My-bread>
+ ]"
+ ></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
- style="width:200px"
- v-model="queryInfo.ip"
- :placeholder="$t('operatManage.BWL.listIPInfo')"
- />
- </el-form-item>
- <el-form-item
- :label="$t('operatManage.BWL.interceptionNumber')"
- prop="visit"
- >
- <el-input
- style="width:200px"
- 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-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
+ style="width: 200px"
+ v-model="queryInfo.ip"
+ :placeholder="$t('operatManage.BWL.listIPInfo')"
+ />
+ </el-form-item>
+ <el-form-item
+ :label="$t('operatManage.BWL.interceptionNumber')"
+ prop="visit"
+ >
+ <el-input
+ style="width: 200px"
+ v-model="queryInfo.visit"
+ :placeholder="$t('operatManage.BWL.interceptionNumber')"
+ />
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item>
<el-button
- @click="handleEdit(scope.row)"
- type="warning"
- plain
+ type="info"
+ @click="resetInfo('queryInfo')"
+ icon="el-icon-refresh"
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>
+ >{{ $t("operatManage.BWL.reset") }}</el-button
+ >
+ </el-form-item>
+ <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-delete"
+ v-if="menuStatus.delete"
+ type="danger"
+ size="small"
+ @click="delBWList"
+ >{{ $t("common.delete") }}</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>
+ </div>
</div>
+ </el-form>
+ </div>
+ <div class="table_box subpage_Div" :style="styleVar">
+ <el-table
+ :data="BTableData"
+ @selection-change="blackSelectionChange"
+ style="width: 100%"
+ height="calc(100% - 57px)"
+ >
+ <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 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>
</el-tab-pane>
- <el-tab-pane
- :label="$t('operatManage.BWL.whiteList')"
- name="second"
- >
+ <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
- style="width:200px"
- v-model="queryInfo.ip"
- :placeholder="$t('operatManage.BWL.listIPInfo')"
- />
- </el-form-item>
- <el-form-item
- :label="$t('operatManage.BWL.interceptionNumber')"
- prop="visit"
- >
- <el-input
- style="width:200px"
- v-model="queryInfo.visit"
- :placeholder="$t('operatManage.BWL.interceptionNumber')"
- />
- </el-form-item>
- <el-form-item style="float: right;">
- <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 style="float: right;">
- <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 style="float: right;">
- <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 style="float: right;">
- <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 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
+ style="width: 200px"
+ v-model="queryInfo.ip"
+ :placeholder="$t('operatManage.BWL.listIPInfo')"
+ />
+ </el-form-item>
+ <el-form-item
+ :label="$t('operatManage.BWL.interceptionNumber')"
+ prop="visit"
+ >
+ <el-input
+ style="width: 200px"
+ v-model="queryInfo.visit"
+ :placeholder="$t('operatManage.BWL.interceptionNumber')"
+ />
+ </el-form-item>
+ </div>
+ <div>
+ <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 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="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
+ type="success"
+ size="small"
+ icon="el-icon-edit"
+ v-if="menuStatus.insert"
+ @click="showInsertdialog(2)"
+ >{{ $t("common.append") }}</el-button
+ >
+ </el-form-item>
+ </div>
+ </div>
</el-form>
</div>
- <div class="table_box1 subpage_Div">
+ <div class="table_box subpage_Div" :style="styleVar">
<el-table
:data="WTableData"
@selection-change="blackSelectionChange"
style="width: 100%"
+ height="calc(100% - 57px)"
>
- <el-table-column
- type="selection"
- width="55"
- />
+ <el-table-column type="selection" width="55" />
<el-table-column
align="center"
type="index"
@@ -284,15 +276,13 @@
type="warning"
plain
size="small"
- >{{ $t('common.update') }}</el-button>
+ >{{ $t("common.update") }}</el-button
+ >
</template>
</el-table-column>
</el-table>
- </el-table>
- <div
- style="margin-top: 20px"
- class="pagination_box"
- >
+
+ <div class="pagination_box">
<el-pagination
@size-change="WhandleSizeChange"
@current-change="WhandleCurrentChange"
@@ -313,10 +303,7 @@
:visible.sync="InsertFormdialog"
width="30%"
>
- <el-form
- ref="insertform"
- :model="insertform"
- >
+ <el-form ref="insertform" :model="insertform">
<el-form-item
:label-width="formLabelWidth"
:label="$t('operatManage.tokentoolObj.ip')"
@@ -345,17 +332,11 @@
/>
</el-form-item>
</el-form>
- <div
- slot="footer"
- class="dialog-footer"
- >
+ <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"
- >{{
+ <el-button @click="insertFromData" type="primary" size="small">{{
$t("common.confirm")
}}</el-button>
</div>
@@ -366,49 +347,31 @@
:visible.sync="updateFormdialog"
width="30%"
>
- <el-form
- ref="editfrom"
- :model="editfrom"
- >
- <el-form-item
- :label-width="formLabelWidth"
- label="IP鍦板潃"
- >
+ <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-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-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"
- >
+ <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"
- >{{
+ <el-button @click="editFromData" type="primary" size="small">{{
$t("common.confirm")
}}</el-button>
</div>
@@ -467,9 +430,31 @@
},
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 + 40}px)`;
+ });
+ },
editFromDataClose() {
this.updateFormdialog = false;
this.$nextTick(() => {
@@ -551,32 +536,34 @@
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.$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({
- message: '鍒犻櫎鎴愬姛锛�',
- type: 'success',
+ type: "info",
+ message: "宸插彇娑堝垹闄�",
});
- 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({
@@ -714,6 +701,10 @@
}
},
},
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
+ },
created() {
var val = this.$store.state.currentPerms;
var permsEntity = this.$store.state.permsEntity;
@@ -732,35 +723,32 @@
.logLog_box {
height: 98%;
width: 98%;
- padding: 1%;
- overflow: auto;
+ padding: 1%;
.el-input {
width: 300px;
}
.inquire {
- padding: 10px;
+ padding: 8px;
margin-top: 20px;
+
border-radius: 5px;
-
+
margin-bottom: 20px;
+ .el-form-item {
+ margin: 5px;
+ }
}
- .table_box {
- padding: 10px;
- border-radius: 5px;
-
-
-
+ .el-tabs {
+ height: calc(100% - 70px);
}
- .table_box1 {
- padding: 10px;
- border-radius: 5px;
-
-
-
+ /deep/ .el-tabs__content {
+ height: calc(100% - 49px);
+ }
+ /deep/ .el-tab-pane {
+ height: 100%;
}
.text-center {
text-align: center;
}
-
}
</style>
--
Gitblit v1.9.3