😎调整机构管理页面

Web/src/views/system/menu/index.vue

@@ -154,14 +154,6 @@ const resetQuery = async () => {
 	await xGrid.value?.commitProxy('reload');
 };
 
-// 表格事件
-const gridEvents: VxeGridListeners<SysMenu> = {
-	// 只对 proxy-config.ajax.query 配置时有效，当手动点击查询时会触发该事件
-	async proxyQuery() {
-		state.menuData = xGrid.value?.getTableData().tableData ?? [];
-	},
-};
-
 // 打开新增页面
 const handleAdd = () => {
 	state.title = '添加菜单';
@@ -189,6 +181,14 @@ const handleDelete = (row: any) => {
 		.catch(() => {});
 };
 
+// 表格事件
+const gridEvents: VxeGridListeners<SysMenu> = {
+	// 只对 proxy-config.ajax.query 配置时有效，当手动点击查询时会触发该事件
+	async proxyQuery() {
+		state.menuData = xGrid.value?.getTableData().tableData ?? [];
+	},
+};
+
 // 全部展开
 const handleExpand = () => {
 	xGrid.value?.setAllTreeExpand(true);

Web/src/views/system/org/index.vue

@@ -42,7 +42,7 @@
 				</el-card>
 
 				<el-card class="full-table" shadow="hover" style="margin-top: 5px; flex: 1">
-					<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" :tree-config="{}">
+					<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
 						<template #toolbar_buttons>
 							<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysOrg:add'"> 新增 </el-button>
 							<el-button-group style="padding-left: 12px">
@@ -82,8 +82,8 @@
 import { onMounted, reactive, ref, nextTick } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { auth } from '/@/utils/authFunction';
-import { VxeGridInstance } from 'vxe-table';
+import { VxeGridInstance, VxeGridListeners } from 'vxe-table';
-import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
+import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
 
 import OrgTree from '/@/views/system/org/component/orgTree.vue';
 import EditOrg from '/@/views/system/org/component/editOrg.vue';
@@ -125,11 +125,19 @@ const options = useVxeTable<SysOrg>(
 			{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
 			{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
 		],
-		enableExport: auth('sysOrg:export'),
-		searchCallback: () => handleQuery(),
-		queryAllCallback: () => fetchData({ pageSize: 99999 }),
 	},
-	{ stripe: false, checkboxConfig: { range: false } }
+	// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
+	{
+		stripe: false,
+		checkboxConfig: { range: false },
+		// 代理配置
+		proxyConfig: { autoLoad: true, ajax: { query: () => handleQueryApi() } },
+		// 分页配置
+		pagerConfig: { enabled: false },
+		// 工具栏配置
+		toolbarConfig: { export: false },
+		treeConfig: { expandAll: false },
+	}
 );
 
 // 页面初始化
@@ -143,10 +151,16 @@ onMounted(async () => {
 	});
 });
 
+// 查询api
+const handleQueryApi = async () => {
+	const params = Object.assign(state.queryParams);
+	return getAPI(SysOrgApi).apiSysOrgListGet(params.id, params.name, params.code, params.type);
+};
+
 // 查询操作
 const handleQuery = async (updateTree: boolean = false) => {
 	options.loading = true;
-	var res = await fetchData(null);
+	var res = await handleQueryApi();
 	xGrid.value?.loadData(res.data.result ?? []);
 	options.loading = false;
 	// 是否更新左侧机构列表树
@@ -159,19 +173,13 @@ const handleQuery = async (updateTree: boolean = false) => {
 		state.treeData = res.data.result ?? [];
 };
 
-// 获取数据
-const fetchData = async (tableParams: any) => {
-	let params = Object.assign(state.queryParams, tableParams);
-	return getAPI(SysOrgApi).apiSysOrgListGet(params.id, params.name, params.code, params.type);
-};
-
 // 重置操作
 const resetQuery = async () => {
 	state.queryParams.id = 0;
 	state.queryParams.name = undefined;
 	state.queryParams.code = undefined;
 	state.queryParams.type = undefined;
-	await handleQuery();
+	await xGrid.value?.commitProxy('reload');
 };
 
 // 打开新增页面
@@ -201,6 +209,14 @@ const handleDelete = (row: any) => {
 		.catch(() => {});
 };
 
+// 表格事件
+const gridEvents: VxeGridListeners<SysOrg> = {
+	// 只对 proxy-config.ajax.query 配置时有效，当手动点击查询时会触发该事件
+	async proxyQuery() {
+		state.treeData = xGrid.value?.getTableData().tableData ?? [];
+	},
+};
+
 // 树组件点击
 const handleNodeChange = async (node: any) => {
 	state.queryParams.id = node.id;

Web/src/views/system/region/index.vue

@@ -191,6 +191,20 @@ const handleDelete = (row: any) => {
 		.catch(() => {});
 };
 
+// 表格事件
+const gridEvents: VxeGridListeners<SysRegion> = {
+	// 只对 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);
+	},
+};
+
 // 树组件点击
 const handleNodeChange = async (node: any) => {
 	state.queryParams.pid = node.id;
@@ -227,18 +241,4 @@ const handleExpand = () => {
 const handleFold = () => {
 	xGrid.value?.clearTreeExpand();
 };
-
-// 表格事件
-const gridEvents: VxeGridListeners<SysRegion> = {
-	// 只对 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);
-	},
-};
 </script>

Web/src/views/system/role/index.vue

@@ -192,6 +192,20 @@ const handleDelete = (row: any) => {
 		.catch(() => {});
 };
 
+// 表格事件
+const gridEvents: VxeGridListeners<PageRoleOutput> = {
+	// 只对 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);
+	},
+};
+
 // 打开授权数据范围页面
 const openGrantData = (row: any) => {
 	grantDataRef.value?.openDialog(row);
@@ -206,18 +220,4 @@ const openGrantApi = (row: any) => {
 const openBaseApi = () => {
 	baseApiRef.value?.openDrawer();
 };
-
-// 表格事件
-const gridEvents: VxeGridListeners<PageRoleOutput> = {
-	// 只对 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);
-	},
-};
 </script>

Web/src/views/system/tenant/index.vue

@@ -221,6 +221,20 @@ const handleDelete = (row: any) => {
 		.catch(() => {});
 };
 
+// 表格事件
+const gridEvents: VxeGridListeners<TenantOutput> = {
+	// 只对 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);
+	},
+};
+
 // 打开授权菜单页面
 const openGrantMenu = async (row: any) => {
 	grantMenuRef.value?.openDialog(row);
@@ -290,18 +304,4 @@ const syncTenantDb = (row: any) => {
 		})
 		.catch(() => {});
 };
-
-// 表格事件
-const gridEvents: VxeGridListeners<TenantOutput> = {
-	// 只对 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);
-	},
-};
 </script>

Web/src/views/system/user/index.vue

@@ -228,6 +228,20 @@ const handleDelete = (row: any) => {
 		.catch(() => {});
 };
 
+// 表格事件
+const gridEvents: VxeGridListeners<UserOutput> = {
+	// 只对 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);
+	},
+};
+
 // 修改状态
 const changeStatus = (row: any) => {
 	getAPI(SysUserApi)
@@ -282,18 +296,4 @@ const handleNodeChange = async (node: any) => {
 	state.queryParams.phone = undefined;
 	await handleQuery();
 };
-
-// 表格事件
-const gridEvents: VxeGridListeners<UserOutput> = {
-	// 只对 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);
-	},
-};
 </script>