From c13c622eac5551c6f099f148feb5256711ca34de Mon Sep 17 00:00:00 2001
From: 疯狂的狮子Li <15040126243@163.com>
Date: 星期二, 11 七月 2023 21:03:01 +0800
Subject: [PATCH] !25 部分优化以及新增功能 Merge pull request !25 from ahaos/tspr

---
 src/views/monitor/online/index.vue |   71 ++++++++++++++++++-----------------
 1 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
index 2b56d34..6d7bf87 100644
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -1,20 +1,22 @@
 <template>
   <div class="p-2">
-    <div class="search">
-      <el-form :model="queryParams" ref="queryFormRef" :inline="true">
-        <el-form-item label="鐧诲綍鍦板潃" prop="ipaddr">
-          <el-input v-model="queryParams.ipaddr" placeholder="璇疯緭鍏ョ櫥褰曞湴鍧�" clearable style="width: 200px" @keyup.enter="handleQuery" />
-        </el-form-item>
-        <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName">
-          <el-input v-model="queryParams.userName" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" clearable 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="Refresh" @click="resetQuery">閲嶇疆</el-button>
-        </el-form-item>
-      </el-form>
+    <div class="mb-[10px]">
+      <el-card shadow="hover">
+        <el-form :model="queryParams" ref="queryFormRef" :inline="true">
+          <el-form-item label="鐧诲綍鍦板潃" prop="ipaddr">
+            <el-input v-model="queryParams.ipaddr" placeholder="璇疯緭鍏ョ櫥褰曞湴鍧�" clearable style="width: 200px" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName">
+            <el-input v-model="queryParams.userName" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" clearable 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="Refresh" @click="resetQuery">閲嶇疆</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
     </div>
-    <div class="panel">
+    <el-card shadow="hover">
       <el-table
         v-loading="loading"
         :data="onlineList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
@@ -48,13 +50,12 @@
       </el-table>
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" />
-    </div>
+    </el-card>
   </div>
 </template>
 
 <script setup name="Online" lang="ts">
 import { forceLogout, list as initData } from "@/api/monitor/online";
-import { ComponentInternalInstance } from "vue";
 import { OnlineQuery, OnlineVO } from "@/api/monitor/online/types";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -63,42 +64,42 @@
 const loading = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
 
 const queryParams = ref<OnlineQuery>({
-    pageNum: 1,
-    pageSize: 10,
-    ipaddr: '',
-    userName: ''
+  pageNum: 1,
+  pageSize: 10,
+  ipaddr: '',
+  userName: ''
 });
 
 /** 鏌ヨ鐧诲綍鏃ュ織鍒楄〃 */
 const getList = async () => {
-    loading.value = true;
-    const res = await initData(queryParams.value);
-    onlineList.value = res.rows;
-    total.value = res.total;
-    loading.value = false;
+  loading.value = true;
+  const res = await initData(queryParams.value);
+  onlineList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
 }
 /** 鎼滅储鎸夐挳鎿嶄綔 */
 const handleQuery = () => {
-    queryParams.value.pageNum = 1;
-    getList();
+  queryParams.value.pageNum = 1;
+  getList();
 }
 /** 閲嶇疆鎸夐挳鎿嶄綔 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
-    handleQuery();
+  queryFormRef.value?.resetFields();
+  handleQuery();
 }
 /** 寮洪��鎸夐挳鎿嶄綔 */
 const handleForceLogout = async (row: OnlineVO) => {
-    await proxy?.$modal.confirm('鏄惁纭寮洪��鍚嶇О涓�"' + row.userName + '"鐨勭敤鎴�?');
-    await forceLogout(row.tokenId);
-    getList();
-    proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+  await proxy?.$modal.confirm('鏄惁纭寮洪��鍚嶇О涓�"' + row.userName + '"鐨勭敤鎴�?');
+  await forceLogout(row.tokenId);
+  getList();
+  proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛");
 }
 
 onMounted(() => {
-    getList();
+  getList();
 })
 </script>

--
Gitblit v1.9.3