From abda06588350d0c44e2f387010f8066bea59aceb Mon Sep 17 00:00:00 2001
From: zuohuaijun <zuohuaijun@163.com>
Date: Mon, 1 Jul 2024 14:00:16 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=98=8E=E8=B0=83=E6=95=B4=E8=A1=8C?=
 =?UTF-8?q?=E6=94=BF=E5=8C=BA=E5=9F=9F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/region/component/editRegion.vue    |   4 +-
 .../system/region/component/regionTree.vue    |  55 +++--
 Web/src/views/system/region/index.vue         | 220 ++++++++++++------
 3 files changed, 180 insertions(+), 99 deletions(-)

diff --git a/Web/src/views/system/region/component/editRegion.vue b/Web/src/views/system/region/component/editRegion.vue
index a89977f4..2098f336 100644
--- a/Web/src/views/system/region/component/editRegion.vue
+++ b/Web/src/views/system/region/component/editRegion.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="sys-region-container">
-		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
+		<el-dialog v-model="state.isShowDialog" draggable overflow destroy-on-close width="700px">
 			<template #header>
 				<div style="color: #fff">
 					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
@@ -8,7 +8,7 @@
 				</div>
 			</template>
 			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
-				<el-row :gutter="35">
+				<el-row :gutter="10">
 					<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="上级名称">
 							<el-cascader
diff --git a/Web/src/views/system/region/component/regionTree.vue b/Web/src/views/system/region/component/regionTree.vue
index 94af692e..bdef02a6 100644
--- a/Web/src/views/system/region/component/regionTree.vue
+++ b/Web/src/views/system/region/component/regionTree.vue
@@ -1,10 +1,10 @@
 <template>
-	<el-card class="box-card" shadow="hover" style="height: 100%" body-style="height:100%; overflow:auto">
+	<el-card class="box-card" shadow="hover" body-style="height:100%; overflow:auto;padding:5px;">
 		<template #header>
 			<div class="card-header">
 				<div class="tree-h-flex">
 					<div class="tree-h-left">
-						<el-input :prefix-icon="Search" v-model="filterText" placeholder="行政区域名称" />
+						<el-input :prefix-icon="Search" v-model="filterText" clearable placeholder="行政区域名称" />
 					</div>
 					<div class="tree-h-right">
 						<el-dropdown @command="handleCommand">
@@ -27,20 +27,22 @@
 			</div>
 		</template>
 		<div style="margin-bottom: 45px" v-loading="state.loading">
-			<el-tree
-				ref="treeRef"
-				class="filter-tree"
-				:data="state.regionData"
-				node-key="id"
-				:props="{ children: 'children', label: 'name' }"
-				:filter-node-method="filterNode"
-				@node-click="nodeClick"
-				highlight-current
-				check-strictly
-				accordion
-				lazy
-				:load="loadNode"
-			/>
+			<el-scrollbar>
+				<el-tree
+					ref="treeRef"
+					class="filter-tree"
+					:data="state.regionData"
+					node-key="id"
+					:props="{ children: 'children', label: 'name' }"
+					:filter-node-method="filterNode"
+					@node-click="nodeClick"
+					highlight-current
+					check-strictly
+					accordion
+					lazy
+					:load="loadNode"
+				/>
+			</el-scrollbar>
 		</div>
 	</el-card>
 </template>
@@ -49,6 +51,7 @@
 import { onMounted, reactive, ref, watch } from 'vue';
 import type { ElTree } from 'element-plus';
 import { Search, MoreFilled } from '@element-plus/icons-vue';
+import { TreeKey } from 'element-plus/es/components/tree/src/tree.type';
 
 import { getAPI } from '/@/utils/axios-utils';
 import { SysRegionApi } from '/@/api-services/api';
@@ -62,14 +65,14 @@ const state = reactive({
 });
 
 onMounted(() => {
-	initTreeData();
+	fetchTreeData();
 });
 
 watch(filterText, (val) => {
 	treeRef.value!.filter(val);
 });
 
-const initTreeData = async () => {
+const fetchTreeData = async () => {
 	state.loading = true;
 	var res = await getAPI(SysRegionApi).apiSysRegionListGet(0);
 	state.regionData = res.data.result ?? [];
@@ -106,8 +109,9 @@ const handleCommand = async (command: string | number | object) => {
 			treeRef.value!.store._getAllNodes()[i].expanded = false;
 		}
 	} else if ('refresh' == command) {
-		initTreeData();
+		fetchTreeData();
 	} else if ('rootNode' == command) {
+		treeRef.value?.setCurrentKey();
 		emits('node-click', { id: 0, name: '' });
 	}
 };
