feat 学习任务选择页面-创建/更新/删除任务

src/components/Study.vue

@@ -2,6 +2,7 @@
 import { ref, reactive, onMounted } from 'vue';
 import request from '@/utils/request';
 import router from "@/router";
+import {ElMessage} from "element-plus";
 
 const tasks = reactive([] as any[]);
 
@@ -16,6 +17,8 @@ const fetchTasks = () => {
           description: record.taskDescription || '',
           progress: record.lastLearningStatus || '未开始',
           priority: Math.round(record.taskPriority),
+          taskNum: record.taskNum,
+          taskId: record.id,
         })));
         selectedTask.value = tasks[0] || null;
       });
@@ -27,10 +30,20 @@ const startTask = () => {
 };
 
 const addTask = () => {
-  tasks.push({ title: '新任务', description: '', progress: '未开始', priority: 0 });
+  router.push({name:"add-task"});
+};
+
+const changeTask = () =>{
+  router.push({name:"update-task",params:{"taskId":selectedTask.value.taskId}})
 };
 
 const removeTask = () => {
+  request.del(`/tasks/${selectedTask.value.taskId}`,{}).then(res=>{
+    if (res.code == '200'){
+      ElMessage.success(`任务${selectedTask.value.title}删除成功`)
+    }
+  });
+
   const index = tasks.indexOf(selectedTask.value);
   if (index > -1) {
     tasks.splice(index, 1);
@@ -97,6 +110,7 @@ onMounted(() => {
       <el-space class="action-buttons">
         <el-button type="primary" @click="startTask">开始任务</el-button>
         <el-button @click="addTask">添加任务</el-button>
+        <el-button @click="changeTask">更新任务</el-button>
         <el-button type="danger" @click="removeTask">删除任务</el-button>
         <el-button type="info" @click="fetchTasks"> 刷新 </el-button>
       </el-space>

src/components/TaskForm.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import {computed, onMounted, onUnmounted, ref} from 'vue';
+import request from "@/utils/request";
+import {ElMessage} from "element-plus";
+import {useRoute, useRouter} from "vue-router";
+
+const router = useRouter();
+
+const route = useRoute()
+const taskId = route.params.taskId ? Number(route.params.taskId) : null;
+const buttonName = route.meta.buttonText;
+
+
+const taskName = ref('');
+const taskDescription = ref('');
+const priority = ref({
+  urgency: 0,
+  importance: 0,
+  contentDifficulty: 0,
+  futureValue: 0,
+  subjectivePriority: 0,
+});
+
+const priorityOptions = [0, 1, 2, 3, 4, 5];
+
+const createTask = () => {
+  console.log('创建任务', {
+    taskName: taskName.value,
+    taskDescription: taskDescription.value,
+    priority: priority.value,
+  });
+
+  request.post("/tasks", {
+    taskName: taskName.value,
+    taskDescription: taskDescription.value,
+    ...priority.value
+  }).then(result => {
+    if (result.code == 200) {
+      ElMessage.success("创建任务成功，任务id：" + result.message)
+      router.back()
+    } else {
+      ElMessage.error("任务创建失败，错误原因：" + result.message)
+    }
+  })
+};
+
+const loadTask = () => {
+  console.info("开始加载任务信息")
+  if (taskId !== null) {
+    request.get(`/tasks/${taskId}`, {}).then(result => {
+      if (result.code === 200) {
+        const data = result.data;
+        taskName.value = data.taskName;
+        taskDescription.value = data.taskDescription;
+        priority.value = {
+          urgency: data.urgency,
+          importance: data.importance,
+          contentDifficulty: data.contentDifficulty,
+          futureValue: data.futureValue,
+          subjectivePriority: data.subjectivePriority,
+        };
+      } else {
+        ElMessage.error(`任务加载失败：${result.message}`);
+      }
+    });
+  }
+};
+
+const updateTask = () => {
+  console.log('更新任务', {
+    taskName: taskName.value,
+    taskDescription: taskDescription.value,
+    priority: priority.value,
+  });
+
+  request.put("/tasks/" + taskId, {
+    id: taskId,
+    taskName: taskName.value,
+    taskDescription: taskDescription.value,
+    ...priority.value
+  }).then(result => {
+    if (result.code == 200) {
+      ElMessage.success("更新任务成功" + result.message)
+      router.back()
+    } else {
+      ElMessage.error("任务更新失败，错误原因：" + result.message)
+    }
+  })
+};
+
+const cancelTask = () => {
+  ElMessage.success("已取消创建")
+  router.back()
+};
+
+
+const submitTask = () => {
+  switch (route.name) {
+    case 'add-task':
+      createTask();
+      break;
+    case 'update-task':
+      updateTask();
+      break;
+    default:
+      ElMessage.error('未知操作类型');
+  }
+}
+
+const screenWidth = ref(window.innerWidth);
+
+const updateWidth = () => {
+  screenWidth.value = window.innerWidth;
+};
+
+
+onMounted(() => {
+  window.addEventListener('resize', updateWidth)
+  if (route.meta.action === 'update' && taskId !== null) {
+    loadTask();
+  }
+});
+onUnmounted(() => window.removeEventListener('resize', updateWidth));
+
+const columnSpan = computed(() => {
+  return screenWidth.value <= 768 ? 20 : 8;
+});
+</script>
+
+<template>
+  <el-form label-width="100px">
+    <el-form-item label="任务名:">
+      <el-input v-model="taskName" placeholder="请输入任务名"></el-input>
+    </el-form-item>
+
+    <el-form-item label="任务描述:">
+      <el-input
+          v-model="taskDescription"
+          type="textarea"
+          placeholder="请输入任务描述"
+          rows="6"
+      ></el-input>
+    </el-form-item>
+
+    <el-form-item label="优先级:">
+      <el-row :gutter="10">
+        <el-col :span="columnSpan">
+          <el-form-item label="急迫性">
+            <el-select v-model="priority.urgency">
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="columnSpan">
+          <el-form-item label="重要性">
+            <el-select v-model="priority.importance">
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="columnSpan">
+          <el-form-item label="内容难度">
+            <el-select v-model="priority.contentDifficulty">
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="columnSpan">
+          <el-form-item label="未来价值">
+            <el-select v-model="priority.futureValue">
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="columnSpan">
+          <el-form-item label="主观优先级">
+            <el-select v-model="priority.subjectivePriority">
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="submitTask">{{ buttonName }}</el-button>
+      <el-button @click="cancelTask">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 15px;
+}
+
+@media (max-width: 768px) {
+  .el-col {
+    width: 100% !important;
+  }
+}
+</style>

src/router/index.ts

@@ -4,6 +4,7 @@ import Study from "@/components/Study.vue";
 import Welcome from "@/components/Welcome.vue";
 import Review from "@/components/Review.vue";
 import StartTask from "@/components/StartTask.vue";
+import TaskForm from "@/components/TaskForm.vue";
 
 const router = createRouter({
     history: createWebHistory(),
@@ -31,6 +32,22 @@ const router = createRouter({
         {
             path:'/start-task',
             component: StartTask
+        },
+        {
+            path:'/add-task',
+            name:'add-task',
+            component: TaskForm,
+            meta:{
+                action: 'add', buttonText: '添加'
+            }
+        },
+        {
+            path:'/update-task/:taskId',
+            name:'update-task',
+            component: TaskForm,
+            meta:{
+                action: 'update', buttonText: '更新'
+            }
         }
     ]
 });

src/utils/request.ts

@@ -14,8 +14,6 @@ const handleError = (error: any) => {
         ElMessage.error(`请求失败，服务器返回: ${error.response.data}`);
     } else if (error.request) {
         ElMessage.error("请求未收到响应，请检查接口运行状态");
-    } else {
-        ElMessage.error(`请求配置错误: ${error.message}`);
     }
     throw new Error("网络不通畅，请检查您的网络连接或服务器状态");
 };