yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reactor：【system 系统管理】role 进一步统一代码风格

pull/210/head
YunaiV 2025-09-06 20:17:38 +08:00
parent 6d47871f02
commit 8d5a6d8aa0
8 changed files with 224 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/web-antd/src/views/system/role/data.ts
View File

@ -1,12 +1,14 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { CommonStatusEnum, SystemDataScopeEnum } from '@vben/constants';
import { z } from '#/adapter/form';
import { DICT_TYPE } from '@vben/constants';
import {
CommonStatusEnum,
DICT_TYPE,
SystemDataScopeEnum,
} from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getRangePickerDefaultProps } from '#/utils';
/** 新增/修改的表单 */
@ -155,19 +157,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '角色名称',
component: 'Input',
componentProps: {
placeholder: '请输入角色名称',
allowClear: true,
},
},
{
fieldName: 'code',
label: '角色标识',
component: 'Input',
componentProps: {
placeholder: '请输入角色标识',
allowClear: true,
},
},
{
fieldName: 'status',
label: '角色状态',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择角色状态',
allowClear: true,
},
},
{
@ -189,14 +200,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '角色编号',
minWidth: 100,
},
{
field: 'name',
title: '角色名称',
minWidth: 200,
},
{
field: 'type',
title: '角色类型',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_ROLE_TYPE },
@ -205,18 +219,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'code',
title: '角色标识',
minWidth: 200,
},
{
field: 'sort',
title: '显示顺序',
minWidth: 100,
},
{
field: 'remark',
title: '角色备注',
minWidth: 100,
},
{
field: 'status',
title: '角色状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
@ -225,6 +243,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{

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

@ -4,7 +4,7 @@ import type { SystemRoleApi } from '#/api/system/role';
import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { message } from 'ant-design-vue';
@ -40,7 +40,7 @@ const [AssignMenuFormModel, assignMenuFormApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -50,29 +50,43 @@ async function handleExport() {
downloadFileFromBlobPart({ fileName: '角色.xls', source: data });
}
/** 编辑角色 */
function handleEdit(row: SystemRoleApi.Role) {
formModalApi.setData(row).open();
}
/** 创建角色 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑角色 */
function handleEdit(row: SystemRoleApi.Role) {
formModalApi.setData(row).open();
}
/** 删除角色 */
async function handleDelete(row: SystemRoleApi.Role) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
key: 'action_key_msg',
duration: 0,
});
try {
await deleteRole(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();
}
}
/** 批量删除角色 */
async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const hideLoading = message.loading({
content: $t('ui.actionMessage.deletingBatch'),
duration: 0,
});
try {
await deleteRoleList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
handleRefresh();
} finally {
hideLoading();
}
@ -87,23 +101,6 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!);
}
/** 批量删除角色 */
async function handleDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteRoleList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
/** 分配角色的数据权限 */
function handleAssignDataPermission(row: SystemRoleApi.Role) {
assignDataPermissionFormApi.setData(row).open();
@ -159,9 +156,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
</template>
<FormModal @success="onRefresh" />
<AssignDataPermissionFormModel @success="onRefresh" />
<AssignMenuFormModel @success="onRefresh" />
<FormModal @success="handleRefresh" />
<AssignDataPermissionFormModel @success="handleRefresh" />
<AssignMenuFormModel @success="handleRefresh" />
<Grid table-title="角色列表">
<template #toolbar-tools>
<TableAction
@ -181,11 +178,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
onClick: handleExport,
},
{
label: '批量删除',
label: $t('ui.actionTitle.deleteBatch'),
type: 'primary',
danger: true,
disabled: isEmpty(checkedIds),
icon: ACTION_ICON.DELETE,
disabled: isEmpty(checkedIds),
auth: ['system:role:delete'],
onClick: handleDeleteBatch,
},

17
apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
View File

