From 427b6f847882c0e22e9e0d8c8b83f1a1d43b491e Mon Sep 17 00:00:00 2001
From: sheng <15292050171@163.com>
Date: Tue, 1 Aug 2023 15:13:50 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=EF=BC=8C=E9=83=A8=E9=97=A8=E7=AE=A1=E7=90=86):=20=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E6=97=B6=E7=88=B6=E7=BA=A7=E8=8F=9C=E5=8D=95=E6=87=92?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dept/components/DeptFormCom/index.vue     |  3 +++
 .../dept/components/DeptTreeCom/index.vue     |  6 ++++-
 web/src/views/system/dept/index.vue           | 24 +++++++++++++++----
 web/src/views/system/dept/types.ts            |  2 +-
 .../menu/components/MenuFormCom/index.vue     |  3 +++
 .../menu/components/MenuTreeCom/index.vue     |  4 ++++
 web/src/views/system/menu/index.vue           | 22 ++++++++++++++---
 7 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/web/src/views/system/dept/components/DeptFormCom/index.vue b/web/src/views/system/dept/components/DeptFormCom/index.vue
index c4ebf56..f28851f 100644
--- a/web/src/views/system/dept/components/DeptFormCom/index.vue
+++ b/web/src/views/system/dept/components/DeptFormCom/index.vue
@@ -5,6 +5,7 @@
 				v-model="deptFormData.parent"
 				:props="defaultTreeProps"
 				:data="deptDefaultList"
+				:cache-data="props.cacheData"
 				lazy
 				check-strictly
 				:load="handleTreeLoad"
