reactor:待办，首页，综合查询表格重构完成;

src/views/auxiliary/area/components/Area-edit.vue

@@ -1,6 +1,6 @@
 <template>
 	<el-dialog title="修改区域" v-model="state.dialogVisible" width="769px" draggable @close="close">
-		<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="80px">
+		<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="80px" v-loading="state.loading">
 			<el-row :gutter="10">
 				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
 					<el-form-item label="区域名称" prop="areaName" :rules="[{ required: true, message: '请填写区域名称', trigger: 'blur' }]">
@@ -63,13 +63,16 @@ const state = reactive<any>({
 });
 // 打开弹窗
 const openDialog = async (row: any, areaData: any) => {
+	state.dialogVisible = true;
+	state.loading = true;
 	try {
 		state.areaData = other.deepClone(areaData);
 		state.areaData = excludeSelfById(state.areaData, row.id);
 		const res: any = await treeAreaDetail(row.id);
 		state.ruleForm = res.result;
-		state.dialogVisible = true;
+		state.loading = false;
 	} catch (error) {
+		state.loading = false;
 		console.log(error);
 	}
 };

src/views/auxiliary/area/index.vue

@@ -1,213 +1,124 @@
 <template>
 	<div class="auxiliary-area-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<el-row class="mb20" :gutter="10">
-				<el-col :xs="24" :sm="12" :md="18" :lg="18" :xl="18">
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="关键字" prop="keyword" class="mb0">
-							<el-input v-model="state.queryParams.keyword" placeholder="区域名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item class="mb0">
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="text-align: right">
-					<el-button type="primary" @click="expand"
-						><SvgIcon
-							name="ele-ArrowDownBold"
-							style="transition: transform var(--el-transition-duration)"
-							:style="state.isExpand ? 'transform: none' : 'transform: rotateZ(180deg)'"
-							class="mr5"
-						/>
-						{{ state.isExpand ? '收起' : '展开' }}</el-button
-					>
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+				<el-form-item label="关键字" prop="keyword">
+					<el-input v-model="state.queryParams.keyword" placeholder="区域名称" clearable @keyup.enter="handleQuery" class="keyword-input" v-trim />
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.tableLoading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+				<template #buttons>
 					<el-button type="primary" @click="onAddArea" v-auth="'auxiliary:area:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
-				</el-col>
-			</el-row>
-			<!-- 表格 -->
-			<el-auto-resizer class="table" v-loading="state.loading">
-				<template #default="{ height, width }">
-					<el-table-v2
-						v-model:expanded-row-keys="state.expandedRowKeys"
-						:columns="state.columns"
-						:data="state.orgTableData"
-						expand-column-key="areaName"
-						fixed
-						:width="width"
-						:height="height"
-						ref="virtuallyTableRef"
-            :scrollbar-always-on="true"
-            :row-height="40"
-            :header-height="40"
-					>
-					</el-table-v2>
 				</template>
-			</el-auto-resizer>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					:loading="state.loading"
+					:data="list"
+					:column-config="{ resizable: true, useKey: true }"
+					:row-config="{ isCurrent: true, isHover: true, useKey: true, height: 36 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="auxiliaryArea"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					:tree-config="{
+						childrenField: 'children',
+						transform: true,
+						rowField: 'id',
+						parentField: 'parentId',
+					}"
+				>
+					<vxe-column field="areaName" title="区域名称" min-width="400" treeNode>
+						<template #default="{ row }">
+							<p style="display: flex; align-items: center">
+								<span class="pl5" v-html="row.areaName"></span>
+							</p>
+						</template>
+					</vxe-column>
+					<vxe-column field="id" title="区域代码" min-width="350">
+						<template #default="{ row }">
+							<p style="display: flex; align-items: center">
+								<span class="pl5" v-html="row.id"></span>
+							</p>
+						</template>
+					</vxe-column>
+					<vxe-column field="creationTime" title="创建时间" width="160" align="center">
+						<template #default="{ row }">
+							<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="150" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onEditArea(row)" title="修改" v-auth="'auxiliary:area:edit'" v-if="row.isCanModify">
+								修改
+							</el-button>
+							<el-button link type="danger" @click="onDelArea(row)" title="删除" v-auth="'auxiliary:area:delete'" v-if="row.isCanModify">
+								删除
+							</el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
 		</div>
 		<area-add ref="areaAddRef" @updateList="queryList" />
 		<area-edit ref="areaEditRef" @updateList="queryList" />
 	</div>
 </template>
 <script lang="tsx" setup name="auxiliaryArea">
