feat: 数据权限

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>