update index

src/views/monitor/online/index.vue

@@ -1,18 +1,19 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true">
+    <el-form ref="queryRef" :inline="true" :model="queryParams">
       <el-form-item label="用户名称" prop="username">
         <el-input
             v-model="queryParams.username"
-          placeholder="请输入用户名称"
             clearable
+            placeholder="请输入用户名称"
             style="width: 200px"
             @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery"
+        <el-button icon="Search" type="primary" @click="handleQuery"
-          >搜索</el-button
+        >搜索
+        </el-button
         >
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
@@ -22,50 +23,50 @@
         :data="onlineList"
         style="width: 100%"
     >
-      <el-table-column label="序号" width="100" type="index" align="center">
+      <el-table-column align="center" label="序号" type="index" width="100">
         <template #default="scope">
-          <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
+          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
         </template>
       </el-table-column>
       <el-table-column
+          :show-overflow-tooltip="true"
+          align="center"
           label="会话编号"
-        align="center"
           prop="deviceSn"
-        :show-overflow-tooltip="true"
       />
       <el-table-column
+          :show-overflow-tooltip="true"
+          align="center"
           label="登录名称"
-        align="center"
           prop="username"
-        :show-overflow-tooltip="true"
       />
       <el-table-column
+          :show-overflow-tooltip="true"
+          align="center"
           label="主机"
-        align="center"
           prop="ip"
-        :show-overflow-tooltip="true"
       />
       <el-table-column
+          :show-overflow-tooltip="true"
+          align="center"
           label="登录地点"
-        align="center"
           prop="address"
-        :show-overflow-tooltip="true"
       />
       <el-table-column
+          :show-overflow-tooltip="true"
+          align="center"
           label="操作系统"
-        align="center"
           prop="os"
-        :show-overflow-tooltip="true"
       />
       <el-table-column
+          :show-overflow-tooltip="true"
+          align="center"
           label="浏览器"
-        align="center"
           prop="browser"
-        :show-overflow-tooltip="true"
       />
       <el-table-column
-        label="登录时间"
           align="center"
+          label="登录时间"
           prop="loginTime"
           width="180"
       >
@@ -74,18 +75,19 @@
         </template>
       </el-table-column>
       <el-table-column
-        label="操作"
           align="center"
           class-name="small-padding fixed-width"
+          label="操作"
       >
         <template #default="scope">
           <el-button
+              v-hasPermi="['monitor:online:forceLogout']"
+              icon="Delete"
               link
               type="primary"
-            icon="Delete"
               @click="handleForceLogout(scope.row)"
-            v-hasPermi="['monitor:online:forceLogout']"
+          >强退
-            >强退</el-button
+          </el-button
           >
         </template>
       </el-table-column>
@@ -93,18 +95,18 @@
 
     <pagination
         v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNum"
+        :total="total"
         @pagination="getList"
     />
   </div>
 </template>
 
-<script setup name="Online">
+<script name="Online" setup>
-import { forceLogout, list as initData } from "@/api/monitor/online";
+import {forceLogout, list as initData} from "@/api/monitor/online";
 
-const { proxy } = getCurrentInstance();
+const {proxy} = getCurrentInstance();
 
 const onlineList = ref([]);
 const loading = ref(true);
@@ -127,16 +129,19 @@ function getList() {
     loading.value = false;
   });
 }
+
 /** 搜索按钮操作 */
 function handleQuery() {
   pageNum.value = 1;
   getList();
 }
+
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
+
 /** 强退按钮操作 */
 function handleForceLogout(row) {
   proxy.$modal
@@ -148,7 +153,8 @@ function handleForceLogout(row) {
         getList();
         proxy.$modal.msgSuccess("删除成功");
       })
-    .catch(() => {});
+      .catch(() => {
+      });
 }
 
 getList();