feat:简单实现批改界面作文内容展示与行为数据导出

src/apis/behavior.ts

@@ -3,9 +3,10 @@ import axiosInstance from "@/apis/axios.config";
 const PREFIX = "/api/behaviorRecord"
 
 const bevaviorApis = {
-    selectBehaviorRecord: (assignmentId :number) => {
+    selectBehaviorRecord: (studentId: number, assignmentId :number) => {
         return axiosInstance.get(`${PREFIX}`, {
             params: {
+                studentId,
                 assignmentId
             }
         })

src/views/CorrectPage/CorrectPage.vue

@@ -23,6 +23,7 @@
       <div class="my-correct-record">
         <h2>学生与AI对话历史记录</h2>
         <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" :is-teacher="true" />
+        <el-button @click="showDialog = true">查看行为记录</el-button>
       </div>
 
       <!-- 教师评分、修改意见及评价 -->
@@ -33,10 +34,29 @@
       <div class="my-correct-goback">
         <el-button color="#597D3B" @click="goBack">返回</el-button>
       </div>
-
     </div>
-
   </div>
+
+  <el-dialog v-model="showDialog" title="文件信息">
+
+      <el-table :data="fileList" stripe>
+        <el-table-column prop="id" label="ID"></el-table-column>
+        <el-table-column prop="assignmentId" label="作业 ID"></el-table-column>
+        <el-table-column prop="recordFileUrl" label="文件链接" width="300px">
+          <template #default="scope">
+            <a :href="scope.row.recordFileUrl" target="_blank">{{ scope.row.recordFileUrl }}</a>
+          </template>
+        </el-table-column>
+        <el-table-column prop="time" label="时间"></el-table-column>
+        <el-table-column prop="studentId" label="学生 ID"></el-table-column>
+      </el-table>
+
+    <template #footer>
+      <el-button @click="showDialog = false">取消</el-button>
+      <el-button type="primary" @click="downloadAllFiles">导出</el-button>
+    </template>
+  </el-dialog>
+
 </template>
 
 <script setup lang="ts">
@@ -65,6 +85,9 @@ const studentId = Number(route.query.studentId)
 const apis = useApis()
 const store = useStore()
 
+const fileList = reactive([]);
+
+const showDialog = ref(false);
 
 const dataForm = reactive<{
   messages: IDialogue[],
@@ -81,7 +104,6 @@ async function fetchData() {
   await apis.getAIDialogues(assignmentId, studentId)
     .then((_res: any) => {
       const data = _res.data.data
-      console.log(data)
       Object.assign(dataForm, {
         dialogueId: data?.dialogueId,
         messages: data?.messages.content,
@@ -91,7 +113,6 @@ async function fetchData() {
 
   await apis.getEngagement(studentId, assignmentId)
     .then((_res: any) => {
-      console.log(_res)
       Object.assign(dataForm, {
         dialogueId: dataForm.dialogueId,
         messages: dataForm.messages,
@@ -103,10 +124,32 @@ async function fetchData() {
     })
 }
 
+const getBehaviorRecords = () => {
+  apis.selectBehaviorRecord(studentId, assignmentId)
+      .then(res => {
+        Object.assign(fileList, res.data.data)
+        // fileList.push(res.data.data)
+        // fileList.value = res.data.data
+      })
+      .catch(err => {
+        console.log(err)
+      })
+}
+
+const downloadAllFiles = () => {
+  fileList.forEach((item) => {
+    const link = document.createElement('a');
+    link.href = item.recordFileUrl;
+    link.download = '';
+    link.click();
+    link.remove();
+  });
+  showDialog.value = false;
+};
+
 onMounted(() => {
-  console.log("获取数据")
-  console.log(assignmentId, "assassignmentId的值")
   fetchData()
+  getBehaviorRecords()
 })
 
 </script>

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

@@ -16,24 +16,28 @@
         <!-- TODO:如果height不用绝对值而是百分比，则无法调整，一直是半边的 -->
         <div class="iframe-wrapper">
             <!-- height计算剩余高度 -->
-            <iframe :src="officeUrl" frameborder="0" width="100%" height="550px">
-            </iframe>
+            <!--<iframe :src="officeUrl" frameborder="0" width="100%" height="550px">-->
+            <!--</iframe>-->
+          {{ data.content }}
         </div>
 
     </div>
 </template>
 <!-- TODO:文件无法渲染 -->
 <script setup lang="ts">
-import { onMounted, defineProps, computed, reactive } from 'vue';
+import {onMounted, defineProps, computed, reactive, toRaw} from 'vue';
 
-import useApis from '@/apis'; //  API 钩子函数
+import useApis from '@/apis';
+import type {engagementVO} from "@/types/vo";
+import {Delta} from "@vueup/vue-quill"; //  API 钩子函数
 
 const apis = useApis()
 
 let data = reactive({
     loading: false,
     docxUrl: "",
-    studentName: ""
+    studentName: "",
+    content: ""
 })
 
 // 调用 API 获取文档 URL  
@@ -61,10 +65,25 @@ const officeUrl = computed(() => {
     return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(data.docxUrl)}`;
 });
 
+const fetchData = () => {
+  apis.getEngagement(props.studentId, props.assignmentId)
+      .then(res => {
+        const engagementData = res.data.data;
+        const engagement: engagementVO = Object.assign({}, engagementData);
+        if(engagement.quillContent != null){
+          data.content = engagement.textContent
+        }
+      })
+      .catch(err => {
+        console.log(err)
+      })
+}
+
 // 组件挂载时调用，请求数据的方法
 onMounted(() => {
     fetchDocxUrl(props.studentId, props.assignmentId)
     fetchUserAndPrint(props.studentId)
+  fetchData()
 });
 
 const props = defineProps<{
@@ -95,6 +114,7 @@ const props = defineProps<{
 }
 
 .iframe-wrapper {
+  white-space: pre-wrap;
     margin-top: 15px;
     /* 上边距 */
     /* margin-bottom: 20px; */