Merge remote-tracking branch 'origin/correctPage-byXY'

src/views/CorrectPage/CorrectPage.vue

@@ -9,7 +9,6 @@
       <!-- 写作题目 及 作文内容 -->
       <div class="my-correct-header">
         <StudentWritingRequirements /> 
-        <!-- TODO:怎么这么难写！！！ -->
         <StudentEssay :studentId = "studentId" :assignmentId="assignmentId"/> 
       </div>
       
@@ -21,7 +20,6 @@
         </div>
         
         <!-- 教师评分、修改意见及评价 -->
-        <!--新修改：评分小组件放入Remark组件中了  -->
         <div class="my-correct-item">
             
             <Remark :studentId = "studentId" :assignmentId="assignmentId"/>              

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

@@ -1,107 +1,111 @@
-<!--
-  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">
-      <!-- 评论输入框 -->  
-      <textarea v-model="correction.remark" placeholder="请输入评语"></textarea>  
-    </div>
-    
-    <!-- 提交按钮 -->
-    <el-button color="#597D3B" @click="handleCorrect">提交批改</el-button>
+        placeholder="暂无分数"
+        title="请输入0~100间的数字"  
+        v-model="correction.score" 
+        :disabled="isStudent" 
+      />  
+    </div>  
+  
+    <div class="textarea" >  
+      <textarea v-model="correction.remark" placeholder="暂无评语" :readonly="isStudent"></textarea>  
+    </div>  
+  
+    <el-button color="#597D3B" @click="handleCorrect" :disabled="isStudent">提交批改</el-button>  
   </div>  
 </template>  
   
 <script lang="ts">  
+import { defineComponent, ref, onMounted, computed } 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';
+import {useStore} from "@/store";
+
+const store = useStore()
 
-export default { 
-  //defineprops只能在setup中使用 否则就直接写进这里 
-  props: {
-    studentId: {
-      type: Number,
-      required: true
-    },
-    assignmentId: {
-      type: Number,
-      required: true
-    }
-  },
-  
-  data() {  
-    return {  
-      // 初始化correction对象，它将被用作correctDTO的模板  
-      correction: {  
-        score: 0, 
-        remark: ''
-      }
-    };  
-  }, 
-  
-  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)
-              }
 
-            }).catch(err=>{
-              console.log(err)
-            })
-    }
+export default defineComponent({  
+  props: {  
+    studentId: {  
+      type: Number,  
+      required: true  
+    },  
+    assignmentId: {  
+      type: Number,  
+      required: true  
+    }  
   },  
+  setup(props) {
+
+    const isStudent = computed(() => store.user.role === 'STUDENT');  
+
+    //定义一个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();  
+    });  
   
-}  
-</script>  
-  
-<style scoped>
-.score-input {  
-    /* 设置边框样式 */  
-    border: 2px solid #597D3B; /* 蓝色边框 */  
-    border-radius: 5px; /* 边框圆角 */  
-  
-    /* 设置背景色和字体样式 */  
-    background-color: #f8f9fa; /* 浅灰色背景 */  
-    color: #212529; /* 深色字体 */  
-    font-size: 16px; /* 字体大小 */  
-    padding: 8px 12px; /* 内边距 */  
+    const handleCorrect = async () => { 
+      if (isStudent.value) {  
+        ElMessage.error("学生不能提交批改");  
+        return;  
+      }else{
+        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)
+      }  
+      }   
+      
+    };  
   
-    /* 设置焦点时的样式 */  
-    &:focus {  
-        border-color: #597D3B; /* 聚焦时边框颜色变深 */  
-        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 聚焦时添加阴影效果 */  
-    }
-}  
-</style>
+    return {  
+      correction,  
+      handleCorrect,
+      isStudent  
+    };  
+  }  
+});  
+</script>
+

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

@@ -11,7 +11,26 @@
 } 
 .rating-component {  
   margin-bottom: 10px; // 下边距  
-}  
+} 
+.score-input {  
+  /* 设置边框样式 */  
+  border: 2px solid #597D3B;  
+  border-radius: 5px; /* 边框圆角 */  
+  width: 15%;
+  
+
+  /* 设置背景色和字体样式 */  
+  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 { 
@@ -21,5 +40,5 @@ textarea {
   padding: 10px; // 内边距   
   border: 1px solid #ccc; // 边框  
   border-radius: 4px; // 边框圆角  
-  // 其他样式...  
+  font-size: 18px;  
 }   

src/views/Home/component/StudentEssay/StudentEssay.vue

@@ -16,14 +16,13 @@
       </div>
 
         <!-- 最后使用的在线预览是Office Web Viewer（微软） -->
+         <!-- TODO:如果height不用绝对值而是百分比，则无法调整，一直是半边的 -->
     <div class="iframe-wrapper">  
         <iframe
             :src="officeUrl"
             frameborder="0"
             width="100%"
-            height="560px"
-            
-
+            height="560px" 
         >
         </iframe>
     </div>
@@ -113,4 +112,3 @@ const props = defineProps<{
 } 
 </style>
 
-<!-- 注意：确保在父组件或全局范围内注册了 VueOfficeDocx 组件 -->

src/views/HomeworkPage/index.vue

@@ -42,6 +42,14 @@
           </el-button>
         </template>
       </el-table-column>
+      <el-table-column label="查看">
+        <template #default="scope">
+          <el-button @click="viewCorrection(scope.row.assignmentId,store.user.id)" style="margin-right: 0; margin-left: 0;padding-left: 10px; padding-right: 10px" color="#597D3B">
+            <el-icon style="margin-right: 3px"><ZoomIn/></el-icon>
+            批改结果
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <el-pagination
@@ -100,6 +108,11 @@
     pages: 1,
     total: null,
   })
+  //  查看教师批改结果 跳转至批改页面
+  const viewCorrection = (assignmentId:number,studentId:number) => {
+    router.push(`/home/assignment/${assignmentId}/correct?studentId=${studentId}`)
+
+  }
 
   const handleShowDetail = (assignmentId:number) => {
     router.push(`/home/homeworkDetail/${assignmentId}`)