feat(用户列表--IP设备管控): 新增操作组件，并对接接口

src/api/app-user.js

@@ -9,6 +9,15 @@ export function getNotExpiredSubscriptionName(userId) {
   });
 }
 
+// 获取用户扩张信息.
+export function getUserIpDevice(userId) {
+  return request({
+    url: `/user/expand`,
+    method: "get",
+    params: { userId }
+  });
+}
+
 // 获取用户认证信息
 export function getUserAuthType(userId) {
   return request({

src/api/approval.js

@@ -1,293 +1,302 @@
 /**
  * 审批相关
  */
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 获取家族审批资料列表
 export function getFamilyApprovalPage(params) {
   return request({
-    url: '/family/approval/page',
+    url: "/family/approval/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 修改不通过审批的家族头像,公告,昵称
 export function notPassFamilyApproval(data) {
   return request({
     url: `/family/approval/not-pass`,
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 用户管理列表
 export function getUserVideoCensorApprvalTable(params) {
   return request({
-    url: '/sys/video/call/censor/approval/page',
+    url: "/sys/video/call/censor/approval/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 账号处理
 export function accountHandle(data) {
   return request({
-    url: '/user/data/violation/expand/approval/account',
+    url: "/user/data/violation/expand/approval/account",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
+}
+
+// IP设备处理
+export function ipDeviceHandle(data) {
+  return request({
+    url: "/user/expand/updateDeviceListBlock",
+    method: "post",
+    data
+  });
 }
 
 // 视频违规记录
 export function getVideoCallCensorApproval(params) {
   return request({
-    url: '/sys/video/call/censor/approval/page',
+    url: "/sys/video/call/censor/approval/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 审批违规审批图片
 export function approvalVideoCallCensor(data) {
   return request({
-    url: '/sys/video/call/censor/approval',
+    url: "/sys/video/call/censor/approval",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 获取用户审批资料列表
 export function getUserApprovalData(params) {
   return request({
-    url: '/user/data/violation/expand',
+    url: "/user/data/violation/expand",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户资料审批
 export function approvalUserInfo(data) {
   return request({
-    url: '/user/data/violation/expand/approval',
+    url: "/user/data/violation/expand/approval",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 获取违规照片墙信息
 export function getViolationLatestPhotowall(userId) {
   return request({
     url: `/user/data/violation/latest/photo/wall/${userId}`,
-    method: 'get'
+    method: "get"
-  })
+  });
 }
 
 // 审批违规历史记录列表
 export function pageViolationHistory(params) {
   return request({
-    url: '/approval/history/page',
+    url: "/approval/history/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户积分详情列表
 export function pageUserIntegralOrigin(params) {
   return request({
-    url: '/user/integral/origin/page',
+    url: "/user/integral/origin/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户积分流水列表
 export function pageUserIntegralOriginStream(params) {
   return request({
-    url: '/user/integral/origin/stream/page',
+    url: "/user/integral/origin/stream/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户积分历史流水列表
 export function pageUserIntegralOriginHistoryStream(params) {
   return request({
-    url: '/user/integral/origin/history/stream/page',
+    url: "/user/integral/origin/history/stream/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户积分兑换账单列表
 export function pageTeamBillingIntegralRecord(params) {
   return request({
-    url: '/team/billing/integral/record/page',
+    url: "/team/billing/integral/record/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户账户审核历史记录
 export function getUserStatusLogTable(params) {
   return request({
-    url: '/approval/user/account/status/log/page',
+    url: "/approval/user/account/status/log/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 最近审批列表
 export function getUserStatusLogLatestList(params) {
   return request({
-    url: '/approval/user/account/status/log/latest',
+    url: "/approval/user/account/status/log/latest",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户积分详情列表导出
 export function integralExport(params) {
   return request({
-    url: '/user/integral/origin/excel',
+    url: "/user/integral/origin/excel",
-    method: 'get',
+    method: "get",
-    responseType: 'blob',
+    responseType: "blob",
     params
-  })
+  });
 }
 
 // 用户积分兑换记录导出
 export function integralRecodeExport(params) {
   return request({
-    url: '/team/billing/integral/record/excel',
+    url: "/team/billing/integral/record/excel",
-    method: 'get',
+    method: "get",
-    responseType: 'blob',
+    responseType: "blob",
     params
-  })
+  });
 }
 
 // 用户签到日志
 export function pageUserCheckLog(params) {
   return request({
-    url: '/user/check/inLog',
+    url: "/user/check/inLog",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 照片墙审批-通过
 export function approvalPhotoWallPass(data) {
   return request({
-    url: '/approval/photo/wall/pass',
+    url: "/approval/photo/wall/pass",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 照片墙审批-不通过
 export function approvalPhotoWallNotPass(data) {
   return request({
-    url: '/approval/photo/wall/not/pass',
+    url: "/approval/photo/wall/not/pass",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 举报审批-通过
 export function approvalReportedPass(data) {
   return request({
-    url: '/approval/reported/pass',
+    url: "/approval/reported/pass",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 举报审批-不通过
 export function approvalReportedNotPass(data) {
   return request({
-    url: '/approval/reported/not/pass',
+    url: "/approval/reported/not/pass",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 房间资料审批信息分页列表
 export function pageRoomApproval(params) {
   return request({
-    url: '/room/profile-manager/approval/page',
+    url: "/room/profile-manager/approval/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 审批违规资料
 export function approvalData(data) {
   return request({
-    url: '/data/approval',
+    url: "/data/approval",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 用户个性签名审批列表
 export function pageUserProfileDescApproval(params) {
   return request({
-    url: '/data/approval/user-profile-desc/page',
+    url: "/data/approval/user-profile-desc/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户头像昵称审批列表
 export function pageUserProfileApproval(params) {
   return request({
-    url: '/data/approval/user-profile/page',
+    url: "/data/approval/user-profile/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 房间主题审批信息分页列表
 export function pageRoomThemeApproval(params) {
   return request({
-    url: '/room/user/theme/page',
+    url: "/room/user/theme/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 审批房间主题
 export function themeApprove(data) {
   return request({
-    url: '/room/user/theme/approve',
+    url: "/room/user/theme/approve",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 用户银行卡列表
 export function pageUserBankCard(params) {
   return request({
-    url: '/user/bank-card/page',
+    url: "/user/bank-card/page",
-    method: 'get',
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户银行卡审核通过
 export function userBankCardPass(data) {
   return request({
-    url: '/user/bank-card/pass',
+    url: "/user/bank-card/pass",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }
 
 // 用户银行卡审核驳回
 export function userBankCardNotPass(data) {
   return request({
-    url: '/user/bank-card/not-pass',
+    url: "/user/bank-card/not-pass",
-    method: 'post',
+    method: "post",
     data
-  })
+  });
 }

src/components/data/IpDeviceHandle/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-dialog
+    title="IP设备管控"
+    :visible="true"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <el-form
+      ref="form"
+      v-loading="loading"
+      :model="form"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item
+        v-loading="loadingIpDeviceStatus"
+        label="操作"
+        prop="deviceListBlock"
+      >
+        <el-select v-model="form.deviceListBlock">
+          <el-option label="不限制" :value="null" />
+          <el-option label="加入黑名单" :value="true" />
+          <el-option label="加入白名单" :value="false" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submit()">提交</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { ipDeviceHandle } from "@/api/approval";
+import { getUserIpDevice } from "@/api/app-user";
+import { mapGetters } from "vuex";
+export default {
+  name: "AccountHandle",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    userId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    const commonRules = [
+      { required: true, message: "必填字段不可为空", trigger: "blur" }
+    ];
+    return {
+      loading: false,
+      loadingIpDeviceStatus: true,
+      form: {
+        userId: "",
+        deviceListBlock: ""
+      },
+      formRules: {
+        // deviceListBlock: commonRules
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(["buttonPermissions"])
+  },
+  watch: {
+    userId: {
+      handler(newVal) {
+        if (newVal) {
+          this.form.userId = newVal;
+          this.loadIpDeviceStatus(newVal);
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    loadIpDeviceStatus(userId) {
+      const that = this;
+      that.loadingIpDeviceStatus = true;
+      getUserIpDevice(userId)
+        .then(res => {
+          const deviceListBlock =
+            res && res.body && res.body.deviceListBlock !== undefined
+              ? res.body.deviceListBlock
+              : null;
+          that.form.deviceListBlock = deviceListBlock;
+
+          that.loadingIpDeviceStatus = false;
+        })
+        .catch(() => {
+          that.loadingIpDeviceStatus = false;
+        });
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+    submit() {
+      const that = this;
+      that.$refs.form.validate(valid => {
+        if (!valid) {
+          console.error("error submit!!");
+          return false;
+        }
+        that.form.userId = that.userId;
+
+        that.loading = true;
+        console.log("that.form:", that.form);
+
+        ipDeviceHandle(that.form)
+          .then(res => {
+            that.loading = false;
+            that.$emit("success", Object.assign({}, that.form));
+            that.handleClose();
+          })
+          .catch(err => {
+            that.loading = false;
+            that.$emit("fial", err);
+            that.handleClose();
+          });
+      });
+    }
+  }
+};
+</script>

src/views/user/user-table/index.vue

@@ -525,6 +525,13 @@
                   @click.native="handlePassword(scope.row)"
                   >重置密码</el-dropdown-item
                 >
+
+                <!-- IP设备管控 -->
+                <el-dropdown-item
+                  v-if="buttonPermissions.includes('user:table:password:reset')"
+                  @click.native="handleIPDevice(scope.row)"
+                  >IP设备管控</el-dropdown-item
+                >
               </el-dropdown-menu>
             </el-dropdown>
           </template>
@@ -707,6 +714,14 @@
           >
         </div>
       </el-dialog>
+
+      <!-- 账号处理组件 -->
+      <ip-device-handle
+        v-if="ipDeviceVisible"
+        :user-id="thatSelectedUserId"
+        @success="renderDataSuccess"
+        @close="ipDeviceVisible = false"
+      />
     </div>
 
     <!-- 用户注册情况弹窗 -->
@@ -744,6 +759,7 @@ import GoldRunningWaterDialog from "@/components/data/GoldRunningWaterDialog";
 import DiamondRunningWaterDialog from "@/components/data/DiamondRunningWaterDialog";
 import DiamondSalaryRunningWaterDialog from "@/components/data/DiamondSalaryRunningWaterDialog";
 import AccountHanle from "@/components/data/AccountHanle";
+import IpDeviceHandle from "@/components/data/IpDeviceHandle";
 import UserVideoViolationTableDialog from "@/components/data/UserVideoViolationTableDialog";
 import EditUserForm from "@/components/data/EditUserForm";
 import EditUserGoldCoinDeductionForm from "@/components/data/EditUserGoldCoinDeductionForm";
@@ -768,6 +784,7 @@ export default {
     DiamondSalaryRunningWaterDialog,
     PlatformSvgIcon,
     AccountHanle,
+    IpDeviceHandle,
     UserVideoViolationTableDialog,
     EditUserForm,
     UserAccountStatusLogDrawer,
@@ -825,6 +842,7 @@ export default {
       editUserDiamondDeductionFormVisible: false,
       editUserGameCouponRewardFormVisible: false,
       editUserGameCouponDeductionFormVisible: false,
+      ipDeviceVisible: false,
       registerOrigins,
       originPlatforms,
       genders,
@@ -1016,6 +1034,12 @@ export default {
       this.editUserGoldCoinRewardFormVisible = true;
     },
 
+    // IP设备管控
+    handleIPDevice(item) {
+      this.thatSelectedUserId = item.id;
+      this.ipDeviceVisible = true;
+    },
+
     // 钻石扣除
     editUserDiamondDeductionForm(item) {
       this.thatSelectedUserId = item.id;