refactor: 修改菜单树组件,修复无法全部获取选中的节点Bug

This commit is contained in:
AN 2025-05-20 15:42:56 +08:00
parent 5fc0bcf239
commit 37a60d676a
3 changed files with 14 additions and 15 deletions

View File

@ -21,11 +21,10 @@ const { bool: checkAll } = useBoolean();
const expandedKeys = ref<CommonType.IdType[]>([0]); const expandedKeys = ref<CommonType.IdType[]>([0]);
const menuTreeRef = ref<TreeSelectInst | null>(null); const menuTreeRef = ref<TreeSelectInst | null>(null);
const value = defineModel<CommonType.IdType[]>('value', { required: false, default: [] }); const checkedKeys = defineModel<CommonType.IdType[]>('checkedKeys', { required: false, default: [] });
const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] }); const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] });
const cascade = defineModel<boolean>('cascade', { required: false, default: true }); const cascade = defineModel<boolean>('cascade', { required: false, default: true });
const loading = defineModel<boolean>('loading', { required: false, default: false }); const loading = defineModel<boolean>('loading', { required: false, default: false });
const attrs: TreeSelectProps = useAttrs(); const attrs: TreeSelectProps = useAttrs();
async function getMenuList() { async function getMenuList() {
@ -35,7 +34,7 @@ async function getMenuList() {
options.value = [ options.value = [
{ {
id: 0, id: 0,
label: '根目录', label: '根节点',
icon: 'material-symbols:home-outline-rounded', icon: 'material-symbols:home-outline-rounded',
children: data children: data
} }
@ -83,14 +82,14 @@ function getAllMenuIds(menu: Api.System.MenuList) {
function handleCheckedTreeNodeAll(checked: boolean) { function handleCheckedTreeNodeAll(checked: boolean) {
if (checked) { if (checked) {
value.value = getAllMenuIds(options.value); checkedKeys.value = getAllMenuIds(options.value);
return; return;
} }
value.value = []; checkedKeys.value = [];
} }
function handleSubmit() { function getCheckedMenuIds() {
const menuIds = [...value.value]; const menuIds = menuTreeRef.value?.getCheckedData()?.keys as string[];
const indeterminateData = menuTreeRef.value?.getIndeterminateData(); const indeterminateData = menuTreeRef.value?.getIndeterminateData();
if (cascade.value) { if (cascade.value) {
const parentIds: string[] = indeterminateData?.keys.filter(item => !menuIds?.includes(String(item))) as string[]; const parentIds: string[] = indeterminateData?.keys.filter(item => !menuIds?.includes(String(item))) as string[];
@ -100,7 +99,7 @@ function handleSubmit() {
} }
defineExpose({ defineExpose({
submit: handleSubmit, getCheckedMenuIds,
refresh: getMenuList refresh: getMenuList
}); });
</script> </script>
@ -122,7 +121,7 @@ defineExpose({
<NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading"> <NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading">
<NTree <NTree
ref="menuTreeRef" ref="menuTreeRef"
v-model:checked-keys="value" v-model:checked-keys="checkedKeys"
v-model:expanded-keys="expandedKeys" v-model:expanded-keys="expandedKeys"
multiple multiple
checkable checkable

View File

@ -102,9 +102,8 @@ function closeDrawer() {
async function handleSubmit() { async function handleSubmit() {
await validate(); await validate();
const { roleId, roleName, roleKey, roleSort, menuCheckStrictly, status, remark } = model;
const { roleId, roleName, roleKey, roleSort, menuCheckStrictly, status, remark, menuIds } = model; const menuIds = menuTreeRef.value?.getCheckedMenuIds();
// request // request
if (props.operateType === 'add') { if (props.operateType === 'add') {
const { error } = await fetchCreateRole({ const { error } = await fetchCreateRole({
@ -174,7 +173,7 @@ watch(visible, () => {
<MenuTree <MenuTree
v-if="visible" v-if="visible"
ref="menuTreeRef" ref="menuTreeRef"
v-model:value="model.menuIds" v-model:checked-keys="model.menuIds"
v-model:options="menuOptions" v-model:options="menuOptions"
v-model:cascade="model.menuCheckStrictly" v-model:cascade="model.menuCheckStrictly"
v-model:loading="menuLoading" v-model:loading="menuLoading"

View File

@ -95,7 +95,8 @@ function closeDrawer() {
async function handleSubmit() { async function handleSubmit() {
await validate(); await validate();
const { packageId, packageName, menuIds, remark, menuCheckStrictly } = model; const { packageId, packageName, remark, menuCheckStrictly } = model;
const menuIds = menuTreeRef.value?.getCheckedMenuIds();
// request // request
if (props.operateType === 'add') { if (props.operateType === 'add') {
const { error } = await fetchCreateTenantPackage({ packageName, menuIds, remark, menuCheckStrictly }); const { error } = await fetchCreateTenantPackage({ packageName, menuIds, remark, menuCheckStrictly });
@ -140,7 +141,7 @@ watch(visible, () => {
<MenuTree <MenuTree
v-if="visible" v-if="visible"
ref="menuTreeRef" ref="menuTreeRef"
v-model:value="model.menuIds" v-model:checked-keys="model.menuIds"
v-model:options="menuOptions" v-model:options="menuOptions"
v-model:cascade="model.menuCheckStrictly" v-model:cascade="model.menuCheckStrictly"
v-model:loading="menuLoading" v-model:loading="menuLoading"