alighasami/jordium-gantt-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.4.2-patch.2 - bugfix: tasklist列宽度设置问题

Browse Source
This commit is contained in:
LINING-PC\lining
2025-11-11 12:17:05 +08:00
parent cacaece319
commit 1b17d50bcd
10 changed files with 140 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [1.4.2-patch2] - 2025-11-11
### Fixed
- 缺陷修复：TaskList配置列宽无效的问题修复
- Defect fix: Fixed the issue of invalid column width configuration in TaskList
## [1.4.2-patch1] - 2025-11-03
### Fixed

4
demo/App.vue
View File

@@ -48,13 +48,13 @@ const toolbarConfig = {
// TaskList列配置
const availableColumns = ref<TaskListColumnConfig[]>([
{ key: 'predecessor', label: '前置任务', visible: true },
{ key: 'assignee', label: '负责人', visible: true },
{ key: 'assignee', label: '负责人', visible: true, width: 250 },
{ key: 'startDate', label: '开始日期', visible: true },
{ key: 'endDate', label: '结束日期', visible: true },
{ key: 'estimatedHours', label: '预估工时', visible: true },
{ key: 'actualHours', label: '实际工时', visible: true },
{ key: 'progress', label: '进度', visible: true },
{ key: 'custom', label: '自定义列', visible: true, width: 120 }, // 添加默认宽度120px
{ key: 'custom', label: '自定义列', visible: true, width: '30%' }, // 添加默认宽度120px
])
// TaskList宽度配置

10
demo/version-history.json
View File

@@ -276,5 +276,15 @@
"Defect fix: Fixed the issue of infinite loop calls when updating child tasks after updating the parent task",
"<span style=\"font-weight: bold; color: #f00;\">Special thanks to Ky1in666@github for their valuable use and feedback</span>"
]
},
{
"version": "1.4.2-patch2",
"date": "2025-11-11",
"notes": [
"缺陷修复：TaskList配置列宽无效的问题修复",
"<span style=\"font-weight: bold; color: #f00;\">特别感谢 @SHENGLONG749的使用及反馈的宝贵意见</span>",
"Defect fix: Fixed the issue of invalid column width configuration in TaskList",
"<span style=\"font-weight: bold; color: #f00;\">Special thanks to @SHENGLONG749 for their valuable use and feedback</span>"
]
}
]

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "jordium-gantt-vue3",
"version": "1.4.2-pacth.1",
"version": "1.4.2-patch.2",
"type": "module",
"main": "dist/jordium-gantt-vue3.cjs.js",
"module": "dist/jordium-gantt-vue3.es.js",

43
src/components/GanttChart.vue
View File

