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/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.disabled'), value: 0 },
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
         ],
         optionType: 'button',
       },
-      defaultValue: 1,
-      fieldName: 'status',
+      defaultValue: true,
+      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',
-      fieldName: 'remark',
-      label: '备注',
-    },
-    {
-      component: 'RangePicker',
-      fieldName: 'createTime',
-      label: '创建时间',
-    },
+    // {
+    //   component: 'Input',
+    //   fieldName: 'remark',
+    //   label: '备注',
+    // },
+    // {
+    //   component: 'RangePicker',
+    //   fieldName: 'createTime',
+    //   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();
-      if (data) {
-        formData.value = data;
+      await formApi.resetForm();
+      if (data.id) {
+        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" />
-              {{ $t(value.meta.title) }}
+              <!--              <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />-->
+              {{ value.meta.locale }}
             </template>
           </VbenTree>
         </Spin>