From 1595cb282aab5399862fac6406b5de550863e3b6 Mon Sep 17 00:00:00 2001
From: 疯狂的狮子Li <15040126243@163.com>
Date: 星期一, 03 四月 2023 00:05:09 +0800
Subject: [PATCH] update 调整代码格式

---
 src/views/monitor/online/index.vue |  154 +++++++++++++++++++++++++--------------------------
 1 files changed, 76 insertions(+), 78 deletions(-)

diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
index eb17ebc..2b56d34 100644
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -1,106 +1,104 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :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>
+  <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>
+    <div class="panel">
       <el-table
-         v-loading="loading"
-         :data="onlineList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
-         style="width: 100%;"
+        v-loading="loading"
+        :data="onlineList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
+        style="width: 100%;"
       >
-         <el-table-column label="搴忓彿" width="50" type="index" align="center">
-            <template #default="scope">
-               <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="浼氳瘽缂栧彿" align="center" prop="tokenId" :show-overflow-tooltip="true" />
-         <el-table-column label="鐧诲綍鍚嶇О" align="center" prop="userName" :show-overflow-tooltip="true" />
-         <el-table-column label="鎵�灞為儴闂�" align="center" prop="deptName" :show-overflow-tooltip="true" />
-         <el-table-column label="涓绘満" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
-         <el-table-column label="鐧诲綍鍦扮偣" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
-         <el-table-column label="鎿嶄綔绯荤粺" align="center" prop="os" :show-overflow-tooltip="true" />
-         <el-table-column label="娴忚鍣�" align="center" prop="browser" :show-overflow-tooltip="true" />
-         <el-table-column label="鐧诲綍鏃堕棿" align="center" 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">
-            <template #default="scope">
-               <el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">寮洪��</el-button>
-            </template>
-         </el-table-column>
+        <el-table-column label="搴忓彿" width="50" type="index" align="center">
+          <template #default="scope">
+            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="浼氳瘽缂栧彿" align="center" prop="tokenId" :show-overflow-tooltip="true" />
+        <el-table-column label="鐧诲綍鍚嶇О" align="center" prop="userName" :show-overflow-tooltip="true" />
+        <el-table-column label="鎵�灞為儴闂�" align="center" prop="deptName" :show-overflow-tooltip="true" />
+        <el-table-column label="涓绘満" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+        <el-table-column label="鐧诲綍鍦扮偣" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+        <el-table-column label="鎿嶄綔绯荤粺" align="center" prop="os" :show-overflow-tooltip="true" />
+        <el-table-column label="娴忚鍣�" align="center" prop="browser" :show-overflow-tooltip="true" />
+        <el-table-column label="鐧诲綍鏃堕棿" align="center" 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">
+          <template #default="scope">
+            <el-tooltip content="寮洪��" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
       </el-table>
 
-      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
-   </div>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" />
+    </div>
+  </div>
 </template>
 
-<script setup name="Online">
+<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();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const onlineList = ref([]);
+const onlineList = ref<OnlineVO[]>([]);
 const loading = ref(true);
 const total = ref(0);
-const pageNum = ref(1);
-const pageSize = ref(10);
 
-const queryParams = ref({
-  ipaddr: undefined,
-  userName: undefined
+const queryFormRef = ref(ElForm);
+
+const queryParams = ref<OnlineQuery>({
+    pageNum: 1,
+    pageSize: 10,
+    ipaddr: '',
+    userName: ''
 });
 
 /** 鏌ヨ鐧诲綍鏃ュ織鍒楄〃 */
-function getList() {
-  loading.value = true;
-  initData(queryParams.value).then(response => {
-    onlineList.value = response.rows;
-    total.value = response.total;
+const getList = async () => {
+    loading.value = true;
+    const res = await initData(queryParams.value);
+    onlineList.value = res.rows;
+    total.value = res.total;
     loading.value = false;
-  });
 }
 /** 鎼滅储鎸夐挳鎿嶄綔 */
-function handleQuery() {
-  pageNum.value = 1;
-  getList();
+const handleQuery = () => {
+    queryParams.value.pageNum = 1;
+    getList();
 }
 /** 閲嶇疆鎸夐挳鎿嶄綔 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+const resetQuery = () => {
+    queryFormRef.value.resetFields();
+    handleQuery();
 }
 /** 寮洪��鎸夐挳鎿嶄綔 */
-function handleForceLogout(row) {
-    proxy.$modal.confirm('鏄惁纭寮洪��鍚嶇О涓�"' + row.userName + '"鐨勭敤鎴�?').then(function () {
-  return forceLogout(row.tokenId);
-  }).then(() => {
+const handleForceLogout = async (row: OnlineVO) => {
+    await proxy?.$modal.confirm('鏄惁纭寮洪��鍚嶇О涓�"' + row.userName + '"鐨勭敤鎴�?');
+    await forceLogout(row.tokenId);
     getList();
-    proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-  }).catch(() => {});
+    proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛");
 }
 
-getList();
+onMounted(() => {
+    getList();
+})
 </script>

--
Gitblit v1.9.3