feat：角色 role 的数据权限 90%（基于 VbenTree）

apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue

@@ -4,7 +4,7 @@ import type { SystemDeptApi } from '#/api/system/dept';
 
 import { VbenTree } from '@vben/common-ui';
 import { useVbenModal } from '@vben/common-ui';
-import { Button, message } from 'ant-design-vue';
+import { message, Checkbox } from 'ant-design-vue';
 
 import { ref } from 'vue';
 import { $t } from '#/locales';
@@ -22,6 +22,11 @@ const formData = ref<SystemRoleApi.SystemRole>();
 
 const deptTree = ref<SystemDeptApi.SystemDept[]>([]); // 部门树
 const deptLoading = ref(false); // 加载部门列表
+const isAllSelected = ref(false); // 全选状态
+const isExpanded = ref(true); // 展开状态
+const isDeptCheckStrictly = ref(true); // 父子联动状态
+
+const treeRef = ref(); // 树组件引用
 
 const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
@@ -29,11 +34,6 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-function resetForm() {
-  formApi.resetForm();
-  formApi.setValues(formData.value || {});
-}
-
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -46,7 +46,10 @@ const [Modal, modalApi] = useVbenModal({
       await assignRoleDataScope({
         roleId: data.id,
         dataScope: data.dataScope,
-        dataScopeDeptIds: data.dataScope === SystemDataScopeEnum.DEPT_CUSTOM ? data.dataScopeDeptIds : undefined,
+        dataScopeDeptIds:
+          data.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
+            ? data.dataScopeDeptIds
+            : undefined,
       });
       await modalApi.close();
       emit('success');
@@ -88,6 +91,51 @@ async function loadDeptTree() {
     deptLoading.value = false;
   }
 }
+
+/** 全选/全不选 */
+function toggleSelectAll() {
+  isAllSelected.value = !isAllSelected.value;
+  if (treeRef.value) {
+    // 根据VbenTree组件的API，调用相应方法全选或全不选
+    if (isAllSelected.value) {
+      // 全选逻辑，可能需要根据实际实现调整
+      const allIds = getAllNodeIds(deptTree.value);
+      formApi.setFieldValue('dataScopeDeptIds', allIds);
+    } else {
+      // 全不选
+      formApi.setFieldValue('dataScopeDeptIds', []);
+    }
+  }
+}
+
+/** 展开/折叠所有节点 */
+function toggleExpandAll() {
+  isExpanded.value = !isExpanded.value;
+  debugger
+  if (treeRef.value) {
+    if (isExpanded.value) {
+      treeRef.value.expandAll(); // 展开所有节点
+    } else {
+      treeRef.value.collapseAll(); // 折叠所有节点
+    }
+  }
+}
+
+/** 切换父子联动 */
+function toggleCheckStrictly() {
+  isDeptCheckStrictly.value = !isDeptCheckStrictly.value;
+}
+
+/** 递归获取所有节点ID */
+function getAllNodeIds(nodes, ids = []) {
+  nodes.forEach((node) => {
+    ids.push(node.id);
+    if (node.children && node.children.length > 0) {
+      getAllNodeIds(node.children, ids);
+    }
+  });
+  return ids;
+}
 </script>
 
 <template>
@@ -96,22 +144,30 @@ async function loadDeptTree() {
       <template #dataScopeDeptIds="slotProps">
         <Spin :spinning="deptLoading" class="w-full">
           <VbenTree
+            ref="treeRef"
             :tree-data="deptTree"
             multiple
             bordered
-            :default-expanded-level="2"
+            :default-expanded-level="isExpanded ? 100 : 0"
             v-bind="slotProps"
             value-field="id"
             label-field="name"
+            :check-strictly="!isDeptCheckStrictly"
           />
         </Spin>
       </template>
     </Form>
     <template #prepend-footer>
-      <div class="flex-auto">
+      <div class="flex flex-auto items-center">
-        <Button type="primary" danger @click="resetForm">
+        <Checkbox :checked="isAllSelected" @change="toggleSelectAll">
-          {{ $t('common.reset') }}
+          全选
-        </Button>
+        </Checkbox>
+        <Checkbox :checked="isExpanded" @change="toggleExpandAll">
+          全部展开
+        </Checkbox>
+        <Checkbox :checked="isDeptCheckStrictly" @change="toggleCheckStrictly">
+          父子联动
+        </Checkbox>
       </div>
     </template>
   </Modal>