7

我看到问题了，是 TaskTable.js 中的表格结构有问题。让我修复一下：

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

const TaskTable = ({ tasks, onProcessAction, onDeleteTask, onSaveTemplate, taskTypes }) => {
  const getTaskTypeLabel = (value) => {
    return taskTypes.find(type => type.value === value)?.label || value;
  };

  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>
            <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}>{getTaskTypeLabel(task.taskType)}</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 className={`status ${process.status}`}>
                  {process.status === 'completed' ? '✓' : '无记录'}
                </td>
                <td>{process.responsible}</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>
                  {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>
                {processIndex === 0 && (
                  <td rowSpan={task.processes.length} className="template-actions">
                    <button onClick={() => onSaveTemplate(task)}>
                      保存为模板
                    </button>
                  </td>
                )}
              </tr>
            ))
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default TaskTable;

主要修改：

1. 添加了新的列 "模板操作"
2. 将保存模板按钮移到了最后一列，并使用 rowSpan 使其跨越所有过程行
3. 修复了表格结构，确保每行的单元格数量一致

同时更新一下 TaskTable.css 的样式：

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

.template-actions {
  text-align: center;
}

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

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

这样修改后：

1. 保存模板按钮会出现在最右侧列
2. 按钮会跨越整个任务的所有过程行
3. 表格结构正确，不会出现错位