1、批改。2、提交读取答案、提交读取批改

src/api/book.js

@@ -378,3 +378,51 @@ export function GetBookChapterStructExpandList(data) {
     data,
   );
 }
+
+/**
+ * @description 保存答题结果
+ * @param {object} data
+ * @param {string} data.task_id 任务 ID
+ * @param {string} data.user_id 用户 ID
+ * @param {string} data.courseware_id 课件 ID
+ * @param {string} data.answer 答案信息的 JSON 或富文本信息文本
+ */
+export function SaveMyAnswer(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_preview_manager-SaveMyAnswer`, data);
+}
+
+/**
+ * @description 获取答题结果
+ * @param {object} data
+ * @param {string} data.task_id 任务 ID
+ * @param {string} data.user_id 用户 ID
+ * @param {string} data.courseware_id 课件 ID
+ * @return {object} 答题结果
+ */
+export function GetMyAnswer(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_preview_manager-GetAnswer`, data);
+}
+
+/**
+ * @description 保存答题批改
+ * @param {object} data
+ * @param {string} data.task_id 任务 ID
+ * @param {string} data.user_id 用户 ID
+ * @param {string} data.courseware_id 课件 ID
+ * @param {string} data.answer_marking 批改信息的 JSON 或富文本信息文本
+ */
+export function SaveAnswerMarking(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_preview_manager-SaveAnswerMarking`, data);
+}
+
+/**
+ * @description 获取答题批改
+ * @param {object} data
+ * @param {string} data.task_id 任务 ID
+ * @param {string} data.user_id 用户 ID
+ * @param {string} data.courseware_id 课件 ID
+ * @return {object} 答题批改结果
+ */
+export function GetAnswerMarking(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_preview_manager-GetAnswerMarking`, data);
+}

src/courseware_preview/index.vue

@@ -23,10 +23,10 @@
         </span> -->
         <div class="operator">
           <slot name="operator" :courseware="courseware_info"></slot>
-          <span class="link">提交答案</span>
-          <span class="link">读取答案</span>
-          <span class="link">提交批改</span>
-          <span class="link">读取批改</span>
+          <span class="link" @click="confirmAnswer()">提交答案</span>
+          <span class="link" @click="getAnswer()">读取答案</span>
+          <span class="link" @click="confirmCorrect()">提交批改</span>
+          <span class="link" @click="getCorrect()">读取批改</span>
         </div>
       </div>
     </div>
@@ -318,7 +318,7 @@ import {
   DeleteMyCollect,
   SearchBookContentText,
 } from '@/api/book';
