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

2025-12-30 09:42:25 +00:00 · 2025-10-24 16:05:04 +08:00
parent a986e1a2ab
commit a38cf80ea4
4 changed files with 199 additions and 189 deletions
--- a/apps/web-antd/src/components/global/slot.ts
+++ b/apps/web-antd/src/components/global/slot.ts
@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue';
+
+/**
+ * 使用默认插槽来自定义组件
+ * 给vbenForm的components使用
+ */
+export const DefaultSlot = defineComponent({
+  name: 'DefaultSlot',
+  inheritAttrs: false,
+  props: {
+    /**
+     * 绑定到根节点的div上的属性
+     */
+    rootDivAttrs: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  render() {
+    /**
+     * 获取属性 传递给作用域插槽供外部使用
+     */
+    const attrs = this.$attrs;
+
+    return h('div', { ...this.rootDivAttrs }, this.$slots.default?.(attrs));
+  },
+});
--- a/apps/web-antd/src/components/tree/src/tree-select-panel.vue
+++ b/apps/web-antd/src/components/tree/src/tree-select-panel.vue
@@ -1,215 +1,170 @@
 <script setup lang="ts">
 import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
 import type { DataNode } from 'ant-design-vue/es/tree';
-import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';

-import type { PropType, SetupContext } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';

-import { computed, nextTick, onMounted, ref, useSlots, watch } from 'vue';
-
-import { findGroupParentIds, treeToList } from '@vben/utils';
+import { treeToList } from '@vben/utils';

 import { Checkbox, Tree } from 'ant-design-vue';
-import { uniq } from 'lodash-es';

 /** 需要禁止透传 */
 defineOptions({ inheritAttrs: false });

-const props = defineProps({
-  checkStrictly: {
-    default: true,
-    type: Boolean,
-  },
-  expandAllOnInit: {
-    default: false,
-    type: Boolean,
-  },
-  fieldNames: {
-    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[]>,
-  },
+const props = withDefaults(defineProps<Props>(), {
+  expandAllOnInit: false,
+  fieldNames: () => ({ key: 'id', title: 'label' }),
+  resetOnStrictlyChange: true,
+  treeData: () => [],
 });
-const emit = defineEmits<{ checkStrictlyChange: [boolean] }>();

-const expandStatus = ref(false);
-const selectAllStatus = ref(false);
+interface Props {
+  /**
+   * 是否展开所有节点 mount
+   */
+  expandAllOnInit?: boolean;
+  /**
+   * 自定义字段
+   */
+  fieldNames?: { key: string; title: string };
+  /**
+   * 点击节点关联/独立时 清空已勾选的节点
+   */
+  resetOnStrictlyChange?: boolean;
+  /**
+   * 树结构数据
+   */
+  treeData?: DataNode[];
+}

 /**
- * 后台的这个字段跟antd/ele是反的
- * 组件库这个字段代表不关联
- * 后台这个代表关联
+ * 展开的状态
 */
-const innerCheckedStrictly = computed(() => {
-  return !props.checkStrictly;
-});
+const expandStatus = ref(false);
+/**
+ * 全选状态
+ */
+const selectAllStatus = ref(false);

 const associationText = computed(() => {
-  return props.checkStrictly ? '父子节点关联' : '父子节点独立';
+  return checkStrictly.value ? '父子节点关联' : '父子节点独立';
 });

 /**
 * 这个只用于界面显示
 * 关联情况下 只会有最末尾的节点被选中
 */
-const checkedKeys = defineModel('value', {
+const checkedKeys = defineModel<(number | string)[]>('value', {
  default: () => [],
-  type: Array as PropType<(number | string)[]>,
 });
+
+/**
+ * 是否节点关联 后端字段跟前端字段是反的
+ */
+const checkStrictly = defineModel<boolean>('checkStrictly', {
+  default: () => true,
+});
+
+const computedCheckedKeys = computed<any>({
+  get() {
+    /**
+     * 严格模式(节点不关联)  需要返回{checked: string[] | number[], halfChecked: string[]}
+     * @see https://www.antdv.com/components/tree-cn#tree-props
+     */
+    if (!checkStrictly.value) {
+      return {
+        checked: [...checkedKeys.value],
+        halfChecked: [],
+      };
+    }
+    return checkedKeys.value;
+  },
+  set(v) {
+    if (!checkStrictly.value) {
+      checkedKeys.value = [...v.checked, ...v.halfChecked];
+      return;
+    }
+    checkedKeys.value = v;
+  },
+});
+
 // 所有节点的ID
 const allKeys = computed(() => {
  const idField = props.fieldNames.key;
  return treeToList(props.treeData).map((item: any) => item[idField]);
 });

-/** 已经选择的所有节点  包括子/父节点 用于提交 */
-const checkedRealKeys = ref<(number | string)[]>([]);
-
-/**
- * 取第一次的menuTree id 设置到checkedMenuKeys
- * 主要为了解决没有任何修改 直接点击保存的情况
- *
- * length为0情况(即新增时候没有勾选节点) 勾选这里会延迟触发 节点会拼接上父节点 导致ID重复
- */
-const stop = watch([checkedKeys, () => props.treeData], () => {
-  if (
-    props.checkStrictly &&
-    checkedKeys.value.length > 0 &&
-    props.treeData.length > 0
-  ) {
-    /** 找到父节点 添加上 */
-    const parentIds = findGroupParentIds(
-      props.treeData,
-      checkedKeys.value as any,
-      { id: props.fieldNames.key },
-    );
-    /**
-     * uniq 解决上面的id重复问题
-     */
-    checkedRealKeys.value = uniq([...parentIds, ...checkedKeys.value]);
-    stop();
-  }
-  if (!props.checkStrictly && checkedKeys.value.length > 0) {
-    /** 节点独立 这里是全部的节点 */
-    checkedRealKeys.value = checkedKeys.value;
-    stop();
-  }
-});
-
-/**
- *
- * @param checkedStateKeys 已经选中的子节点的ID
- * @param info info.halfCheckedKeys为父节点的ID
- */
-type CheckedState<T = number | string> =
-  | T[]
-  | { checked: T[]; halfChecked: T[] };
-function handleChecked(checkedStateKeys: CheckedState, info: CheckInfo) {
-  // 数组的话为节点关联
-  if (Array.isArray(checkedStateKeys)) {
-    const halfCheckedKeys: number[] = (info.halfCheckedKeys || []) as number[];
-    checkedRealKeys.value = [...halfCheckedKeys, ...checkedStateKeys];
-  } else {
-    checkedRealKeys.value = [...checkedStateKeys.checked];
-    // fix: Invalid prop: type check failed for prop "value". Expected Array, got Object
-    checkedKeys.value = [...checkedStateKeys.checked];
-  }
-}
-
-function handleExpandChange(e: CheckboxChangeEvent) {
+function handleCheckedAllChange(e: CheckboxChangeEvent) {
  // 这个用于展示
  checkedKeys.value = e.target.checked ? allKeys.value : [];
-  // 这个用于提交
-  checkedRealKeys.value = e.target.checked ? allKeys.value : [];
 }

 const expandedKeys = ref<string[]>([]);
-function handleExpandOrCollapseAll(e: CheckboxChangeEvent) {
-  const expand = e.target.checked;
-  expandedKeys.value = expand ? allKeys.value : [];
+function handleExpandOrCollapseAll() {
+  expandStatus.value = !expandStatus.value;
+  expandedKeys.value = expandStatus.value ? allKeys.value : [];
 }

-function handleCheckStrictlyChange(e: CheckboxChangeEvent) {
-  emit('checkStrictlyChange', e.target.checked);
+function handleCheckStrictlyChange() {
  if (props.resetOnStrictlyChange) {
    checkedKeys.value = [];
-    checkedRealKeys.value = [];
  }
 }

-/**
- * 暴露方法来获取用于提交的全部节点
- * uniq去重(保险方案)
- */
-defineExpose({
-  getCheckedKeys: () => uniq(checkedRealKeys.value),
-});
-
 onMounted(async () => {
  if (props.expandAllOnInit) {
    await nextTick();
    expandedKeys.value = allKeys.value;
  }
 });
-
-const slots = useSlots() as SetupContext['slots'];
 </script>

 <template>
  <div class="bg-background w-full rounded-lg border-[1px] p-[12px]">
+    <!-- <div class="flex flex-col gap-6 text-[13px]">
+      <div>computedCheckedKeys {{ computedCheckedKeys }}</div>
+      <div>checkedKeys {{ checkedKeys }}</div>
+    </div> -->
+
    <div class="flex items-center justify-between gap-2 border-b-[1px] pb-2">
-      <div>
+      <div class="opacity-75">
        <span>节点状态: </span>
-        <span :class="[props.checkStrictly ? 'text-primary' : 'text-red-500']">
+        <span :class="[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"
    >
-      <Checkbox
-        v-model:checked="expandStatus"
-        @change="handleExpandOrCollapseAll"
-      >
+      <a-button size="small" @click="handleExpandOrCollapseAll">
        展开/折叠全部
-      </Checkbox>
-      <Checkbox v-model:checked="selectAllStatus" @change="handleExpandChange">
+      </a-button>
+      <Checkbox
+        v-model:checked="selectAllStatus"
+        @change="handleCheckedAllChange"
+      >
        全选/取消全选
      </Checkbox>
-      <Checkbox :checked="checkStrictly" @change="handleCheckStrictlyChange">
+      <Checkbox
+        v-model:checked="checkStrictly"
+        @change="handleCheckStrictlyChange"
+      >
        父子节点关联
      </Checkbox>
    </div>
    <div class="py-2">
      <Tree
-        v-if="treeData.length > 0"
-        v-model:check-strictly="innerCheckedStrictly"
-        v-model:checked-keys="checkedKeys"
+        :check-strictly="!checkStrictly"
+        v-model:checked-keys="computedCheckedKeys"
        v-model:expanded-keys="expandedKeys"
        :checkable="true"
        :field-names="fieldNames"
        :selectable="false"
        :tree-data="treeData"
-        @check="handleChecked"
      >
        <template
-          v-for="slotName in Object.keys(slots)"
+          v-for="slotName in Object.keys($slots)"
          :key="slotName"
          #[slotName]="data"
        >
@@ -219,3 +174,20 @@ const slots = useSlots() as SetupContext['slots'];
    </div>
  </div>
 </template>
+
+<style lang="scss" scoped>
+:deep(.ant-tree) {
+  // 勾选框居中
+  & .ant-tree-checkbox {
+    margin: 0;
+    margin-right: 6px;
+  }
+
+  // 展开图标居中
+  & .ant-tree-switcher {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
--- a/apps/web-antd/src/views/system/role/data.tsx
+++ b/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: '部门权限',
--- a/apps/web-antd/src/views/system/role/role-auth-modal.vue
+++ b/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>