From 323c1aa8d61a4a828b68ec14dca4c1c95c8bffe0 Mon Sep 17 00:00:00 2001 From: zuohuaijun Date: Thu, 11 Jul 2024 00:48:37 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=98=8E=E8=B0=83=E6=95=B4=E5=9C=A8?= =?UTF-8?q?=E7=BA=BF=E7=94=A8=E6=88=B7=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Web/src/views/system/onlineUser/index.vue | 126 +++++++++++----------- 1 file changed, 61 insertions(+), 65 deletions(-) diff --git a/Web/src/views/system/onlineUser/index.vue b/Web/src/views/system/onlineUser/index.vue index b40e5055..c107c44d 100644 --- a/Web/src/views/system/onlineUser/index.vue +++ b/Web/src/views/system/onlineUser/index.vue @@ -12,12 +12,12 @@ - + - + @@ -28,7 +28,7 @@ - 查询 + 查询 重置 @@ -36,7 +36,7 @@ - + - @@ -72,14 +63,15 @@ import { onMounted, reactive, ref } from 'vue'; import { ElMessageBox, ElNotification } from 'element-plus'; import { throttle } from 'lodash-es'; import { signalR } from './signalR'; -import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table'; -import { useVxeTable } from '/@/hooks/vxeTableOptionsHook'; +import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table'; +import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook'; +import { Local } from '/@/utils/storage'; import SendMessage from '/@/views/system/onlineUser/component/sendMessage.vue'; import { getAPI, clearAccessTokens } from '/@/utils/axios-utils'; import { SysOnlineUserApi, SysAuthApi } from '/@/api-services/api'; -import { SysOnlineUser } from '/@/api-services/models'; +import { SysOnlineUser, PageOnlineUserInput } from '/@/api-services/models'; const xGrid = ref(); const sendMessageRef = ref>(); @@ -89,13 +81,9 @@ const state = reactive({ userName: undefined, realName: undefined, }, - tableParams: { - page: 1, - pageSize: 50, - field: 'id', // 默认的排序字段 - order: 'aes', // 排序方向 - descStr: 'desc', // 降序排序的关键字符 - total: 0 as any, + localPageParam: { + pageSize: 50 as number, + defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' }, }, onlineUserList: [] as Array, // 在线用户列表 lastUserState: { @@ -104,28 +92,41 @@ const state = reactive({ }, // 最后接收的用户变更状态信息 }); +// 本地存储参数 +const localPageParamKey = 'localPageParam:sysOnlineUser'; // 表格参数配置 -const options = useVxeTable({ - id: 'sysOnlineUser', - name: '在线用户', - columns: [ - // { type: 'checkbox', width: 40, fixed: 'left' }, - { type: 'seq', title: '序号', width: 50, fixed: 'left' }, - { field: 'userName', title: '账号', minWidth: 110, showOverflow: 'tooltip' }, - { field: 'realName', title: '姓名', minWidth: 110, showOverflow: 'tooltip' }, - { field: 'ip', title: 'IP地址', minWidth: 100, showOverflow: 'tooltip' }, - { field: 'browser', title: '浏览器', minWidth: 160, showOverflow: 'tooltip' }, - // { field: 'connectionId', title: '连接Id', minWidth: 160, showOverflow: 'tooltip', sortable: true }, - { field: 'time', title: '登录时间', minWidth: 120, showOverflow: 'tooltip' }, - { title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } }, - ], - enableExport: true, - searchCallback: () => handleQuery(), - queryAllCallback: () => fetchData({ pageSize: 99999 }), -}); +const options = useVxeTable( + { + id: 'sysOnlineUser', + name: '在线用户', + columns: [ + // { type: 'checkbox', width: 40, fixed: 'left' }, + { type: 'seq', title: '序号', width: 50, fixed: 'left' }, + { field: 'userName', title: '账号', minWidth: 110, showOverflow: 'tooltip' }, + { field: 'realName', title: '姓名', minWidth: 110, showOverflow: 'tooltip' }, + { field: 'ip', title: 'IP地址', minWidth: 100, showOverflow: 'tooltip' }, + { field: 'browser', title: '浏览器', minWidth: 160, showOverflow: 'tooltip' }, + // { field: 'connectionId', title: '连接Id', minWidth: 160, showOverflow: 'tooltip', sortable: true }, + { field: 'time', title: '登录时间', minWidth: 120, showOverflow: 'tooltip' }, + { title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } }, + ], + }, + // vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档 + { + // 代理配置 + proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } }, + // 排序配置 + sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort }, + // 分页配置 + pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize }, + // 工具栏配置 + toolbarConfig: { export: false }, + } +); // 页面初始化 onMounted(async () => { + state.localPageParam = Local.get(localPageParamKey) || state.localPageParam; // 在线用户列表 signalR.off('OnlineUserList'); signalR.on('OnlineUserList', (data: any) => { @@ -170,20 +171,15 @@ const openDrawer = () => { handleQuery(); }; -// 查询操作 -const handleQuery = async (reset = false) => { - options.loading = true; - if (reset) state.tableParams.page = 1; - var res = await fetchData(null); - xGrid.value?.loadData(res.data.result?.items ?? []); - state.tableParams.total = res.data.result?.total; - options.loading = false; +// 查询api +const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => { + const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageOnlineUserInput; + return getAPI(SysOnlineUserApi).apiSysOnlineUserPagePost(params); }; -// 获取数据 -const fetchData = async (tableParams: any) => { - let params = Object.assign(state.queryParams, state.tableParams, tableParams); - return getAPI(SysOnlineUserApi).apiSysOnlineUserPagePost(params); +// 查询操作 +const handleQuery = async () => { + await xGrid.value?.commitProxy('query'); }; // 重置操作 @@ -213,18 +209,18 @@ const forceOffline = async (row: any) => { .catch(() => {}); }; -// 改变页码序号或页面容量 -const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => { - state.tableParams.page = currentPage; - state.tableParams.pageSize = pageSize; - handleQuery(); -}; - -// 列排序 -const sortChange = (options: any) => { - state.tableParams.field = options.field; - state.tableParams.order = options.order; - handleQuery(); +// 表格事件 +const gridEvents: VxeGridListeners = { + // 只对 pager-config 配置时有效，分页发生改变时会触发该事件 + async pageChange({ pageSize }) { + state.localPageParam.pageSize = pageSize; + Local.set(localPageParamKey, state.localPageParam); + }, + // 当排序条件发生变化时会触发该事件 + async sortChange({ field, order }) { + state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' }; + Local.set(localPageParamKey, state.localPageParam); + }, }; // 导出对象