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

调试

Browse Source
This commit is contained in:
qiuchengw
2025-09-25 12:52:48 +08:00
parent 139b76423f
commit a9596a38b4
2 changed files with 62 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/App.vue
+61 -26
View File
@@ -57,9 +57,9 @@ const availableColumns = ref<TaskListColumnConfig[]>([
// TaskList宽度配置 // TaskList宽度配置
const taskListWidth = ref({ const taskListWidth = ref({
defaultWidth: 400, // 默认宽度400px（比默认320px更宽） defaultWidth: 400, // 默认宽度400px（比默认320px更宽）
minWidth: 300, // 最小宽度300px（比默认280px略大） minWidth: 300, // 最小宽度300px（比默认280px略大）
maxWidth: 1200, // 最大宽度1200px（比默认1160px略大） maxWidth: 1200, // 最大宽度1200px（比默认1160px略大）
}) })
const taskListConfig = computed<TaskListConfig>(() => ({ const taskListConfig = computed<TaskListConfig>(() => ({
@@ -86,7 +86,7 @@ const toggleColumn = (columnKey: string, event: Event) => {
if (column) { if (column) {
column.visible = visible column.visible = visible
} }
}// 工作时间配置示例 } // 工作时间配置示例
const workingHoursConfig = { const workingHoursConfig = {
morning: { start: 8, end: 11 }, // 上午8:00-11:59为工作时间 morning: { start: 8, end: 11 }, // 上午8:00-11:59为工作时间
afternoon: { start: 13, end: 17 }, // 下午13:00-17:00为工作时间 afternoon: { start: 13, end: 17 }, // 下午13:00-17:00为工作时间
@@ -172,14 +172,14 @@ const handleMilestoneDelete = async (milestoneId: number) => {
window.dispatchEvent( window.dispatchEvent(
new CustomEvent('milestone-deleted', { new CustomEvent('milestone-deleted', {
detail: { milestoneId }, detail: { milestoneId },
}), })
) )
// 触发强制更新事件，确保Timeline重新渲染 // 触发强制更新事件，确保Timeline重新渲染
window.dispatchEvent( window.dispatchEvent(
new CustomEvent('milestone-data-changed', { new CustomEvent('milestone-data-changed', {
detail: { milestones: milestones.value }, detail: { milestones: milestones.value },
}), })
) )
} }
@@ -273,7 +273,7 @@ const handleTaskUpdate = (updatedTask: Task) => {
showMessage( showMessage(
formatTranslation('newParentTaskNotFound', { parentId: taskToAdd.parentId }), formatTranslation('newParentTaskNotFound', { parentId: taskToAdd.parentId }),
'warning', 'warning',
{ closable: true }, { closable: true }
) )
tasks.value.push(taskToAdd) tasks.value.push(taskToAdd)
} }
@@ -321,7 +321,7 @@ const handleTaskAdd = (newTask: Task) => {
const maxId = Math.max( const maxId = Math.max(
...tasks.value.map(t => t.id || 0), ...tasks.value.map(t => t.id || 0),
...milestones.value.map(m => m.id || 0), ...milestones.value.map(m => m.id || 0),
0, 0
) )
newTask.id = maxId + 1 newTask.id = maxId + 1
} }
@@ -416,7 +416,7 @@ const handleStoryDeleteWithChildren = (storyToDelete: Task) => {
'success', 'success',
{ {
closable: false, closable: false,
}, }
) )
return true return true
} }
@@ -478,7 +478,7 @@ const handleStoryDeleteOnly = (storyToDelete: Task) => {
'success', 'success',
{ {
closable: false, closable: false,
}, }
) )
return true return true
} }
@@ -552,7 +552,7 @@ function handleTaskbarDragOrResizeEnd(newTask) {
`开始: ${oldTask.startDate} → ${newTask.startDate}\n` + `开始: ${oldTask.startDate} → ${newTask.startDate}\n` +
`结束: ${oldTask.endDate} → ${newTask.endDate}`, `结束: ${oldTask.endDate} → ${newTask.endDate}`,
'info', 'info',
{ closable: true }, { closable: true }
) )
} }
function handleMilestoneDragEnd(newMilestone) { function handleMilestoneDragEnd(newMilestone) {
@@ -562,7 +562,7 @@ function handleMilestoneDragEnd(newMilestone) {
`里程碑【${newMilestone.name}】\n` + `里程碑【${newMilestone.name}】\n` +
`开始: ${oldMilestone.endDate} → ${newMilestone.startDate}`, `开始: ${oldMilestone.endDate} → ${newMilestone.startDate}`,
'info', 'info',
{ closable: true }, { closable: true }
) )
} }
@@ -629,7 +629,7 @@ function onTimerStarted(task: Task) {
showMessage( showMessage(
`Demo 任务【${task.name}】\n开始计时：${new Date(task.timerStartTime).toLocaleString()}\n计时说明：${task.timerStartDesc ? task.timerStartDesc : ''}`, `Demo 任务【${task.name}】\n开始计时：${new Date(task.timerStartTime).toLocaleString()}\n计时说明：${task.timerStartDesc ? task.timerStartDesc : ''}`,
'info', 'info',
{ closable: true }, { closable: true }
) )
} }
function onTimerStopped(task: Task) { function onTimerStopped(task: Task) {
@@ -643,6 +643,10 @@ function onTimerStopped(task: Task) {
} }
showMessage(msg, 'info', { closable: true }) showMessage(msg, 'info', { closable: true })
} }
function taskDebug(item: any) {
console.log('Task Debug:', item)
}
</script> </script>
<template> <template>
@@ -679,17 +683,33 @@ function onTimerStopped(task: Task) {
<VersionHistoryDrawer :visible="showVersionDrawer" @close="showVersionDrawer = false" /> <VersionHistoryDrawer :visible="showVersionDrawer" @close="showVersionDrawer = false" />
<!-- TaskList配置面板 - 可折叠 --> <!-- TaskList配置面板 - 可折叠 -->
<div class="config-panel" :class="{ 'collapsed': isConfigPanelCollapsed }"> <div class="config-panel" :class="{ collapsed: isConfigPanelCollapsed }">
<div class="config-header" @click="toggleConfigPanel"> <div class="config-header" @click="toggleConfigPanel">
<h3 class="config-title"> <h3 class="config-title">
<svg class="config-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor"/> class="config-icon"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor" />
</svg> </svg>
TaskList 配置 TaskList 配置
</h3> </h3>
<button class="collapse-button" :class="{ 'collapsed': isConfigPanelCollapsed }"> <button class="collapse-button" :class="{ collapsed: isConfigPanelCollapsed }">
<svg class="collapse-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> class="collapse-icon"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 10l5 5 5-5"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg> </svg>
</button> </button>
</div> </div>
@@ -700,7 +720,12 @@ function onTimerStopped(task: Task) {
<!-- 宽度配置区域 --> <!-- 宽度配置区域 -->
<div class="config-section"> <div class="config-section">
<h4 class="section-title"> <h4 class="section-title">
<svg class="section-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
class="section-icon"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect <rect
x="3" x="3"
y="6" y="6"
@@ -710,7 +735,12 @@ function onTimerStopped(task: Task) {
stroke-width="2" stroke-width="2"
fill="none" fill="none"
/> />
<path d="M8 12h8M8 9l-2 3 2 3M16 9l2 3-2 3" stroke="currentColor" stroke-width="1.5" fill="none"/> <path
d="M8 12h8M8 9l-2 3 2 3M16 9l2 3-2 3"
stroke="currentColor"
stroke-width="1.5"
fill="none"
/>
</svg> </svg>
宽度设置 宽度设置
</h4> </h4>
@@ -757,8 +787,13 @@ function onTimerStopped(task: Task) {
<!-- 列配置区域 --> <!-- 列配置区域 -->
<div class="config-section"> <div class="config-section">
<h4 class="section-title"> <h4 class="section-title">
<svg class="section-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor"/> class="section-icon"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor" />
</svg> </svg>
列显示 列显示
</h4> </h4>
@@ -814,8 +849,8 @@ function onTimerStopped(task: Task) {
@task-added="e => showMessage(`Demo 任务[${e.task.name}] 已创建`, 'info')" @task-added="e => showMessage(`Demo 任务[${e.task.name}] 已创建`, 'info')"
@task-updated="e => showMessage(`Demo 任务[${e.task.name}] 已更新`, 'info')" @task-updated="e => showMessage(`Demo 任务[${e.task.name}] 已更新`, 'info')"
> >
<template #custom-task-content="{ task, type }"> <template #custom-task-content="item">
<HtmlContent :task="task" :type="type" /> <HtmlContent :item="taskDebug(item)" :task="item.task" :type="item.type" />
</template> </template>
</GanttChart> </GanttChart>
</div> </div>
@@ -1038,7 +1073,7 @@ function onTimerStopped(task: Task) {
border-color: var(--gantt-primary-color, #409eff); border-color: var(--gantt-primary-color, #409eff);
} }
.column-control input[type="checkbox"] { .column-control input[type='checkbox'] {
width: 16px; width: 16px;
height: 16px; height: 16px;
cursor: pointer; cursor: pointer;
demo/HtmlContent.vue
+1 -1
View File
@@ -3,7 +3,7 @@ import type { Task } from '../src/models/Task'
interface Props { interface Props {
task: Task, task: Task,
type: 'task-row' | 'task-bar' type: string, // 'task-row' | 'task-bar'
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
}) })