支持列表全部展开/折叠功能

This commit is contained in:
qiuchengw
2025-09-24 20:38:53 +08:00
parent 7309865af0
commit 16557a260e
5 changed files with 122 additions and 0 deletions
+54
View File
@@ -37,6 +37,8 @@ const props = withDefaults(defineProps<Props>(), {
onLanguageChange: undefined,
onThemeChange: undefined,
onFullscreenChange: undefined,
onExpandAll: undefined,
onCollapseAll: undefined,
localeMessages: undefined,
workingHours: () => ({
morning: { start: 8, end: 11 },
@@ -96,6 +98,8 @@ interface Props {
onLanguageChange?: (lang: 'zh-CN' | 'en-US') => void
onThemeChange?: (isDark: boolean) => void
onFullscreenChange?: (isFullscreen: boolean) => void
onExpandAll?: () => void
onCollapseAll?: () => void
/**
* 自定义多语言(国际化)配置,结构参考内置 messages['zh-CN'],只需传递需要覆盖的 key 即可。
* 例如:
@@ -346,6 +350,52 @@ const handleTaskCollapseChange = (task: Task) => {
updateTaskTrigger.value++
}
// 全部展开任务
const handleExpandAll = () => {
if (props.onExpandAll && typeof props.onExpandAll === 'function') {
props.onExpandAll()
} else {
// 默认行为:递归展开所有任务
const expandAllTasks = (tasks: Task[]): void => {
tasks.forEach(task => {
if (task.children && task.children.length > 0) {
task.collapsed = false
expandAllTasks(task.children)
}
})
}
if (props.tasks) {
expandAllTasks(props.tasks)
// 触发Timeline重新计算
updateTaskTrigger.value++
}
}
}
// 全部折叠任务
const handleCollapseAll = () => {
if (props.onCollapseAll && typeof props.onCollapseAll === 'function') {
props.onCollapseAll()
} else {
// 默认行为:递归折叠所有任务
const collapseAllTasks = (tasks: Task[]): void => {
tasks.forEach(task => {
if (task.children && task.children.length > 0) {
task.collapsed = true
collapseAllTasks(task.children)
}
})
}
if (props.tasks) {
collapseAllTasks(props.tasks)
// 触发Timeline重新计算
updateTaskTrigger.value++
}
}
}
// 用于强制触发Timeline重新计算的响应式值
const updateTaskTrigger = ref(0)
@@ -1528,7 +1578,11 @@ function handleTaskDelete(task: Task, deleteChildren?: boolean) {
:on-theme-change="props.onThemeChange"
:on-fullscreen-change="props.onFullscreenChange"
:on-time-scale-change="handleTimeScaleChange"
:on-expand-all="handleExpandAll"
:on-collapse-all="handleCollapseAll"
@add-task="handleToolbarAddTask"
@expand-all="handleExpandAll"
@collapse-all="handleCollapseAll"
/>
<!-- 甘特图主体 -->
+62
View File
@@ -20,6 +20,8 @@ const props = withDefaults(defineProps<Props>(), {
onFullscreenChange: undefined,
onSettingsConfirm: undefined,
onTimeScaleChange: undefined,
onExpandAll: undefined,
onCollapseAll: undefined,
})
const emit = defineEmits<{
@@ -32,6 +34,8 @@ const emit = defineEmits<{
'theme-change': [isDark: boolean]
'fullscreen-change': [isFullscreen: boolean]
'time-scale-change': [scale: TimelineScale]
'expand-all': []
'collapse-all': []
}>()
// LocalStorage keys
@@ -56,6 +60,8 @@ interface Props {
onThemeChange?: (isDark: boolean) => void
onFullscreenChange?: (isFullscreen: boolean) => void
onTimeScaleChange?: (scale: TimelineScale) => void
onExpandAll?: () => void
onCollapseAll?: () => void
// 外部确认接口
onSettingsConfirm?: (
type: 'theme' | 'language',
@@ -140,6 +146,23 @@ const handleExportPdf = () => {
}
}
// 展开/折叠处理函数
const handleExpandAll = () => {
if (props.onExpandAll && typeof props.onExpandAll === 'function') {
props.onExpandAll()
} else {
emit('expand-all')
}
}
const handleCollapseAll = () => {
if (props.onCollapseAll && typeof props.onCollapseAll === 'function') {
props.onCollapseAll()
} else {
emit('collapse-all')
}
}
// 语言下拉菜单控制
const toggleLanguageDropdown = () => {
showLanguageDropdown.value = !showLanguageDropdown.value
@@ -461,6 +484,45 @@ onUnmounted(() => {
</button>
</div>
<!-- 展开/折叠按钮组 -->
<div
v-if="config.showExpandCollapse !== false"
class="btn-group expand-collapse-btn-group"
>
<button
class="btn-group-item"
:title="t('expandAll')"
@click="handleExpandAll"
>
<svg
class="btn-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
{{ t('expandAll') }}
</button>
<button
class="btn-group-item"
:title="t('collapseAll')"
@click="handleCollapseAll"
>
<svg
class="btn-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
{{ t('collapseAll') }}
</button>
</div>
<!-- 导出按钮组 -->
<div
v-if="config.showExportCsv !== false || config.showExportPdf !== false"