feat: 双击展开/折叠
This commit is contained in:
parent
cbd90f6819
commit
efa7770c1d
@ -4,9 +4,10 @@ import type { Recordable } from '@vben/types';
|
|||||||
import { nextTick } from 'vue';
|
import { nextTick } from 'vue';
|
||||||
|
|
||||||
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
|
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
|
||||||
import { listToTree } from '@vben/utils';
|
import { eachTree, listToTree, removeEmptyChildren } from '@vben/utils';
|
||||||
|
|
||||||
import { Popconfirm, Space } from 'ant-design-vue';
|
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { Popconfirm, Space, Tooltip } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
|
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
|
||||||
import { deptList, deptRemove } from '#/api/system/dept';
|
import { deptList, deptRemove } from '#/api/system/dept';
|
||||||
@ -40,12 +41,16 @@ const gridOptions: VxeGridProps = {
|
|||||||
pid: 'parentId',
|
pid: 'parentId',
|
||||||
children: 'children',
|
children: 'children',
|
||||||
});
|
});
|
||||||
|
removeEmptyChildren(treeData);
|
||||||
return { rows: treeData };
|
return { rows: treeData };
|
||||||
},
|
},
|
||||||
// 默认请求接口后展开全部 不需要可以删除这段
|
// 默认请求接口后展开全部 不需要可以删除这段
|
||||||
querySuccess: () => {
|
querySuccess: () => {
|
||||||
|
// 默认展开 需要加上标记
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
eachTree(tableApi.grid.getData(), (item) => (item.expand = true));
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
expandAll();
|
setExpandOrCollapse(true);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -64,7 +69,21 @@ const gridOptions: VxeGridProps = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||||
|
formOptions,
|
||||||
|
gridOptions,
|
||||||
|
gridEvents: {
|
||||||
|
cellDblclick: (e: any) => {
|
||||||
|
const { row = {} } = e;
|
||||||
|
if (!row?.children) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const isExpanded = row?.expand;
|
||||||
|
tableApi.grid.setTreeExpand(row, !isExpanded);
|
||||||
|
row.expand = !isExpanded;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
const [DeptDrawer, drawerApi] = useVbenDrawer({
|
const [DeptDrawer, drawerApi] = useVbenDrawer({
|
||||||
connectedComponent: deptDrawer,
|
connectedComponent: deptDrawer,
|
||||||
});
|
});
|
||||||
@ -84,12 +103,13 @@ async function handleDelete(row: Recordable<any>) {
|
|||||||
await tableApi.query();
|
await tableApi.query();
|
||||||
}
|
}
|
||||||
|
|
||||||
function expandAll() {
|
/**
|
||||||
tableApi.grid?.setAllTreeExpand(true);
|
* 全部展开/折叠
|
||||||
}
|
* @param expand 是否展开
|
||||||
|
*/
|
||||||
function collapseAll() {
|
function setExpandOrCollapse(expand: boolean) {
|
||||||
tableApi.grid?.setAllTreeExpand(false);
|
eachTree(tableApi.grid.getData(), (item) => (item.expand = expand));
|
||||||
|
tableApi.grid?.setAllTreeExpand(expand);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -97,14 +117,19 @@ function collapseAll() {
|
|||||||
<Page :auto-content-height="true">
|
<Page :auto-content-height="true">
|
||||||
<BasicTable>
|
<BasicTable>
|
||||||
<template #toolbar-actions>
|
<template #toolbar-actions>
|
||||||
<span class="pl-[7px] text-[16px]">部门列表</span>
|
<div class="flex items-center gap-[6px]">
|
||||||
|
<span class="pl-[7px] text-[16px]">部门列表</span>
|
||||||
|
<Tooltip title="提示:双击展开/收起子菜单">
|
||||||
|
<QuestionCircleOutlined class="text-center" />
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #toolbar-tools>
|
<template #toolbar-tools>
|
||||||
<Space>
|
<Space>
|
||||||
<a-button @click="collapseAll">
|
<a-button @click="setExpandOrCollapse(false)">
|
||||||
{{ $t('pages.common.collapse') }}
|
{{ $t('pages.common.collapse') }}
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button @click="expandAll">
|
<a-button @click="setExpandOrCollapse(true)">
|
||||||
{{ $t('pages.common.expand') }}
|
{{ $t('pages.common.expand') }}
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button
|
<a-button
|
||||||
|
@ -6,9 +6,9 @@ import { computed } from 'vue';
|
|||||||
import { useAccess } from '@vben/access';
|
import { useAccess } from '@vben/access';
|
||||||
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
|
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
|
||||||
import { Fallback } from '@vben/common-ui';
|
import { Fallback } from '@vben/common-ui';
|
||||||
import { listToTree } from '@vben/utils';
|
import { eachTree, listToTree, removeEmptyChildren } from '@vben/utils';
|
||||||
|
|
||||||
import { Popconfirm, Space } from 'ant-design-vue';
|
import { Popconfirm, Space, Tooltip } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
|
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
|
||||||
import { menuList, menuRemove } from '#/api/system/menu';
|
import { menuList, menuRemove } from '#/api/system/menu';
|
||||||
@ -16,6 +16,11 @@ import { menuList, menuRemove } from '#/api/system/menu';
|
|||||||
import { columns, querySchema } from './data';
|
import { columns, querySchema } from './data';
|
||||||
import menuDrawer from './menu-drawer.vue';
|
import menuDrawer from './menu-drawer.vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 不要问为什么有两个根节点 v-if会控制只会渲染一个
|
||||||
|
*/
|
||||||
|
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
const formOptions: VbenFormProps = {
|
const formOptions: VbenFormProps = {
|
||||||
commonConfig: {
|
commonConfig: {
|
||||||
labelWidth: 80,
|
labelWidth: 80,
|
||||||
@ -42,6 +47,7 @@ const gridOptions: VxeGridProps = {
|
|||||||
pid: 'parentId',
|
pid: 'parentId',
|
||||||
children: 'children',
|
children: 'children',
|
||||||
});
|
});
|
||||||
|
removeEmptyChildren(treeData);
|
||||||
return { rows: treeData };
|
return { rows: treeData };
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -60,7 +66,21 @@ const gridOptions: VxeGridProps = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||||
|
formOptions,
|
||||||
|
gridOptions,
|
||||||
|
gridEvents: {
|
||||||
|
cellDblclick: (e: any) => {
|
||||||
|
const { row = {} } = e;
|
||||||
|
if (!row?.children) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const isExpanded = row?.expand;
|
||||||
|
tableApi.grid.setTreeExpand(row, !isExpanded);
|
||||||
|
row.expand = !isExpanded;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
const [MenuDrawer, drawerApi] = useVbenDrawer({
|
const [MenuDrawer, drawerApi] = useVbenDrawer({
|
||||||
connectedComponent: menuDrawer,
|
connectedComponent: menuDrawer,
|
||||||
});
|
});
|
||||||
@ -80,12 +100,13 @@ async function handleDelete(row: Recordable<any>) {
|
|||||||
await tableApi.query();
|
await tableApi.query();
|
||||||
}
|
}
|
||||||
|
|
||||||
function expandAll() {
|
/**
|
||||||
tableApi.grid?.setAllTreeExpand(true);
|
* 全部展开/折叠
|
||||||
}
|
* @param expand 是否展开
|
||||||
|
*/
|
||||||
function collapseAll() {
|
function setExpandOrCollapse(expand: boolean) {
|
||||||
tableApi.grid?.setAllTreeExpand(false);
|
eachTree(tableApi.grid.getData(), (item) => (item.expand = expand));
|
||||||
|
tableApi.grid?.setAllTreeExpand(expand);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -96,24 +117,25 @@ const { hasAccessByRoles } = useAccess();
|
|||||||
const isAdmin = computed(() => {
|
const isAdmin = computed(() => {
|
||||||
return hasAccessByRoles(['admin', 'superadmin']);
|
return hasAccessByRoles(['admin', 'superadmin']);
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
|
||||||
* 不要问为什么有两个根节点 v-if会控制只会渲染一个
|
|
||||||
*/
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Page v-if="isAdmin" :auto-content-height="true">
|
<Page v-if="isAdmin" :auto-content-height="true">
|
||||||
<BasicTable>
|
<BasicTable>
|
||||||
<template #toolbar-actions>
|
<template #toolbar-actions>
|
||||||
<span class="pl-[7px] text-[16px]">菜单权限列表</span>
|
<div class="flex items-center gap-[6px]">
|
||||||
|
<span class="pl-[7px] text-[16px]">菜单列表</span>
|
||||||
|
<Tooltip title="提示:双击展开/收起子菜单">
|
||||||
|
<QuestionCircleOutlined class="text-center" />
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #toolbar-tools>
|
<template #toolbar-tools>
|
||||||
<Space>
|
<Space>
|
||||||
<a-button @click="collapseAll">
|
<a-button @click="setExpandOrCollapse(false)">
|
||||||
{{ $t('pages.common.collapse') }}
|
{{ $t('pages.common.collapse') }}
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button @click="expandAll">
|
<a-button @click="setExpandOrCollapse(true)">
|
||||||
{{ $t('pages.common.expand') }}
|
{{ $t('pages.common.expand') }}
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button
|
<a-button
|
||||||
|
Loading…
Reference in New Issue
Block a user