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 type { VxeGridProps } from '#/adapter/vxe-table';
import { DictEnum } from '@vben/constants'; import { DictEnum } from '@vben/constants';
@ -5,7 +6,6 @@ import { getPopupContainer } from '@vben/utils';
import { Tag } from 'ant-design-vue'; import { Tag } from 'ant-design-vue';
import { type FormSchemaGetter } from '#/adapter/form';
import { getDictOptions } from '#/utils/dict'; import { getDictOptions } from '#/utils/dict';
/** /**

View File

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

View File

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