refactor: 修改菜单树组件,修复无法全部获取选中的节点Bug
This commit is contained in:
parent
5fc0bcf239
commit
37a60d676a
@ -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
|
||||||
|
@ -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"
|
||||||
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user