feat(@vben/web-antd): 优化部门管理

apps/web-antd/src/api/core/role.ts

@@ -9,6 +9,7 @@ export namespace RoleApi {
     deptId: string;
     remark?: string;
     createBy: string;
+    menuIds: [];
     createTime: string;
     createId: string;
     // authorities: (number | undefined)[];
@@ -56,7 +57,7 @@ export function updateRole(id: any, data: RoleApi.Role) {
 }
 
 // 获取详情
-export function getDetail(id: string) {
+export function roleDetail(id: string) {
   return requestClient.get<RoleApi.Role>(`/rest/role/${id}`);
 }
 

apps/web-antd/src/api/core/user.ts

@@ -76,9 +76,10 @@ export namespace UserApi {
     createAt?: string;
   }
 
-  export interface UserState {
+  export interface User {
     username?: string;
     nickName?: string;
+    name: string;
     avatar?: string;
     email?: string;
     phone?: string;
@@ -112,7 +113,7 @@ export function register(data: UserApi.CreateRecord) {
 }
 
 // 新建用户
-export function create(data: UserApi.CreateRecord) {
+export function createUser(data: UserApi.CreateRecord) {
   return requestClient.post('/rest/user', data);
 }
 
@@ -127,32 +128,32 @@ export function queryUserList(params: any) {
 }
 
 // 根据id查询用户信息
-export function userDetail(id: string) {
+export function userDetail(id: any) {
   return requestClient.get(`/rest/user/${id}`);
 }
 
 // 是否启用
-export function enabled(id: string) {
+export function enabledUser(id: any) {
   return requestClient.patch(`/rest/user/${id}/toggle`);
 }
 
 // 删除用户
-export function remove(id: string) {
+export function removeUser(id: string) {
   return requestClient.delete(`/rest/user/${id}`);
 }
 
 // 更新用户信息
-export function update(data: UserApi.UserRecord) {
+export function updateUser(id: any, data: UserApi.UserRecord) {
-  return requestClient.patch<UserApi.Res>(`/rest/user/${data.id}`, data);
+  return requestClient.patch<UserApi.Res>(`/rest/user/${id}`, data);
 }
 
-export function selfUpdate(data: UserApi.UserState) {
+export function selfUpdate(data: UserApi.User) {
   return requestClient.patch<UserApi.Res>(`/rest/user/self`, data);
 }
 
 // 获取个人用户信息
 export function getUserInfo() {
-  return requestClient.get<UserApi.UserState>('/rest/user/self');
+  return requestClient.get<UserApi.User>('/rest/user/self');
 }
 
 // 部门的审核员
@@ -161,5 +162,5 @@ export function deptAudit(id: string, roleId: string) {
 }
 
 export function getUserDetail(id: number) {
-  return requestClient.get<UserApi.UserState>(`/user/${id}`);
+  return requestClient.get<UserApi.User>(`/user/${id}`);
 }

apps/web-antd/src/views/dept/data.ts

@@ -4,10 +4,26 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn } from '#/adapter/vxe-table';
 import type { DeptApi } from '#/api';
 
+import { ref } from 'vue';
+
 import { z } from '#/adapter/form';
 import { getAllDeptTree } from '#/api';
 import { $t } from '#/locales';
 
+const treeData = ref([]);
+
+function transformToTreeData(data: any) {
+  return data.map((item) => ({
+    value: item.id,
+    label: item.name,
+    ...(item.children && { children: transformToTreeData(item.children) }),
+  }));
+}
+
+// 使用示例
+getAllDeptTree(1).then((res) => {
+  treeData.value = transformToTreeData(res);
+});
 /**
  * 获取编辑表单的字段配置。如果没有使用多语言，可以直接export一个数组常量
  */
@@ -20,10 +36,11 @@ export function useSchema(): VbenFormSchema[] {
       rules: z.string(),
     },
     {
-      component: 'ApiTreeSelect',
+      component: 'TreeSelect',
       componentProps: {
         allowClear: true,
-        api: getAllDeptTree(1),
+        // api: getAllDeptTree(1),
+        treeData,
         class: 'w-full',
         labelField: 'name',
         valueField: 'id',
@@ -60,6 +77,38 @@ export function useSchema(): VbenFormSchema[] {
   ];
 }
 
+// export function useGridFormSchema(): VbenFormSchema[] {
+//   return [
+//     {
+//       component: 'Input',
+//       fieldName: 'name',
+//       label: '部门名称',
+//     },
+//     {
+//       component: 'Select',
+//       componentProps: {
+//         allowClear: true,
+//         options: [
+//           { label: $t('common.enabled'), value: true },
+//           { label: $t('common.disabled'), value: false },
+//         ],
+//       },
+//       fieldName: 'enable',
+//       label: '状态',
+//     },
+//     // {
+//     //   component: 'Input',
+//     //   fieldName: 'remark',
+//     //   label: '备注',
+//     // },
+//     // {
+//     //   component: 'RangePicker',
+//     //   fieldName: 'createTime',
+//     //   label: '创建时间',
+//     // },
+//   ];
+// }
+
 /**
  * 获取表格列配置
  * @description 使用函数的形式返回列数据而不是直接export一个Array常量，是为了响应语言切换时重新翻译表头
@@ -85,15 +134,16 @@ export function useColumns(
       title: '状态',
       width: 100,
     },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      width: 180,
-    },
     {
       field: 'remark',
       title: '备注',
     },
+    {
+      field: 'createTime',
+      slots: { default: 'createTime' },
+      title: '创建时间',
+      width: 180,
+    },
     {
       align: 'right',
       cellRender: {

apps/web-antd/src/views/dept/list.vue

@@ -9,6 +9,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 
 import { Button, message } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAllDeptTree, removeDept } from '#/api';
@@ -89,6 +90,10 @@ function onActionClick({ code, row }: OnActionClickParams<DeptApi.Dept>) {
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
+  // formOptions: {
+  //   fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+  //   schema: useGridFormSchema(),
+  // },
   gridEvents: {},
   gridOptions: {
     columns: useColumns(onActionClick),
@@ -138,6 +143,9 @@ function refreshGrid() {
           {{ $t('ui.actionTitle.create', ['部门']) }}
         </Button>
       </template>
+      <template #createTime="{ row }">
+        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm') }}
+      </template>
     </Grid>
   </Page>
 </template>

apps/web-antd/src/views/role/data.ts

@@ -17,13 +17,13 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         buttonStyle: 'solid',
         options: [
-          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.enabled'), value: true },
-          { label: $t('common.disabled'), value: 0 },
+          { label: $t('common.disabled'), value: false },
         ],
         optionType: 'button',
       },
-      defaultValue: 1,
+      defaultValue: true,
-      fieldName: 'status',
+      fieldName: 'enable',
       label: '状态',
     },
     {
@@ -33,7 +33,7 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       component: 'Input',
-      fieldName: 'permissions',
+      fieldName: 'menuIds',
       formItemClass: 'items-start',
       label: '权限',
       modelPropName: 'modelValue',
@@ -48,7 +48,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '角色名称',
     },
-    { component: 'Input', fieldName: 'id', label: '角色ID' },
+    // { component: 'Input', fieldName: 'id', label: '角色ID' },
     {
       component: 'Select',
       componentProps: {
@@ -61,16 +61,20 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'enabled',
       label: '状态',
     },
-    {
+    // {
-      component: 'Input',
+    //   component: 'Input',
-      fieldName: 'remark',
+    //   fieldName: 'remark',
-      label: '备注',
+    //   label: '备注',
-    },
+    // },
-    {
+    // {
-      component: 'RangePicker',
+    //   component: 'RangePicker',
-      fieldName: 'createTime',
+    //   fieldName: 'createTime',
-      label: '创建时间',
+    //   componentProps: {
-    },
+    //     format: 'YYYY-M-D HH:mm:ss', // 设置日期时间格式
+    //     showTime: true, // 确保选择器支持时间选择
+    //   },
+    //   label: '创建时间',
+    // },
   ];
 }
 
@@ -105,6 +109,7 @@ export function useColumns<T = RoleApi.Role>(
     },
     {
       field: 'createTime',
+      slots: { default: 'createTime' },
       title: '创建时间',
       width: 200,
     },
@@ -113,7 +118,7 @@ export function useColumns<T = RoleApi.Role>(
       cellRender: {
         attrs: {
           nameField: 'name',
-          nameTitle: $t('system.role.name'),
+          nameTitle: '角色',
           onClick: onActionClick,
         },
         name: 'CellOperation',

apps/web-antd/src/views/role/list.vue

@@ -11,6 +11,7 @@ import { Page, useVbenDrawer } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 
 import { Button, message, Modal } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { enabledRole, queryRoleList, removeRole } from '#/api';
@@ -159,6 +160,9 @@ function onCreate() {
           {{ $t('ui.actionTitle.create', ['角色']) }}
         </Button>
       </template>
+      <template #createTime="{ row }">
+        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm') }}
+      </template>
     </Grid>
   </Page>
 </template>

apps/web-antd/src/views/role/modules/form.vue

@@ -8,12 +8,12 @@ import type { RoleApi } from '#/api';
 import { computed, ref } from 'vue';
 
 import { useVbenDrawer, VbenTree } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
+// import { IconifyIcon } from '@vben/icons';
 
 import { Spin } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import { createRole, queryMenuList, updateRole } from '#/api';
+import { createRole, queryMenuList, roleDetail, updateRole } from '#/api';
 import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
@@ -27,7 +27,7 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-const permissions = ref<DataNode[]>([]);
+const menuIds = ref<DataNode[]>([]);
 const loadingPermissions = ref(false);
 
 const id = ref();
@@ -46,19 +46,24 @@ const [Drawer, drawerApi] = useVbenDrawer({
         drawerApi.unlock();
       });
   },
-  onOpenChange(isOpen) {
+  async onOpenChange(isOpen) {
     if (isOpen) {
       const data = drawerApi.getData<RoleApi.Role>();
-      formApi.resetForm();
+      await formApi.resetForm();
-      if (data) {
+      if (data.id) {
-        formData.value = data;
+        const roleDetailData = await roleDetail(data.id);
+        formData.value = roleDetailData;
+
+        // 提取 menus 中的 id 并赋值给 menuIds
+        formData.value.menuIds = roleDetailData.menus.map((menu) => menu.id);
+
         id.value = data.id;
-        formApi.setValues(data);
+        formApi.setValues(roleDetailData);
       } else {
         id.value = undefined;
       }
 
-      if (permissions.value.length === 0) {
+      if (menuIds.value.length === 0) {
         loadPermissions();
       }
     }
@@ -69,7 +74,12 @@ async function loadPermissions() {
   loadingPermissions.value = true;
   try {
     const res = await queryMenuList('all');
-    permissions.value = res as unknown as DataNode[];
+    menuIds.value = res.map((item) => ({
+      key: item.id,
+      title: item.name,
+      children: item.children || null,
+      meta: item.meta,
+    }));
   } finally {
     loadingPermissions.value = false;
   }
@@ -96,10 +106,10 @@ function getNodeClass(node: Recordable<any>) {
 <template>
   <Drawer :title="getDrawerTitle">
     <Form>
-      <template #permissions="slotProps">
+      <template #menuIds="slotProps">
         <Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
           <VbenTree
-            :tree-data="permissions"
+            :tree-data="menuIds"
             multiple
             bordered
             :default-expanded-level="2"
@@ -110,8 +120,8 @@ function getNodeClass(node: Recordable<any>) {
             icon-field="meta.icon"
           >
             <template #node="{ value }">
-              <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />
+              <!--              <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />-->
-              {{ $t(value.meta.title) }}
+              {{ value.meta.locale }}
             </template>
           </VbenTree>
         </Spin>

apps/web-antd/src/views/user/data.ts

@@ -0,0 +1,197 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { UserApi } from '#/api';
+
+import { ref } from 'vue';
+
+import { getAllDeptTree, queryRoleList } from '#/api';
+import { $t } from '#/locales';
+
+const treeData = ref([]);
+const optionsRoleData = ref([]);
+
+queryRoleList('').then((res) => {
+  optionsRoleData.value = res.records.map((item) => ({
+    label: item.name,
+    value: item.id,
+  }));
+});
+
+function transformToTreeData(data: any) {
+  return data.map((item) => ({
+    value: item.id,
+    label: item.name,
+    ...(item.children && { children: transformToTreeData(item.children) }),
+  }));
+}
+
+// 使用示例
+getAllDeptTree(1).then((res) => {
+  treeData.value = transformToTreeData(res);
+});
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: '用户名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '昵称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'email',
+      label: 'Email',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'phone',
+      label: '电话',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'password',
+      label: '密码',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'address',
+      label: '地址',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: true,
+      fieldName: 'enable',
+      label: '状态',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: '备注',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        mode: 'multiple',
+        // api: queryRoleList(''),
+        options: optionsRoleData,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+      },
+      fieldName: 'roleIds',
+      label: '所属角色',
+    },
+    {
+      component: 'TreeSelect',
+      componentProps: {
+        allowClear: true,
+        // api: getAllDeptTree(1),
+        treeData,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'deptId',
+      label: '所属部门',
+    },
+  ];
+}
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: '用户名称',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
+        ],
+      },
+      fieldName: 'enableState',
+      label: '状态',
+    },
+    // {
+    //   component: 'Input',
+    //   fieldName: 'remark',
+    //   label: '备注',
+    // },
+    // {
+    //   component: 'RangePicker',
+    //   fieldName: 'createTime',
+    //   label: '创建时间',
+    // },
+  ];
+}
+
+export function useColumns<T = UserApi.User>(
+  onActionClick: OnActionClickFn<T>,
+  onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'username',
+      title: '用户名称',
+      width: 200,
+    },
+    {
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: onStatusChange ? 'CellSwitch' : 'CellTag',
+      },
+      field: 'enableState',
+      title: '用户状态',
+      width: 100,
+    },
+    {
+      field: 'remark',
+      minWidth: 100,
+      title: '备注',
+    },
+    {
+      field: 'createTime',
+      slots: { default: 'createTime' },
+      title: '创建时间',
+      width: 200,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '用户',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: '操作',
+      width: 130,
+    },
+  ];
+}

apps/web-antd/src/views/user/list.vue

@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { UserApi } from '#/api';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message, Modal } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { enabledUser, queryUserList, removeUser } from '#/api';
+import { $t } from '#/locales';
+
+import { useColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useColumns(onActionClick, onStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const res = await queryUserList({
+            page: page.currentPage,
+            size: page.size,
+            ...formValues,
+          });
+          return {
+            items: res.records,
+            total: res.total,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<UserApi.User>,
+});
+
+function onActionClick(e: OnActionClickParams<UserApi.User>) {
+  switch (e.code) {
+    case 'delete': {
+      onDelete(e.row);
+      break;
+    }
+    case 'edit': {
+      onEdit(e.row);
+      break;
+    }
+  }
+}
+
+/**
+ * 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
+ * @param content 提示内容
+ * @param title 提示标题
+ */
+function confirm(content: string, title: string) {
+  return new Promise((reslove, reject) => {
+    Modal.confirm({
+      content,
+      onCancel() {
+        reject(new Error('已取消'));
+      },
+      onOk() {
+        reslove(true);
+      },
+      title,
+    });
+  });
+}
+
+/**
+ * 状态开关即将改变
+ * @param newStatus 期望改变的状态值
+ * @param row 行数据
+ * @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
+ */
+async function onStatusChange(newStatus: number, row: UserApi.User) {
+  const status: Recordable<string> = {
+    0: '禁用',
+    1: '启用',
+  };
+  try {
+    await confirm(
+      `你要将${row.name}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
+      `切换状态`,
+    );
+    await enabledUser(row.id);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function onEdit(row: UserApi.User) {
+  formDrawerApi.setData(row).open();
+}
+
+function onDelete(row: UserApi.User) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  removeUser(row.id)
+    .then(() => {
+      message.success({
+        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer />
+    <Grid table-title="用户列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['用户']) }}
+        </Button>
+      </template>
+      <template #createTime="{ row }">
+        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm') }}
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/user/modules/form.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import type { DataNode } from 'ant-design-vue/es/tree';
+
+import type { Recordable } from '@vben/types';
+
+import type { UserApi } from '#/api';
+
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer, VbenTree } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createUser, updateUser, userDetail } from '#/api';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emits = defineEmits(['success']);
+
+const formData = ref<UserApi.User>();
+
+const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const permissions = ref<DataNode[]>([]);
+const loadingPermissions = ref(false);
+
+const id = ref();
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+    const values = await formApi.getValues();
+    drawerApi.lock();
+    (id.value ? updateUser(id.value, values) : createUser(values))
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<UserApi.User>();
+      await formApi.resetForm();
+      if (data.id) {
+        formData.value = await userDetail(data.id);
+        id.value = data.id;
+        formApi.setValues(data);
+      } else {
+        id.value = undefined;
+      }
+
+      // if (permissions.value.length === 0) {
+      //   loadPermissions();
+      // }
+    }
+  },
+});
+
+// async function loadPermissions() {
+//   loadingPermissions.value = true;
+//   try {
+//     const res = await getMenuList();
+//     permissions.value = res as unknown as DataNode[];
+//   } finally {
+//     loadingPermissions.value = false;
+//   }
+// }
+
+const getDrawerTitle = computed(() => {
+  return formData.value?.id
+    ? $t('common.edit', '用户')
+    : $t('common.create', '用户');
+});
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === 'button') {
+    classes.push('inline-flex');
+    if (node.index % 3 >= 1) {
+      classes.push('!pl-0');
+    }
+  }
+
+  return classes.join(' ');
+}
+</script>
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Form>
+      <template #permissions="slotProps">
+        <Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
+          <VbenTree
+            :tree-data="permissions"
+            multiple
+            bordered
+            :default-expanded-level="2"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="meta.title"
+            icon-field="meta.icon"
+          >
+            <template #node="{ value }">
+              <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />
+              {{ $t(value.meta.title) }}
+            </template>
+          </VbenTree>
+        </Spin>
+      </template>
+    </Form>
+  </Drawer>
+</template>
+<style lang="css" scoped>
+:deep(.ant-tree-title) {
+  .tree-actions {
+    display: none;
+    margin-left: 20px;
+  }
+}
+
+:deep(.ant-tree-title:hover) {
+  .tree-actions {
+    display: flex;
+    flex: auto;
+    justify-content: flex-end;
+    margin-left: 20px;
+  }
+}
+</style>