新增试题预览

src/modules/question/components/FolderQuestionManageDialog.vue

@@ -179,6 +179,8 @@
           </div>
         </div>
       </div>
+
+      <div slot="footer"></div>
     </el-dialog>
 
     <!-- QuestionEditDialog -->
@@ -186,6 +188,11 @@
       ref="QuestionEditDialog"
       :question="curQuestion"
     ></question-edit-dialog>
+    <!-- QuestionPreviewDialog -->
+    <question-preview-dialog
+      ref="QuestionPreviewDialog"
+      :question="curQuestion"
+    ></question-preview-dialog>
     <!-- QuestionFolderDialog -->
     <question-folder-dialog
       ref="QuestionFolderDialog"
@@ -204,6 +211,7 @@ import {
 } from "../api";
 import QuestionFolder from "./QuestionFolder.vue";
 import QuestionEditDialog from "./QuestionEditDialog.vue";
+import QuestionPreviewDialog from "./QuestionPreviewDialog.vue";
 import QuestionFolderDialog from "./QuestionFolderDialog.vue";
 
 export default {
@@ -211,6 +219,7 @@ export default {
   components: {
     QuestionFolder,
     QuestionEditDialog,
+    QuestionPreviewDialog,
     QuestionFolderDialog,
   },
   data() {
@@ -273,6 +282,8 @@ export default {
     },
     toViewQuestion(row) {
       console.log(row);
+      this.curQuestion = row;
+      this.$refs.QuestionPreviewDialog.open();
     },
     toEditQuestion(row) {
       console.log(row);

src/modules/question/components/QuestionPreviewDialog.vue

@@ -0,0 +1,160 @@
+<template>
+  <el-dialog
+    :visible.sync="modalIsShow"
+    title="试题预览"
+    :modal="false"
+    width="1000px"
+    top="20px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    destroy-on-close
+  >
+    <div class="edit-part">
+      <div class="edit-cont">
+        <div class="edit-cont-title">
+          <rich-text :text-json="question.quesBody"></rich-text>
+        </div>
+        <div class="edit-cont-body">
+          <div
+            v-for="(quesOption, optionIndex) in question.quesOptions"
+            :key="optionIndex"
+            class="paper-option"
+          >
+            <span>{{ optionIndex | optionOrderWordFilter }}. </span>
+            <rich-text :text-json="quesOption.optionBody"></rich-text>
+          </div>
+          <div v-if="!isNested(question.questionType)" class="paper-answer">
+            <span>答案：</span>
+            <question-answer :data="question"></question-answer>
+          </div>
+        </div>
+        <div
+          v-if="!isNested(question.questionType)"
+          class="edit-cont-props"
+          style="margin-top: 10px"
+        >
+          <el-tag
+            v-for="(content, propIndex) in question.quesProperties"
+            :key="propIndex"
+            type="primary"
+            effect="dark"
+            style="margin-right: 5px; margin-bottom: 5px"
+          >
+            {{ content.courseProperty && content.courseProperty.name }}
+            <span style="margin: 0 3px">/</span>
+            {{ content.firstProperty && content.firstProperty.name }}
+            <span
+              v-if="content.secondProperty && content.secondProperty.name"
+              style="margin: 0 3px"
+              >/</span
+            >
+            {{ content.secondProperty && content.secondProperty.name }}
+          </el-tag>
+        </div>
+        <div
+          v-if="isNested(question.questionType)"
+          class="edit-paper-question-subs"
+        >
+          <div
+            v-for="(subQuestion, subIndex) in question.subQuestions"
+            :key="subIndex"
+            class="edit-part"
+          >
+            <div class="edit-cont">
+              <div class="edit-cont-title">
+                <span>{{ subQuestion.subNumber }}. </span>
+                <rich-text :text-json="subQuestion.quesBody"></rich-text>
+              </div>
+              <div class="edit-cont-body">
+                <template v-if="!isMatchingQuestion(question.questionType)">
+                  <div
+                    v-for="(
+                      subQuesOption, subOptIndex
+                    ) in subQuestion.quesOptions"
+                    :key="subOptIndex"
+                    class="paper-option"
+                  >
+                    <span>{{ subOptIndex | optionOrderWordFilter }}. </span>
+                    <rich-text
+                      :text-json="subQuesOption.optionBody"
+                    ></rich-text>
+                  </div>
+                </template>
+                <div class="paper-answer">
+                  <span>答案：</span>
+                  <question-answer :data="subQuestion"></question-answer>
+                </div>
+              </div>
+              <div class="edit-cont-props" style="margin-top: 10px">
+                <el-tag
+                  v-for="(content, propIndex) in subQuestion.quesProperties"
+                  :key="propIndex"
+                  type="primary"
+                  effect="dark"
+                  style="margin-right: 5px; margin-bottom: 5px"
+                >
+                  {{ content.courseProperty && content.courseProperty.name }}
+                  <span style="margin: 0 3px">/</span>
+                  {{ content.firstProperty && content.firstProperty.name }}
+                  <span
+                    v-if="content.secondProperty && content.secondProperty.name"
+                    style="margin: 0 3px"
+                    >/</span
+                  >
+                  {{ content.secondProperty && content.secondProperty.name }}
+                </el-tag>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div slot="footer">
+      <el-button @click="cancel">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "QuestionPreviewDialog",
+  props: {
+    question: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+    };
+  },
+  methods: {
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    isNested(questionType) {
+      const nestedQuestion = [
+        "PARAGRAPH_MATCHING",
+        "BANKED_CLOZE",
+        "CLOZE",
+        "READING_COMPREHENSION",
+        "LISTENING_QUESTION",
+      ];
+
+      return nestedQuestion.includes(questionType);
+    },
+    isMatchingQuestion(questionType) {
+      const typeQuestion = ["PARAGRAPH_MATCHING", "BANKED_CLOZE"];
+      return typeQuestion.includes(questionType);
+    },
+  },
+};
+</script>

src/modules/question/views/QuestionManage.vue

@@ -202,6 +202,11 @@
       ref="QuestionEditDialog"
       :question="curQuestion"
     ></question-edit-dialog>
+    <!-- QuestionPreviewDialog -->
+    <question-preview-dialog
+      ref="QuestionPreviewDialog"
+      :question="curQuestion"
+    ></question-preview-dialog>
     <!-- QuestionStatisticsDialog -->
     <question-statistics-dialog
       ref="QuestionStatisticsDialog"
@@ -244,6 +249,7 @@ import QuestionSafetySetDialog from "../components/QuestionSafetySetDialog.vue";
 import QuestionFolderDialog from "../components/QuestionFolderDialog.vue";
 import QuestionImportDialog from "../components/QuestionImportDialog.vue";
 import QuestionEditDialog from "../components/QuestionEditDialog.vue";
+import QuestionPreviewDialog from "../components/QuestionPreviewDialog.vue";
 import ModifyFolder from "../components/ModifyFolder.vue";
 
 export default {
@@ -254,6 +260,7 @@ export default {
     QuestionFolderDialog,
     QuestionImportDialog,
     QuestionEditDialog,
+    QuestionPreviewDialog,
     ModifyFolder,
   },
   data() {
@@ -343,6 +350,8 @@ export default {
     },
     toViewQuestion(row) {
       console.log(row);
+      this.curQuestion = row;
+      this.$refs.QuestionPreviewDialog.open();
     },
     toEditQuestion(row) {
       console.log(row);