diff --git a/Web/src/views/system/oAuthUser/index.vue b/Web/src/views/system/oAuthUser/index.vue
index cd1ea04b..3b845e7e 100644
--- a/Web/src/views/system/oAuthUser/index.vue
+++ b/Web/src/views/system/oAuthUser/index.vue
@@ -5,12 +5,12 @@
-
+
-
+
@@ -21,7 +21,7 @@
- 查询
+ 查询
重置
@@ -29,7 +29,7 @@
-
+
@@ -61,15 +61,6 @@
-
-
-
@@ -81,15 +72,16 @@
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
-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 EditOAuthUser from '/@/views/system/oAuthUser/component/editOAuthUser.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysOAuthUserApi } from '/@/api-services/api';
-import { SysOAuthUser } from '/@/api-services/models';
+import { SysOAuthUser, OAuthUserInput } from '/@/api-services/models';
const xGrid = ref();
const editOAuthUserRef = ref>();
@@ -98,81 +90,71 @@ const state = reactive({
nickName: undefined,
mobile: 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' },
},
title: '',
});
+// 本地存储参数
+const localPageParamKey = 'localPageParam:weChatUser';
// 表格参数配置
-const options = useVxeTable({
- id: 'weChatUser',
- name: '三方账号',
- columns: [
- // { type: 'checkbox', width: 40, fixed: 'left' },
- { type: 'seq', title: '序号', width: 60, fixed: 'left' },
- { field: 'openId', title: 'OpenId', minWidth: 200, showOverflow: 'tooltip' },
- { field: 'unionId', title: 'UnionId', minWidth: 200, showOverflow: 'tooltip' },
- { field: 'platformType', title: '平台类型', minWidth: 110, showOverflow: 'tooltip', slots: { default: 'row_platformType' } },
- { field: 'nickName', title: '昵称', minWidth: 160, showOverflow: 'tooltip' },
- { field: 'avatar', title: '头像', minWidth: 70, slots: { default: 'row_avatar' } },
- { field: 'mobile', title: '手机号码', minWidth: 160, showOverflow: 'tooltip' },
- { field: 'sex', title: '性别', minWidth: 60, showOverflow: 'tooltip', slots: { default: 'row_sex' } },
- { field: 'city', title: '城市', minWidth: 150, showOverflow: 'tooltip' },
- { field: 'province', title: '省', minWidth: 120, showOverflow: 'tooltip' },
- { field: 'country', title: '国家', minWidth: 150, showOverflow: 'tooltip' },
- { title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
- ],
- enableExport: auth('sysOAuthUser:export'),
- searchCallback: () => handleQuery(),
- queryAllCallback: () => fetchData({ pageSize: 99999 }),
-});
+const options = useVxeTable(
+ {
+ id: 'weChatUser',
+ name: '三方账号',
+ columns: [
+ // { type: 'checkbox', width: 40, fixed: 'left' },
+ { type: 'seq', title: '序号', width: 60, fixed: 'left' },
+ { field: 'openId', title: 'OpenId', minWidth: 200, showOverflow: 'tooltip' },
+ { field: 'unionId', title: 'UnionId', minWidth: 200, showOverflow: 'tooltip' },
+ { field: 'platformType', title: '平台类型', minWidth: 110, showOverflow: 'tooltip', slots: { default: 'row_platformType' } },
+ { field: 'nickName', title: '昵称', minWidth: 160, showOverflow: 'tooltip' },
+ { field: 'avatar', title: '头像', minWidth: 70, slots: { default: 'row_avatar' } },
+ { field: 'mobile', title: '手机号码', minWidth: 160, showOverflow: 'tooltip' },
+ { field: 'sex', title: '性别', minWidth: 60, showOverflow: 'tooltip', slots: { default: 'row_sex' } },
+ { field: 'city', title: '城市', minWidth: 150, showOverflow: 'tooltip' },
+ { field: 'province', title: '省', minWidth: 120, showOverflow: 'tooltip' },
+ { field: 'country', title: '国家', minWidth: 150, 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;
await 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;
-};
-
-// 获取数据
-const fetchData = async (tableParams: any) => {
- let params = Object.assign(state.queryParams, state.tableParams, tableParams);
+// 查询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 OAuthUserInput;
return getAPI(SysOAuthUserApi).apiSysOAuthUserPagePost(params);
};
+// 查询操作
+const handleQuery = async () => {
+ await xGrid.value?.commitProxy('query');
+};
+
// 重置操作
-const resetQuery = () => {
+const resetQuery = async () => {
state.queryParams.nickName = undefined;
state.queryParams.mobile = undefined;
- handleQuery(true);
-};
-
-// 改变页码序号或页面容量
-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();
+ await xGrid.value?.commitProxy('reload');
};
// 打开编辑页面
@@ -195,4 +177,18 @@ const handleDelete = (row: any) => {
})
.catch(() => {});
};
+
+// 表格事件
+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);
+ },
+};