| | |
| | | * 1. 按订单分组展示生产任务,订单为 project 行,任务为子行 |
| | | * 2. 支持只读预览和拖拽编辑两种模式 |
| | | * 3. 拖拽后触发 taskUpdate 事件,通知父组件批量保存 |
| | | * 4. 时间刻度:周 → 日 → 8 小时(1 工作日 = 8 小时) |
| | | * 4. 时间刻度:周 → 日 → 小时 |
| | | */ |
| | | defineOptions({ name: 'GanttChart', inheritAttrs: false }); |
| | | |
| | |
| | | |
| | | gantt.config.readonly = props.readonly; |
| | | gantt.config.date_format = '%Y-%m-%d %H:%i:%s'; |
| | | gantt.config.duration_unit = 'hour'; // 持续时间单位为小时,配合 duration_step 实现工作日单位 |
| | | gantt.config.duration_step = 8; // 1 工作日 = 8 小时 |
| | | gantt.config.duration_unit = 'hour'; // 持续时间单位为小时 |
| | | gantt.config.duration_step = 1; // duration 字段即为实际小时数 |
| | | gantt.config.row_height = 36; |
| | | gantt.config.bar_height = 24; |
| | | gantt.config.fit_tasks = true; |
| | |
| | | gantt.config.buttons_left = ['gantt_save_btn']; |
| | | gantt.config.buttons_right = ['gantt_cancel_btn']; |
| | | |
| | | // 时间刻度:周 > 日 > 8 小时 |
| | | // 时间刻度:周 > 日 > 小时 |
| | | const weekScaleTemplate = (date: Date) => { |
| | | const dateToStr = gantt.date.date_to_str('%M %d'); |
| | | const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day'); |
| | |
| | | gantt.config.scales = [ |
| | | { unit: 'week', step: 1, format: weekScaleTemplate }, |
| | | { unit: 'day', step: 1, format: dayTemplate, css: daysStyle }, |
| | | { unit: 'hour', step: 8, format: '%H:%i' }, |
| | | { unit: 'hour', step: 1, format: '%H:%i' }, |
| | | ]; |
| | | gantt.config.scale_height = 50; |
| | | gantt.config.show_task_cells = true; |
| | |
| | | [BarcodeBizTypeEnum.WORKORDER]: 'project', |
| | | [BarcodeBizTypeEnum.TASK]: 'task', |
| | | }; |
| | | gantt.parse({ |
| | | data: tasks.map((item: any) => ({ |
| | | const data = tasks |
| | | .map((item: any) => ({ |
| | | ...item, |
| | | type: typeMap[item.type] || item.type, |
| | | start_date: item.startDate ? new Date(item.startDate) : undefined, |
| | | end_date: item.endDate ? new Date(item.endDate) : undefined, |
| | | })), |
| | | links: [], |
| | | }); |
| | | })) |
| | | // 过滤缺失/非法日期的任务,避免 dhtmlx-gantt 计算时间轴时抛 valueOf 异常 |
| | | .filter( |
| | | (task: any) => |
| | | task.start_date instanceof Date && |
| | | task.end_date instanceof Date && |
| | | !Number.isNaN(task.start_date.getTime()) && |
| | | !Number.isNaN(task.end_date.getTime()), |
| | | ); |
| | | if (data.length === 0) { |
| | | return; |
| | | } |
| | | try { |
| | | gantt.parse({ data, links: [] }); |
| | | } catch (error) { |
| | | console.error('甘特图渲染失败:', error); |
| | | } |
| | | } |
| | | |
| | | watch( |