refactor: 使用新版菜单勾选

This commit is contained in:
dap 2025-01-06 14:32:08 +08:00
parent 5033ea2e82
commit e554106eb9
3 changed files with 27 additions and 27 deletions

View File

@ -1,3 +1,4 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { DictEnum } from '@vben/constants';
@ -5,7 +6,6 @@ import { getPopupContainer } from '@vben/utils';
import { Tag } from 'ant-design-vue';
import { type FormSchemaGetter } from '#/adapter/form';
import { getDictOptions } from '#/utils/dict';
/**

View File

@ -1,16 +1,14 @@
<script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useAccess } from '@vben/access';
import {
Page,
useVbenDrawer,
useVbenModal,
type VbenFormProps,
} from '@vben/common-ui';
import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import {
@ -22,11 +20,7 @@ import {
Space,
} from 'ant-design-vue';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
import {
roleChangeStatus,
roleExport,

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed, nextTick, ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';
@ -8,7 +8,7 @@ import { cloneDeep, eachTree } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { menuTreeSelect, roleMenuTreeSelect } from '#/api/system/menu';
import { roleAdd, roleInfo, roleUpdate } from '#/api/system/role';
import { TreeSelectPanel } from '#/components/tree';
import { MenuSelectTable } from '#/components/tree';
import { drawerSchema } from './data';
@ -36,7 +36,6 @@ const menuTree = ref<any[]>([]);
async function setupMenuTree(id?: number | string) {
if (id) {
const resp = await roleMenuTreeSelect(id);
formApi.setFieldValue('menuIds', resp.checkedKeys);
const menus = resp.menus;
// i18n
eachTree(menus, (node) => {
@ -44,15 +43,20 @@ async function setupMenuTree(id?: number | string) {
});
//
menuTree.value = resp.menus;
// keysmenu menu
await nextTick();
await formApi.setFieldValue('menuIds', resp.checkedKeys);
} else {
const resp = await menuTreeSelect();
formApi.setFieldValue('menuIds', []);
// i18n
eachTree(resp, (node) => {
node.label = $t(node.label);
});
//
menuTree.value = resp;
// keysmenu menu
await nextTick();
await formApi.setFieldValue('menuIds', []);
}
}
@ -81,7 +85,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
/**
* 这里拿到的是一个数组ref
*/
const menuSelectRef = ref();
const menuSelectRef = ref<InstanceType<typeof MenuSelectTable>>();
async function handleConfirm() {
try {
@ -91,7 +95,7 @@ async function handleConfirm() {
return;
}
//
const menuIds = menuSelectRef.value?.[0]?.getCheckedKeys() ?? [];
const menuIds = menuSelectRef.value?.getCheckedKeys() ?? [];
// formApi.getValuesreadonlycloneDeep
const data = cloneDeep(await formApi.getValues());
data.menuIds = menuIds;
@ -120,17 +124,19 @@ function handleMenuCheckStrictlyChange(value: boolean) {
</script>
<template>
<BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
<BasicDrawer :close-on-click-modal="false" :title="title" class="w-[800px]">
<BasicForm>
<template #menuIds="slotProps">
<div class="h-[600px] w-full">
<!-- check-strictly为readonly 不能通过v-model绑定 -->
<TreeSelectPanel
<MenuSelectTable
ref="menuSelectRef"
v-bind="slotProps"
:check-strictly="formApi.form.values.menuCheckStrictly"
:tree-data="menuTree"
@check-strictly-change="handleMenuCheckStrictlyChange"
:checked-keys="slotProps.value"
:association="formApi.form.values.menuCheckStrictly"
:menus="menuTree"
@update:association="handleMenuCheckStrictlyChange"
/>
</div>
</template>
</BasicForm>
</BasicDrawer>