@ -76,8 +76,8 @@ const [Modal, modalApi] = useVbenModal({
try {
// 加载部门列表
await loadDeptTree();
toggleExpandAll();
// 设置表单值, 一定要在加载树之后
handleExpandAll();
// 设置表单值，一定要在加载树之后
await formApi.setValues(await getRole(data.id));
} finally {
modalApi.unlock();
@ -97,7 +97,7 @@ async function loadDeptTree() {
}
/** 全选/全不选 */
function toggleSelectAll() {
function handleSelectAll() {
isAllSelected.value = !isAllSelected.value;
if (isAllSelected.value) {
const allIds = getAllNodeIds(deptTree.value);
@ -108,14 +108,13 @@ function toggleSelectAll() {
}
/** 展开/折叠所有节点 */
function toggleExpandAll() {
function handleExpandAll() {
isExpanded.value = !isExpanded.value;
// 获取所有节点的 ID
expandedKeys.value = isExpanded.value ? getAllNodeIds(deptTree.value) : [];
}
/** 切换父子联动 */
function toggleCheckStrictly() {
function handleCheckStrictly() {
isCheckStrictly.value = !isCheckStrictly.value;
}
@ -151,13 +150,13 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
</Form>
<template #prepend-footer>
<div class="flex flex-auto items-center">
<Checkbox :checked="isAllSelected" @change="toggleSelectAll">
<Checkbox :checked="isAllSelected" @change="handleSelectAll">
全选
</Checkbox>
<Checkbox :checked="isExpanded" @change="toggleExpandAll">
<Checkbox :checked="isExpanded" @change="handleExpandAll">
全部展开
</Checkbox>
<Checkbox :checked="isCheckStrictly" @change="toggleCheckStrictly">
<Checkbox :checked="isCheckStrictly" @change="handleCheckStrictly">
父子联动
</Checkbox>
</div>

12
apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
View File

@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
import type { SystemMenuApi } from '#/api/system/menu';
import type { SystemRoleApi } from '#/api/system/role';
import { ref } from 'vue';
import {nextTick, ref} from 'vue';
import { useVbenModal, VbenTree } from '@vben/common-ui';
import { SystemMenuTypeEnum } from '@vben/constants';
@ -80,6 +80,7 @@ const [Modal, modalApi] = useVbenModal({
await formApi.setValues(data);
} finally {
await nextTick(); // 菜单过多，渲染较慢，需要等下一次事件循环
modalApi.unlock();
}
},
@ -97,7 +98,7 @@ async function loadMenuTree() {
}
/** 全选/全不选 */
function toggleSelectAll() {
function handleSelectAll() {
isAllSelected.value = !isAllSelected.value;
if (isAllSelected.value) {
const allIds = getAllNodeIds(menuTree.value);
@ -108,9 +109,8 @@ function toggleSelectAll() {
}
/** 展开/折叠所有节点 */
function toggleExpandAll() {
function handleExpandAll() {
isExpanded.value = !isExpanded.value;
// 获取所有节点的 ID
expandedKeys.value = isExpanded.value ? getAllNodeIds(menuTree.value) : [];
}
@ -158,10 +158,10 @@ function getNodeClass(node: Recordable<any>) {
</Form>
<template #prepend-footer>
<div class="flex flex-auto items-center">
<Checkbox :checked="isAllSelected" @change="toggleSelectAll">
<Checkbox :checked="isAllSelected" @change="handleSelectAll">
全选
</Checkbox>
<Checkbox :checked="isExpanded" @change="toggleExpandAll">
<Checkbox :checked="isExpanded" @change="handleExpandAll">
全部展开
</Checkbox>
</div>

61
apps/web-ele/src/views/system/role/data.ts
View File

@ -1,8 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemRoleApi } from '#/api/system/role';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { useAccess } from '@vben/access';
import {
CommonStatusEnum,
DICT_TYPE,
@ -13,8 +11,6 @@ import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getRangePickerDefaultProps } from '#/utils';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
@ -161,19 +157,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '角色名称',
component: 'Input',
componentProps: {
placeholder: '请输入角色名称',
clearable: true,
},
},
{
fieldName: 'code',
label: '角色标识',
component: 'Input',
componentProps: {
placeholder: '请输入角色标识',
clearable: true,
},
},
{
fieldName: 'status',
label: '角色状态',
component: 'Select',
componentProps: {
clearable: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择角色状态',
clearable: true,
},
},
{
@ -189,18 +194,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemRoleApi.Role>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
type: 'checkbox',
width: 40,
},
{ type: 'checkbox', width: 40 },
{
field: 'id',
title: '角色编号',
minWidth: 200,
minWidth: 100,
},
{
field: 'name',
@ -247,41 +247,10 @@ export function useGridColumns<T = SystemRoleApi.Role>(
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
width: 240,
fixed: 'right',
align: 'center',
cellRender: {
attrs: {
nameField: 'name',
nameTitle: '角色',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['system:role:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['system:role:delete']),
},
{
code: 'assign-data-permission',
text: '数据权限',
show: hasAccessByCodes([
'system:permission:assign-role-data-scope',
]),
},
{
code: 'assign-menu',
text: '菜单权限',
show: hasAccessByCodes(['system:permission:assign-role-menu']),
},
],
},
slots: { default: 'actions' },
},
];
}

180
apps/web-ele/src/views/system/role/index.vue
View File

@ -1,19 +1,15 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemRoleApi } from '#/api/system/role';
import { ref } from 'vue';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElButton, ElLoading, ElMessage } from 'element-plus';
import { ElLoading, ElMessage } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteRole,
deleteRoleList,
@ -44,47 +40,54 @@ const [AssignMenuFormModel, assignMenuFormApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 导出表格 */
async function onExport() {
async function handleExport() {
const data = await exportRole(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '角色.xls', source: data });
}
/** 编辑角色 */
function onEdit(row: SystemRoleApi.Role) {
formModalApi.setData(row).open();
}
/** 创建角色 */
function onCreate() {
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑角色 */
function handleEdit(row: SystemRoleApi.Role) {
formModalApi.setData(row).open();
}
/** 删除角色 */
async function onDelete(row: SystemRoleApi.Role) {
async function handleDelete(row: SystemRoleApi.Role) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
});
try {
await deleteRole(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
}
/** 批量删除角色 */
async function onDeleteBatch() {
await confirm('确定要批量删除该角色吗？');
await deleteRoleList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deletingBatch'),
});
try {
await deleteRoleList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
handleRefresh();
} finally {
loadingInstance.close();
}
}
const checkedIds = ref<number[]>([]);
@ -97,50 +100,28 @@ function handleRowCheckboxChange({
}
/** 分配角色的数据权限 */
function onAssignDataPermission(row: SystemRoleApi.Role) {
function handleAssignDataPermission(row: SystemRoleApi.Role) {
assignDataPermissionFormApi.setData(row).open();
}
/** 分配角色的菜单权限 */
function onAssignMenu(row: SystemRoleApi.Role) {
function handleAssignMenu(row: SystemRoleApi.Role) {
assignMenuFormApi.setData(row).open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<SystemRoleApi.Role>) {
switch (code) {
case 'assign-data-permission': {
onAssignDataPermission(row);
break;
}
case 'assign-menu': {
onAssignMenu(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getRolePage({
page: page.currentPage,
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
@ -149,6 +130,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@ -172,38 +154,78 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
</template>
<FormModal @success="onRefresh" />
<AssignDataPermissionFormModel @success="onRefresh" />
<AssignMenuFormModel @success="onRefresh" />
<FormModal @success="handleRefresh" />
<AssignDataPermissionFormModel @success="handleRefresh" />
<AssignMenuFormModel @success="handleRefresh" />
<Grid table-title="角色列表">
<template #toolbar-tools>
<ElButton
type="primary"
@click="onCreate"
v-access:code="['system:role:create']"
>
<Plus class="mr-2 size-5" />
{{ $t('ui.actionTitle.create', ['角色']) }}
</ElButton>
<ElButton
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:role:export']"
>
<Download class="mr-2 size-5" />
{{ $t('ui.actionTitle.export') }}
</ElButton>
<ElButton
type="danger"
class="ml-2"
@click="onDeleteBatch"
v-access:code="['system:role:delete']"
:disabled="isEmpty(checkedIds)"
>
<i class="fa-solid fa-trash-can mr-2"></i>
{{ $t('ui.actionTitle.deleteBatch') }}
</ElButton>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['角色']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:role:create'],
onClick: handleCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:role:export'],
onClick: handleExport,
},
{
label: $t('ui.actionTitle.deleteBatch'),
type: 'danger',
icon: ACTION_ICON.DELETE,
disabled: isEmpty(checkedIds),
auth: ['system:role:delete'],
onClick: handleDeleteBatch,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['system:role:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['system:role:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
:drop-down-actions="[
{
label: '数据权限',
type: 'primary',
link: true,
auth: ['system:permission:assign-role-data-scope'],
onClick: handleAssignDataPermission.bind(null, row),
},
{
label: '菜单权限',
type: 'primary',
link: true,
auth: ['system:permission:assign-role-menu'],
onClick: handleAssignMenu.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>

23
apps/web-ele/src/views/system/role/modules/assign-data-permission-form.vue
View File

@ -76,8 +76,8 @@ const [Modal, modalApi] = useVbenModal({
try {
// 加载部门列表
await loadDeptTree();
toggleExpandAll();
// 设置表单值, 一定要在加载树之后
handleExpandAll();
// 设置表单值，一定要在加载树之后
await formApi.setValues(await getRole(data.id));
} finally {
modalApi.unlock();
@ -97,7 +97,7 @@ async function loadDeptTree() {
}
/** 全选/全不选 */
function toggleSelectAll() {
function handleSelectAll() {
isAllSelected.value = !isAllSelected.value;
if (isAllSelected.value) {
const allIds = getAllNodeIds(deptTree.value);
@ -108,14 +108,13 @@ function toggleSelectAll() {
}
/** 展开/折叠所有节点 */
function toggleExpandAll() {
function handleExpandAll() {
isExpanded.value = !isExpanded.value;
// 获取所有节点的 ID
expandedKeys.value = isExpanded.value ? getAllNodeIds(deptTree.value) : [];
}
/** 切换父子联动 */
function toggleCheckStrictly() {
function handleCheckStrictly() {
isCheckStrictly.value = !isCheckStrictly.value;
}
@ -132,15 +131,14 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
</script>
<template>
<Modal title="数据权限" class="w-[40%]">
<Modal title="数据权限" class="w-2/5">
<Form class="mx-4">
<template #dataScopeDeptIds="slotProps">
<!-- <Spin :spinning="deptLoading"> -->
<!-- TODO @芋艿：可优化，使用 antd 的 tree？原因是，更原生 -->
<VbenTree
:tree-data="deptTree"
multiple
bordered
:spinning="deptLoading"
:expanded="expandedKeys"
v-bind="slotProps"
value-field="id"
@ -148,20 +146,19 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
:auto-check-parent="false"
:check-strictly="!isCheckStrictly"
/>
<!-- </Spin> -->
</template>
</Form>
<template #prepend-footer>
<div class="flex flex-auto items-center">
<ElCheckbox :model-value="isAllSelected" @change="toggleSelectAll">
<ElCheckbox :model-value="isAllSelected" @change="handleSelectAll">
全选
</ElCheckbox>
<ElCheckbox :model-value="isExpanded" @change="toggleExpandAll">
<ElCheckbox :model-value="isExpanded" @change="handleExpandAll">
全部展开
</ElCheckbox>
<ElCheckbox
:model-value="isCheckStrictly"
@change="toggleCheckStrictly"
@change="handleCheckStrictly"
>
父子联动
</ElCheckbox>

41
apps/web-ele/src/views/system/role/modules/assign-menu-form.vue
View File

@ -1,10 +1,13 @@
<script lang="ts" setup>
import type { SystemDeptApi } from '#/api/system/dept';
import type { Recordable } from '@vben-core/typings';
import type { SystemMenuApi } from '#/api/system/menu';
import type { SystemRoleApi } from '#/api/system/role';
import { ref } from 'vue';
import {nextTick, ref} from 'vue';
import { useVbenModal, VbenTree } from '@vben/common-ui';
import { SystemMenuTypeEnum } from '@vben/constants';
import { handleTree } from '@vben/utils';
import { ElCheckbox, ElMessage } from 'element-plus';
@ -18,7 +21,7 @@ import { useAssignMenuFormSchema } from '../data';
const emit = defineEmits(['success']);
const menuTree = ref<SystemDeptApi.Dept[]>([]); // 菜单树
const menuTree = ref<SystemMenuApi.Menu[]>([]); // 菜单树
const menuLoading = ref(false); // 加载菜单列表
const isAllSelected = ref(false); // 全选状态
const isExpanded = ref(false); // 展开状态
@ -77,6 +80,7 @@ const [Modal, modalApi] = useVbenModal({
await formApi.setValues(data);
} finally {
await nextTick(); // 菜单过多，渲染较慢，需要等下一次事件循环
modalApi.unlock();
}
},
@ -87,14 +91,14 @@ async function loadMenuTree() {
menuLoading.value = true;
try {
const data = await getMenuList();
menuTree.value = handleTree(data) as SystemDeptApi.Dept[];
menuTree.value = handleTree(data) as SystemMenuApi.Menu[];
} finally {
menuLoading.value = false;
}
}
/** 全选/全不选 */
function toggleSelectAll() {
function handleSelectAll() {
isAllSelected.value = !isAllSelected.value;
if (isAllSelected.value) {
const allIds = getAllNodeIds(menuTree.value);
@ -105,9 +109,8 @@ function toggleSelectAll() {
}
/** 展开/折叠所有节点 */
function toggleExpandAll() {
function handleExpandAll() {
isExpanded.value = !isExpanded.value;
// 获取所有节点的 ID
expandedKeys.value = isExpanded.value ? getAllNodeIds(menuTree.value) : [];
}
@ -121,32 +124,44 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
});
return ids;
}
function getNodeClass(node: Recordable<any>) {
const classes: string[] = [];
if (node.value?.type === SystemMenuTypeEnum.BUTTON) {
classes.push('inline-flex');
if (node.index % 3 >= 1) {
classes.push('!pl-0');
}
}
return classes.join(' ');
}
</script>
<template>
<Modal title="数据权限" class="w-[40%]">
<Modal title="数据权限" class="w-2/5">
<Form class="mx-4">
<template #menuIds="slotProps">
<!-- <Spin :spinning="menuLoading" class="w-full"> -->
<!-- TODO @芋艿：可优化，使用 antd 的 tree？原因是，更原生 -->
<VbenTree
:spinning="menuLoading"
:tree-data="menuTree"
multiple
bordered
:expanded="expandedKeys"
:get-node-class="getNodeClass"
v-bind="slotProps"
value-field="id"
label-field="name"
icon-field="meta.icon"
/>
<!-- </Spin> -->
</template>
</Form>
<template #prepend-footer>
<div class="flex flex-auto items-center">
<ElCheckbox :model-value="isAllSelected" @change="toggleSelectAll">
<ElCheckbox :model-value="isAllSelected" @change="handleSelectAll">
全选
</ElCheckbox>
<ElCheckbox :model-value="isExpanded" @change="toggleExpandAll">
<ElCheckbox :model-value="isExpanded" @change="handleExpandAll">
全部展开
</ElCheckbox>
</div>