-import { getLocalStore } from '@/utils/auth';
+import { getLocalStore, getToken } from '@/utils/auth';
 import { toggleFullScreen } from '@/utils/common';
 
 export default {
@@ -364,8 +364,9 @@ export default {
       // { icon: 'translate', title: '翻译', handle: '', param: {} },
       // { icon: 'setting', title: '设置', handle: '', param: {} },
     ];
-
+    const token = getToken();
     return {
+      user_id: token?.gcls_sys_session_info?.user_id ?? '',
       id: getLocalStore('courseware_id'),
       projectId: getLocalStore('book_id') || '',
       task_id: getLocalStore('task_id') || '',
@@ -1246,6 +1247,22 @@ export default {
     fullScreen() {
       toggleFullScreen(this.$refs.previewMain);
     },
+    confirmAnswer() {
+      this.$refs.courserware.saveMyAnswer({ task_id: this.task_id, user_id: this.user_id, courseware_id: this.id });
+    },
+    getAnswer() {
+      this.$refs.courserware.getMyAnswer({ task_id: this.task_id, user_id: this.user_id, courseware_id: this.id });
+    },
+    confirmCorrect() {
+      this.$refs.courserware.saveAnswerMarking({
+        task_id: this.task_id,
+        user_id: this.user_id,
+        courseware_id: this.id,
+      });
+    },
+    getCorrect() {
+      this.$refs.courserware.getAnswerMarking({ task_id: this.task_id, user_id: this.user_id, courseware_id: this.id });
+    },
   },
 };
 </script>

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -79,6 +79,7 @@
 
 <script>
 import { previewComponentList } from '@/views/book/courseware/data/bookType';
+import { SaveMyAnswer, GetMyAnswer, SaveAnswerMarking, GetAnswerMarking } from '@/api/book';
 
 export default {
   name: 'CoursewarePreview',
@@ -413,9 +414,9 @@ export default {
      * @param {boolean} isShowRightAnswer 是否显示正确答案
      * @param {boolean} disabled 是否禁用
      */
-    simulateAnswer(isJudgingRightWrong, isShowRightAnswer, disabled = true) {
+    simulateAnswer(isJudgingRightWrong, isShowRightAnswer, disabled = true, answer = null) {
       this.$refs.preview.forEach((item) => {
-        item.showAnswer(isJudgingRightWrong, isShowRightAnswer, null, disabled);
+        item.showAnswer(isJudgingRightWrong, isShowRightAnswer, answer, disabled);
       });
     },
     /**
@@ -714,6 +715,90 @@ export default {
         });
       }
     },
+    /**
+     * 保存用户答案
+     * @param {string} task_id 任务ID
+     * @param {string} user_id 用户ID
+     * @param {string} courseware_id 课件ID
+     */
+    saveMyAnswer({ task_id, user_id, courseware_id }) {
+      let answer = {};
+      this.$refs.preview.forEach((item) => {
+        answer[item.id] = JSON.stringify(item.getAnswer());
+      });
+      SaveMyAnswer({
+        task_id,
+        user_id,
+        courseware_id,
+        answer: JSON.stringify(answer),
+      }).then(() => {
+        this.$message.success('答案保存成功');
+      });
+    },
+    /**
+     * 获取用户答案
+     * @param {string} task_id 任务ID
+     * @param {string} user_id 用户ID
+     * @param {string} courseware_id 课件ID
+     */
+    getMyAnswer({ task_id, user_id, courseware_id }) {
+      GetMyAnswer({
+        task_id,
+        user_id,
+        courseware_id,
+      }).then(({ answer }) => {
+        if (answer) {
+          let _answer = JSON.parse(answer);
+          this.$refs.preview.forEach((item) => {
+            let answerItem = _answer[item.id];
+            if (answerItem) {
+              item.showAnswer(true, true, JSON.parse(answerItem), true);
+            }
+          });
+        }
+      });
+    },
+    /**
+     * 保存答案批改
+     * @param {string} task_id 任务ID
+     * @param {string} user_id 用户ID
+     * @param {string} courseware_id 课件ID
+     */
+    saveAnswerMarking({ task_id, user_id, courseware_id }) {
+      let answer_marking = {};
+      this.$refs.preview.forEach((item) => {
+        answer_marking[item.id] = JSON.stringify(item.getAnswerCorrect());
+      });
+      SaveAnswerMarking({
+        task_id,
+        user_id,
+        courseware_id,
+        answer_marking: JSON.stringify(answer_marking),
+      });
+    },
+    /**
+     * 获取答案批改
+     * @param {string} task_id 任务ID
+     * @param {string} user_id 用户ID
+     * @param {string} courseware_id 课件ID
+     */
+    getAnswerMarking({ task_id, user_id, courseware_id }) {
+      GetAnswerMarking({
+        task_id,
+        user_id,
+        courseware_id,
+      }).then(({ answer_marking }) => {
+        if (answer_marking) {
+          let _answer_marking = JSON.parse(answer_marking);
+          this.$refs.preview.forEach((item) => {
+            let answerMarkingItem = _answer_marking[item.id];
+            if (answerMarkingItem) {
+              item.setAnswerCorrect(JSON.parse(answerMarkingItem));
+            }
+          });
+        }
+      });
+    },
   },
 };
 </script>

src/views/book/courseware/preview/common/AnswerCorrect.vue

@@ -0,0 +1,86 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <el-dialog
+    v-dialogDrag
+    title="批改"
+    custom-class="answer-correct-dialog"
+    :visible="visible"
+    width="40vw"
+    :close-on-click-modal="false"
+    :before-close="handleClose"
+  >
+    <RichText
+      v-if="!permissionControl.can_check_correct"
+      ref="richText"
+      v-model="correct"
+      placeholder="请输入批改内容"
+    />
+    <div v-else class="rich-text" v-html="sanitizeHTML(correct)"></div>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose()">取 消</el-button>
+      <el-button type="primary" @click="confirm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import RichText from '@/components/RichText.vue';
+
+import { sanitizeHTML } from '@/utils/common';
+
+export default {
+  name: 'AnswerCorrect',
+  components: {
+    RichText,
+  },
+  inject: ['getPermissionControl'],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    answerCorrect: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      sanitizeHTML,
+      correct: '',
+    };
+  },
+  computed: {
+    permissionControl() {
+      return this.getPermissionControl();
+    },
+  },
+  watch: {
+    answerCorrect: {
+      handler(val) {
+        this.correct = val;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:visible', false);
+    },
+    confirm() {
+      this.$emit('closeAnswerCorrect', this.correct);
+      this.handleClose();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.answer-correct-dialog {
+  .rich-text {
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/book/courseware/preview/common/PreviewOperation.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="operation">
     <div v-show="permissionControl.can_answer" class="button retry" @click="retry()"></div>
-    <div v-show="permissionControl.can_correct || permissionControl.can_check_correct" class="button correct"></div>
+    <div
+      v-show="permissionControl.can_correct || permissionControl.can_check_correct"
+      class="button correct"
+      @click="openAnswerCorrect()"
+    ></div>
     <div
       v-show="permissionControl.can_judge_correct || permissionControl.can_show_answer"
       class="button answer"
@@ -13,7 +17,7 @@
 <script>
 export default {
   name: 'PreviewOperation',
-  inject: ['getPermissionControl'],
+  inject: ['getPermissionControl', 'openAnswerCorrect'],
   data() {
     return {};
   },

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -399,6 +399,11 @@
         </div>
       </div>
       <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+      <AnswerCorrect
+        :answer-correct="data?.answer_correct"
+        :visible.sync="visibleAnswerCorrect"
+        @closeAnswerCorrect="closeAnswerCorrect"
+      />
       <AnswerAnalysis
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"

src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

@@ -153,6 +153,11 @@
         </div>
       </div>
       <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+      <AnswerCorrect
+        :answer-correct="data?.answer_correct"
+        :visible.sync="visibleAnswerCorrect"
+        @closeAnswerCorrect="closeAnswerCorrect"
+      />
       <AnswerAnalysis
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -2,6 +2,7 @@ import SerialNumberPosition from './SerialNumberPosition.vue';
 import PinyinText from '@/components/PinyinText.vue';
 import AnswerAnalysis from '@/views/book/courseware/preview/common/AnswerAnalysis.vue';
 import PreviewOperation from '@/views/book/courseware/preview/common/PreviewOperation.vue';
+import AnswerCorrect from '@/views/book/courseware/preview/common/AnswerCorrect.vue';
 
 import { isEnable } from '@/views/book/courseware/data/common';
 import { ContentGetCoursewareComponentContent } from '@/api/book';
@@ -21,6 +22,12 @@ const mixin = {
       loader: false,
       visibleAnswerAnalysis: false, // 是否显示答案解析弹窗
       answerAnalysisState: null, // 答案解析弹窗前的状态快照
+      visibleAnswerCorrect: false, // 是否显示批改弹窗
+    };
+  },
+  provide() {
+    return {
+      openAnswerCorrect: () => this.openAnswerCorrect(),
     };
   },
   inject: ['getLang', 'getChinese', 'convertText', 'getTitleList', 'getPermissionControl'],
@@ -69,6 +76,7 @@ const mixin = {
     PinyinText,
     AnswerAnalysis,
     PreviewOperation,
+    AnswerCorrect,
   },
   created() {
     // 这里分为 预览 和 编辑调整位置、视频互动组件 三种情况
@@ -129,6 +137,20 @@ const mixin = {
       if (userAnswer) this.answer = userAnswer;
     },
     /**
+     * 获取批改信息
+     * @returns {string} 批改信息
+     */
+    getAnswerCorrect() {
+      return this.data.answer_correct || '';
+    },
+    /**
+     * 设置批改信息
+     * @param {string} correct 批改信息
+     */
+    setAnswerCorrect(correct) {
+      this.$set(this.data, 'answer_correct', correct);
+    },
+    /**
      * 得到序号外部样式
      */
     getAreaStyle() {
@@ -195,6 +217,7 @@ const mixin = {
         ...borderData,
       };
     },
+    // 显示答案与解析页面
     showAnswerAnalysis() {
       if (!this.answerAnalysisState) {
         this.answerAnalysisState = {
@@ -207,6 +230,7 @@ const mixin = {
       this.isJudgingRightWrong = this.permissionControl.can_judge_correct;
       this.isShowRightAnswer = this.permissionControl.can_show_answer;
     },
+    // 关闭答案与解析页面
     closeAnswerAnalysis() {
       if (this.answerAnalysisState) {
         this.disabled = this.answerAnalysisState.disabled;
@@ -219,6 +243,18 @@ const mixin = {
         this.isShowRightAnswer = false;
       }
     },
+    // 显示批改页面
+    openAnswerCorrect() {
+      this.visibleAnswerCorrect = true;
+    },
+    /**
+     * @description 关闭批改页面，并传递批改信息
+     * @param {string} correct 批改信息
+     */
+    closeAnswerCorrect(correct) {
+      this.visibleAnswerCorrect = false;
+      this.$set(this.data, 'answer_correct', correct);
+    },
   },
 };
 

src/views/book/courseware/preview/components/fill/FillPreview.vue

@@ -103,6 +103,11 @@
 
     <WriteDialog :visible.sync="writeVisible" @confirm="handleWriteConfirm" />
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"

src/views/book/courseware/preview/components/image_text/ImageTextPreview.vue

@@ -59,6 +59,11 @@
       </div>
     </div>
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"

src/views/book/courseware/preview/components/input/InputPreview.vue

@@ -27,6 +27,11 @@
     </div>
 
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"

src/views/book/courseware/preview/components/judge/JudgePreview.vue

@@ -57,6 +57,11 @@
     </div>
 
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"

src/views/book/courseware/preview/components/matching/MatchingPreview.vue

@@ -37,6 +37,11 @@
     </div>
 
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"

src/views/book/courseware/preview/components/newWord_template/NewWordTemplatePreview.vue

@@ -209,6 +209,11 @@
       </div>
     </div>
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -151,13 +151,18 @@
         </template>
       </div>
       <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+      <AnswerCorrect
+        :answer-correct="data?.answer_correct"
+        :visible.sync="visibleAnswerCorrect"
+        @closeAnswerCorrect="closeAnswerCorrect"
+      />
       <AnswerAnalysis
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"
         :analysis-list="data.analysis_list"
         @closeAnswerAnalysis="closeAnswerAnalysis"
       >
-        <div slot="right-answer" v-if="data.property.fun_type === 'input'" class="right-answer">
+        <div v-if="data.property.fun_type === 'input'" slot="right-answer" class="right-answer">
           <div
             class="content-box"
             :class="[data.property.arrange_type === 'horizontal' ? 'content-box-flex' : 'content-box-vertical']"

src/views/book/courseware/preview/components/record_input/RecordInputPreview.vue

@@ -28,6 +28,11 @@
         />
       </div>
       <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+      <AnswerCorrect
+        :answer-correct="data?.answer_correct"
+        :visible.sync="visibleAnswerCorrect"
+        @closeAnswerCorrect="closeAnswerCorrect"
+      />
       <AnswerAnalysis
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"

src/views/book/courseware/preview/components/select/SelectPreview.vue

@@ -40,6 +40,11 @@
     </div>
 
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"

src/views/book/courseware/preview/components/sort/SortPreview.vue

@@ -42,6 +42,11 @@
     </div>
 
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -223,6 +223,11 @@
         </table>
       </div>
       <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+      <AnswerCorrect
+        :answer-correct="data?.answer_correct"
+        :visible.sync="visibleAnswerCorrect"
+        @closeAnswerCorrect="closeAnswerCorrect"
+      />
       <AnswerAnalysis
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"

src/views/book/courseware/preview/components/video_interaction/VideoInteractionPreview.vue

@@ -26,6 +26,11 @@
       >{{ convertText('查看答题报告') }}</el-button
     >
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"

src/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue

@@ -210,6 +210,11 @@
     </div>
 
     <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
+    <AnswerCorrect
+      :answer-correct="data?.answer_correct"
+      :visible.sync="visibleAnswerCorrect"
+      @closeAnswerCorrect="closeAnswerCorrect"
+    />
     <AnswerAnalysis
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"