From 16e04a5fc0905e21ddec6680910d4d0efbd4d23f Mon Sep 17 00:00:00 2001 From: Kven <2955163637@qq.com> Date: Sat, 10 May 2025 21:49:24 +0800 Subject: [PATCH] =?UTF-8?q?feat(@vben/web-antd):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/api/core/role.ts | 3 +- apps/web-antd/src/views/role/data.ts | 39 +++++++++++-------- apps/web-antd/src/views/role/list.vue | 4 ++ apps/web-antd/src/views/role/modules/form.vue | 38 +++++++++++------- 4 files changed, 52 insertions(+), 32 deletions(-) diff --git a/apps/web-antd/src/api/core/role.ts b/apps/web-antd/src/api/core/role.ts index 7d8789e..233cd48 100644 --- a/apps/web-antd/src/api/core/role.ts +++ b/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(`/rest/role/${id}`); } diff --git a/apps/web-antd/src/views/role/data.ts b/apps/web-antd/src/views/role/data.ts index efda1e2..75d8e45 100644 --- a/apps/web-antd/src/views/role/data.ts +++ b/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( }, { field: 'createTime', + slots: { default: 'createTime' }, title: '创建时间', width: 200, }, @@ -113,7 +118,7 @@ export function useColumns( cellRender: { attrs: { nameField: 'name', - nameTitle: $t('system.role.name'), + nameTitle: '角色', onClick: onActionClick, }, name: 'CellOperation', diff --git a/apps/web-antd/src/views/role/list.vue b/apps/web-antd/src/views/role/list.vue index 1c453b7..0ab77e5 100644 --- a/apps/web-antd/src/views/role/list.vue +++ b/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', ['角色']) }} + diff --git a/apps/web-antd/src/views/role/modules/form.vue b/apps/web-antd/src/views/role/modules/form.vue index da13f89..780016c 100644 --- a/apps/web-antd/src/views/role/modules/form.vue +++ b/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([]); +const menuIds = ref([]); 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(); - 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) {