feat: 数据权限

apps/web-antd/src/components/tree/index.ts

@@ -0,0 +1 @@
+export { default as TreeSelectPanel } from './src/tree-select-panel.vue';

apps/web-antd/src/components/tree/src/tree-select-panel.vue

@@ -0,0 +1,179 @@
+<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 { computed, nextTick, onMounted, type PropType, ref, watch } from 'vue';
+
+import { findGroupParentIds, treeToList } from '@vben/utils';
+
+import { Checkbox, Tree } from 'ant-design-vue';
+
+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 }>,
+  },
+  treeData: {
+    default: () => [],
+    type: Array as PropType<DataNode[]>,
+  },
+});
+const emit = defineEmits<{ checkStrictlyChange: [boolean] }>();
+
+const expandStatus = ref(false);
+const selectAllStatus = ref(false);
+
+/**
+ * 后台的这个字段跟antd/ele是反的
+ * 组件库这个字段代表不关联
+ * 后台这个代表关联
+ */
+const innerCheckedStrictly = computed(() => {
+  return !props.checkStrictly;
+});
+
+function handleCheckStrictlyChange(e: CheckboxChangeEvent) {
+  emit('checkStrictlyChange', e.target.checked);
+}
+
+const associationText = computed(() => {
+  return props.checkStrictly ? '父子节点关联' : '父子节点独立';
+});
+
+/**
+ * 这个只用于界面显示
+ * 关联情况下 只会有最末尾的节点被选中
+ */
+const checkedKeys = defineModel('value', {
+  default: () => [],
+  type: Array as PropType<(number | string)[]>,
+});
+// 所有节点的ID
+const allKeys = computed(() => {
+  const id = props.fieldNames.key;
+  return treeToList(props.treeData).map((item: any) => item[id]);
+});
+
+/** 已经选择的所有节点  包括子/父节点 */
+const checkedRealKeys = ref<(number | string)[]>([]);
+
+/**
+ * 取第一次的menuTree id 设置到checkedMenuKeys
+ * 主要为了解决没有任何修改 直接点击保存的情况
+ */
+const stop = watch(
+  () => props.treeData,
+  () => {
+    /** 节点关联情况下是不带父节点的 */
+    if (props.checkStrictly) {
+      /** 找到父节点 添加上 */
+      const parentIds = findGroupParentIds(
+        props.treeData,
+        checkedKeys.value as any,
+      );
+      checkedRealKeys.value = [...parentIds, ...checkedKeys.value];
+    } else {
+      /** 节点独立 这里是全部的节点 */
+      checkedRealKeys.value = checkedKeys.value;
+    }
+    stop();
+  },
+);
+
+/**
+ *
+ * @param checkedKeys 已经选中的子节点的ID
+ * @param info info.halfCheckedKeys为父节点的ID
+ */
+type CheckedState<T = number | string> =
+  | { checked: T[]; halfChecked: T[] }
+  | T[];
+function handleChecked(checkedKeys: CheckedState, info: CheckInfo) {
+  // 数组的话为节点关联
+  if (Array.isArray(checkedKeys)) {
+    const halfCheckedKeys: number[] = (info.halfCheckedKeys || []) as number[];
+    checkedRealKeys.value = [...halfCheckedKeys, ...checkedKeys];
+  } else {
+    checkedRealKeys.value = [...checkedKeys.checked];
+  }
+}
+
+function handleExpandChange(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 : [];
+}
+
+defineExpose({
+  getCheckedKeys: () => checkedRealKeys.value,
+});
+
+onMounted(() => {
+  if (props.expandAllOnInit) {
+    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>
+    <div
+      class="flex flex-wrap items-center justify-between border-b-[1px] py-2"
+    >
+      <Checkbox
+        v-model:checked="expandStatus"
+        @change="handleExpandOrCollapseAll"
+      >
+        展开/折叠全部
+      </Checkbox>
+      <Checkbox v-model:checked="selectAllStatus" @change="handleExpandChange">
+        全选/取消全选
+      </Checkbox>
+      <Checkbox :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"
+        v-model:expanded-keys="expandedKeys"
+        :checkable="true"
+        :field-names="fieldNames"
+        :selectable="false"
+        :tree-data="treeData"
+        @check="handleChecked"
+      />
+    </div>
+  </div>
+</template>

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

@@ -1,6 +1,7 @@
 import type { FormSchemaGetter } from '#/adapter';
 
 import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
 
 import { getDictOptions } from '#/utils/dict';
 
@@ -116,3 +117,63 @@ export const drawerSchema: FormSchemaGetter = () => [
     label: '备注',
   },
 ];
+
+export const authModalSchemas: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'roleId',
+    label: '角色ID',
+  },
+  {
+    component: 'Radio',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'deptCheckStrictly',
+    label: 'deptCheckStrictly',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    fieldName: 'roleName',
+    label: '角色名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    fieldName: 'roleKey',
+    label: '权限标识',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      getPopupContainer,
+      options: authScopeOptions,
+    },
+    fieldName: 'dataScope',
+    help: '更改后需要用户重新登录才能生效',
+    label: '权限范围',
+  },
+  {
+    component: 'TreeSelect',
+    defaultValue: [],
+    dependencies: {
+      show: (values) => values.dataScope === '2',
+      triggerFields: ['dataScope'],
+    },
+    fieldName: 'deptIds',
+    formItemClass: 'items-baseline',
+    help: '更改后立即生效',
+    label: '部门权限',
+  },
+];