-import { defineAsyncComponent, onActivated, onMounted, reactive, ref, watch } from 'vue';
+import { defineAsyncComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
-import { auth } from '@/utils/authFunction';
-import { throttle } from '@/utils/tools';
-import other from '@/utils/other';
 import { treeArea, treeAreaDelete } from '@/api/auxiliary/area';
+import XEUtils from 'xe-utils';
 // 引入组件
 const AreaAdd = defineAsyncComponent(() => import('@/views/auxiliary/area/components/Area-add.vue')); // 新增区域
 const AreaEdit = defineAsyncComponent(() => import('@/views/auxiliary/area/components/Area-edit.vue')); // 编辑区域
 
 // 定义变量内容
 const state = reactive<any>({
-	orgTableData: [], // 获取所有菜单
-	staticArr: [], // 静态数据
 	loading: false, // 加载状态
 	queryParams: {
 		keyword: null, // 关键字
 	},
-	expandedRowKeys: [], // 展开行
-	columns: [
-		{
-			key: 'areaName',
-			dataKey: 'areaName',
-			title: '区域名称',
-			width: 600,
-		},
-		{
-			key: 'id',
-			dataKey: 'id',
-			title: '区域代码',
-			width: 400,
-		},
-		{
-			key: 'creationTime',
-			dataKey: 'creationTime',
-			title: '创建时间',
-			width: 200,
-			cellRenderer: (data: any) => {
-				return <span>{formatDate(new Date(data.rowData.creationTime), 'YYYY-mm-dd HH:MM:SS')}</span>;
-			},
-		},
-		{
-			key: 'handle',
-			title: '操作',
-			width: 100,
-			fixed: 'right',
-			align: 'center',
-			cellRenderer: ({ rowData }: any) => {
-				return (
-					<span class="flex">
-						{auth('auxiliary:area:edit') && rowData.isCanModify ? (
-							<ElButton onClick={() => onEditArea(rowData)} type="primary" title="修改" link>
-								修改
-							</ElButton>
-						) : (
-							''
-						)}
-						{auth('auxiliary:area:delete') && rowData.isCanModify ? (
-							<ElButton onClick={() => onDelArea(rowData)} type="danger" title="删除" link>
-								删除
-							</ElButton>
-						) : (
-							''
-						)}
-					</span>
-				);
-			},
-		},
-	],
-	isExpand: false, // 是否展开
 });
 const ruleFormRef = ref<RefType>(); // 搜索表单ref
-// 搜索
-const formatTable = (list: any[], keyword: string) => {
-	if (!list.length || !Array.isArray(list)) return [];
-	let emptyArr: any[] = [];
-	list.map((item) => {
-		if (item.areaName.includes(keyword)) {
-			if (item.children && Array.isArray(item.children) && item.children.length > 0) {
-				item.children = formatTable(item.children, keyword);
-			}
-			emptyArr.push(item);
-		} else if (item.children && Array.isArray(item.children) && item.children.length > 0) {
-			item.children = formatTable(item.children, keyword);
-			if (item.children.length) {
-				emptyArr.push(item);
-			}
-		}
-	});
-	return emptyArr;
-};
-let emptyArr: any[] = [];
-const getExpand = (list: any[]) => {
-	if (!list.length || !Array.isArray(list)) return [];
-	list.map((item) => {
-		if (item.children && Array.isArray(item.children) && item.children.length > 0) {
-			getExpand(item.children);
-		}
-		emptyArr.push(item.id);
-	});
-	return emptyArr;
-};
 /** 搜索按钮操作 节流操作 */
 const handleQuery = () => {
-	if (state.queryParams.keyword) {
-		state.loading = true;
-		state.expandedRowKeys = [];
-		emptyArr = [];
-		state.orgTableData = formatTable(other.deepClone(state.staticArr), state.queryParams.keyword);
-		state.expandedRowKeys = getExpand(state.orgTableData);
-		state.isExpand = true;
-		state.loading = false;
-	} else {
-		queryList();
-	}
-}
+	queryList();
+};
 /** 重置按钮操作 */
 const resetQuery = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
 	queryList();
