5

我来帮您添加任务过程的删除功能，并且添加原始任务模板的功能。

首先修改 TaskManager.js：

import React, { useState, useEffect } from 'react';
import TaskTable from './TaskTable';
import TaskForm from './TaskForm';
import './TaskManager.css';

const TaskManager = () => {
  const currentYear = new Date().getFullYear();
  const [selectedYear, setSelectedYear] = useState(currentYear);
  const [selectedWeek, setSelectedWeek] = useState(1);
  const [selectedTaskType, setSelectedTaskType] = useState('ONLINE');
  const [tasks, setTasks] = useState([]);
  const [templateTasks, setTemplateTasks] = useState([]); // 添加模板任务状态

  // ... 其他现有代码 ...

  // 添加从模板创建任务的函数
  const createTaskFromTemplate = (template) => {
    const taskCode = generateTaskCode(
      selectedTaskType,
      selectedYear,
      selectedWeek,
      template.name
    );

    const newTask = {
      ...template,
      id: Date.now(),
      year: selectedYear,
      week: selectedWeek,
      taskType: selectedTaskType,
      code: taskCode,
      processes: template.processes.map(process => ({
        ...process,
        id: Date.now() + Math.random(), // 确保新ID唯一
        status: 'pending'
      }))
    };

    setTasks([...tasks, newTask]);
  };

  // 添加保存为模板的函数
  const saveAsTemplate = (task) => {
    const template = {
      ...task,
      isTemplate: true,
      id: Date.now()
    };
    setTemplateTasks([...templateTasks, template]);
  };

  // 修改处理过程操作的函数
  const handleProcessAction = (taskId, processId, action) => {
    switch (action) {
      // ... 现有的 case ...
      
      case 'deleteProcess':
        setTasks(tasks.map(task => {
          if (task.id === taskId) {
            // 确保至少保留一个过程
            if (task.processes.length > 1) {
              return {
                ...task,
                processes: task.processes.filter(p => p.id !== processId)
              };
            }
          }
          return task;
        }));
        break;

      default:
        break;
    }
  };

  return (
    <div className="task-manager">
      <div className="task-header">
        {/* ... 现有的筛选器 ... */}
        
        <div className="task-actions">
          <button 
            className="add-task-btn"
            onClick={() => document.getElementById('taskForm').style.display = 'block'}
          >
            添加新任务
          </button>
          <button 
            className="template-btn"
            onClick={() => document.getElementById('templateList').style.display = 'block'}
          >
            从模板创建
          </button>
        </div>
      </div>

      <TaskTable 
        tasks={tasks.filter(task => 
          task.year === selectedYear && 
          task.week === selectedWeek &&
          task.taskType === selectedTaskType
        )}
        onProcessAction={handleProcessAction}
        onDeleteTask={handleDeleteTask}
        onSaveTemplate={saveAsTemplate}
        taskTypes={taskTypes}
      />

      <TaskForm 
        onAddTask={handleAddTask}
        selectedYear={selectedYear}
        selectedWeek={selectedWeek}
        selectedTaskType={selectedTaskType}
      />

      {/* 添加模板列表弹窗 */}
      <div id="templateList" className="template-modal">
        <div className="template-content">
          <h2>选择任务模板</h2>
          <div className="template-list">
            {templateTasks.map(template => (
              <div key={template.id} className="template-item">
                <span>{template.name}</span>
                <button onClick={() => {
                  createTaskFromTemplate(template);
                  document.getElementById('templateList').style.display = 'none';
                }}>
                  使用此模板
                </button>
              </div>
            ))}
          </div>
          <button onClick={() => document.getElementById('templateList').style.display = 'none'}>
            关闭
          </button>
        </div>
      </div>
    </div>
  );
};

export default TaskManager;

修改 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}`}>
                {processIndex === 0 && (
                  <>
                    {/* ... 现有的任务信息单元格 ... */}
                    <td className="task-actions">
                      <button onClick={() => onSaveTemplate(task)}>
                        保存为模板
                      </button>
                    </td>
                  </>
                )}
                {/* ... 其他过程信息单元格 ... */}
                <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>
  );
};

添加相关样式到 TaskManager.css：

/* ... 现有样式 ... */

.task-actions {
  display: flex;
  gap: 10px;
}

.template-btn {
  padding: 10px 20px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.template-btn:hover {
  background-color: #1976D2;
}

.template-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.template-content {
  position: relative;
  background-color: white;
  margin: 50px auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 8px;
}

.template-list {
  margin: 20px 0;
}

.template-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.template-item button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

修改 TaskTable.css：

/* ... 现有样式 ... */

.delete-btn {
  background-color: #f44336;
  color: white;
}

.delete-btn:hover {
  background-color: #d32f2f;
}

.task-actions button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

这些修改添加了以下功能：

1. 可以将任务保存为模板
2. 可以从模板创建新任务
3. 可以删除任务中的单个过程（保证至少保留一个过程）
4. 模板任务会保留所有过程信息，但在创建新任务时会重置状态
5. 添加了模板选择的弹窗界面

使用方法：

1. 创建一个基础任务后，可以点击"保存为模板"按钮将其保存为模板
2. 之后可以通过"从模板创建"按钮选择已保存的模板来创建新任务
3. 在任务的每个过程中都有"删除过程"按钮，可以删除不需要的过程
4. 可以通过TaskForm中的"添加执行过程"按钮添加新的过程

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