update index

src/views/monitor/online/index.vue

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