-	state.expandedRowKeys = [];
-	emptyArr = [];
-	state.isExpand = false;
-}
+};
 // 打开新增弹窗
 const areaAddRef = ref<RefType>(); // 新增组织机构ref
 const onAddArea = (row?: any) => {
-	areaAddRef.value.openDialog(state.orgTableData, row);
+	areaAddRef.value.openDialog(tableData.value, row);
 };
 // 打开编辑弹窗
 const areaEditRef = ref<RefType>(); // 编辑组织机构ref
 const onEditArea = (row: any) => {
-	areaEditRef.value.openDialog(row, state.orgTableData);
-};
-const expand = () => {
-	state.isExpand = !state.isExpand;
-};
-watch(
-	() => state.isExpand,
-	(old: Boolean) => {
-		if (old) getAllIds(state.orgTableData);
-		else state.expandedRowKeys = [];
-	}
-);
-const getAllIds = (arr: any) => {
-	if (!arr) return [];
-	arr.forEach((v: any) => {
-		if (v.children?.length) {
-			getAllIds(v.children);
-			state.expandedRowKeys.push(v.id);
-		}
-	});
+	areaEditRef.value.openDialog(row, tableData.value);
 };
 // 删除当前行
 const onDelArea = (row: any) => {
@@ -225,12 +136,46 @@ const onDelArea = (row: any) => {
 		.catch(() => {});
 };
 // 获取所有部门结构
+const tableData = ref<EmptyArrayType>([]);
+const list = ref<any[]>([]);
 const queryList = async () => {
 	state.loading = true;
 	try {
-		const res: any = await Promise.all([treeArea()]);
-		state.orgTableData = res[0].result ?? [];
-		state.staticArr = res[0].result ?? [];
+		const res: any = await treeArea();
+		tableData.value = res?.result ?? [];
+
+		const filterVal = XEUtils.toValueString(state.queryParams.keyword)?.trim().toLowerCase();
+		if (filterVal) {
+			const filterRE = new RegExp(filterVal, 'gi');
+			const options = { children: 'children' };
+			const searchProps = ['areaName', 'id'];
+			// 搜索为克隆数据，不会污染源数据
+			const rest = XEUtils.searchTree(
+				tableData.value,
+				(item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
+				options
+			);
+			XEUtils.eachTree(
+				rest,
+				(item) => {
+					searchProps.forEach((key) => {
+						item[key] = String(item[key]).replace(filterRE, (match) => `<span class="keyword-highlight">${match}</span>`);
+					});
+				},
+				options
+			);
+			list.value = rest;
+			list.value = XEUtils.toTreeArray(list.value);
+			await nextTick(() => {
+				// 搜索之后默认展开所有子节点
+				if (tableRef.value) {
+					tableRef.value.setAllTreeExpand(true);
+				}
+			});
+		} else {
+			list.value = tableData.value;
+			list.value = XEUtils.toTreeArray(list.value);
+		}
 		state.loading = false;
 	} catch (error) {
 		console.log(error);
@@ -238,18 +183,12 @@ const queryList = async () => {
 	}
 };
 // 页面加载时
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
-});
-const virtuallyTableRef = ref<RefType>();
-onActivated(() => {
-	virtuallyTableRef.value.scrollToTop(0); // 回到顶部
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>
-<style lang="scss" scoped>
-.auxiliary-area-container {
-	.table {
-		flex: 1;
-	}
-}
-</style>

src/views/auxiliary/clearCache/index.vue

@@ -1,52 +1,68 @@
 <template>
 	<div class="auxiliary-clear-cache-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<el-row class="mb20" :gutter="10">
-				<el-col :xs="24" :sm="12" :md="18" :lg="18" :xl="18">
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="缓存key" prop="keyword">
-							<el-input v-model="state.queryParams.keyword" placeholder="缓存key名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
-						</el-form-item>
-					</el-form>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="text-align: right">
-					<el-button type="danger" @click="cacheKeysRemove" v-auth="'auxiliary:eventClass:delete'" :loading="state.loading" :disabled="disabled">
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+				<el-form-item label="缓存key" prop="keyword">
+					<el-input v-model="state.queryParams.keyword" placeholder="缓存key名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+				<template #buttons>
+					<el-button type="danger" @click="cacheKeysRemove" v-auth="'auxiliary:eventClass:delete'" :loading="state.loading" :disabled="isChecked">
 						<SvgIcon name="ele-Delete" class="mr5" />删除
 					</el-button>
-				</el-col>
-			</el-row>
-			<!-- 表格 -->
-			<el-auto-resizer class="table" v-loading="state.loading">
-				<template #default="{ height, width }">
-					<el-table-v2
-						:columns="columns"
-						:data="state.tableData"
-						expand-column-key="eventName"
-						fixed
-						:width="width"
-						:height="height-5"
-						ref="virtuallyTableRef"
-						:scrollbar-always-on="true"
-						:row-height="40"
-						:header-height="40"
-					>
-					</el-table-v2>
 				</template>
-			</el-auto-resizer>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					:loading="state.loading"
+					:data="list"
+					:column-config="{ resizable: true, useKey: true }"
+					:row-config="{ isCurrent: true, isHover: true, useKey: true, height: 36 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="auxiliaryClearCache"
+					:custom-config="{ storage: true }"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					:checkbox-config="{ highlight: true }"
+				>
+					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
+					<vxe-column field="id" title="缓存key">
+						<template #default="{ row }">
+							<span v-html="row.id"></span>
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="80" align="center">
+						<template #default="{ row }">
+							<el-button link type="danger" @click="onDelete(row)" title="删除" v-auth="'auxiliary:eventClass:delete'"> 删除 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="tsx" setup name="auxiliaryClearCache">
-import { computed, FunctionalComponent, onActivated, onMounted, reactive, ref, unref } from 'vue';
-import { type CheckboxValueType, ElMessage, ElMessageBox, FormInstance, ElCheckbox } from 'element-plus';
+import { computed, onMounted, reactive, ref, unref } from 'vue';
+import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { clearCache, getAllCacheKey } from '@/api/auxiliary/clearCache';
-import { auth } from '@/utils/authFunction';
-import other from '@/utils/other';
+import XEUtils from 'xe-utils';
 
 // 定义变量内容
 const state = reactive<any>({
@@ -58,95 +74,43 @@ const state = reactive<any>({
 	tableData: [], // 表格数据
 	staticArr: [],
 });
-// 表格搜索
-const formatTable = (data: any, keyword: string) => {
-	return data.filter((item: any) => item.id.includes(keyword));
-};
 const ruleFormRef = ref<any>(null); // 表单ref
 /** 搜索按钮操作 */
 const handleQuery = () => {
-	if (state.queryParams.keyword) {
-		state.tableData = formatTable(other.deepClone(state.staticArr), state.queryParams.keyword);
-	} else {
-		queryList();
-	}
-};
-type SelectionCellProps = {
-	value: boolean;
-	intermediate?: boolean;
-	onChange: (value: CheckboxValueType) => void;
-};
-const SelectionCell: FunctionalComponent<SelectionCellProps> = ({ value, intermediate = false, onChange }) => {
-	return <ElCheckbox onChange={onChange} modelValue={value} indeterminate={intermediate} />;
-};
-const disabled = computed(() => {
-	return !isCheck(state.tableData);
-});
-const columns = ref<any[]>([
-	{
-		key: 'selection',
-		width: 50,
-		cellRenderer: ({ rowData }) => {
-			const onChange = (value: CheckboxValueType) => (rowData.checked = value);
-			return <SelectionCell value={rowData.checked} onChange={onChange} />;
-		},
-
-		headerCellRenderer: () => {
-			const _data = unref(state.tableData);
-			const onChange = (value: CheckboxValueType) =>
-				(state.tableData = _data.map((row) => {
-					row.checked = value;
-					return row;
-				}));
-			const allSelected = _data.every((row) => row.checked);
-			const containsChecked = _data.some((row) => row.checked);
-
-			return <SelectionCell value={allSelected} intermediate={containsChecked && !allSelected} onChange={onChange} />;
-		},
-	},
-	{
-		key: 'id',
-		dataKey: 'id',
-		title: '缓存key',
-		width: 800,
-	},
-	{
-		key: 'orderBy',
-		dataKey: 'orderBy',
-		title: '操作',
-		width: 100,
-		cellRenderer: (data: any) => {
-			return auth('auxiliary:clearCache:delete') ? (
-				<el-button link type="danger" onClick={() => onDelete(data)}>
-					删除
-				</el-button>
-			) : (
-				''
-			);
-		},
-	},
-]);
-const isCheck = (data: any) => {
-	return data.some((item: any) => item.checked);
+	queryList();
 };
 // 获取列表
+const tableData = ref<EmptyArrayType>([]);
+const list = ref<any[]>([]);
 const queryList = () => {
 	state.loading = true;
 	getAllCacheKey(state.queryParams)
 		.then((res) => {
 			state.loading = false;
-			state.tableData = res.result.map((item: any) => {
-				return {
-					id: item,
-				};
-			});
-			state.staticArr = res.result.map((item: any) => {
+			tableData.value = res.result.map((item: any) => {
 				return {
 					id: item,
 				};
 			});
+			const filterVal = String(state.queryParams.keyword).trim().toLowerCase();
+			if (state.queryParams.keyword && filterVal) {
+				const filterRE = new RegExp(filterVal, 'gi');
+				const searchProps = ['id'];
+				const rest = tableData.value.filter((item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(filterVal) > -1));
+				list.value = rest.map((row) => {
+					// 搜索为克隆数据，不会污染源数据
+					const item = XEUtils.clone(row);
+					searchProps.forEach((key) => {
+						item[key] = String(item[key]).replace(filterRE, (match) => `<span class="keyword-highlight">${match}</span>`);
+					});
+					return item;
+				});
+			} else {
+				list.value = tableData.value;
+			}
 		})
-		.finally(() => {
+		.catch((err: any) => {
+			console.log(err, '111');
 			state.loading = false;
 		});
 };
@@ -156,10 +120,29 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const isChecked = computed(() => {
+	return !Boolean(checkTable.value.length);
+});
 // 删除缓存
 const cacheKeysRemove = () => {
-	const ids = state.tableData.filter((item: any) => item.checked).map((item: any) => item.id);
-	ElMessageBox.confirm(`您确定要删除选中${ids.length}个的缓存key，是否继续?`, '提示', {
+	const ids = checkTable.value.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定要删除选中的缓存key，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -177,7 +160,7 @@ const cacheKeysRemove = () => {
 };
 // 删除缓存
 const onDelete = (row: any) => {
-	ElMessageBox.confirm(`您确定要删除缓存 ${row.rowData.id}?`, '提示', {
+	ElMessageBox.confirm(`您确定要删除缓存 ${row.id}?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -186,19 +169,20 @@ const onDelete = (row: any) => {
 		autofocus: false,
 	})
 		.then(() => {
-			clearCache({ keys: [row.rowData.id] }).then(() => {
+			clearCache({ keys: [row.id] }).then(() => {
 				ElMessage.success('操作成功');
 				queryList();
 			});
 		})
 		.catch(() => {});
 };
-const virtuallyTableRef = ref<RefType>();
-onActivated(() => {
-	virtuallyTableRef.value.scrollToTop(0); // 回到顶部
-});
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 // 页面加载时
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/auxiliary/eventClass/index.vue

@@ -3,7 +3,7 @@
 		<div class="layout-padding-auto layout-padding-view pd20">
 			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
 				<el-form-item label="关键字" prop="keyword">
-					<el-input v-model="state.queryParams.keyword" placeholder="事件名称" @keyup.enter="handleQuery" class="keyword-input" />
+					<el-input v-model="state.queryParams.keyword" placeholder="事件名称" @keyup.enter="handleQuery" class="keyword-input" v-trim />
 				</el-form-item>
 				<el-form-item>
 					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
@@ -37,7 +37,7 @@
 					auto-resize
 					show-overflow
 					:scrollY="{ enabled: true, gt: 0 }"
-					id="systemMenu"
+					id="auxiliaryEvent"
 					:custom-config="{ storage: true }"
 					showHeaderOverflow
 					:tree-config="{
@@ -49,7 +49,7 @@
 					:checkbox-config="{ labelField: 'id', highlight: true }"
 					@checkbox-change="selectChangeEvent"
 				>
-					<vxe-column type="checkbox" title="编码" min-width="50" tree-node></vxe-column>
+					<vxe-column type="checkbox" title="编码" min-width="150" tree-node></vxe-column>
 					<vxe-column field="eventName" title="事件名称" min-width="400">
 						<template #default="{ row }">
 							<p style="display: flex; align-items: center">

src/views/system/config/dict/index.vue

@@ -73,7 +73,7 @@
 								auto-resize
 								show-overflow
 								:scrollY="{ enabled: true, gt: 0 }"
-								id="systemMenu"
+								id="systemDict"
 								:custom-config="{ storage: true }"
 								showHeaderOverflow
 								:tree-config="{