10

63 阅读1分钟

明白了,我们需要修改删除过程的逻辑。当只剩最后一个过程时,点击删除按钮应该删除整个任务。让我们修改 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>
  );
};

这样修改后:

  1. "删除过程"按钮会一直显示,不管任务有多少个过程
  2. 当任务只剩一个过程时,点击"删除过程"按钮会删除整个任务
  3. 当任务有多个过程时,点击"删除过程"按钮只会删除当前过程

需要我对某部分做进一步的调整或解释吗?