feat: 题卡预览水印

src/assets/styles/pages.scss

@@ -894,30 +894,17 @@
   &.is-print {
     z-index: 1000 !important;
   }
-  .el-dialog.is-fullscreen {
-    border: none;
-    .el-dialog__headerbtn {
-      width: 24px;
-      height: 24px;
-      background-image: url(../images/icon-close-act.png);
+  .el-dialog__header {
+    z-index: 99 !important;
+    box-shadow: 0px 3px 3px 1px #eff0f5;
+  }
 
-      &:hover {
-        background-color: mix(#fff, $--color-danger, 90%);
-      }
-    }
-    .el-dialog__header {
-      border: none;
-      background-color: transparent;
-      z-index: 100;
-    }
-    .el-dialog__body {
-      padding: 0;
-      background-color: #f0f0f0;
-      min-height: 100%;
-    }
-    .el-dialog__footer {
-      display: none;
-    }
+  .el-dialog__footer {
+    display: none;
+  }
+  .card-preview {
+    padding: 0;
+    margin-top: -15px;
   }
 }
 

src/modules/card/components/CardPreviewDialog.vue

@@ -1,14 +1,18 @@
 <template>
   <el-dialog
-    :class="['card-preview-dialog', { 'is-print': this.viewType === 'print' }]"
+    :class="[
+      'card-preview-dialog page-dialog',
+      { 'is-print': this.viewType === 'print' },
+    ]"
     :visible.sync="modalIsShow"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :modal="false"
     append-to-body
     fullscreen
+    @opened="dialogOpened"
   >
-    <div slot="title"></div>
+    <div slot="title">题卡预览</div>
     <div slot="footer"></div>
 
     <card-preview
@@ -41,6 +45,10 @@ export default {
       type: String,
       default: null,
     },
+    showWatermark: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -58,6 +66,46 @@ export default {
       this.cancel();
       this.$emit("confirm", content);
     },
+    dialogOpened() {
+      if (this.showWatermark) this.setWatermark();
+    },
+    setWatermark() {
+      const { loginName, realName } = this.$ls.get("user", {});
+      const content = `${realName}(${loginName})`;
+
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
+      const fontSize = 100;
+      ctx.font = `${fontSize}px serif`;
+      const cInfo = ctx.measureText(content);
+      const cwidth = Math.max(600, cInfo.width) * 1.2;
+      canvas.width = cwidth;
+      canvas.height = cwidth;
+
+      ctx.font = `${fontSize}px serif`;
+      ctx.fillStyle = "rgba(212,212,212,0.5)";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const angle = (315 * Math.PI) / 180;
+      const x = canvas.width / 2;
+      const y = canvas.height / 2;
+
+      ctx.translate(x, y);
+      ctx.rotate(angle);
+      ctx.fillText(content, 0, 0);
+
+      canvas.toBlob((val) => {
+        if (!val) return;
+        const watermarkBg = window.URL.createObjectURL(val);
+        this.$el.querySelectorAll(".page-main-inner").forEach((dom) => {
+          dom.setAttribute(
+            "style",
+            `background-image: url(${watermarkBg});background-repeat: repeat;background-size: 500px 500px;`
+          );
+        });
+      });
+    },
   },
 };
 </script>

src/modules/exam/components/ModifyTaskPaper.vue

@@ -270,6 +270,7 @@
     <card-preview-dialog
       ref="CardPreviewDialog"
       :card-id="curAttachment.cardId"
+      show-watermark
     ></card-preview-dialog>
 
     <!-- PreviewAttachment -->
