feat: 节点关联/节点独立的切换逻辑

This commit is contained in:
dap 2025-01-07 15:01:10 +08:00
parent d8acb86427
commit 273d28be4c
2 changed files with 86 additions and 6 deletions

View File

@ -1,10 +1,11 @@
import type { MenuPermissionOption } from './data';
import type { useVbenVxeGrid } from '#/adapter/vxe-table';
import type { MenuOption } from '#/api/system/menu/model';
import { eachTree } from '@vben/utils';
import { eachTree, treeToList } from '@vben/utils';
import { difference } from 'lodash-es';
import { difference, isEmpty, isUndefined } from 'lodash-es';
/**
*
@ -73,3 +74,60 @@ export function menusWithPermissions(menus: MenuOption[]) {
}
});
}
/**
*
* @param checkedKeys keys
* @param menus
* @param tableApi api
* @param association
*/
export function setTableChecked(
checkedKeys: (number | string)[],
menus: MenuPermissionOption[],
tableApi: ReturnType<typeof useVbenVxeGrid>['1'],
association: boolean,
) {
// tree转list
const menuList: MenuPermissionOption[] = treeToList(menus);
// 拿到勾选的行数据
let checkedRows = menuList.filter((item) => checkedKeys.includes(item.id));
/**
* children为空
*/
if (!association) {
checkedRows = checkedRows.filter(
(item) => isUndefined(item.children) || isEmpty(item.children),
);
}
// 设置行选中 & permissions选中
checkedRows.forEach((item) => {
tableApi.grid.setCheckboxRow(item, true);
if (item?.permissions?.length > 0) {
item.permissions.forEach((permission) => {
if (checkedKeys.includes(permission.id)) {
permission.checked = true;
}
});
}
});
/**
*
*
*/
if (!association) {
const emptyRows = checkedRows.filter((item) => {
if (isUndefined(item.permissions) || isEmpty(item.permissions)) {
return false;
}
return item.permissions.every(
(permission) => permission.checked === false,
);
});
// 设置为不选中
tableApi.grid.setCheckboxRow(emptyRows, false);
}
}

View File

@ -1,14 +1,16 @@
<script setup lang="tsx">
import type { RadioChangeEvent } from 'ant-design-vue';
import type { MenuPermissionOption } from './data';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { MenuOption } from '#/api/system/menu/model';
import { nextTick, onMounted, ref, watch } from 'vue';
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
import { cloneDeep, findGroupParentIds } from '@vben/utils';
import { Alert, Checkbox, RadioGroup, Space } from 'ant-design-vue';
import { Alert, Checkbox, message, RadioGroup, Space } from 'ant-design-vue';
import { uniq } from 'lodash-es';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
@ -18,6 +20,7 @@ import {
menusWithPermissions,
rowAndChildrenChecked,
setPermissionsChecked,
setTableChecked,
} from './helper';
import { useFullScreenGuide } from './hook';
@ -227,10 +230,13 @@ onMounted(() => {
);
});
// ()keys
const lastCheckedKeys = shallowRef<(number | string)[]>([]);
/**
* 节点关联变动 事件
*/
async function handleAssociationChange() {
async function handleAssociationChange(e: RadioChangeEvent) {
lastCheckedKeys.value = getCheckedKeys();
// permissions
const records = tableApi.grid.getData();
records.forEach((item) => {
@ -238,9 +244,19 @@ async function handleAssociationChange() {
});
//
await tableApi.grid.clearCheckboxRow();
updateCheckedNumber();
//
await tableApi.grid.scrollTo(0, 0);
//
//
// if (e.target.value) {
// setTableChecked(lastCheckedKeys.value, records, tableApi, false);
// } else {
// setTableChecked(lastCheckedKeys.value, records, tableApi, true);
// }
setTableChecked(lastCheckedKeys.value, records, tableApi, !e.target.value);
updateCheckedNumber();
}
/**
@ -337,6 +353,11 @@ function getCheckedKeys() {
defineExpose({
getCheckedKeys,
});
function test() {
const keys = getCheckedKeys();
message.success(`keys:${keys.length}`);
}
</script>
<template>
@ -364,6 +385,7 @@ defineExpose({
</template>
<template #toolbar-tools>
<Space>
<a-button @click="test"> 测试 </a-button>
<a-button @click="setExpandOrCollapse(false)">
{{ $t('pages.common.collapse') }}
</a-button>