@@ -118,11 +122,22 @@ const nodeClick = (node: any) => {
 	emits('node-click', { id: node.id, name: node.name });
 };
 
+// 设置当前选中节点
+const setCurrentKey = (key?: TreeKey | undefined, shouldAutoExpandParent?: boolean | undefined) => {
+	treeRef.value?.setCurrentKey(key, shouldAutoExpandParent);
+};
+
 // 导出对象
-defineExpose({ initTreeData, getCheckedKeys });
+defineExpose({ fetchTreeData, getCheckedKeys, setCurrentKey });
 </script>
 
 <style lang="scss" scoped>
+.box-card {
+	flex: 1;
+	> :deep(.el-card__header) {
+		padding: 5px;
+	}
+}
 .tree-h-flex {
 	display: flex;
 }
diff --git a/Web/src/views/system/region/index.vue b/Web/src/views/system/region/index.vue
index 1de0d75e..8d05122c 100644
--- a/Web/src/views/system/region/index.vue
+++ b/Web/src/views/system/region/index.vue
@@ -1,68 +1,86 @@
 <template>
-	<div class="sys-region-container">
-		<el-row :gutter="8" style="width: 100%; flex: 1">
-			<el-col :span="6" :xs="24">
-				<RegionTree ref="regionTreeRef" @node-click="nodeClick" />
+	<div class="sys-region-container" v-loading="options.loading">
+		<el-row :gutter="5" style="width: 100%; height: 100%">
+			<el-col :span="6" :xs="24" style="display: flex; height: 100%">
+				<RegionTree ref="regionTreeRef" @node-click="handleNodeChange" />
 			</el-col>
 
-			<el-col :span="18" :xs="24" style="display: flex; flex-direction: column">
-				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
-					<el-form :model="state.queryParams" ref="queryForm" :inline="true">
-						<el-form-item label="行政名称">
-							<el-input v-model="state.queryParams.name" placeholder="行政名称" clearable />
-						</el-form-item>
-						<el-form-item label="行政代码">
-							<el-input v-model="state.queryParams.code" placeholder="行政代码" clearable />
-						</el-form-item>
-						<el-form-item>
-							<el-button-group>
-								<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysRegion:page'"> 查询 </el-button>
-								<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
-							</el-button-group>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" icon="ele-Plus" @click="openAddRegion" v-auth="'sysRegion:add'"> 新增 </el-button>
-							<el-button type="danger" icon="ele-Lightning" @click="handlSync" v-auth="'sysRegion:sync'"> 同步统计局 </el-button>
-						</el-form-item>
+			<el-col :span="18" :xs="24" style="display: flex; flex-direction: column; height: 100%">
+				<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
+					<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
+						<el-row :gutter="10">
+							<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
+								<el-form-item label="行政名称" prop="name">
+									<el-input v-model="state.queryParams.name" placeholder="行政名称" clearable @keyup.enter.native="handleQuery(true)" />
+								</el-form-item>
+							</el-col>
+							<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
+								<el-form-item label="行政代码" prop="code">
+									<el-input v-model="state.queryParams.code" placeholder="行政代码" clearable @keyup.enter.native="handleQuery(true)" />
+								</el-form-item>
+							</el-col>
+						</el-row>
 					</el-form>
+
+					<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
+
+					<el-row>
+						<el-col>
+							<el-button-group>
+								<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysRegion:page'" :loading="options.loading"> 查询 </el-button>
+								<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
+							</el-button-group>
+						</el-col>
+					</el-row>
 				</el-card>
 