apps/web-antd/src/views/system/role/index.vue

@@ -3,7 +3,7 @@ import type { Recordable } from '@vben/types';
 
 import { onMounted, ref } from 'vue';
 
-import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { Card, Table } from 'ant-design-vue';
@@ -12,6 +12,7 @@ import { useVbenForm } from '#/adapter';
 import { roleList } from '#/api/system/role';
 
 import { querySchema } from './data';
+import roleAuthModal from './role-auth-modal.vue';
 import roleDrawer from './role-drawer.vue';
 
 const [QueryForm] = useVbenForm({
@@ -83,6 +84,15 @@ function handleEdit(record: Recordable<any>) {
   drawerApi.setData({ id: record.roleId });
   drawerApi.open();
 }
+
+const [RoleAuthModal, authModalApi] = useVbenModal({
+  connectedComponent: roleAuthModal,
+});
+
+function handleAuthEdit(record: Recordable<any>) {
+  authModalApi.setData({ id: record.roleId });
+  authModalApi.open();
+}
 </script>
 
 <template>
@@ -92,6 +102,7 @@ function handleEdit(record: Recordable<any>) {
     </Card>
     <a-button @click="handleAdd">{{ $t('pages.common.add') }}</a-button>
     <RoleDrawer />
+    <RoleAuthModal />
     <div class="bg-background rounded-lg p-[16px]">
       <Table :columns="columns" :data-source="dataSource">
         <template #bodyCell="{ column, record }">
@@ -99,6 +110,13 @@ function handleEdit(record: Recordable<any>) {
             <a-button size="small" type="primary" @click="handleEdit(record)">
               编辑
             </a-button>
+            <a-button
+              size="small"
+              type="primary"
+              @click="handleAuthEdit(record)"
+            >
+              数据权限
+            </a-button>
           </template>
         </template>
       </Table>

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { cloneDeep } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter';
+import { roleDataScope, roleDeptTree, roleInfo } from '#/api/system/role';
+import { TreeSelectPanel } from '#/components/tree';
+
+import { authModalSchemas } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 80,
+  },
+  schema: authModalSchemas(),
+  showDefaultActions: false,
+});
+
+const deptTree = ref<any[]>([]);
+async function setupDeptTree(id: number | string) {
+  const resp = await roleDeptTree(id);
+  formApi.setFieldValue('deptIds', resp.checkedKeys);
+  // 设置菜单信息
+  deptTree.value = resp.depts;
+}
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id: number | string };
+
+    setupDeptTree(id);
+    const record = await roleInfo(id);
+    for (const key in record) {
+      await formApi.setFieldValue(key, record[key as keyof typeof record]);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+/**
+ * 这里拿到的是一个数组ref
+ */
+const deptSelectRef = ref();
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    // 不为自定义权限的话 删除部门id
+    if (data.dataScope === '2') {
+      const deptIds = deptSelectRef.value?.[0]?.getCheckedKeys() ?? [];
+      data.deptIds = deptIds;
+    } else {
+      data.deptIds = [];
+    }
+    await roleDataScope(data);
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+
+/**
+ * 通过回调更新 无法通过v-model
+ * @param value 菜单选择是否严格模式
+ */
+function handleCheckStrictlyChange(value: boolean) {
+  formApi.setFieldValue('deptCheckStrictly', value);
+}
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    class="min-h-[450px] 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>
+  </BasicModal>
+</template>