完成白名单以及地区访问限制

2023-11-21 09:29:14 +08:00
parent 6d8117050c
commit ac9756cf08
3 changed files with 291 additions and 102 deletions
--- 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
    });
--- 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();
    },
  },
 };
--- 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>