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

refactor: 将 menu 的 data.ts 融合到 index.vue 中

pull/62/head
YunaiV 2025-04-02 23:16:48 +08:00
parent 94ea0fc086
commit ff67eb3380
2 changed files with 117 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
apps/web-antd/src/views/system/menu/data.ts
View File

@ -1,82 +0,0 @@
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemMenuApi } from '#/api/system/menu';
import { DICT_TYPE } from '#/utils/dict';
export function useGridColumns(
onActionClick: OnActionClickFn<SystemMenuApi.SystemMenu>,
): VxeTableGridOptions<SystemMenuApi.SystemMenu>['columns'] {
return [
{
align: 'left',
field: 'name',
fixed: 'left',
slots: { default: 'name' },
title: '菜单名称',
treeNode: true,
minWidth: 250,
},
{
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
},
field: 'type',
title: '菜单类型',
minWidth: 100,
},
{
field: 'sort',
title: '显示排序',
minWidth: 100,
},
{
field: 'permission',
title: '权限标识',
minWidth: 200,
},
{
field: 'path',
title: '组件路径',
minWidth: 200,
},
{
field: 'componentName',
minWidth: 200,
title: '组件名称',
},
{
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
field: 'status',
title: '状态',
minWidth: 100,
},
{
align: 'right',
cellRender: {
attrs: {
nameField: 'name',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'append',
text: '新增下级',
},
'edit', // 默认的编辑按钮
'delete', // 默认的删除按钮
],
},
field: 'operation',
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
title: '操作',
minWidth: 200,
},
];
}

161
apps/web-antd/src/views/system/menu/index.vue
View File

@ -1,8 +1,5 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { OnActionClickFn, OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemMenuApi } from '#/api/system/menu';
import { ref } from 'vue';
@ -10,12 +7,11 @@ import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getMenuList, deleteMenu } from '#/api/system/menu';
import { SystemMenuTypeEnum } from '#/utils/constants';
import { DICT_TYPE } from '#/utils/dict';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { IconifyIcon, Plus } from '@vben/icons';
import { useGridColumns } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
@ -23,9 +19,35 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true,
});
/** 编辑菜单 */
function onEdit(row: SystemMenuApi.SystemMenu) {
formModalApi.setData(row).open();
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemMenuApi.SystemMenu>) {
switch (code) {
case 'append': {
onAppend(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
/** 创建菜单 */
function onCreate() {
formModalApi.setData({}).open();
}
/** 添加下级菜单 */
@ -33,9 +55,9 @@ function onAppend(row: SystemMenuApi.SystemMenu) {
formModalApi.setData({ pid: row.id }).open();
}
/** 创建菜单 */
function onCreate() {
formModalApi.setData({}).open();
/** 编辑菜单 */
function onEdit(row: SystemMenuApi.SystemMenu) {
formModalApi.setData(row).open();
}
/** 删除菜单 */
@ -57,25 +79,89 @@ async function onDelete(row: SystemMenuApi.SystemMenu) {
}
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemMenuApi.SystemMenu>) {
switch (code) {
case 'append': {
onAppend(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
/** 切换树形展开/收缩状态 */
const isExpanded = ref(false);
function toggleExpand() {
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
}
function useGridColumns(
onActionClick: OnActionClickFn<SystemMenuApi.SystemMenu>,
): VxeTableGridOptions<SystemMenuApi.SystemMenu>['columns'] {
return [
{
align: 'left',
field: 'name',
fixed: 'left',
slots: { default: 'name' },
title: '菜单名称',
treeNode: true,
minWidth: 250,
},
{
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
},
field: 'type',
title: '菜单类型',
minWidth: 100,
},
{
field: 'sort',
title: '显示排序',
minWidth: 100,
},
{
field: 'permission',
title: '权限标识',
minWidth: 200,
},
{
field: 'path',
title: '组件路径',
minWidth: 200,
},
{
field: 'componentName',
minWidth: 200,
title: '组件名称',
},
{
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
field: 'status',
title: '状态',
minWidth: 100,
},
{
align: 'right',
cellRender: {
attrs: {
nameField: 'name',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'append',
text: '新增下级',
},
'edit', // 默认的编辑按钮
'delete', // 默认的删除按钮
],
},
field: 'operation',
fixed: 'right',
headerAlign: 'center',
showOverflow: false,
title: '操作',
minWidth: 200,
},
];
}
const [Grid, gridApi] = useVbenVxeGrid({
@ -107,18 +193,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
} as VxeTableGridOptions,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 切换树形展开/收缩状态 */
const isExpanded = ref(false);
function toggleExpand() {
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
}
</script>
<template>
<Page auto-content-height>
@ -141,7 +215,6 @@ function toggleExpand() {
icon="carbon:square-outline"
class="size-full"
/>
<!-- TODO @芋艿：这里的 空串的情况 -->
<IconifyIcon
v-else-if="row.icon"
:icon="row.icon || 'carbon:circle-dash'"