fix：在线用户

src/views/monitor/onlineUser/FormDrawer.vue

@@ -0,0 +1,63 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    destroyOnClose
+    @register="registerDrawer"
+    :showFooter="true"
+    width="800px"
+  >
+    <BasicTable @register="registerTable" :columns="tokenColumns" :data-source="columnsSorce">
+      <template #toolbar>
+        <a-button type="primary" danger="true" @click="loginOut()">批量强退</a-button>
+      </template>
+      <template #headerTop>
+        <h1>设备管理列表</h1>
+      </template>
+      <template #tableTitle> 共{{ columnsSorce.length }}条数据 </template></BasicTable
+    >
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { onlineForceLogout } from '/@/api/sys/onlineApi';
+  import { tokenColumns } from './data';
+  const columnsSorce = ref<any>([]);
+  const tokenList = ref<any>([]);
+  const [registerDrawer] = useDrawerInner(async data => {
+    // setDrawerProps({ confirmLoading: false });
+    columnsSorce.value = [];
+    console.log(data.record.tokenSessionList, '22222222');
+    for (const i of data.record.tokenSessionList) {
+      columnsSorce.value.push({
+        loginDevice: i.os,
+        indate: i.loginTime,
+        tokenValues: i.tokenValue,
+      });
+    }
+  });
+
+  const [registerTable, { getSelectRows }] = useTable({
+    // title: '设备管理列表',
+    rowKey: 'tokenValues',
+    rowSelection: { type: 'checkbox' },
+    clickToRowSelect: true,
+    showIndexColumn: false,
+    bordered: true,
+    pagination: false,
+    // showTableSetting: true,
+  });
+
+  async function loginOut() {
+    const rows = getSelectRows();
+    console.log('rows', rows);
+    for (const i of rows) {
+      console.log('i', i);
+      tokenList.value.push(i.tokenValues);
+    }
+    console.log('tokenList', tokenList);
+    await onlineForceLogout({ tokenValues: tokenList.value, loginType: 'login' });
+    tokenList.value = [];
+  }
+</script>

src/views/monitor/onlineUser/data.ts

@@ -38,18 +38,6 @@ export const columns: BasicColumn[] = [
 ];
 
 export const searchFormSchema: FormSchema[] = [
-  // {
-  //   field: 'userPlatform',
-  //   label: '用户平台',
-  //   component: 'ApiSelect',
-  //   componentProps: {
-  //     placeholder: '请选择用户平台',
-  //     api: listDictModel,
-  //     params: {
-  //       dictCode: 'sys_user_platform',
-  //     },
-  //   },
-  // },
   {
     field: 'username',
     label: '用户名',
@@ -59,3 +47,18 @@ export const searchFormSchema: FormSchema[] = [
     },
   },
 ];
+
+export const tokenColumns: BasicColumn[] = [
+  {
+    title: '登录设备',
+    dataIndex: 'loginDevice',
+  },
+  {
+    title: '有效期',
+    dataIndex: 'indate',
+  },
+  {
+    title: '令牌',
+    dataIndex: 'tokenValues',
+  },
+];

src/views/monitor/onlineUser/index.vue

@@ -1,5 +1,25 @@
 <template>
-  <div>
+  <div class="p-4">
+    <Row class="mb-2">
+      <Card class="w-1/4" style="width: 25%; text-align: center">
+        <img src="http://n.sinaimg.cn/sinacn12/149/w539h410/20181011/9663-hktxqai5109344.jpg" />
+        <p>当前会话数：16</p>
+      </Card>
+
+      <Card class="w-1/4" style="width: 25%; text-align: center">
+        <img src="http://n.sinaimg.cn/sinacn12/149/w539h410/20181011/9663-hktxqai5109344.jpg" />
+        <p>最大令牌发放数：162</p>
+      </Card>
+
+      <Card class="w-1/4" style="width: 25%; text-align: center">
+        <img src="http://n.sinaimg.cn/sinacn12/149/w539h410/20181011/9663-hktxqai5109344.jpg" />
+        <p>一小时内新增：0</p>
+      </Card>
+      <Card class="w-1/4" style="width: 25%; text-align: center">
+        <img src="http://n.sinaimg.cn/sinacn12/149/w539h410/20181011/9663-hktxqai5109344.jpg" />
+        <p>B/C端占比：1/0</p>
+      </Card>
+    </Row>
     <BasicTable @register="registerTable">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'tenantName'">
@@ -16,6 +36,11 @@
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[
+              {
+                tooltip: '列表',
+                label: '列表',
+                onClick: handletoken.bind(null, record),
+              },
               {
                 tooltip: '强制退出',
                 label: '强制退出',
@@ -30,19 +55,23 @@
         </template>
       </template>
     </BasicTable>
+    <formDrawer @register="registerDrawer" @success="handleSuccessDrawer" />
   </div>
 </template>
 <script lang="ts" setup>
   import { onBeforeMount, ref } from 'vue';
   // import { Tag } from 'ant-design-vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Card, Row } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { columns, searchFormSchema } from './data';
-
-  import { onlineList, onlineForceLogout } from '/@/api/monitor/onlineApi';
+  import formDrawer from './FormDrawer.vue';
+  import { onlineList, onlineForceLogout } from '/@/api/sys/onlineApi';
   import { listDictModel } from '/@/api/common';
   import { formatToDateTime } from '/@/utils/dateUtil';
   // import { formatDictValue } from '/@/utils';
+  import { useDrawer } from '/@/components/Drawer';
+  const [registerDrawer, { openDrawer }] = useDrawer();
 
   const sysUserPlatformOptions = ref([]);
   onBeforeMount(async () => {
@@ -56,7 +85,7 @@
     rowKey: 'token',
     columns,
     formConfig: {
-      labelWidth: 120,
+      labelWidth: 180,
       schemas: searchFormSchema,
       autoSubmitOnEnter: true,
       baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
@@ -68,13 +97,13 @@
       },
     },
     showIndexColumn: true,
-    useSearchForm: true,
+    // useSearchForm: true,
     showTableSetting: true,
     bordered: true,
     striped: true,
     actionColumn: {
       // auth: ['monitor:onlineUser:forceLogout'],
-      width: 80,
+      width: 160,
       title: '操作',
       dataIndex: 'action',
     },
@@ -87,9 +116,31 @@
 
   // 强制退出按钮事件
   async function handleForce(record: Recordable) {
-    console.log(record);
-    await onlineForceLogout({ token: record.token });
+    console.log(record, '2222222222222222');
+    await onlineForceLogout({ sessionId: record.sessionId, loginType: 'login' });
     createMessage.success('强退成功！');
     await reload();
   }
+  // 退出token
+  async function handletoken(record) {
+    console.log(record, '2222222222222222');
+    openDrawer(true, {
+      record,
+    });
+  }
+  // 抽屉回调事件
+  async function handleSuccessDrawer() {
+    await reload();
+  }
 </script>
+<style scoped>
+  Card {
+    height: 200px !important;
+  }
+  img {
+    width: 150px;
+    height: 75px;
+    /* text-align: center; */
+    margin: auto;
+  }
+</style>