离线考试-查看试卷-iframe

src/features/OfflineExam/OfflineExamList.vue

@@ -96,6 +96,20 @@
         </tr>
       </tbody>
     </table>
+    <iframe
+      :class="[previewUrl ? 'preview-window' : 'preview-window-none']"
+      :src="previewUrl"
+      frameborder="0"
+    ></iframe>
+    <i-button
+      :class="[
+        'qm-primary-button',
+        previewUrl ? 'preview-window-close' : 'preview-window-close-none',
+      ]"
+      @click="previewUrl = ''"
+    >
+      关闭
+    </i-button>
   </div>
 </template>
 
@@ -112,6 +126,7 @@ export default {
   data() {
     return {
       disableDownloadPaperBtn: false,
+      previewUrl: "",
     };
   },
   props: {
@@ -133,11 +148,13 @@ export default {
         isOnlineExam: true,
       };
       window.name = JSON.stringify(user);
-      window.location.href =
-        TK_SERVER_HTML_URL +
-        "/admin/preview_paper/" +
-        course.paperId +
-        "?isback=true";
+      // window.location.href =
+      //   TK_SERVER_HTML_URL +
+      //   "/admin/preview_paper/" +
+      //   course.paperId +
+      //   "?isback=true";
+      this.previewUrl =
+        TK_SERVER_HTML_URL + "/admin/preview_paper/" + course.paperId;
     },
     downloadOfflineFile(url) {
       window._hmt.push(["_trackEvent", "离线考试页面", "下载作答"]);
@@ -188,4 +205,26 @@ export default {
   border-collapse: separate !important;
   padding: 10px;
 }
+.preview-window {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  right: 0;
+  top: 0;
+}
+.preview-window-none {
+  position: absolute;
+  width: 0;
+  height: 0;
+  right: 0;
+  top: 0;
+}
+.preview-window-close {
+  position: absolute;
+  left: 40px;
+  top: 20px;
+}
+.preview-window-close-none {
+  display: none;
+}
 </style>