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

beta 1.0.0 - 正式外测版本

Browse Source
This commit is contained in:
LINING-PC\lining
2025-06-29 20:21:53 +08:00
parent 5a9a55cd1f
commit c10cb7fef5
13 changed files with 1297 additions and 1220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DatePicker.vue
+1 -1
View File
@@ -97,7 +97,7 @@ watch(
singleValue.value = (newValue as string) || ''
}
},
{ immediate: true }
{ immediate: true },
)
// 处理单日期输入变化（预留，当前版本不使用）
src/components/GanttChart.vue
+53 -38
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onUnmounted, onMounted, computed, watch, nextTick } from 'vue'
import { ref, onUnmounted, onMounted, computed, watch, nextTick, defineEmits } from 'vue'
import TaskList from './TaskList.vue'
import Timeline from './Timeline.vue'
import GanttToolbar from './GanttToolbar.vue'
@@ -8,6 +8,36 @@ import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
import type { Task } from '../models/classes/Task'
import type { ToolbarConfig } from '../models/configs/ToolbarConfig'
import { useMessage } from '../composables/useMessage'
const props = withDefaults(defineProps<Props>(), {
tasks: () => [],
milestones: () => [],
onTaskDoubleClick: undefined,
editComponent: undefined,
useDefaultDrawer: true,
onTaskDelete: undefined,
onMilestoneSave: undefined,
onMilestoneDelete: undefined,
onTaskUpdate: undefined,
onTaskAdd: undefined,
onMilestoneIconChange: undefined,
toolbarConfig: () => ({}),
showToolbar: true,
onAddTask: undefined,
onAddMilestone: undefined,
onTodayLocate: undefined,
onExportCsv: undefined,
onExportPdf: undefined,
onLanguageChange: undefined,
onThemeChange: undefined,
onFullscreenChange: undefined,
localeMessages: undefined,
})
const emit = defineEmits(['taskbar-drag-end', 'taskbar-resize-end', 'milestone-drag-end'])
const { showMessage } = useMessage()
interface Props {
// 任务数据
@@ -55,31 +85,6 @@ interface Props {
localeMessages?: Partial<import('../composables/useI18n').Messages['zh-CN']>
}
const props = withDefaults(defineProps<Props>(), {
tasks: () => [],
milestones: () => [],
onTaskDoubleClick: undefined,
editComponent: undefined,
useDefaultDrawer: true,
onTaskDelete: undefined,
onMilestoneSave: undefined,
onMilestoneDelete: undefined,
onTaskUpdate: undefined,
onTaskAdd: undefined,
onMilestoneIconChange: undefined,
toolbarConfig: () => ({}),
showToolbar: true,
onAddTask: undefined,
onAddMilestone: undefined,
onTodayLocate: undefined,
onExportCsv: undefined,
onExportPdf: undefined,
onLanguageChange: undefined,
onThemeChange: undefined,
onFullscreenChange: undefined,
localeMessages: undefined,
})
const leftPanelWidth = ref(320)
// Timeline组件的引用
@@ -229,10 +234,29 @@ const handleToggleTaskList = (event: CustomEvent) => {
isTaskListVisible.value = event.detail
}
// --- 事件链路：监听 Timeline 传递上来的拖拽/拉伸事件，并通过 props 回调暴露 ---
function handleTaskBarDragEnd(event: CustomEvent) {
emit('taskbar-drag-end', event.detail)
}
function handleTaskBarResizeEnd(event: CustomEvent) {
emit('taskbar-resize-end', event.detail)
}
function handleMilestoneDragEnd(event: CustomEvent) {
emit('milestone-drag-end', event.detail)
}
onMounted(() => {
window.addEventListener('taskbar-drag-end', handleTaskBarDragEnd as EventListener)
window.addEventListener('taskbar-resize-end', handleTaskBarResizeEnd as EventListener)
window.addEventListener('milestone-drag-end', handleMilestoneDragEnd as EventListener)
})
onUnmounted(() => {
window.removeEventListener('taskbar-drag-end', handleTaskBarDragEnd as EventListener)
window.removeEventListener('taskbar-resize-end', handleTaskBarResizeEnd as EventListener)
window.removeEventListener('milestone-drag-end', handleMilestoneDragEnd as EventListener)
})
// 处理TaskList的任务折叠状态变化
const handleTaskCollapseChange = (task: Task) => {
console.log('任务折叠状态变化：', task)
// 递归查找并更新原始数据中的任务折叠状态
const updateTaskCollapsedState = (
tasks: Task[],
@@ -242,7 +266,6 @@ const handleTaskCollapseChange = (task: Task) => {
for (const t of tasks) {
if (t.id === targetId) {
t.collapsed = collapsed
console.log(`已更新任务 ${t.name} 的折叠状态为: ${collapsed}`)
return true
}
if (t.children && t.children.length > 0) {
@@ -385,7 +408,6 @@ const tasksForTaskList = computed(() => {
result.push(...props.tasks)
}
console.log('TaskList数据（保持层级结构）：', result)
return result
})
@@ -489,7 +511,6 @@ const tasksForTimeline = computed(() => {
startDate,
endDate,
}
console.log(`父任务 ${task.name} 时间范围已更新: ${startDate} - ${endDate}`)
}
return updatedTask
@@ -528,11 +549,9 @@ const tasksForTimeline = computed(() => {
// 因为tasksForTaskList返回的是props.tasks的副本，我们需要确保Timeline能看到最新的折叠状态
// 通过触发器强制重新计算来实现状态同步
const flattenedTasks = smartFlattenTasks(tasksWithUpdatedDates)
console.log('Timeline智能扁平化任务数据（考虑折叠状态）：', flattenedTasks)
result.push(...flattenedTasks)
}
console.log('Timeline最终数据：', result)
return result
})
@@ -645,6 +664,7 @@ const defaultExportCsv = () => {
URL.revokeObjectURL(url)
} catch (error) {
console.error('CSV导出失败:', error)
showMessage('CSV导出失败', 'error', { closable: false })
}
}
@@ -877,8 +897,6 @@ const handleMilestoneSave = (milestone: Task) => {
// 如果没有外部处理器，执行默认的更新逻辑
// 这里可以添加默认的里程碑数据更新逻辑，比如更新本地数据或者触发重新渲染
console.log('Milestone saved:', milestone)
}
// 处理任务更新事件
@@ -907,7 +925,6 @@ const handleMilestoneIconChangeEvent = (event: CustomEvent) => {
if (props.onMilestoneIconChange && typeof props.onMilestoneIconChange === 'function') {
props.onMilestoneIconChange(milestoneId, icon)
}
console.log('Milestone icon changed:', { milestoneId, icon })
}
// 处理里程碑删除事件
@@ -980,8 +997,6 @@ const defaultAddMilestone = () => {
// 默认今日定位功能
const defaultTodayLocate = () => {
console.log('执行默认今日定位逻辑defaultTodayLocate')
// 优先使用Timeline组件的scrollToToday方法（已优化的定位逻辑）
if (timelineRef.value && typeof timelineRef.value.scrollToToday === 'function') {
timelineRef.value.scrollToToday()
src/components/MilestonePoint.vue
+2 -7
View File
@@ -17,6 +17,7 @@ const props = defineProps<Props>()
const emit = defineEmits<{
'milestone-double-click': [milestone: Milestone]
'update:milestone': [milestone: Milestone] // 新增里程碑更新事件
'drag-end': [milestone: Milestone] // 新增
}>()
// 拖拽相关状态
@@ -89,17 +90,11 @@ const handleMouseUp = () => {
...props.milestone,
...tempMilestoneData.value,
}
console.log('里程碑拖拽完成，提交数据更新：', updatedMilestone)
emit('update:milestone', updatedMilestone)
// 清空临时数据
emit('drag-end', updatedMilestone) // 新增
tempMilestoneData.value = null
}
isDragging.value = false
// 移除全局事件监听器
document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseUp)
}
src/components/TaskBar.vue
+13 -2
View File
@@ -13,7 +13,13 @@ interface Props {
const props = defineProps<Props>()
const emit = defineEmits(['update:task', 'bar-mounted', 'dblclick'])
const emit = defineEmits([
'update:task',
'bar-mounted',
'dblclick',
'drag-end', // 新增
'resize-end', // 新增
])
// 日期工具函数 - 处理时区安全的日期创建和操作
const createLocalDate = (dateString: string | Date | undefined | null): Date | null => {
@@ -255,7 +261,12 @@ const handleMouseUp = () => {
...tempTaskData.value,
}
console.log('TaskBar操作完成，提交数据更新：', updatedTask)
// 判断是拖拽还是拉伸
if (isDragging.value) {
emit('drag-end', updatedTask)
} else if (isResizingLeft.value || isResizingRight.value) {
emit('resize-end', updatedTask)
}
emit('update:task', updatedTask)
// 清空临时数据
src/components/Timeline.vue
+19 -22
View File
@@ -230,8 +230,6 @@ const handleMilestoneDelete = (milestoneId: number) => {
// 处理里程碑拖拽更新事件
const handleMilestoneUpdate = (updatedMilestone: any) => {
console.log('Timeline 接收到里程碑拖拽更新事件：', updatedMilestone)
// 通知父组件里程碑数据已更新
if (props.onMilestoneSave && typeof props.onMilestoneSave === 'function') {
props.onMilestoneSave(updatedMilestone)
@@ -345,15 +343,6 @@ const scrollToTodayCenter = (retry = 0) => {
const scrollContainer = document.querySelector('.timeline') as HTMLElement
const containerWidth = scrollContainer.clientWidth
console.log('[scrollToTodayCenter]', {
retry,
today: todayNormalized,
timelineStart: startNormalized,
daysDiff,
todayPosition,
containerWidth,
containerClass: scrollContainer.className,
})
// 若宽度为0，递归重试，最多10次
if (containerWidth === 0 && retry < 10) {
setTimeout(() => scrollToTodayCenter(retry + 1), 60)
@@ -367,19 +356,8 @@ const scrollToTodayCenter = (retry = 0) => {
} else {
scrollContainer.scrollLeft = Math.max(0, centeredScrollPosition)
}
console.log(
'[scrollToTodayCenter] scrollLeft set:',
Math.max(0, centeredScrollPosition),
'on',
scrollContainer.className,
)
console.log(
'[scrollToTodayCenter] scrollContainer.scrollLeft updated:',
scrollContainer.scrollLeft,
)
}
// 聚焦到任务所在位置
const scrollToTasks = () => {
if (tasks.value.length === 0) {
// 如果没有任务，滚动到今天
@@ -565,6 +543,22 @@ function handleBarMounted(payload: {
updateSvgSize()
}
// 向上传递 TaskBar 拖拽/拉伸事件
const handleTaskBarDragEnd = (updatedTask: Task) => {
// 通过全局事件或 emit/props 回调传递给 GanttChart
window.dispatchEvent(new CustomEvent('taskbar-drag-end', { detail: updatedTask }))
// TODO: 你可以在这里加 emit/props 回调
}
const handleTaskBarResizeEnd = (updatedTask: Task) => {
window.dispatchEvent(new CustomEvent('taskbar-resize-end', { detail: updatedTask }))
// TODO: 你可以在这里加 emit/props 回调
}
// 向上传递 MilestonePoint 拖拽事件
const handleMilestoneDragEnd = (updatedMilestone: any) => {
window.dispatchEvent(new CustomEvent('milestone-drag-end', { detail: updatedMilestone }))
// TODO: 你可以在这里加 emit/props 回调
}
// 计算所有连线
const links = computed(() => {
const result: { from: number; to: number; path: string }[] = []
@@ -987,6 +981,7 @@ const convertTaskToMilestone = (task: Task): Milestone => {
:milestone="convertTaskToMilestone(milestone)"
@milestone-double-click="handleMilestoneDoubleClick"
@update:milestone="handleMilestoneUpdate"
@drag-end="handleMilestoneDragEnd"
/>
</template>
<!-- 普通任务条 - 排除里程碑分组和普通里程碑 -->
@@ -1002,6 +997,8 @@ const convertTaskToMilestone = (task: Task): Milestone => {
@update:task="updateTask"
@bar-mounted="handleBarMounted"
@dblclick="handleTaskBarDoubleClick(task)"
@drag-end="handleTaskBarDragEnd"
@resize-end="handleTaskBarResizeEnd"
/>
</div>
</div>