@@ -299,22 +299,45 @@ function onMouseDown(e: MouseEvent) {
taskListBodyProposedWidth.value = window.innerWidth * 0.8 - 6 // 减去splitter宽度
// 获取左侧面板的最小宽度
taskListBodyWidthLimit.value = Math.min(taskListBodyProposedWidth.value, taskListBodyWidth.value)
taskListBodyWidthLimit.value = Math.min(taskListBodyProposedWidth.value,
taskListBodyWidthLimit.value)
// 广播拖拽开始事件，通知其他组件暂停悬停效果
window.dispatchEvent(new CustomEvent('splitter-drag-start'))
// 在拖拽期间禁用页面选择
// 在拖拽期间禁用页面选择和所有指针事件
document.body.style.userSelect = 'none'
document.body.style.webkitUserSelect = 'none'
document.body.style.cursor = 'col-resize'
document.body.style.pointerEvents = 'none' // 禁止所有指针事件
// 全局事件拦截器：在捕获阶段拦截所有事件（除了 mousemove 和 mouseup）
const blockAllEvents = (ev: Event) => {
if (ev.type !== 'mousemove' && ev.type !== 'mouseup') {
ev.preventDefault()
ev.stopPropagation()
ev.stopImmediatePropagation()
}
}
// 在捕获阶段添加事件监听，确保最先拦截
document.addEventListener('mousedown', blockAllEvents, { capture: true })
document.addEventListener('click', blockAllEvents, { capture: true })
document.addEventListener('dblclick', blockAllEvents, { capture: true })
document.addEventListener('mouseover', blockAllEvents, { capture: true })
document.addEventListener('mouseout', blockAllEvents, { capture: true })
document.addEventListener('mouseenter', blockAllEvents, { capture: true })
document.addEventListener('mouseleave', blockAllEvents, { capture: true })
document.addEventListener('wheel', blockAllEvents, { capture: true, passive: false })
document.addEventListener('contextmenu', blockAllEvents, { capture: true })
function onMouseMove(ev: MouseEvent) {
if (!dragging.value) return
// 阻止默认行为，防止滚动等
// 强制阻止所有默认行为和事件传播
ev.preventDefault()
ev.stopPropagation()
ev.stopImmediatePropagation()
const delta = ev.clientX - startX
const proposedWidth = startWidth + delta
@@ -327,13 +350,25 @@ function onMouseDown(e: MouseEvent) {
function onMouseUp() {
dragging.value = false
// 移除全局事件拦截器
document.removeEventListener('mousedown', blockAllEvents, { capture: true })
document.removeEventListener('click', blockAllEvents, { capture: true })
document.removeEventListener('dblclick', blockAllEvents, { capture: true })
document.removeEventListener('mouseover', blockAllEvents, { capture: true })
document.removeEventListener('mouseout', blockAllEvents, { capture: true })
document.removeEventListener('mouseenter', blockAllEvents, { capture: true })
document.removeEventListener('mouseleave', blockAllEvents, { capture: true })
document.removeEventListener('wheel', blockAllEvents, { capture: true })
document.removeEventListener('contextmenu', blockAllEvents, { capture: true })
// 广播拖拽结束事件，通知其他组件恢复悬停效果
window.dispatchEvent(new CustomEvent('splitter-drag-end'))
// 恢复页面选择和光标
// 恢复页面选择、光标和指针事件
document.body.style.userSelect = ''
document.body.style.webkitUserSelect = ''
document.body.style.cursor = ''
document.body.style.pointerEvents = ''
taskListBodyWidth.value = getTaskListMaxWidth() // TaskList默认宽度
ganttPanelLeftMinWidth.value = getTaskListMinWidth() // 左侧面板最小宽度

9
src/components/TaskBar.vue
View File

@@ -1572,7 +1572,6 @@ watch(
const safeNewContainerWidth = newContainerWidth || 0
const safeOldScrollLeft = oldScrollLeft || 0
const safeOldContainerWidth = oldContainerWidth || 0
// 如果容器宽度发生变化（包括Splitter拖拽、TaskList展开收起、窗口resize等）
if (Math.abs(safeNewContainerWidth - safeOldContainerWidth) > 1 && safeOldContainerWidth > 0) {
hasManualResize.value = true
@@ -1583,6 +1582,13 @@ watch(
// computed会自动重新计算
})
// 🔥 容器宽度变化时，标记初始化完成（修复 splitter 拖拽后半圆不显示的问题）
if (isInitializing.value) {
setTimeout(() => {
isInitializing.value = false
}, 300)
}
// 延长禁用动画的时间，确保各种resize操作稳定
setTimeout(() => {
hasManualResize.value = false
@@ -1622,6 +1628,7 @@ watch(
}, 200)
}
},
{ immediate: true },
)
// 监听外部hideBubbles属性变化，确保Timeline的容器变化能及时反应

38
src/components/TaskList.vue
View File

@@ -33,6 +33,37 @@ const hasRowSlot = computed(() => Boolean(slots['custom-task-content']))
// 多语言支持
const { t } = useI18n()
// TaskList 容器引用
const taskListRef = ref<HTMLElement | null>(null)
// 获取列宽度样式（百分比转像素）
const getColumnWidthStyle = (column: { width?: number | string }) => {
if (!column.width) return {}
let widthPx: string
// 如果是百分比，转换为像素
if (typeof column.width === 'string' && column.width.includes('%')) {
const containerWidth = taskListRef.value?.offsetWidth || 0
if (containerWidth > 0) {
const percentage = parseFloat(column.width) / 100
const pixels = Math.floor(containerWidth * percentage)
widthPx = `${pixels}px`
} else {
return {} // 容器宽度未知时返回空
}
} else {
// 像素值
widthPx = `${column.width}px`
}
return {
flex: `0 0 ${widthPx}`,
minWidth: widthPx,
maxWidth: widthPx,
}
}
// 计算可见的列配置
const visibleColumns = computed(() => {
const columns = props.taskListConfig?.columns || DEFAULT_TASK_LIST_COLUMNS
@@ -385,7 +416,7 @@ onUnmounted(() => {
</script>
<template>
<div class="task-list">
<div ref="taskListRef" class="task-list">
<div class="task-list-header">
<!-- 任务名称列，始终显示 -->
<div class="col col-name">
@@ -397,13 +428,13 @@ onUnmounted(() => {
:key="column.key"
class="col"
:class="column.cssClass || `col-${column.key}`"
:style="column.width ? { width: column.width + 'px' } : undefined"
:style="getColumnWidthStyle(column)"
>
{{ (t as any)[column.key] || column.label }}
</div>
</div>
<div class="task-list-body" @scroll="handleTaskListScroll">
<TaskRow
<TaskRow
v-for="task in localTasks"
:key="task.id"
:task="task"
@@ -412,6 +443,7 @@ onUnmounted(() => {
:hovered-task-id="hoveredTaskId"
:on-hover="handleTaskRowHover"
:columns="visibleColumns"
:get-column-width-style="getColumnWidthStyle"
@toggle="toggleCollapse"
@dblclick="handleTaskRowDoubleClick"
@contextmenu="handleTaskRowContextMenu"

3
src/components/TaskRow.vue
View File

@@ -35,6 +35,7 @@ interface Props {
hoveredTaskId?: number | null
onHover?: (taskId: number | null) => void
columns: TaskListColumnConfig[]
getColumnWidthStyle?: (column: { width?: number | string }) => object
}
const props = defineProps<Props>()
const emit = defineEmits([
@@ -410,6 +411,7 @@ onUnmounted(() => {
:key="column.key"
class="col"
:class="column.cssClass || `col-${column.key}`"
:style="getColumnWidthStyle ? getColumnWidthStyle(column) : {}"
>
<!-- 里程碑分组显示空列 -->
<template v-if="isMilestoneGroup">
@@ -476,6 +478,7 @@ onUnmounted(() => {
:hovered-task-id="props.hoveredTaskId"
:on-hover="props.onHover"
:columns="props.columns"
:get-column-width-style="props.getColumnWidthStyle"
@toggle="emit('toggle', $event)"
@dblclick="emit('dblclick', $event)"
@start-timer="emit('start-timer', $event)"

38
src/components/Timeline.vue
View File

@@ -631,6 +631,7 @@ const timelineContainerWidth = ref(0)
// 半圆气泡控制状态
const hideBubbles = ref(true) // 初始时隐藏半圆，等待初始滚动完成
const isInitialScrolling = ref(true) // 跟踪初始滚动状态
let hideBubblesTimeout: number | null = null // 半圆显示恢复定时器
// 虚拟滚动相关状态
const HOUR_WIDTH = 40 // 每小时40px
@@ -945,6 +946,15 @@ const handleSplitterDragStart = () => {
const handleSplitterDragEnd = () => {
isSplitterDragging.value = false
// 拖拽结束后，手动触发一次容器宽度更新
const timelineContainer = document.querySelector('.timeline') as HTMLElement
if (timelineContainer) {
const newWidth = timelineContainer.clientWidth
if (Math.abs(newWidth - timelineContainerWidth.value) > 1) {
timelineContainerWidth.value = newWidth
}
}
// Splitter拖拽结束后，强制重新计算半圆显示状态
// 因为Timeline容器宽度可能发生了变化
hideBubbles.value = true
@@ -964,9 +974,15 @@ const handleTimelineContainerResized = () => {
taskBarPositions.value = {}
taskBarRenderKey.value++
// 清除之前的定时器，避免多次触发冲突
if (hideBubblesTimeout) {
clearTimeout(hideBubblesTimeout)
}
// 延迟恢复显示，确保容器变化完全生效
setTimeout(() => {
hideBubblesTimeout = setTimeout(() => {
hideBubbles.value = false
hideBubblesTimeout = null
// 再次更新SVG尺寸，确保关系线容器大小正确
updateSvgSize()
}, 300)
@@ -2053,9 +2069,15 @@ onMounted(() => {
// 短时间隐藏后重新显示，让TaskBar重新计算边界
hideBubbles.value = true
// 清除之前的定时器，避免多次触发冲突
if (hideBubblesTimeout) {
clearTimeout(hideBubblesTimeout)
}
// 延迟恢复显示，确保宽度变化完全生效
setTimeout(() => {
hideBubblesTimeout = setTimeout(() => {
hideBubbles.value = false
hideBubblesTimeout = null
}, 300) // 增加到300ms，确保resize完全结束
}
}
@@ -2546,12 +2568,19 @@ watch(
)
// 监听滚动变化，重新计算里程碑位置
watch([timelineScrollLeft, timelineContainerWidth], computeAllMilestonesPositions)
watch([timelineScrollLeft, timelineContainerWidth], () => {
// 拖拽 splitter 时跳过计算
if (isSplitterDragging.value) return
computeAllMilestonesPositions()
})
// 监听容器宽度变化，重新计算时间线范围以填充容器
watch(
timelineContainerWidth,
(newWidth, oldWidth) => {
// ⚠️ 拖拽 splitter 时跳过重新计算，避免频繁生成 timelineData
if (isSplitterDragging.value) return
// 只在容器宽度从 0 变为有效值，或容器宽度发生显著变化时重新计算
if (!oldWidth || oldWidth === 0 || Math.abs(newWidth - oldWidth) > 50) {
if (newWidth > 0) {
@@ -2593,6 +2622,9 @@ watch(
// 监听timelineData或容器宽度变化，强制TaskBar重新渲染以更新关系线位置
watch([timelineData, timelineContainerWidth], () => {
// ⚠️ 拖拽 splitter 时跳过 TaskBar 重新渲染，避免频繁更新
if (isSplitterDragging.value) return
// 清空位置信息
taskBarPositions.value = {}
// 更新渲染key强制TaskBar重新渲染

2
src/models/configs/TaskListConfig.ts
View File

@@ -15,7 +15,7 @@ export interface TaskListColumnConfig {
key: string // 用于国际化的key，也可以作为识别符
label?: string // 显示标签
cssClass?: string // CSS类名
width?: number // 可选的列宽度
width?: number | string // 列宽度，支持像素（120）或百分比（'15%'）
visible?: boolean // 是否显示，默认true
}