@@ -43,6 +44,7 @@ import type Node from 'element-plus/es/components/tree/src/model/node';
 interface IProps {
 	initFormData: TreeItemType | null;
 	treeData: TreeItemType[];
+	cacheData: TreeItemType[];
 }
 
 const defaultTreeProps: any = {
@@ -67,6 +69,7 @@ const rules = reactive<FormRules>({
 const props = withDefaults(defineProps<IProps>(), {
 	initFormData: () => null,
 	treeData: () => [],
+	cacheData: () => [],
 });
 const emit = defineEmits(['drawerClose']);
 
diff --git a/web/src/views/system/dept/components/DeptTreeCom/index.vue b/web/src/views/system/dept/components/DeptTreeCom/index.vue
index e32861e..5dd9c4f 100644
--- a/web/src/views/system/dept/components/DeptTreeCom/index.vue
+++ b/web/src/views/system/dept/components/DeptTreeCom/index.vue
@@ -137,7 +137,7 @@ const handleLoadNode = (node: Node, resolve: Function) => {
 const handleNodeClick = (record: TreeItemType, node: Node) => {
 	treeSelectDept.value = record;
 	treeSelectNode.value = node;
-	emit('treeClick', record.id);
+	emit('treeClick', record);
 };
 
 /**
@@ -198,6 +198,10 @@ const handleSort = async (type: string) => {
 		sortDisable.value = false;
 	}
 };
+
+defineExpose({
+	treeRef,
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/views/system/dept/index.vue b/web/src/views/system/dept/index.vue
index 2de365a..78487ba 100644
--- a/web/src/views/system/dept/index.vue
+++ b/web/src/views/system/dept/index.vue
@@ -3,7 +3,13 @@
 		<el-row class="dept-el-row">
 			<el-col :span="6">
 				<div class="dept-box dept-left">
-					<DeptTreeCom :treeData="deptTreeData" @treeClick="handleTreeClick" @updateDept="handleUpdateMenu" @deleteDept="handleDeleteMenu" />
+					<DeptTreeCom
+						ref="deptTreeRef"
+						:treeData="deptTreeData"
+						@treeClick="handleTreeClick"
+						@updateDept="handleUpdateMenu"
+						@deleteDept="handleDeleteMenu"
+					/>
 				</div>
 			</el-col>
 
@@ -15,7 +21,13 @@
 		</el-row>
 
 		<el-drawer v-model="drawerVisible" title="部门配置" direction="rtl" size="500px" :close-on-click-modal="false" :before-close="handleDrawerClose">
-			<DeptFormCom v-if="drawerVisible" :initFormData="drawerFormData" :treeData="deptTreeData" @drawerClose="handleDrawerClose" />
+			<DeptFormCom
+				v-if="drawerVisible"
+				:initFormData="drawerFormData"
+				:treeData="deptTreeData"
+				:cacheData="deptTreeCacheData"
+				@drawerClose="handleDrawerClose"
+			/>
 		</el-drawer>
 	</fs-page>
 </template>
@@ -32,9 +44,11 @@ import { successNotification } from '../../../utils/message';
 import { APIResponseData, TreeItemType } from './types';
 
 let deptTreeData = ref([]);
+let deptTreeCacheData = ref<TreeItemType[]>([]);
 let drawerVisible = ref(false);
 let drawerFormData = ref<Partial<TreeItemType>>({});
 let deptUserRef = ref<InstanceType<typeof DeptUserCom> | null>(null);
+let deptTreeRef = ref<InstanceType<typeof DeptTreeCom> | null>(null);
 
 const getData = async () => {
 	let res: APIResponseData = await GetList({});
@@ -53,8 +67,8 @@ const getData = async () => {
 /**
  * 部门的点击事件
  */
-const handleTreeClick = (id: string) => {
-	deptUserRef.value?.handleDoRefreshUser(id);
+const handleTreeClick = (record: TreeItemType) => {
+	deptUserRef.value?.handleDoRefreshUser(record.id as string);
 };
 
 /**
@@ -81,6 +95,8 @@ const handleDeleteMenu = (id: string, callback: Function) => {
  */
 const handleUpdateMenu = (type: string, record?: TreeItemType) => {
 	if (type === 'update' && record) {
+		const parentData = deptTreeRef.value?.treeRef?.currentNode.parent.data || {};
+		deptTreeCacheData.value = [parentData];
 		drawerFormData.value = record;
 	}
 	drawerVisible.value = true;
diff --git a/web/src/views/system/dept/types.ts b/web/src/views/system/dept/types.ts
index ed27bf3..b14527f 100644
--- a/web/src/views/system/dept/types.ts
+++ b/web/src/views/system/dept/types.ts
@@ -16,7 +16,7 @@ export interface FormType<T> {
 }
 
 export interface TreeItemType {
-  id?: number;
+  id?: number | string;
   modifier_name?: string;
   creator_name?: string;
   create_datetime?: string;
diff --git a/web/src/views/system/menu/components/MenuFormCom/index.vue b/web/src/views/system/menu/components/MenuFormCom/index.vue
index 3ec12f3..cad68e0 100644
--- a/web/src/views/system/menu/components/MenuFormCom/index.vue
+++ b/web/src/views/system/menu/components/MenuFormCom/index.vue
@@ -14,6 +14,7 @@
 					v-model="menuFormData.parent"
 					:props="defaultTreeProps"
 					:data="deptDefaultList"
+					:cache-data="props.cacheData"
 					lazy
 					check-strictly
 					clearable
@@ -110,6 +111,7 @@ import type Node from 'element-plus/es/components/tree/src/model/node';
 interface IProps {
 	initFormData: Partial<MenuTreeItemType> | null;
 	treeData: MenuTreeItemType[];
+	cacheData: MenuTreeItemType[];
 }
 
 const defaultTreeProps: any = {
@@ -136,6 +138,7 @@ const validateWebPath = (rule: any, value: string, callback: Function) => {
 const props = withDefaults(defineProps<IProps>(), {
 	initFormData: () => null,
 	treeData: () => [],
+	cacheData: () => [],
 });
 const emit = defineEmits(['drawerClose']);
 
diff --git a/web/src/views/system/menu/components/MenuTreeCom/index.vue b/web/src/views/system/menu/components/MenuTreeCom/index.vue
index 246338a..82363f5 100644
--- a/web/src/views/system/menu/components/MenuTreeCom/index.vue
+++ b/web/src/views/system/menu/components/MenuTreeCom/index.vue
@@ -205,6 +205,10 @@ const handleSort = async (type: string) => {
 		sortDisable.value = false;
 	}
 };
+
+defineExpose({
+	treeRef,
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/views/system/menu/index.vue b/web/src/views/system/menu/index.vue
index 2ac8bf1..97e26c3 100644
--- a/web/src/views/system/menu/index.vue
+++ b/web/src/views/system/menu/index.vue
@@ -3,7 +3,13 @@
 		<el-row class="menu-el-row">
 			<el-col :span="6">
 				<div class="menu-box menu-left-box">
-					<MenuTreeCom :treeData="menuTreeData" @treeClick="handleTreeClick" @updateDept="handleUpdateMenu" @deleteDept="handleDeleteMenu" />
+					<MenuTreeCom
+						ref="menuTreeRef"
+						:treeData="menuTreeData"
+						@treeClick="handleTreeClick"
+						@updateDept="handleUpdateMenu"
+						@deleteDept="handleDeleteMenu"
+					/>
 				</div>
 			</el-col>
 
@@ -15,7 +21,13 @@
 		</el-row>
 
 		<el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false" :before-close="handleDrawerClose">
-			<MenuFormCom v-if="drawerVisible" :initFormData="drawerFormData" :treeData="menuTreeData" @drawerClose="handleDrawerClose" />
+			<MenuFormCom
+				v-if="drawerVisible"
+				:initFormData="drawerFormData"
+				:cacheData="menuTreeCacheData"
+				:treeData="menuTreeData"
+				@drawerClose="handleDrawerClose"
+			/>
 		</el-drawer>
 	</fs-page>
 </template>
@@ -31,10 +43,12 @@ import { GetList, DelObj } from './api';
 import { successNotification } from '/@/utils/message';
 import { APIResponseData, MenuTreeItemType } from './types';
 
-let menuButtonRef = ref<InstanceType<typeof MenuButtonCom> | null>(null);
 let menuTreeData = ref([]);
+let menuTreeCacheData = ref<MenuTreeItemType[]>([]);
 let drawerVisible = ref(false);
 let drawerFormData = ref<Partial<MenuTreeItemType>>({});
+let menuTreeRef = ref<InstanceType<typeof MenuTreeCom> | null>(null);
+let menuButtonRef = ref<InstanceType<typeof MenuButtonCom> | null>(null);
 
 const getData = () => {
 	GetList({}).then((ret: APIResponseData) => {
@@ -60,6 +74,8 @@ const handleTreeClick = (record: MenuTreeItemType) => {
  */
 const handleUpdateMenu = (type: string, record?: MenuTreeItemType) => {
 	if (type === 'update' && record) {
+		const parentData = menuTreeRef.value?.treeRef?.currentNode.parent.data || {};
+		menuTreeCacheData.value = [parentData];
 		drawerFormData.value = record;
 	}
 	drawerVisible.value = true;