3

我来帮您设计这个任务管理系统的前端界面。我们需要修改之前的代码，创建新的组件来实现这个功能。

首先创建一个新的任务管理组件：

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 [tasks, setTasks] = useState([]);

  // 生成年份选项（2019到当前年份）
  const years = Array.from(
    { length: currentYear - 2019 + 1 },
    (_, i) => 2019 + i
  );

  // 生成周数选项（1-53周）
  const weeks = Array.from({ length: 53 }, (_, i) => i + 1);

  const handleAddTask = (newTask) => {
    setTasks([...tasks, {
      ...newTask,
      id: Date.now(),
      year: selectedYear,
      week: selectedWeek
    }]);
  };

  const handleDeleteTask = (taskId) => {
    setTasks(tasks.filter(task => task.id !== taskId));
  };

  const handleProcessAction = (taskId, processId, action) => {
    switch (action) {
      case 'execute':
        console.log(`执行任务 ${taskId} 的过程 ${processId}`);
        // 这里添加执行代码的逻辑
        break;
      case 'viewResult':
        console.log(`查看任务 ${taskId} 的过程 ${processId} 的结果`);
        // 这里添加查看结果的逻辑
        break;
      case 'deleteFile':
        console.log(`删除任务 ${taskId} 的过程 ${processId} 的文件`);
        // 这里添加删除文件的逻辑
        break;
      default:
        break;
    }
  };

  return (
    <div className="task-manager">
      <div className="task-header">
        <div className="filters">
          <select 
            value={selectedYear} 
            onChange={(e) => setSelectedYear(Number(e.target.value))}
          >
            {years.map(year => (
              <option key={year} value={year}>
                {year}年
              </option>
            ))}
          </select>

          <select 
            value={selectedWeek} 
            onChange={(e) => setSelectedWeek(Number(e.target.value))}
          >
            {weeks.map(week => (
              <option key={week} value={week}>
                第{week}周
              </option>
            ))}
          </select>
        </div>
        
        <button 
          className="add-task-btn"
          onClick={() => document.getElementById('taskForm').style.display = 'block'}
        >
          添加任务
        </button>
      </div>

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

      <TaskForm 
        onAddTask={handleAddTask}
        selectedYear={selectedYear}
        selectedWeek={selectedWeek}
      />
    </div>
  );
};

export default TaskManager;

创建任务表格组件：

import React from 'react';
import './TaskTable.css';

