明白了,我们需要修改删除过程的逻辑。当只剩最后一个过程时,点击删除按钮应该删除整个任务。让我们修改 TaskManager.js 和 TaskTable.js:
const TaskManager = ({ templates, defaultTemplates }) => {
// ... 其他代码保持不变 ...
const handleProcessAction = (taskId, processId, action) => {
switch (action) {
// ... 其他 case 保持不变 ...
case 'deleteProcess':
const task = tasks.find(t => t.id === taskId);
if (task && task.processes.length === 1) {
// 如果是最后一个过程,删除整个任务
setTasks(tasks.filter(t => t.id !== taskId));
} else {
// 否则只删除该过程
setTasks(tasks.map(task => {
if (task.id === taskId) {
return {
...task,
processes: task.processes.filter(p => p.id !== processId)
};
}
return task;
}));
}
break;
default:
break;
}
};
// ... 其他代码保持不变 ...
};
然后修改 TaskTable.js,移除对过程数量的检查:
const TaskTable = ({ tasks, onProcessAction, onDeleteTask, onSaveTemplate, taskTypes }) => {
// ... 其他代码保持不变 ...
return (
<div className="task-table-container">
<table className="task-table">
{/* ... 其他代码保持不变 ... */}
<tbody>
{tasks.map(task => (
task.processes.map((process, processIndex) => (
<tr key={`${task.id}-${processIndex}`}>
{/* ... 其他单元格保持不变 ... */}
<td className="action-buttons">
<button onClick={() => onProcessAction(task.id, process.id, 'execute')}>
执行
</button>
<button onClick={() => onProcessAction(task.id, process.id, 'viewResult')}>
查看结果
</button>
<button onClick={() => onProcessAction(task.id, process.id, 'deleteFile')}>
删除文件
</button>
{process.status !== 'completed' && (
<button
className="complete-btn"
onClick={() => onProcessAction(task.id, process.id, 'complete')}
>
完成
</button>
)}
{/* 移除 task.processes.length > 1 的条件检查 */}
<button
className="delete-btn"
onClick={() => onProcessAction(task.id, process.id, 'deleteProcess')}
>
删除过程
</button>
</td>
{/* ... 其他代码保持不变 ... */}
</tr>
))
))}
</tbody>
</table>
</div>
);
};
这样修改后:
- "删除过程"按钮会一直显示,不管任务有多少个过程
- 当任务只剩一个过程时,点击"删除过程"按钮会删除整个任务
- 当任务有多个过程时,点击"删除过程"按钮只会删除当前过程
需要我对某部分做进一步的调整或解释吗?