feat: 双击展开/折叠

This commit is contained in:
dap 2024-10-07 11:14:21 +08:00
parent cbd90f6819
commit efa7770c1d
2 changed files with 76 additions and 29 deletions

View File

@ -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

View File

@ -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