const TaskTable = ({ tasks, onProcessAction, onDeleteTask }) => {
  return (
    <div className="task-table-container">
      <table className="task-table">
        <thead>
          <tr>
            <th>任务名称</th>
            <th>任务编码</th>
            <th>年份</th>
            <th>周数</th>
            <th>执行过程</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>状态</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {tasks.map(task => (
            task.processes.map((process, processIndex) => (
              <tr key={`${task.id}-${processIndex}`}>
                {processIndex === 0 && (
                  <>
                    <td rowSpan={task.processes.length}>{task.name}</td>
                    <td rowSpan={task.processes.length}>{task.code}</td>
                    <td rowSpan={task.processes.length}>{task.year}</td>
                    <td rowSpan={task.processes.length}>{task.week}</td>
                  </>
                )}
                <td>{process.name}</td>
                <td>{process.startTime}</td>
                <td>{process.endTime}</td>
                <td>{process.status}</td>
                <td>{process.notes}</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>
                </td>
              </tr>
            ))
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default TaskTable;

创建任务表单组件：

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

const TaskForm = ({ onAddTask, selectedYear, selectedWeek }) => {
  const [taskData, setTaskData] = useState({
    name: '',
    code: '',
    processes: [
      {
        id: Date.now(),
        name: '',
        startTime: '',
        endTime: '',
        status: 'pending',
        notes: ''
      }
    ]
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    onAddTask(taskData);
    setTaskData({
      name: '',
      code: '',
      processes: [
        {
          id: Date.now(),
          name: '',
          startTime: '',
          endTime: '',
          status: 'pending',
          notes: ''
        }
      ]
    });
    document.getElementById('taskForm').style.display = 'none';
  };

  const addProcess = () => {
    setTaskData({
      ...taskData,
      processes: [
        ...taskData.processes,
        {
          id: Date.now(),
          name: '',
          startTime: '',
          endTime: '',
          status: 'pending',
          notes: ''
        }
      ]
    });
  };

  const updateProcess = (index, field, value) => {
    const newProcesses = [...taskData.processes];
    newProcesses[index] = {
      ...newProcesses[index],
      [field]: value
    };
    setTaskData({
      ...taskData,
      processes: newProcesses
    });
  };

  return (
    <div id="taskForm" className="task-form-modal">
      <div className="task-form-content">
        <h2>添加新任务</h2>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>任务名称：</label>
            <input
              type="text"
              value={taskData.name}
              onChange={(e) => setTaskData({...taskData, name: e.target.value})}
              required
            />
          </div>
          
          <div className="form-group">
            <label>任务编码：</label>
            <input
              type="text"
              value={taskData.code}
              onChange={(e) => setTaskData({...taskData, code: e.target.value})}
              required
            />
          </div>

          <h3>执行过程</h3>
          {taskData.processes.map((process, index) => (
            <div key={process.id} className="process-form">
              <div className="form-group">
                <label>过程名称：</label>
                <input
                  type="text"
                  value={process.name}
                  onChange={(e) => updateProcess(index, 'name', e.target.value)}
                  required
                />
              </div>
              
              <div className="form-group">
                <label>开始时间：</label>
                <input
                  type="datetime-local"
                  value={process.startTime}
                  onChange={(e) => updateProcess(index, 'startTime', e.target.value)}
                />
              </div>

              <div className="form-group">
                <label>备注：</label>
                <textarea
                  value={process.notes}
                  onChange={(e) => updateProcess(index, 'notes', e.target.value)}
                />
              </div>
            </div>
          ))}

          <button type="button" onClick={addProcess}>
            添加执行过程
          </button>

          <div className="form-actions">
            <button type="submit">保存任务</button>
            <button type="button" onClick={() => document.getElementById('taskForm').style.display = 'none'}>
              取消
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default TaskForm;

添加相应的样式文件：

.task-manager {
  padding: 20px;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filters select {
  margin-right: 20px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.add-task-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-task-btn:hover {
  background-color: #45a049;
}

.task-table-container {
  overflow-x: auto;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.task-table th,
.task-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.task-table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

.task-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.action-buttons button {
  margin: 0 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.action-buttons button:nth-child(1) {
  background-color: #4CAF50;
  color: white;
}

.action-buttons button:nth-child(2) {
  background-color: #2196F3;
  color: white;
}

.action-buttons button:nth-child(3) {
  background-color: #f44336;
  color: white;
}

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

.task-form-content {
  position: relative;
  background-color: white;
  margin: 50px auto;
  padding: 20px;
  width: 80%;
  max-width: 800px;
  border-radius: 8px;
  max-height: 80vh;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.process-form {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions {
  margin-top: 20px;
  text-align: right;
}

.form-actions button {
  margin-left: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-actions button[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

.form-actions button[type="button"] {
  background-color: #f44336;
  color: white;
}

最后，更新 App.js：

import React from 'react';
import TaskManager from './components/TaskManager';

function App() {
  return (
    <div className="App">
      <TaskManager />
    </div>
  );
}

export default App;

这个实现包含了您要求的所有功能：

1. 头部年份和周数筛选
2. 完整的任务表格，包含所有指定列
3. 任务的添加功能
4. 每个过程的执行、查看结果和删除文件功能
5. 支持多个执行过程的添加

您可以根据需要调整样式和具体的业务逻辑。需要我对某些部分做进一步的调整或解释吗？