| | |
| | | <script lang="ts" setup> |
| | | <script lang="ts" setup> |
| | | import { onBeforeUnmount, onMounted, ref, watch } from 'vue'; |
| | | |
| | | import { BarcodeBizTypeEnum } from '../../../../../packages/constants/src'; |
| | |
| | | /** |
| | | * 甘特图组件(基于 dhtmlx-gantt) |
| | | * |
| | | * 1. 按工单分组展示生产任务,工单为 project 行,任务为子行 |
| | | * 1. 按订单分组展示生产任务,订单为 project 行,任务为子行 |
| | | * 2. 支持只读预览和拖拽编辑两种模式 |
| | | * 3. 拖拽后触发 taskUpdate 事件,通知父组件批量保存 |
| | | * 4. 时间刻度:周 → 日 → 8 小时(1 工作日 = 8 小时) |
| | |
| | | gantt.templates.task_text = (_start: any, _end: any, task: any) => { |
| | | const percent = Math.round((task.progress || 0) * 100); |
| | | if (task.type === 'project') { |
| | | return `<b>生产工单:</b> ${task.text} <span>完成比例:${percent}%</span>`; |
| | | return `<b>生产订单:</b> ${task.text} <span>完成比例:${percent}%</span>`; |
| | | } |
| | | return `<b>生产任务:</b> ${task.process || ''} ${task.text} <span>完成比例:${percent}%</span>`; |
| | | }; |
| | |
| | | gantt.templates.tooltip_text = (_start: any, _end: any, task: any) => { |
| | | const percent = Math.round((task.progress || 0) * 100); |
| | | if (task.type === 'project') { |
| | | return `<b>生产工单:</b> ${task.text} <span>完成比例:${percent}%</span>`; |
| | | return `<b>生产订单:</b> ${task.text} <span>完成比例:${percent}%</span>`; |
| | | } |
| | | return `<b>生产任务:</b> ${task.process || ''} ${task.text} <span>完成比例:${percent}%</span>`; |
| | | }; |
| | |
| | | if (!props.readonly) { |
| | | gantt.attachEvent('onAfterTaskUpdate', (id: number | string) => { |
| | | const task = gantt.getTask(id); |
| | | // 只回写 task 节点,避免把工单(project)节点当成任务保存 |
| | | // 只回写 task 节点,避免把订单(project)节点当成任务保存 |
| | | if (task.type !== gantt.config.types.task || !task.originalId) { |
| | | return; |
| | | } |
| | |
| | | color: #f44; |
| | | } |
| | | |
| | | /* 工单(project)行样式 */ |
| | | /* 订单(project)行样式 */ |
| | | .gantt-project-bar .gantt_task_progress { |
| | | background: #7b68ee; |
| | | } |