dap
1 year ago
parent
e61c3e9058
commit
664e97daa1
@ -0,0 +1,61 @@
|
||||
import type { Menu, MenuOption, MenuResp } from './model';
|
||||
|
||||
import type { ID, IDS, PageQuery } from '#/api/common';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
enum Api {
|
||||
menuList = '/system/menu/list',
|
||||
menuTreeSelect = '/system/menu/treeselect',
|
||||
roleMenuTree = '/system/menu/roleMenuTreeselect',
|
||||
root = '/system/menu',
|
||||
tenantPackageMenuTreeselect = '/system/menu/tenantPackageMenuTreeselect',
|
||||
}
|
||||
|
||||
export function menuList(params?: PageQuery) {
|
||||
return requestClient.get<Menu[]>(Api.menuList, { params });
|
||||
}
|
||||
|
||||
export function menuInfo(menuId: ID) {
|
||||
return requestClient.get<Menu>(`${Api.root}/${menuId}`);
|
||||
}
|
||||
|
||||
export function menuAdd(data: any) {
|
||||
return requestClient.postWithMsg<void>(Api.root, data);
|
||||
}
|
||||
|
||||
export function menuUpdate(data: any) {
|
||||
return requestClient.putWithMsg<void>(Api.root, data);
|
||||
}
|
||||
|
||||
export function menuRemove(menuIds: IDS) {
|
||||
return requestClient.deleteWithMsg<void>(`${Api.root}/${menuIds}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回对应角色的菜单
|
||||
* @param roleId id
|
||||
* @returns resp
|
||||
*/
|
||||
export function roleMenuTreeSelect(roleId: ID) {
|
||||
return requestClient.get<MenuResp>(`${Api.roleMenuTree}/${roleId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉框使用 返回所有的菜单
|
||||
* @returns []
|
||||
*/
|
||||
export function menuTreeSelect() {
|
||||
return requestClient.get<MenuOption[]>(Api.menuTreeSelect);
|
||||
}
|
||||
|
||||
/**
|
||||
* 租户套餐使用
|
||||
* @param packageId packageId
|
||||
* @returns resp
|
||||
*/
|
||||
export function tenantPackageMenuTreeSelect(packageId: ID) {
|
||||
return requestClient.get<MenuResp>(
|
||||
`${Api.tenantPackageMenuTreeselect}/${packageId}`,
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
export interface Menu {
|
||||
createBy?: any;
|
||||
createTime: string;
|
||||
updateBy?: any;
|
||||
updateTime?: any;
|
||||
remark?: any;
|
||||
menuId: number;
|
||||
menuName: string;
|
||||
parentName?: string;
|
||||
parentId: number;
|
||||
orderNum: number;
|
||||
path: string;
|
||||
component?: string;
|
||||
query: string;
|
||||
isFrame: string;
|
||||
isCache: string;
|
||||
menuType: string;
|
||||
visible: string;
|
||||
status: string;
|
||||
perms: string;
|
||||
icon: string;
|
||||
children: Menu[];
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 菜单信息
|
||||
* @param label 菜单名称
|
||||
*/
|
||||
export interface MenuOption {
|
||||
id: number;
|
||||
parentId: number;
|
||||
label: string;
|
||||
weight: number;
|
||||
children: MenuOption[];
|
||||
key: string; // 实际上不存在 ide报错
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 菜单返回
|
||||
* @param checkedKeys 选中的菜单id
|
||||
* @param menus 菜单信息
|
||||
*/
|
||||
export interface MenuResp {
|
||||
checkedKeys: number[];
|
||||
menus: MenuOption[];
|
||||
}
|
||||
@ -1,9 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import CommonSkeleton from '#/views/common';
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import menuDrawer from './menu-drawer.vue';
|
||||
|
||||
const [MenuDrawer, drawerApi] = useVbenDrawer({
|
||||
connectedComponent: menuDrawer,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
drawerApi.setData({ update: false });
|
||||
drawerApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<CommonSkeleton />
|
||||
</div>
|
||||
<Page>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
<MenuDrawer />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { addFullName, getPopupContainer, listToTree } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter';
|
||||
import { menuAdd, menuList, menuUpdate } from '#/api/system/menu';
|
||||
|
||||
import { drawerSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
interface DrawerProps {
|
||||
update: boolean;
|
||||
record?: any;
|
||||
}
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
schema: drawerSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
async function setupMenuSelect() {
|
||||
// menu
|
||||
const menuArray = await menuList();
|
||||
const menuTree = listToTree(menuArray, { id: 'menuId', pid: 'parentId' });
|
||||
const fullMenuTree = [
|
||||
{
|
||||
menuId: 0,
|
||||
menuName: '根目录',
|
||||
children: menuTree,
|
||||
},
|
||||
];
|
||||
addFullName(fullMenuTree, 'menuName', ' / ');
|
||||
|
||||
await formApi.updateSchema([
|
||||
{
|
||||
componentProps: {
|
||||
fieldNames: {
|
||||
label: 'menuName',
|
||||
value: 'menuId',
|
||||
},
|
||||
getPopupContainer,
|
||||
// 设置弹窗滚动高度 默认256
|
||||
listHeight: 300,
|
||||
treeData: fullMenuTree,
|
||||
treeDefaultExpandAll: false,
|
||||
// 默认展开的树节点
|
||||
treeDefaultExpandedKeys: [0],
|
||||
treeLine: { showLeafIcon: false },
|
||||
treeNodeLabelProp: 'fullName',
|
||||
},
|
||||
fieldName: 'parentId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
const [BasicDrawer, drawerApi] = useVbenDrawer({
|
||||
onCancel: handleCancel,
|
||||
onConfirm: handleConfirm,
|
||||
async onOpenChange(isOpen) {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
drawerApi.drawerLoading(true);
|
||||
const { record, update } = drawerApi.getData() as DrawerProps;
|
||||
isUpdate.value = update;
|
||||
// 加载菜单树选择
|
||||
await setupMenuSelect();
|
||||
if (update && record) {
|
||||
for (const key in record) {
|
||||
await formApi.setFieldValue(key, record[key]);
|
||||
}
|
||||
}
|
||||
drawerApi.drawerLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
drawerApi.drawerLoading(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const data = await formApi.getValues();
|
||||
console.log(data);
|
||||
await (isUpdate.value ? menuUpdate(data) : menuAdd(data));
|
||||
emit('reload');
|
||||
await handleCancel();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
drawerApi.drawerLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
drawerApi.close();
|
||||
await formApi.resetForm();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
|
||||
<BasicForm />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
Loading…
Reference in new issue