mark-web/src/features/mark/MultiMediaMarkBody.vue

<template>
  <div>
    <div ref="rendered" class="rich-text-question-container"></div>
  </div>
</template>

<script setup lang="ts">
import { getJSON } from "@/api/jsonMark";
import { store } from "./store";
import { ref, watch } from "vue";
import { renderRichText } from "@/utils/renderJSON";
import type { RichTextJSON } from "@/types";

const rendered = ref(null as unknown as HTMLDivElement);
async function updateStudentAnswerJSON() {
  return getJSON(store.currentTask?.jsonUrl as string);
}

watch(
  () => store.currentTask,
  async () => {
    const res = await updateStudentAnswerJSON();
    const questions = res.data; // TODO: add type
    for (const q of questions) {
      if (q.answer && !Array.isArray(q.answer)) {
        q.answer = [q.answer];
      }
    }
    // TODO: 最好变成有结构的v-for渲染
    for (const taskQuestion of store.currentTask?.questionList || []) {
      const q = questions.find(
        (v: any) =>
          v.mainNumber === taskQuestion.mainNumber &&
          v.subNumber == taskQuestion.subNumber
      ) || {
        mainNumber: taskQuestion.mainNumber,
        subNumber: taskQuestion.subNumber,
        answer: [null],
      };

      const questionBody = store.setting.subject.questions.find(
        (ques) => ques.unionOrder === `${q.mainNumber}-${q.subNumber}`
      );
      // const jsonContent = q.answer;
      function appendRichText(rt: RichTextJSON) {
        const richText = renderRichText(rt);
        richText && rendered.value.appendChild(richText);
        return richText;
      }
      const questionOrderNode = document.createElement("div");
      questionOrderNode.innerHTML = `<span id="q-${questionBody?.unionOrder}">题号：${questionBody?.unionOrder}</span>`;
      rendered.value.appendChild(questionOrderNode);

      const questionBodyNode = document.createElement("div");
      questionBodyNode.innerHTML = `题干：`;
      rendered.value.appendChild(questionBodyNode);

      questionBody?.parentBody && appendRichText(questionBody?.parentBody);
      questionBody?.body && appendRichText(questionBody?.body);

      const studentAnswerNode = document.createElement("div");
      let tempNode = document.createElement("div");
      for (const an of q.answer) {
        // allAnswer += renderRichText(an);
        tempNode.appendChild(renderRichText(an));
      }
      studentAnswerNode.innerHTML = `考生答案：(字数统计：${
        tempNode?.innerText?.length ?? 0
      }）${tempNode?.innerHTML}`;
      rendered.value.appendChild(studentAnswerNode);

      q.answer && appendRichText(q.answer);

      const standardAnswerNode = document.createElement("div");
      standardAnswerNode.innerHTML = `标准答案：`;
      rendered.value.appendChild(standardAnswerNode);

      // questionBody?.answer && appendRichText(questionBody.answer);
      // console.log(questionBody.answer, renderRichText(questionBody.answer));
      if (questionBody?.answer) {
        // let allAnswer = "";
        for (const an of questionBody?.answer) {
          // allAnswer += renderRichText(an);
          rendered.value.appendChild(renderRichText(an));
        }
      }

      const questionSeperatorNode = document.createElement("hr");
      questionSeperatorNode.style.margin = "20px";
      rendered.value.appendChild(questionSeperatorNode);
      // q.answer && appendRichText(q.answer);
    }
  },
  { immediate: true }
);
</script>

<style scoped>
.rich-text-question-container {
  background-color: white;
}
hr {
  margin: 20px;
}
</style>

<style>
.rich-text-question-container img.inline {
  display: inline;
}
</style>