新增访问限制字段和弹窗

src/api/AccessRestriction.vue/AccessRestriction.js

@@ -27,6 +27,15 @@ export const relieve = query => {
         params: query
     });
 };
+// 添加地区访问限制
+export const recordSave = query => {
+    return request({
+        url: '/admin/ip/region/limit/record/save',
+        headers:{"Content-Type": 'application/x-www-form-urlencoded'},
+        method: 'post',
+        data: query
+    });
+};
 // ==================================访问白名单====================================
 
 // 白名单列表

src/views/accessRestriction/AccessRestriction.vue

@@ -13,6 +13,9 @@
     </div>
     <!-- 按钮 -->
     <div class="buttonBox">
+      <el-button class="primary" type="primary" size="default" @click="add()"
+        >新增</el-button
+      >
       <el-button class="primary" type="primary" size="default" @click="search()"
         >查询</el-button
       >
@@ -33,6 +36,21 @@
       <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="平台"
+        ><template v-slot="scope">{{
+          scope.row.os == "android" ? "安卓" : "苹果"
+        }}</template>
+      </el-table-column>
+      <el-table-column align="center" label="sim卡信息" width="200"
+        ><template v-slot="scope">
+         <div v-html="tableArrFormat(scope.row)"></div> 
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="系统语言"
+        ><template v-slot="scope">{{
+          scope.row.lang == "zh-CN,zh-CN" ? "简体中文" : scope.row.lang
+        }}</template>
+      </el-table-column>
       <el-table-column align="center" label="操作" width="400">
         <template v-slot="scope">
           <el-button
@@ -77,6 +95,25 @@
         </span>
       </template>
     </el-dialog>
+    <!-- 添加弹窗 -->
+    <el-dialog v-model="addSure" title="提示" width="30%" center>
+      <div class="selectBox">
+        <span class="left" style="margin-right: 20px">用户ID</span>
+        <el-input
+          v-model="selectUserId"
+          size="default"
+          placeholder="用户平台ID"
+          class="right"
+          style="width: 70%"
+        ></el-input>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="addSure = false">取消</el-button>
+          <el-button type="primary" @click="addSureClick()"> 添加 </el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -84,6 +121,7 @@ import {
   recordPage,
   addWhite,
   relieve,
+  recordSave,
 } from "@/api/AccessRestriction.vue/AccessRestriction.js";
 import { ElMessage } from "element-plus";
 export default {
@@ -104,6 +142,8 @@ export default {
       delDialogText: "确定要解除限制吗?", //公共弹窗标题
       type: null, //1解除限制 2加入白名单
       obj: {}, //存放公共参数
+      addSure: false, //控制确认添加弹窗展示
+      selectUserId: "", //添加用户id
     };
   },
   created() {
@@ -127,6 +167,17 @@ export default {
     search() {
       this.getData();
     },
+    // 新增
+    add() {
+      this.addSure = true;
+    },
+    // 确认新增
+    addSureClick() {
+      this.addSure = false;
+      this.delDialogText = "确定要添加地区限制访问吗?";
+      this.delDialog = true;
+      this.type = 3;
+    },
     // 解除限制按钮
     unfreeze(row) {
       console.log(row);
@@ -162,7 +213,7 @@ export default {
             });
           }
         });
-      } else {
+      } else if (this.type == 2) {
         addWhite({ uid: this.obj.uid }).then((res) => {
           if (res.code == 200) {
             ElMessage({
@@ -180,6 +231,25 @@ export default {
           }
         });
       }
+      if (this.type == 3) {
+        recordSave({ erBanNoStr: this.selectUserId }).then((res) => {
+          if (res.code == 200) {
+            this.selectUserId = "";
+            ElMessage({
+              showClose: true,
+              message: res.message,
+              type: "success",
+            });
+            this.getData();
+          } else {
+            ElMessage({
+              showClose: true,
+              message: res.message,
+              type: "error",
+            });
+          }
+        });
+      }
       this.getData();
       this.delDialog = false;
     },
@@ -190,6 +260,19 @@ export default {
     handleCurrentChange(val) {
       this.getData();
     },
+    tableArrFormat(val) {
+        console.log('aaaaaaaaaaaaa',val.simCards);
+      var str = "";
+      if(val.simCards.length<=0){
+        return
+      }
+      val.simCards.forEach((res, i) => {
+        str += `
+                sim卡${i + 1}: ${res ? res : "空"}<br>
+            `;
+      });
+      return str;
+    },
   },
 };
 </script>

vue.config.js

@@ -43,5 +43,9 @@ module.exports = defineConfig({
         }
       }
     },
+    client: {
+        //当出现编译错误或警告时，在浏览器中是否显示全屏覆盖。  示例为只显示错误信息
+        overlay:false
+      },
   },
 })