From 011251433940d890a54ec2ff319812cf0b8886b4 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Thu, 26 Sep 2024 08:06:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96TreeSelectPanel?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/tree/src/tree-select-panel.vue | 56 ++++++++++++-------
 .../src/views/system/role/role-drawer.vue     |  6 +-
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/apps/web-antd/src/components/tree/src/tree-select-panel.vue b/apps/web-antd/src/components/tree/src/tree-select-panel.vue
index bfb6b099..9e2e59e0 100644
--- a/apps/web-antd/src/components/tree/src/tree-select-panel.vue
+++ b/apps/web-antd/src/components/tree/src/tree-select-panel.vue
@@ -9,6 +9,7 @@ import { findGroupParentIds, treeToList } from '@vben/utils';
 
 import { Checkbox, Tree } from 'ant-design-vue';
 
+/** 需要禁止透传 */
 defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
@@ -24,6 +25,11 @@ const props = defineProps({
     default: () => ({ key: 'id', title: 'label' }),
     type: Object as PropType<{ key: string; title: string }>,
   },
+  /** 点击节点关联/独立时 清空已勾选的节点 */
+  resetOnStrictlyChange: {
+    default: true,
+    type: Boolean,
+  },
   treeData: {
     default: () => [],
     type: Array as PropType<DataNode[]>,
@@ -43,10 +49,6 @@ const innerCheckedStrictly = computed(() => {
   return !props.checkStrictly;
 });
 
-function handleCheckStrictlyChange(e: CheckboxChangeEvent) {
-  emit('checkStrictlyChange', e.target.checked);
-}
-
 const associationText = computed(() => {
   return props.checkStrictly ? '父子节点关联' : '父子节点独立';
 });
@@ -61,11 +63,11 @@ const checkedKeys = defineModel('value', {
 });
 // 所有节点的ID
 const allKeys = computed(() => {
-  const id = props.fieldNames.key;
-  return treeToList(props.treeData).map((item: any) => item[id]);
+  const idField = props.fieldNames.key;
+  return treeToList(props.treeData).map((item: any) => item[idField]);
 });
 
-/** 已经选择的所有节点  包括子/父节点 */
+/** 已经选择的所有节点  包括子/父节点 用于提交 */
 const checkedRealKeys = ref<(number | string)[]>([]);
 
 /**
@@ -122,29 +124,45 @@ function handleExpandOrCollapseAll(e: CheckboxChangeEvent) {
   expandedKeys.value = expand ? allKeys.value : [];
 }
 
+function handleCheckStrictlyChange(e: CheckboxChangeEvent) {
+  emit('checkStrictlyChange', e.target.checked);
+  if (props.resetOnStrictlyChange) {
+    checkedKeys.value = [];
+    checkedRealKeys.value = [];
+  }
+}
+
+/**
+ * 暴露方法来获取用于提交的全部节点
+ */
 defineExpose({
   getCheckedKeys: () => checkedRealKeys.value,
 });
 
-onMounted(() => {
+onMounted(async () => {
   if (props.expandAllOnInit) {
-    nextTick(() => {
-      expandedKeys.value = allKeys.value;
-    });
+    await nextTick();
+    expandedKeys.value = allKeys.value;
   }
 });
 </script>
 
 <template>
   <div class="bg-background w-full rounded-lg border-[1px] p-[12px]">
-    <div class="flex items-center gap-2 border-b-[1px] pb-2">
-      <span>节点状态: </span>
-      <span
-        :class="[props.checkStrictly ? 'text-primary' : 'text-red-500']"
-        class="font-semibold"
-      >
-        {{ associationText }}
-      </span>
+    <div class="flex items-center justify-between gap-2 border-b-[1px] pb-2">
+      <div>
+        <span>节点状态: </span>
+        <span :class="[props.checkStrictly ? 'text-primary' : 'text-red-500']">
+          {{ associationText }}
+        </span>
+      </div>
+      <div>
+        已选中
+        <span class="text-primary mx-1 font-semibold">
+          {{ checkedRealKeys.length }}
+        </span>
+        个节点
+      </div>
     </div>
     <div
       class="flex flex-wrap items-center justify-between border-b-[1px] py-2"
diff --git a/apps/web-antd/src/views/system/role/role-drawer.vue b/apps/web-antd/src/views/system/role/role-drawer.vue
index 7cebc372..0944c4b4 100644
--- a/apps/web-antd/src/views/system/role/role-drawer.vue
+++ b/apps/web-antd/src/views/system/role/role-drawer.vue
@@ -8,9 +8,9 @@ import { cloneDeep } from '@vben/utils';
 import { useVbenForm } from '#/adapter';
 import { menuTreeSelect, roleMenuTreeSelect } from '#/api/system/menu';
 import { roleAdd, roleInfo, roleUpdate } from '#/api/system/role';
+import { TreeSelectPanel } from '#/components/tree';
 
 import { drawerSchema } from './data';
-import MenuSelect from './menu-select.vue';
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -115,11 +115,11 @@ function handleMenuCheckStrictlyChange(value: boolean) {
     <BasicForm>
       <template #menuIds="slotProps">
         <!-- check-strictly为readonly 不能通过v-model绑定 -->
-        <MenuSelect
+        <TreeSelectPanel
           ref="menuSelectRef"
           v-bind="slotProps"
           :check-strictly="formApi.form.values.menuCheckStrictly"
-          :menu-tree="menuTree"
+          :tree-data="menuTree"
           @check-strictly-change="handleMenuCheckStrictlyChange"
         />
       </template>