From ac9756cf0893dc64e26b19fcdf89bf467101b0dc Mon Sep 17 00:00:00 2001
From: Dragon <13925835632@139.com>
Date: Tue, 21 Nov 2023 09:29:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=99=BD=E5=90=8D=E5=8D=95?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E5=9C=B0=E5=8C=BA=E8=AE=BF=E9=97=AE=E9=99=90?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AccessRestriction.js                      |  47 +++-
 .../accessRestriction/AccessRestriction.vue   | 116 +++++++--
 .../accessRestriction/AccessWhitelist.vue     | 230 ++++++++++++------
 3 files changed, 291 insertions(+), 102 deletions(-)

diff --git a/src/api/AccessRestriction.vue/AccessRestriction.js b/src/api/AccessRestriction.vue/AccessRestriction.js
index 2fc7011..2a2006b 100644
--- a/src/api/AccessRestriction.vue/AccessRestriction.js
+++ b/src/api/AccessRestriction.vue/AccessRestriction.js
@@ -1,19 +1,54 @@
 import request from '@/utils/request';
 import qs from 'qs';
 
+// ==================================地区限制====================================
 
-// 
-export const redEnvelopePage = query => {
+// 地区列表
+export const recordPage = query => {
     return request({
-        url: '/admin/room/redEnvelope/page',
+        url: '/admin/ip/region/limit/record/page',
         method: 'get',
         params: query
     });
 };
-// 
-export const redEnvelopeSave = query => {
+// 加入白名单
+export const addWhite = query => {
     return request({
-        url: '/admin/room/redEnvelope/save',
+        url: '/admin/ip/region/limit/record/addWhite',
+        method: 'get',
+        params: query
+    });
+};
+// 解除限制
+export const relieve = query => {
+    return request({
+        url: '/admin/ip/region/limit/record/relieve',
+        method: 'get',
+        params: query
+    });
+};
+// ==================================访问白名单====================================
+
+// 白名单列表
+export const whitePage = query => {
+    return request({
+        url: '/admin/ip/region/white/page',
+        method: 'get',
+        params: query
+    });
+};
+// 移除白名单
+export const whiteDel = query => {
+    return request({
+        url: '/admin/ip/region/white/del',
+        method: 'get',
+        params: query
+    });
+};
+// 添加白名单
+export const whiteSave = query => {
+    return request({
+        url: '/admin/ip/region/white/save',
         method: 'post',
         params: query
     });
diff --git a/src/views/accessRestriction/AccessRestriction.vue b/src/views/accessRestriction/AccessRestriction.vue
index 7718c78..5f09785 100644
--- a/src/views/accessRestriction/AccessRestriction.vue
+++ b/src/views/accessRestriction/AccessRestriction.vue
@@ -18,16 +18,21 @@
       >
     </div>
     <!-- 列表 -->
-    <el-table :data="tableData" border style="width: 100%; margin-top: 25px">
-      <el-table-column prop="" align="center" label="用戶id" />
-      <el-table-column prop="" align="center" label="用戶昵称" />
-      <el-table-column prop="" align="center" label="手机号" />
-      <el-table-column prop="" align="center" label="注册时间" />
-      <el-table-column prop="" align="center" label="进入访问限制时间" />
-      <el-table-column prop="" align="center" label="邀请码" />
-      <el-table-column prop="" align="center" label="注册设备" />
-      <el-table-column prop="" align="center" label="访问设备" />
-      <el-table-column prop="" align="center" label="最近一次访问低点" />
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      border
+      style="width: 100%; margin-top: 25px"
+    >
+      <el-table-column prop="erbanNo" align="center" label="用戶id" />
+      <el-table-column prop="nick" align="center" label="用戶昵称" />
+      <el-table-column prop="phone" align="center" label="手机号" />
+      <el-table-column prop="signTime" align="center" label="注册时间" />
+      <el-table-column prop="createTime" align="center" label="进入访问限制时间" />
+      <el-table-column prop="inviteCode" align="center" label="邀请码" />
+      <el-table-column prop="signDeviceId" align="center" label="注册设备" />
+      <el-table-column prop="deviceIds" align="center" label="访问设备" />
+      <el-table-column prop="lastCheckIpRegion" align="center" label="最近一次访问低点" />
       <el-table-column align="center" label="操作" width="400">
         <template v-slot="scope">
           <el-button
@@ -75,41 +80,114 @@
   </div>
 </template>
 <script>
-// import {} from "@/api/accessRestriction.vue/AccessRestriction.vue";
+import {
+  recordPage,
+  addWhite,
+  relieve,
+} from "@/api/AccessRestriction.vue/AccessRestriction.js";
 import { ElMessage } from "element-plus";
 export default {
   name: "AccessRestriction",
   data() {
     return {
       userId: "", //用戶id
-      tableData: [], //列表数据
+      loading: false, //列表loading
+      tableData: [
+        {
+          erbanNo: "123123123",
+        },
+      ], //列表数据
       total: 10, //总页数
       currentPage: 1, //页码
       pageSize: 10, //条数
-      delDialog: true, //控制公共弹窗展示
-      delDialogText: "", //公共弹窗标题
+      delDialog: false, //控制公共弹窗展示
+      delDialogText: "确定要解除限制吗?", //公共弹窗标题
+      type: null, //1解除限制 2加入白名单
+      obj: {}, //存放公共参数
     };
   },
-  created() {},
+  created() {
+    this.getData();
+  },
   methods: {
+    // 初始化
+    getData() {
+      this.loading = true;
+      recordPage({
+        page: this.currentPage,
+        pageSize: this.pageSize,
+        userErBanNo: this.userId,
+      }).then((res) => {
+        this.tableData = res.data.records;
+        this.loading = false;
+      });
+    },
     // 搜索
-    search() {},
+    search() {
+      this.getData();
+    },
     // 解除限制按钮
     unfreeze(row) {
       console.log(row);
+      this.delDialogText = "确定要解除限制吗?";
+      this.delDialog = true;
+      this.type = 1;
+      this.obj = row;
     },
     // 加入白名单
     addWhite(row) {
       console.log(row);
+      this.delDialogText = "确定要加入白名单吗?";
+      this.delDialog = true;
+      this.type = 2;
+      this.obj = row;
     },
     // 二次确认
-    sureClick() {},
+    sureClick() {
+      if (this.type == 1) {
+        relieve({ id: this.obj.uid }).then((res) => {
+          if (res.code == 200) {
+            ElMessage({
+              showClose: true,
+              message: res.message,
+              type: "success",
+            });
+            this.getData();
+          } else {
+            ElMessage({
+              showClose: true,
+              message: res.message,
+              type: "error",
+            });
+          }
+        });
+      } else {
+        addWhite({ id: this.obj.uid }).then((res) => {
+          if (res.code == 200) {
+            ElMessage({
+              showClose: true,
+              message: res.message,
+              type: "success",
+            });
+            this.getData();
+          } else {
+            ElMessage({
+              showClose: true,
+              message: res.message,
+              type: "error",
+            });
+          }
+        });
+      }
+      this.getData();
+      this.delDialog = false;
+    },
     // 分页导航
     handleSizeChange(val) {
-      //   this.getData();
+      this.getData();
     },
     handleCurrentChange(val) {
-      //   this.getData();
+      this.getData();
     },
   },
 };
diff --git a/src/views/accessRestriction/AccessWhitelist.vue b/src/views/accessRestriction/AccessWhitelist.vue
index a1b5d6f..42530e1 100644
--- a/src/views/accessRestriction/AccessWhitelist.vue
+++ b/src/views/accessRestriction/AccessWhitelist.vue
@@ -23,7 +23,7 @@
     </div>
     <!-- 按钮 -->
     <div class="buttonBox">
-      <el-button  class="primary el-icon-edi" type="primary" size="default" @click="add()"
+      <el-button class="primary" type="primary" size="default" @click="add()"
         >新增</el-button
       >
       <el-button class="primary" type="primary" size="default" @click="search()"
@@ -31,15 +31,20 @@
       >
     </div>
     <!-- 列表 -->
-    <el-table :data="tableData" border style="width: 100%; margin-top: 25px">
-      <el-table-column prop="" align="center" label="用戶id" />
-      <el-table-column prop="" align="center" label="用戶昵称" />
-      <el-table-column prop="" align="center" label="昵称" />
-      <el-table-column prop="" align="center" label="注册时间" />
-      <el-table-column prop="" align="center" label="身份" />
-      <el-table-column prop="" align="center" label="进入白名单时间" />
-      <el-table-column prop="" align="center" label="最近一次访问低点" />
-      <el-table-column prop="" align="center" label="进入白名单来源" />
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      border
+      style="width: 100%; margin-top: 25px"
+    >
+      <el-table-column prop="erbanNo" align="center" label="用戶id" />
+      <el-table-column prop="phone" align="center" label="用戶手机号" />
+      <el-table-column prop="nick" align="center" label="昵称" />
+      <el-table-column prop="signTime" align="center" label="注册时间" />
+      <el-table-column prop="roleName" align="center" label="身份" />
+      <el-table-column prop="createTime" align="center" label="进入白名单时间" />
+      <el-table-column prop="lastCheckTime" align="center" label="最近一次访问低点" />
+      <el-table-column prop="source" align="center" label="进入白名单来源" />
       <el-table-column align="center" label="操作" width="400">
         <template v-slot="scope">
           <el-button
@@ -80,8 +85,13 @@
     <!-- 添加弹窗 -->
     <el-dialog v-model="addSure" title="提示" width="30%" center>
       <div class="selectBox">
-        <span>添加号码类型</span>
-        <el-select v-model="value" placeholder="请选择" @change="changeFun">
+        <span class="left">添加号码类型</span>
+        <el-select
+          v-model="value"
+          fit-input-width="true"
+          placeholder="请选择"
+          class="right"
+        >
           <el-option
             v-for="item in options"
             :key="item.value"
@@ -91,38 +101,42 @@
           </el-option>
         </el-select>
       </div>
-      <div class="selectBox">
-        <span>用户ID</span>
+      <div class="selectBox" v-if="value == 1">
+        <span class="left">用户ID</span>
         <el-input
           v-model="selectUserId"
           size="default"
           placeholder="用户平台ID"
-          class="input"
+          class="right"
         ></el-input>
       </div>
+      <div class="selectBox" v-else>
+        <span class="left">手机号</span>
+        <el-input
+          v-model="selectUserPhone"
+          size="default"
+          placeholder=""
+          class="right"
+          style="width: 56%"
+        >
+        </el-input>
+        <b>+86</b>
+      </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="delDialog = false">取消</el-button>
-          <el-button type="primary" @click="addSureClick(val, type)"> 添加 </el-button>
+          <el-button @click="addSure = false">取消</el-button>
+          <el-button type="primary" @click="addSureClick()"> 添加 </el-button>
         </span>
       </template>
     </el-dialog>
-
-    <el-upload
-      action="https://jsonplaceholder.typicode.com/posts/"
-      list-type="picture-card"
-      :on-preview="handlePictureCardPreview"
-      :on-remove="handleRemove"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-    <el-dialog v-model:visible="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="" />
-    </el-dialog>
   </div>
 </template>
 <script>
-// import {} from "@/api/accessRestriction/AccessRestriction";
+import {
+  whitePage,
+  whiteDel,
+  whiteSave,
+} from "@/api/AccessRestriction.vue/AccessRestriction.js";
 import { ElMessage } from "element-plus";
 export default {
   name: "AccessWhitelist",
@@ -130,6 +144,7 @@ export default {
     return {
       userId: "", //用戶id
       userPhone: "", //用戶手机号
+      loading: false, //列表loading
       tableData: [], //列表数据
       total: 10, //总页数
       currentPage: 1, //页码
@@ -149,42 +164,100 @@ export default {
         },
       ],
       selectUserId: "", //添加弹窗用户id
-
-      dialogImageUrl: "",
-      dialogVisible: false,
+      selectUserPhone: "", //添加弹窗用户手机号
+      obj: {}, //存放公共参数
     };
   },
-  created() {},
+  created() {
+    this.getData();
+  },
   methods: {
+    // 初始化
+    getData() {
+      this.loading = true;
+      whitePage({
+        page: this.currentPage,
+        pageSize: this.pageSize,
+        userErBanNo: this.userId,
+        phone: this.userPhone,
+      }).then((res) => {
+        this.tableData = res.data.records;
+        this.loading = false;
+      });
+    },
     // 新增
-    add() {},
+    add() {
+      this.addSure = true;
+    },
     // 搜索
-    search() {},
+    search() {
+      this.getData();
+    },
     // 移除白名单
     delWhite(row) {
       console.log(row);
+      this.obj = row;
+      this.delDialog = true;
     },
     // 二次确认
-    sureClick() {},
+    sureClick() {
+      whiteDel({ id: this.obj.id }).then((res) => {
+        if (res.code == 200) {
+          ElMessage({
+            showClose: true,
+            message: res.message,
+            type: "success",
+          });
+          this.getData();
+        } else {
+          ElMessage({
+            showClose: true,
+            message: res.message,
+            type: "error",
+          });
+        }
+        this.delDialog = false;
+      });
+    },
     // 添加确认
-    addSureClick() {},
-    changeFun(e) {
-      console.log(this.value);
+    addSureClick() {
+      var objs = {};
+      if (this.value == 1) {
+        objs = {
+          userErBanNoStr: this.selectUserId,
+        };
+      } else {
+        objs = {
+          phone: this.selectUserPhone,
+        };
+      }
+      whiteSave(objs).then((res) => {
+        this.selectUserId = "";
+        this.selectUserPhone = "";
+        if (res.code == 200) {
+          ElMessage({
+            showClose: true,
+            message: res.message,
+            type: "success",
+          });
+          this.getData();
+        } else {
+          ElMessage({
+            showClose: true,
+            message: res.message,
+            type: "error",
+          });
+        }
+        this.getData();
+      });
+      this.addSure = false;
     },
     // 分页导航
     handleSizeChange(val) {
-      //   this.getData();
+      this.getData();
     },
     handleCurrentChange(val) {
-      //   this.getData();
-    },
-
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+      this.getData();
     },
   },
 };
@@ -225,37 +298,40 @@ export default {
   }
   .selectBox {
     margin-bottom: 10px;
-    span {
-      display: inline-block;
+    display: flex;
+    justify-content: space-between;
+    width: 70%;
+    .left {
+      display: block;
       margin-right: 25px;
+      white-space: nowrap;
     }
-    .el-input {
-      width: 40%;
+    .right {
+      width: 70%;
+      position: relative;
     }
-  }
 
-  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409eff;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 100px;
-    height: 100px;
-    line-height: 100px;
-    text-align: center;
-  }
-  .avatar {
-    width: 100px;
-    height: 100px;
-    display: block;
+    b {
+      font-style: normal;
+      position: absolute;
+      left: 135px;
+      width: 54px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+      border-right: 1px solid #dcdfe6;
+      border-left: 1px solid #dcdfe6;
+      border-bottom: 1px solid #dcdfe6;
+      border-top: 1px solid #dcdfe6;
+      background: #fff;
+    }
   }
 }
+input[type="file"] {
+  display: none;
+}
 </style>