@@ -494,7 +495,6 @@ export default {
     toViewCard(attachment) {
       this.curAttachment = { ...attachment };
       this.$refs.CardPreviewDialog.open();
-      // TODO:
     },
     toViewAttachment(curAttachmentId) {
       this.curAttachmentId = curAttachmentId;

src/modules/exam/components/createExamAndPrintTask/InfoExamTask.vue

@@ -424,6 +424,13 @@
       :presetData="cardBuildPresetData"
       @confirm="cardBuildConfirm"
     ></card-build-dialog>
+
+    <!-- card-preview-dialog -->
+    <card-preview-dialog
+      ref="CardPreviewDialog"
+      :card-id="curAttachment.cardId"
+      show-watermark
+    ></card-preview-dialog>
   </div>
 </template>
 
@@ -443,6 +450,7 @@ import {
 import { copyCard } from "../../../card/api";
 
 import CardBuildDialog from "../../../card/components/CardBuildDialog.vue";
+import CardPreviewDialog from "../../../card/components/CardPreviewDialog.vue";
 
 // type=GENERIC时， 为通卡，不可复制，不可编辑，可预览。
 // type=CUSTOM时，可复制，不可编辑，如果是当前自己任务的题卡，才可编辑。
@@ -454,6 +462,7 @@ export default {
     ModifyCard,
     SelectTikuPaperDialog,
     CardBuildDialog,
+    CardPreviewDialog,
   },
   data() {
     return {
@@ -790,15 +799,8 @@ export default {
       this.$refs.ModifyCard.open();
     },
     toViewCard(attachment) {
-      window.open(
-        this.getRouterPath({
-          name: "CardPreview",
-          params: {
-            cardId: attachment.cardId,
-            viewType: "view",
-          },
-        })
-      );
+      this.curAttachment = { ...attachment };
+      this.$refs.CardPreviewDialog.open();
     },
     async toCopyCard(attachment) {
       this.curAttachment = { ...attachment };

src/modules/exam/components/createExamAndPrintTask/InfoPrintTask.vue

@@ -400,7 +400,6 @@ export default {
     updateData() {
       const tableData = this.tableData.map((row) => {
         const nrow = { ...row };
-        // TODO:注意这里字段改了
         nrow.examTaskStudentObjectParamListIds =
           row.examTaskStudentObjectParamList
             .filter((item) => item.enable)

src/modules/exam/components/taskApply/TaskPaper.vue

@@ -442,6 +442,12 @@
       ref="PreviewAttachment"
       :attachment-id="curAttachmentId"
     ></preview-attachment>
+    <!-- card-preview-dialog -->
+    <card-preview-dialog
+      ref="CardPreviewDialog"
+      :card-id="curAttachment.cardId"
+      show-watermark
+    ></card-preview-dialog>
   </div>
 </template>
 
@@ -456,6 +462,7 @@ import { copyCard } from "../../../card/api";
 import UploadPaperDialog from "../UploadPaperDialog.vue";
 import SelectTikuPaperDialog from "../createExamAndPrintTask/SelectTikuPaperDialog.vue";
 import CardBuildDialog from "../../../card/components/CardBuildDialog.vue";
+import CardPreviewDialog from "../../../card/components/CardPreviewDialog.vue";
 import SimpleImagePreview from "../../../../components/SimpleImagePreview.vue";
 import ModifyCard from "../../../card/components/ModifyCard.vue";
 import PreviewAttachment from "@/components/PreviewAttachment.vue";
@@ -467,6 +474,7 @@ export default {
     SimpleImagePreview,
     ModifyCard,
     CardBuildDialog,
+    CardPreviewDialog,
     SelectTikuPaperDialog,
     PreviewAttachment,
   },
@@ -698,14 +706,8 @@ export default {
     },
     toViewCard(attachment) {
       this.addPreviewLog({ attachment, type: "card" });
-      window.open(
-        this.getRouterPath({
-          name: "CardPreview",
-          params: {
-            cardId: attachment.cardId,
-          },
-        })
-      );
+      this.curAttachment = { ...attachment };
+      this.$refs.CardPreviewDialog.open();
     },
     async toCopyCard(attachment) {
       this.curAttachment = { ...attachment };

src/modules/mark/components/markParam/MarkParamGroup.vue

@@ -41,7 +41,7 @@
             {{ scope.row.doubleEnable ? "双评" : "单评" }}
           </template>
         </el-table-column>
-        <el-table-column label="仲裁阀值" width="100">
+        <el-table-column label="仲裁阈值" width="100">
           <template v-if="scope.row.doubleEnable" slot-scope="scope">
             {{ scope.row.arbitrateThreshold }}
           </template>

src/modules/mark/components/markParam/ModifyMarkGroup.vue

@@ -24,7 +24,7 @@
       </el-form-item>
       <br />
       <template v-if="rowInfo.doubleEnable">
-        <el-form-item label="仲裁阀值：" prop="arbitrateThreshold">
+        <el-form-item label="仲裁阈值：" prop="arbitrateThreshold">
           <el-input-number
             v-model="rowInfo.arbitrateThreshold"
             class="width-80"