refactor: 重构数据权限 - 部门分配组件

apps/web-antd/src/views/system/role/data.tsx

@@ -1,11 +1,15 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { markRaw } from 'vue';
+
 import { DictEnum } from '@vben/constants';
 import { getPopupContainer } from '@vben/utils';
 
 import { Tag } from 'ant-design-vue';
 
+import { DefaultSlot } from '#/components/global/slot';
+import { TreeSelectPanel } from '#/components/tree';
 import { getDictOptions } from '#/utils/dict';
 
 /**
@@ -177,15 +181,6 @@ export const authModalSchemas: FormSchemaGetter = () => [
     fieldName: 'roleId',
     label: '角色ID',
   },
-  {
-    component: 'Radio',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-    fieldName: 'deptCheckStrictly',
-    label: 'deptCheckStrictly',
-  },
   {
     component: 'Input',
     componentProps: {
@@ -214,12 +209,39 @@ export const authModalSchemas: FormSchemaGetter = () => [
     label: '权限范围',
   },
   {
-    component: 'TreeSelect',
+    component: 'Radio',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'deptCheckStrictly',
+    label: 'deptCheckStrictly',
+  },
+  {
+    // 这种的场景基本上是一个组件需要绑定两个或以上的场景
+    component: markRaw(DefaultSlot),
     defaultValue: [],
+    componentProps: {
+      rootDivAttrs: {
+        class: 'w-full',
+      },
+    },
     dependencies: {
       show: (values) => values.dataScope === '2',
       triggerFields: ['dataScope'],
     },
+    renderComponentContent: (model) => ({
+      default: (attrs: any) => {
+        return (
+          <TreeSelectPanel
+            expand-all-on-init={true}
+            treeData={attrs.treeData}
+            v-model:checkStrictly={model.deptCheckStrictly}
+            v-model:value={model.deptIds}
+          />
+        );
+      },
+    }),
     fieldName: 'deptIds',
     help: '更改后立即生效',
     label: '部门权限',

apps/web-antd/src/views/system/role/role-auth-modal.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import type { DeptOption } from '#/api/system/role/model';
 
-import { ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
-import { cloneDeep } from '@vben/utils';
+import { cloneDeep, findGroupParentIds } from '@vben/utils';
+
+import { uniq } from 'lodash-es';
 
 import { useVbenForm } from '#/adapter/form';
 import { roleDataScope, roleDeptTree, roleInfo } from '#/api/system/role';
-import { TreeSelectPanel } from '#/components/tree';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { authModalSchemas } from './data';
@@ -26,26 +25,32 @@ const [BasicForm, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-const deptTree = ref<DeptOption[]>([]);
+/**
+ * 保存部门数据 用于获取祖先节点
+ */
+let treeData: DeptOption[] = [];
 async function setupDeptTree(id: number | string) {
   const resp = await roleDeptTree(id);
-  formApi.setFieldValue('deptIds', resp.checkedKeys);
-  // 设置菜单信息
-  deptTree.value = resp.depts;
-}
+  const { checkedKeys, depts } = resp;
 
-async function customFormValueGetter() {
-  const v = await defaultFormValueGetter(formApi)();
-  // 获取勾选信息
-  const menuIds = deptSelectRef.value?.[0]?.getCheckedKeys() ?? [];
-  const mixStr = v + menuIds.join(',');
-  return mixStr;
+  /**
+   * 设置部门树数据
+   */
+  formApi.updateSchema([
+    { fieldName: 'deptIds', componentProps: { treeData: depts } },
+  ]);
+  /**
+   * 设置选中 必须先传递treeData
+   * Note: Tree missing follow keys: '1981565541727186945'
+   */
+  await formApi.setFieldValue('deptIds', checkedKeys);
+  treeData = depts;
 }
 
 const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
   {
-    initializedGetter: customFormValueGetter,
-    currentGetter: customFormValueGetter,
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
   },
 );
 
@@ -56,14 +61,14 @@ const [BasicModal, modalApi] = useVbenModal({
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
+      treeData = [];
       return null;
     }
     modalApi.modalLoading(true);
 
     const { id } = modalApi.getData() as { id: number | string };
 
-    setupDeptTree(id);
-    const record = await roleInfo(id);
+    const [record] = await Promise.all([roleInfo(id), setupDeptTree(id)]);
     await formApi.setValues(record);
     markInitialized();
 
@@ -71,11 +76,6 @@ const [BasicModal, modalApi] = useVbenModal({
   },
 });
 
-/**
- * 这里拿到的是一个数组ref
- */
-const deptSelectRef = ref();
-
 async function handleConfirm() {
   try {
     modalApi.lock(true);
@@ -87,7 +87,15 @@ async function handleConfirm() {
     const data = cloneDeep(await formApi.getValues());
     // 不为自定义权限的话 删除部门id
     if (data.dataScope === '2') {
-      const deptIds = deptSelectRef.value?.[0]?.getCheckedKeys() ?? [];
+      let { deptIds, deptCheckStrictly } = data;
+      // 节点关联 需要拼接上祖级ID(获取的是不带的)
+      if (deptCheckStrictly) {
+        // 找到所有父级ID
+        const parentIds = findGroupParentIds(treeData, deptIds, { id: 'id' });
+        // 去重
+        deptIds = uniq([...parentIds, ...deptIds]);
+      }
+      // 赋值
       data.deptIds = deptIds;
     } else {
       data.deptIds = [];
@@ -107,29 +115,10 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
-
-/**
- * 通过回调更新 无法通过v-model
- * @param value 菜单选择是否严格模式
- */
-function handleCheckStrictlyChange(value: boolean) {
-  formApi.setFieldValue('deptCheckStrictly', value);
-}
 </script>
 
 <template>
   <BasicModal class="min-h-[600px] w-[550px]" title="分配权限">
-    <BasicForm>
-      <template #deptIds="slotProps">
-        <TreeSelectPanel
-          ref="deptSelectRef"
-          v-bind="slotProps"
-          :check-strictly="formApi.form.values.deptCheckStrictly"
-          :expand-all-on-init="true"
-          :tree-data="deptTree"
-          @check-strictly-change="handleCheckStrictlyChange"
-        />
-      </template>
-    </BasicForm>
+    <BasicForm />
   </BasicModal>
 </template>