import { ref, reactive } from 'vue'
import { GanttChart } from '../src/index'
import type { Task } from '../src/models/classes/Task'
import type { TaskListConfig, TaskListColumnConfig } from '../src/models/configs/TaskListConfig'
// 示例任务数据
const tasks = ref([
{
id: 1,
name: '项目启动',
startDate: '2024-01-15',
endDate: '2024-01-20',
progress: 100,
assignee: '张三',
estimatedHours: 40,
actualHours: 35,
predecessor: null,
type: 'task'
},
{
id: 2,
name: '需求分析',
startDate: '2024-01-21',
endDate: '2024-01-30',
progress: 80,
assignee: '李四',
estimatedHours: 80,
actualHours: 75,
predecessor: [1],
type: 'task'
},
{
id: 3,
name: '系统设计',
startDate: '2024-02-01',
endDate: '2024-02-15',
progress: 60,
assignee: '王五',
estimatedHours: 120,
actualHours: 90,
predecessor: [2],
type: 'task'
},
{
id: 4,
name: '开发实现',
startDate: '2024-02-16',
endDate: '2024-03-30',
progress: 30,
assignee: '赵六',
estimatedHours: 200,
actualHours: 80,
predecessor: [3],
type: 'task'
}
] as Task[])
// 可用的列配置
const availableColumns = reactive([
{ key: 'predecessor', label: '前置任务', visible: true },
{ key: 'assignee', label: '负责人', visible: true },
{ 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 }
])
// 任务列表配置
const taskListConfig = reactive({
columns: availableColumns
})
// 切换列显示状态
const toggleColumn = (columnKey: string, visible: boolean) => {
const column = availableColumns.find(col => col.key === columnKey)
if (column) {
column.visible = visible
}
}