feat.批改暂存与学生查看批改内容

src/views/Home/component/Remark/Remark.vue

@@ -1,107 +1,95 @@
-<!--
-  Description: 教师评分和批改组件
-  Author: XiaoYu
-  Created Date: 2024-7-18
--->
-<!-- 
-Attention: 创建作业和批改作业的老师须是同一位
-英语作文第一次作业的老师信息:
-"officialNumber": "2401016",
-"password": "309aabad-a151-42c3-b726-530fc426c5e2"
--->
 <template>  
   <div>  
-    <!-- 评分小组件 -->
-     <div class="rating-component">
-      <span>评分:&nbsp;&nbsp;</span>
-      <input
-        type="number"
+    <div class="rating-component">  
+      <span>评分:&nbsp;&nbsp;</span>  
+      <input  
+        type="number"  
         class="score-input"  
         :min="1"  
         :max="100"  
         placeholder="请输入1~100的分数"  
-        v-model="correction.score"/>
-     </div>  
-     
-    
-    <div class="textarea">
-      <!-- 评论输入框 -->  
+        v-model="correction.score"  
+      />  
+    </div>  
+  
+    <div class="textarea">  
       <textarea v-model="correction.remark" placeholder="请输入评语"></textarea>  
-    </div>
-    
-    <!-- 提交按钮 -->
-    <el-button color="#597D3B" @click="handleCorrect">提交批改</el-button>
+    </div>  
+  
+    <el-button color="#597D3B" @click="handleCorrect">提交批改</el-button>  
   </div>  
 </template>  
   
 <script lang="ts">  
+import { defineComponent, ref, onMounted } from 'vue';  
+import useApis from "@/apis";  
+import { ElMessage } from "element-plus";  
+import router from '@/router';  
 import "./index.scss"
-import useApis from "@/apis";
-import {  ElMessage } from "element-plus";
-import router from '@/router';
 
-export default { 
-  //defineprops只能在setup中使用 否则就直接写进这里 
-  props: {
-    studentId: {
-      type: Number,
-      required: true
-    },
-    assignmentId: {
-      type: Number,
-      required: true
-    }
-  },
+export default defineComponent({  
+  props: {  
+    studentId: {  
+      type: Number,  
+      required: true  
+    },  
+    assignmentId: {  
+      type: Number,  
+      required: true  
+    }  
+  },  
+  setup(props) {
+    //定义一个correction接收后端传过来的批改信息（如果有） 
+    const correction = ref({  
+      score: 0,  
+      remark: ''  
+    });  
+  //新增：获取后台批改数据
+  const fetchCorrection = async () => {    
+    const apis = useApis();    
+    try {  
+      const res = await apis.getEngagement(props.studentId, props.assignmentId);  
+      if (res.data.code === 200) {  
+        //这有两个.data，老是漏掉
+        correction.value.score = res.data.data.score;     
+        correction.value.remark = res.data.data.remark;
+        console.log(correction);    
+      } else {  
+        ElMessage.error("获取批改异常" + res.data.msg);  
+      }  
+    } catch (err) {  
+      console.log(err);  
+      ElMessage.error("请求失败，请重试");  
+    }  
+  };
+
+
+    onMounted(() => {  
+      fetchCorrection();  
+    });  
   
-  data() {  
-    return {  
-      // 初始化correction对象，它将被用作correctDTO的模板  
-      correction: {  
-        score: 0, 
-        remark: ''
-      }
+    const handleCorrect = async () => {  
+      const apis = useApis();  
+      try {  
+        await apis.engagementCorrect(props.studentId, props.assignmentId, correction.value)  
+          .then(res => {  
+            if (res.data.code === 200) {  
+              ElMessage.success("批改成功");  
+              router.push(`/home/myCorrect/assignment/${props.assignmentId}`);  
+            } else {  
+              ElMessage.error("批改异常" + res.data.msg);  
+            }  
+          });  
+      } catch (err) {  
+        console.log(err)
+      }  
     };  
-  }, 
   
-  methods: {  
-    async handleCorrect() {
-      const apis = useApis();
-      console.log(this.correction)
-      await apis.engagementCorrect(this.studentId, this.assignmentId, this.correction)
-            .then(res =>{
-              if(res.data.code === 200 ){
-                ElMessage.success("批改成功");
-                router.push(`/home/myCorrect/assignment/${this.assignmentId}`);
-              }else{
-                ElMessage.error("批改异常"+res.data.msg)
-                console.log(res)
-              }
+    return {  
+      correction,  
+      handleCorrect  
+    };  
+  }  
+});  
+</script>
 
-            }).catch(err=>{
-              console.log(err)
-            })
-    }
-  },  
-  
-}  
-</script>  
-  
-<style scoped>
-.score-input {  
-    /* 设置边框样式 */  
-    border: 2px solid #597D3B; /* 蓝色边框 */  
-    border-radius: 5px; /* 边框圆角 */  
-  
-    /* 设置背景色和字体样式 */  
-    background-color: #f8f9fa; /* 浅灰色背景 */  
-    color: #212529; /* 深色字体 */  
-    font-size: 16px; /* 字体大小 */  
-    padding: 8px 12px; /* 内边距 */  
-  
-    /* 设置焦点时的样式 */  
-    &:focus {  
-        border-color: #597D3B; /* 聚焦时边框颜色变深 */  
-        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 聚焦时添加阴影效果 */  
-    }
-}  
-</style>

src/views/Home/component/Remark/index.scss

@@ -11,7 +11,24 @@
 } 
 .rating-component {  
   margin-bottom: 10px; // 下边距  
-}  
+} 
+.score-input {  
+  /* 设置边框样式 */  
+  border: 2px solid #597D3B; /* 蓝色边框 */  
+  border-radius: 5px; /* 边框圆角 */  
+
+  /* 设置背景色和字体样式 */  
+  background-color: #f8f9fa; /* 浅灰色背景 */  
+  color: #212529; /* 深色字体 */  
+  font-size: 16px; /* 字体大小 */  
+  padding: 8px 12px; /* 内边距 */  
+
+  /* 设置焦点时的样式 */  
+  &:focus {  
+      border-color: #597D3B; /* 聚焦时边框颜色变深 */  
+      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 聚焦时添加阴影效果 */  
+  }
+}   
 
 // 文本区域样式  
 textarea {