✨新增剔出在线用户

src/api/monitor/online.js

@@ -10,9 +10,10 @@ export function listOnline(query) {
 }
 
 // 强退用户
-export function forceLogout(tokenId) {
+export function forceLogout(data) {
   return request({
-    url: '/monitor/online/' + tokenId,
-    method: 'delete'
+    url: '/monitor/online/lock',
+    method: 'delete',
+    data: data
   })
 }

src/router/index.js

@@ -85,22 +85,6 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user', titleKey: 'menu.personalCenter' }
       }
     ]
-  },
-  // 不用可删掉
-  {
-    path: '',
-    component: Layout,
-    hidden: false,
-    meta: { title: '组件示例', icon: 'icon', noCache: 'fasle' },
-    children: [
-      {
-        path: 'icon',
-        component: () => import('@/views/components/icons/index'),
-        //component: () => import('@/views/business/GenDemo'),
-        name: 'icon',
-        meta: { title: '图标icon', icon: 'icon1', noCache: 'fasle', titleKey: 'menu.icon' }
-      }
-    ]
   }
 ]
 

src/utils/signalR.js

@@ -1,15 +1,15 @@
 // 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio
 import * as signalR from '@microsoft/signalr'
 import { getToken } from '@/utils/auth'
-import { ElNotification, ElMessage } from 'element-plus'
+import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
 import useSocketStore from '@/store/modules/socket'
+import useUserStore from '@/store/modules/user'
 import { webNotify } from './index'
 export default {
   // signalR对象
   SR: {},
   // 失败连接重试次数
   failNum: 4,
-  baseUrl: '',
   init(url) {
     var socketUrl = window.location.origin + url
     const connection = new signalR.HubConnectionBuilder()
@@ -80,6 +80,9 @@ export default {
     connection.on('welcome', (data) => {
       ElNotification.info(data)
     })
+    connection.on('getConnId', (data) => {
+      // useUserStore().saveConnId(data)
+    })
     // 接收后台手动推送消息
     connection.on('receiveNotice', (title, data) => {
       ElNotification({
@@ -103,6 +106,22 @@ export default {
     //   useSocketStore().setOnlineUsers(data)
     // })
 
+    // 接收封锁通知
+    connection.on('lockUser', (data) => {
+      ElMessageBox.alert(`你的账号已被锁定，剩余，${data.time}分，原因：${data.reason || '-'}`, '提示', {
+        confirmButtonText: '确定',
+        callback: (action) => {
+          useUserStore()
+            .logOut()
+            .then(() => {
+              var redirectUrl = window.location.pathname
+              if (location.pathname.indexOf('/login') != 0) {
+                location.href = import.meta.env.VITE_APP_ROUTER_PREFIX + 'index?redirect=' + redirectUrl
+              }
+            })
+        }
+      })
+    })
     // 接收聊天数据
     connection.on('receiveChat', (data) => {
       const title = `来自${data.userName}的消息通知`

src/views/monitor/onlineuser/index.vue

@@ -15,40 +15,32 @@
         </template>
       </el-table-column>
       <el-table-column prop="name" label="用户名" align="center" />
-      <el-table-column label="登录地点" align="center">
-        <template #default="{ row }">
-          <div>{{ row.location }}</div>
-          <div>{{ row.userIP }}</div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="browser" label="登录浏览器"></el-table-column>
+      <el-table-column label="登录地点" prop="location" align="center"> </el-table-column>
+      <el-table-column label="登录IP" prop="userIP" align="center"></el-table-column>
+      <el-table-column prop="browser" label="登录浏览器" width="250"></el-table-column>
+      <el-table-column prop="platform" label="登录设备" align="center"></el-table-column>
       <el-table-column prop="loginTime" label="登录时间">
         <template #default="scope">
           {{ dayjs(scope.row.loginTime).format('MM/DD日HH:mm:ss') }}
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="140">
+      <el-table-column label="操作" align="center" width="160">
         <template #default="scope">
           <el-button text @click="onChat(scope.row)" icon="bell" v-hasRole="['admin']">通知</el-button>
+          <el-button text @click="onLock(scope.row)" icon="lock" v-hasRole="['admin']">强退</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <pagination
-      class="mt10"
-      background
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList" />
+    <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
   </div>
 </template>
 
 <script setup name="onlineuser">
-import { listOnline } from '@/api/monitor/online'
+import { listOnline, forceLogout } from '@/api/monitor/online'
 import dayjs from 'dayjs'
 import useSocketStore from '@/store/modules/socket'
+import useUserStore from '@/store/modules/user'
 const { proxy } = getCurrentInstance()
-
 const queryRef = ref(null)
 const queryParams = reactive({
   pageNum: 1,
@@ -95,5 +87,17 @@ function onChat(item) {
     })
     .catch(() => {})
 }
-function resetQuery() {}
+function onLock(row) {
+  proxy
+    .$prompt('请输入踢出原因', '', {
+      confirmButtonText: '发送',
+      cancelButtonText: '取消'
+    })
+    .then((val) => {
+      forceLogout({ ...row, time: 10, reason: val.value, clientId: useUserStore().clientId }).then((res) => {
+        proxy.$modal.msgSuccess('踢出成功')
+      })
+    })
+    .catch(() => {})
+}
 </script>

src/views/monitor/operlog/index.vue

@@ -91,7 +91,7 @@
       <el-table-column prop="method" label="操作方法" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('method')" />
       <el-table-column prop="operParam" label="请求参数" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('operParam')" />
       <el-table-column prop="jsonResult" label="返回结果" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('jsonResult')" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
         <template #default="scope">
           <el-button size="small" text icon="view" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">
             详细