refactor: 使用新版菜单勾选
This commit is contained in:
parent
5033ea2e82
commit
e554106eb9
@ -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';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -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,
|
||||||
|
@ -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;
|
||||||
|
// keys依赖于menu 需要先加载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;
|
||||||
|
// keys依赖于menu 需要先加载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.getValues拿到的是一个readonly对象,不能直接修改,需要cloneDeep
|
// formApi.getValues拿到的是一个readonly对象,不能直接修改,需要cloneDeep
|
||||||
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>
|
||||||
|
Loading…
Reference in New Issue
Block a user