-				<el-card class="full-table" shadow="hover" style="margin-top: 5px">
-					<el-table :data="state.regionData" style="width: 100%" v-loading="state.loading" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
-						<el-table-column prop="name" label="行政名称" align="center" show-overflow-tooltip />
-						<el-table-column prop="code" label="行政代码" align="center" show-overflow-tooltip />
-						<el-table-column prop="cityCode" label="区号" align="center" show-overflow-tooltip />
-						<el-table-column prop="orderNo" label="排序" width="70" align="center" show-overflow-tooltip />
-						<el-table-column prop="remark" label="备注" header-align="center" show-overflow-tooltip />
-						<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
-							<template #default="scope">
-								<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditRegion(scope.row)" v-auth="'sysRegion:update'"> 编辑 </el-button>
-								<el-button icon="ele-Delete" size="small" text type="danger" @click="delRegion(scope.row)" v-auth="'sysRegion:delete'"> 删除 </el-button>
-							</template>
-						</el-table-column>
-					</el-table>
-					<el-pagination
-						v-model:currentPage="state.tableParams.page"
-						v-model:page-size="state.tableParams.pageSize"
-						:total="state.tableParams.total"
-						:page-sizes="[10, 20, 50, 100]"
-						small
-						background
-						@size-change="handleSizeChange"
-						@current-change="handleCurrentChange"
-						layout="total, sizes, prev, pager, next, jumper"
-					/>
+				<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="{ transform: true, parentField: 'pid' }" @sort-change="sortChange">
+						<template #toolbar_buttons>
+							<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysRegion:add'"> 新增 </el-button>
+							<el-button type="danger" icon="ele-Lightning" @click="handlSync" v-auth="'sysRegion:add'"> 同步统计局 </el-button>
+							<el-button-group style="padding-left: 12px">
+								<el-button type="primary" icon="ele-Expand" @click="handleExpand"> 全部展开 </el-button>
+								<el-button type="primary" icon="ele-Fold" @click="handleFold"> 全部折叠 </el-button>
+							</el-button-group>
+						</template>
+						<template #toolbar_tools> </template>
+						<template #empty>
+							<el-empty :image-size="200" />
+						</template>
+						<template #row_buttons="{ row }">
+							<el-tooltip content="编辑" placement="top">
+								<el-button icon="ele-Edit" text type="primary" v-auth="'sysRegion:update'" @click="handleEdit(row)"> </el-button>
+							</el-tooltip>
+							<el-tooltip content="删除" placement="top">
+								<el-button icon="ele-Delete" text type="danger" v-auth="'sysRegion:delete'" @click="handleDelete(row)"> </el-button>
+							</el-tooltip>
+						</template>
+						<template #pager>
+							<vxe-pager
+								:loading="options.loading"
+								v-model:current-page="state.tableParams.page"
+								v-model:page-size="state.tableParams.pageSize"
+								:total="state.tableParams.total"
+								@page-change="pageChange"
+							/>
+						</template>
+					</vxe-grid>
 				</el-card>
 			</el-col>
 		</el-row>
 
-		<EditRegion ref="editRegionRef" :title="state.editRegionTitle" @handleQuery="handleQuery" />
+		<EditRegion ref="editRegionRef" :title="state.title" @handleQuery="handleQuery" />
 	</div>
 </template>
 
 <script lang="ts" setup name="sysRegion">
-import { onMounted, reactive, ref } from 'vue';
+import { nextTick, onMounted, reactive, ref } from 'vue';
 import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
+import { auth } from '/@/utils/authFunction';
+import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
+import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
+
 import RegionTree from '/@/views/system/region/component/regionTree.vue';
 import EditRegion from '/@/views/system/region/component/editRegion.vue';
 
@@ -70,11 +88,10 @@ import { getAPI } from '/@/utils/axios-utils';
 import { SysRegionApi } from '/@/api-services/api';
 import { SysRegion } from '/@/api-services/models';
 
