我来帮您修改代码以添加这些功能。
首先修改 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 taskTypes = [
{ value: 'ONLINE', label: '线上周' },
{ value: 'ONLINEM', label: '线上月' }
];
// 生成年份选项（2019到当前年份）
const years = Array.from(
{ length: currentYear - 2019 + 1 },
(_, i) => 2019 + i
);
// 生成周数选项（1-53周）
const weeks = Array.from({ length: 53 }, (_, i) => i + 1);
// 生成任务编码
const generateTaskCode = (taskType, year, week, taskName) => {
const typeCode = taskType === 'ONLINE' ? 'ONLINE' : 'ONLINEM';
const weekStr = week.toString().padStart(2, '0');
return `${typeCode}${year}${weekStr}_${taskName}`;
};
const handleAddTask = (newTask) => {
const taskCode = generateTaskCode(
selectedTaskType,
selectedYear,
selectedWeek,
newTask.name
);
setTasks([...tasks, {
...newTask,
id: Date.now(),
year: selectedYear,
week: selectedWeek,
taskType: selectedTaskType,
code: taskCode,
processes: newTask.processes.map(process => ({
...process,
status: 'pending',
responsible: '' // 添加负责人字段
}))
}]);
};
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;
case 'complete':
setTasks(tasks.map(task => {
if (task.id === taskId) {
const newProcesses = task.processes.map(process => {
if (process.id === processId) {
return { ...process, status: 'completed' };
}
return process;
});
return { ...task, processes: newProcesses };
}
return task;
}));
break;
default:
break;
}
};
return (
<div className="task-manager">
<div className="task-header">
<div className="filters">
<select
value={selectedTaskType}
onChange={(e) => setSelectedTaskType(e.target.value)}
>
{taskTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<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 &&
task.taskType === selectedTaskType
)}
onProcessAction={handleProcessAction}
onDeleteTask={handleDeleteTask}
taskTypes={taskTypes}
/>
<TaskForm
onAddTask={handleAddTask}
selectedYear={selectedYear}
selectedWeek={selectedWeek}
selectedTaskType={selectedTaskType}
/>
</div>
);
};
export default TaskManager;
修改 TaskTable.js：
import React from 'react';
import './TaskTable.css';
const TaskTable = ({ tasks, onProcessAction, onDeleteTask, 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>
</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>
)}
</td>
</tr>
))
))}
</tbody>
</table>
</div>
);
};
export default TaskTable;
更新 TaskForm.js 中的 process 结构：
// 在 TaskForm.js 中修改初始 process 结构
const initialProcess = {
id: Date.now(),
name: '',
startTime: '',
endTime: '',
status: 'pending',
responsible: '', // 添加负责人字段
notes: ''
};
// 在表单中添加负责人输入字段
<div className="form-group">
<label>负责人：</label>
<input
type="text"
value={process.responsible}
onChange={(e) => updateProcess(index, 'responsible', e.target.value)}
/>
</div>
更新 TaskTable.css 添加状态样式：
.status {
text-align: center;
}
.status.pending {
color: #999;
}
.status.completed {
color: #4CAF50;
font-weight: bold;
}
.complete-btn {
background-color: #4CAF50;
color: white;
}
.complete-btn:hover {
background-color: #45a049;
}
这些修改实现了：
- 添加了任务类型筛选（线上周/线上月）
- 添加了负责人列
- 状态显示改为无记录（灰色）和完成（绿色✓）
- 自动根据任务类型、年份、周数和任务名生成任务编码
- 添加了完成按钮来更新任务状态
需要我对某部分做进一步的调整或解释吗？
