Vue2实战教程：构建企业级任务管理系统 | 前端开发指南

new Vue({
el: ‘#app’,
data: {
currentView: ‘task-list’,
tasks: [
{
id: 1,
title: ‘学习Vue组件开发‘,
description: ‘深入学习Vue组件的生命周期和通信方式’,
priority: ‘high’,
deadline: ‘2023-12-15’,
status: ‘in-progress’
},
{
id: 2,
title: ‘编写项目文档’,
description: ‘为当前项目编写详细的技术文档’,
priority: ‘medium’,
deadline: ‘2023-12-20’,
status: ‘pending’
}
],
taskForm: {
id: null,
title: ”,
description: ”,
priority: ‘medium’,
deadline: ”,
status: ‘pending’
},
editingTask: null,
filterStatus: ‘all’,
searchQuery: ”,
nextId: 3
},
computed: {
filteredTasks() {
let filtered = this.tasks;

// 状态过滤
if (this.filterStatus !== ‘all’) {
filtered = filtered.filter(task => task.status === this.filterStatus);
}

// 搜索过滤
if (this.searchQuery) {
const query = this.searchQuery.toLowerCase();
filtered = filtered.filter(task =>
task.title.toLowerCase().includes(query) ||
task.description.toLowerCase().includes(query)
);
}

return filtered;
},
pendingTasksCount() {
return this.tasks.filter(task => task.status === ‘pending’).length;
},
inProgressTasksCount() {
return this.tasks.filter(task => task.status === ‘in-progress’).length;
},
completedTasksCount() {
return this.tasks.filter(task => task.status === ‘completed’).length;
},
priorityStats() {
const stats = { low: 0, medium: 0, high: 0 };
this.tasks.forEach(task => {
stats[task.priority]++;
});
return stats;
}
},
methods: {
saveTask() {
if (this.editingTask) {
// 更新现有任务
const index = this.tasks.findIndex(task => task.id === this.editingTask.id);
if (index !== -1) {
this.tasks.splice(index, 1, { …this.taskForm });
}
} else {
// 添加新任务
this.tasks.push({
…this.taskForm,
id: this.nextId++
});
}

this.resetForm();
this.currentView = ‘task-list’;
this.saveToLocalStorage();
},
editTask(task) {
this.editingTask = task;
this.taskForm = { …task };
this.currentView = ‘add-task’;
},
cancelEdit() {
this.resetForm();
this.currentView = ‘task-list’;
},
resetForm() {
this.taskForm = {
id: null,
title: ”,
description: ”,
priority: ‘medium’,
deadline: ”,
status: ‘pending’
};
this.editingTask = null;
},
deleteTask(taskId) {
if (confirm(‘确定要删除这个任务吗？’)) {
this.tasks = this.tasks.filter(task => task.id !== taskId);
this.saveToLocalStorage();
}
},
updateTaskStatus(taskId, status) {
const task = this.tasks.find(task => task.id === taskId);
if (task) {
task.status = status;
this.saveToLocalStorage();
}
},
formatDate(dateString) {
const options = { year: ‘numeric’, month: ‘short’, day: ‘numeric’ };
return new Date(dateString).toLocaleDateString(‘zh-CN’, options);
},
getStatusText(status) {
const statusMap = {
‘pending’: ‘待处理’,
‘in-progress’: ‘进行中’,
‘completed’: ‘已完成’
};
return statusMap[status] || status;
},
getPriorityText(priority) {
const priorityMap = {
‘low’: ‘低’,
‘medium’: ‘中’,
‘high’: ‘高’
};
return priorityMap[priority] || priority;
},
saveToLocalStorage() {
localStorage.setItem(‘taskManagerTasks’, JSON.stringify(this.tasks));
localStorage.setItem(‘taskManagerNextId’, this.nextId.toString());
},
loadFromLocalStorage() {
const savedTasks = localStorage.getItem(‘taskManagerTasks’);
const savedNextId = localStorage.getItem(‘taskManagerNextId’);

if (savedTasks) {
this.tasks = JSON.parse(savedTasks);
}

if (savedNextId) {
this.nextId = parseInt(savedNextId);
}
}
},
mounted() {
this.loadFromLocalStorage();
}
});