+const xGrid = ref<VxeGridInstance>();
 const editRegionRef = ref<InstanceType<typeof EditRegion>>();
 const regionTreeRef = ref<InstanceType<typeof RegionTree>>();
 const state = reactive({
-	loading: false,
-	regionData: [] as Array<SysRegion>, // 列表数据
 	queryParams: {
 		id: -1,
 		pid: undefined,
@@ -83,24 +100,61 @@ const state = reactive({
 	},
 	tableParams: {
 		page: 1,
-		pageSize: 20,
+		pageSize: 50,
+		field: 'id', // 默认的排序字段
+		order: 'aes', // 排序方向
+		descStr: 'desc', // 降序排序的关键字符
 		total: 0 as any,
 	},
-	editRegionTitle: '',
+	visible: false,
+	title: '',
 });
 
-onMounted(() => {
-	handleQuery();
+// 表格参数配置
+const options = useVxeTable<SysRegion>({
+	id: 'sysRegion',
+	name: '区域信息',
+	columns: [
+		// { type: 'checkbox', width: 40, fixed: 'left' },
+		{ type: 'seq', title: '序号', width: 100, fixed: 'left' },
+		{ field: 'name', title: '行政名称', minWidth: 280, showOverflow: 'tooltip', treeNode: true },
+		{ field: 'code', title: '行政代码', minWidth: 120, showOverflow: 'tooltip' },
+		{ field: 'cityCode', title: '区号', minWidth: 100, showOverflow: 'tooltip' },
+		{ field: 'orderNo', title: '排序', minWidth: 80, showOverflow: 'tooltip' },
+		{ field: 'createTime', title: '修改时间', minWidth: 150, showOverflow: 'tooltip' },
+		{ field: 'remark', title: '备注', minWidth: 300, showOverflow: 'tooltip' },
+		{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
+	],
+	enableExport: auth('sysRegion:export'),
+	searchCallback: () => handleQuery(),
+	queryAllCallback: () => fetchData({ pageSize: 99999 }),
+});
+
+// 页面初始化
+onMounted(async () => {
+	await handleQuery();
+	// 展开表格所有数据，数据量大时请勿开启
+	nextTick(() => {
+		setTimeout(() => {
+			xGrid.value?.setAllTreeExpand(true);
+		}, 1000);
+	});
 });
 
 // 查询操作
-const handleQuery = async () => {
-	state.loading = true;
-	let params = Object.assign(state.queryParams, state.tableParams);
-	var res = await getAPI(SysRegionApi).apiSysRegionPagePost(params);
-	state.regionData = res.data.result?.items ?? [];
+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;
-	state.loading = false;
+	options.loading = false;
+};
+
+// 获取数据
+const fetchData = async (tableParams: any) => {
+	let params = Object.assign(state.queryParams, state.tableParams, tableParams);
+	return getAPI(SysRegionApi).apiSysRegionPagePost(params);
 };
 
 // 重置操作
@@ -109,23 +163,37 @@ const resetQuery = () => {
 	state.queryParams.pid = undefined;
 	state.queryParams.name = undefined;
 	state.queryParams.code = 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();
 };
 
 // 打开新增页面
-const openAddRegion = () => {
-	state.editRegionTitle = '添加行政区域';
+const handleAdd = () => {
+	state.title = '添加行政区域';
 	editRegionRef.value?.openDialog({ orderNo: 100 });
 };
 
 // 打开编辑页面
-const openEditRegion = (row: any) => {
-	state.editRegionTitle = '编辑行政区域';
+const handleEdit = (row: any) => {
+	state.title = '编辑行政区域';
 	editRegionRef.value?.openDialog(row);
 };
 
 // 删除
-const delRegion = (row: any) => {
+const handleDelete = (row: any) => {
 	ElMessageBox.confirm(`确定删除行政区域：【${row.name}】?`, '提示', {
 		confirmButtonText: '确定',
 		cancelButtonText: '取消',
@@ -135,14 +203,14 @@ const delRegion = (row: any) => {
 			await getAPI(SysRegionApi).apiSysRegionDeletePost({ id: row.id });
 			handleQuery();
 			// 编辑删除后更新机构数据
-			regionTreeRef.value?.initTreeData();
+			regionTreeRef.value?.fetchTreeData();
 			ElMessage.success('删除成功');
 		})
 		.catch(() => {});
 };
 
 // 树组件点击
-const nodeClick = async (node: any) => {
+const handleNodeChange = async (node: any) => {
 	state.queryParams.pid = node.id;
 	state.queryParams.name = undefined;
 	state.queryParams.code = undefined;
@@ -168,15 +236,13 @@ const handlSync = async () => {
 		.catch(() => {});
 };
 
-// 改变页面容量
-const handleSizeChange = (val: number) => {
-	state.tableParams.pageSize = val;
-	handleQuery();
+// 全部展开
+const handleExpand = () => {
+	xGrid.value?.setAllTreeExpand(true);
 };
 
-// 改变页码序号
-const handleCurrentChange = (val: number) => {
-	state.tableParams.page = val;
-	handleQuery();
+// 全部折叠
+const handleFold = () => {
+	xGrid.value?.clearTreeExpand();
 };
 </script>