题卡预览调整,新增题卡自动保存

card/components/CardDesign.vue

@@ -274,6 +274,7 @@ import PageNumber from "../components/PageNumber";
 import PaperParams from "../components/PaperParams";
 import CardHeadSample from "../elements/card-head/CardHead";
 import TopicSelectDialog from "../components/TopicSelectDialog";
+import timeMixin from "../mixins/timeMixin";
 
 export default {
   name: "card-design",
@@ -293,6 +294,7 @@ export default {
       default: true,
     },
   },
+  mixins: [timeMixin],
   components: {
     // CardConfigPropEdit,
     TopicElementEdit,
@@ -336,6 +338,11 @@ export default {
   },
   mounted() {
     this.initCard();
+    this.openAutoSave();
+  },
+  beforeDestroy() {
+    this.initState();
+    this.clearSetTs();
   },
   methods: {
     ...mapMutations("card", [
@@ -360,6 +367,14 @@ export default {
       "initTopicsFromPages",
       "scrollToElementPage",
     ]),
+    openAutoSave() {
+      this.clearSetTs();
+
+      this.addSetTime(async () => {
+        await this.toSave();
+        this.openAutoSave();
+      }, 2 * 60 * 1000);
+    },
     async initCard() {
       const { cardConfig, pages, paperParams } = this.content;
       this.setCardConfig(cardConfig);
@@ -547,10 +562,6 @@ export default {
       });
     },
     async toSave() {
-      if (!this.checkCardValid()) return;
-
-      if (this.isSubmit) return;
-      this.isSubmit = true;
       const model = await this.getCardJson();
       const datas = this.getCardData("", model);
       this.$emit("on-save", datas);
@@ -575,8 +586,5 @@ export default {
       this.isSubmit = false;
     },
   },
-  beforeDestroy() {
-    this.initState();
-  },
 };
 </script>

card/mixins/timeMixin.js

@@ -0,0 +1,17 @@
+export default {
+  data() {
+    return {
+      setTs: [],
+    };
+  },
+  methods: {
+    addSetTime(action, time = 1 * 1000) {
+      this.setTs.push(setTimeout(action, time));
+    },
+    clearSetTs() {
+      if (!this.setTs.length) return;
+      this.setTs.forEach((t) => clearTimeout(t));
+      this.setTs = [];
+    },
+  },
+};

card/modules/free/components/CardFreeDesign.vue

@@ -214,6 +214,7 @@ import HelpDialog from "../components/HelpDialog";
 import EditPage from "../../../elements/page/EditPage";
 
 import PageNumber from "../../../components/PageNumber";
+import timeMixin from "../../../mixins/timeMixin";
 
 export default {
   name: "card-free-design",
@@ -232,6 +233,7 @@ export default {
       default: true,
     },
   },
+  mixins: [timeMixin],
   components: {
     TopicColumnEdit,
     PagePropEdit,
@@ -266,6 +268,11 @@ export default {
   },
   mounted() {
     this.initCard();
+    this.openAutoSave();
+  },
+  beforeDestroy() {
+    this.initState();
+    this.clearSetTs();
   },
   methods: {
     ...mapMutations("free", [
@@ -283,6 +290,14 @@ export default {
       "addElement",
       "modifyElement",
     ]),
+    openAutoSave() {
+      this.clearSetTs();
+
+      this.addSetTime(async () => {
+        await this.toSave();
+        this.openAutoSave();
+      }, 2 * 60 * 1000);
+    },
     async initCard() {
       const { cardConfig, pages } = this.content;
       this.setCardConfig(cardConfig);
@@ -378,8 +393,6 @@ export default {
       });
     },
     async toSave() {
-      if (this.isSubmit) return;
-      this.isSubmit = true;
       const model = await this.getCardJson();
       const datas = this.getCardData("", model);
       this.$emit("on-save", datas);
@@ -411,8 +424,5 @@ export default {
       this.isSubmit = false;
     },
   },
-  beforeDestroy() {
-    this.initState();
-  },
 };
 </script>

src/assets/styles/pages.scss

@@ -852,27 +852,37 @@
     }
   }
 }
-.card-view-dialog {
+.card-preview-dialog {
+  &.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);
+
+      &:hover {
+        background-color: mix(#fff, $--color-danger, 90%);
+      }
+    }
     .el-dialog__header {
       border: none;
       background-color: transparent;
-      z-index: 10;
+      z-index: 100;
     }
     .el-dialog__body {
-      border: none;
       padding: 0;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      overflow: hidden;
       background-color: #f0f0f0;
+      min-height: 100%;
+    }
+    .el-dialog__footer {
+      display: none;
     }
   }
 }
+
 // modify-mark-params
 .modify-mark-params {
   .mark-body {

src/modules/base/views/CardManage.vue

@@ -225,6 +225,11 @@
       @on-next="toNextImage"
       ref="SimpleImagePreview"
     ></simple-image-preview>
+    <!-- card-preview-dialog -->
+    <card-preview-dialog
+      ref="CardPreviewDialog"
+      :card-id="curCard.id"
+    ></card-preview-dialog>
   </div>
 </template>
 
@@ -243,11 +248,17 @@ import ModifyCardInfo from "../components/ModifyCardInfo";
 import pickerOptions from "@/constants/datePickerOptions";
 import ModifyCard from "../../card/components/ModifyCard";
 import SimpleImagePreview from "@/components/SimpleImagePreview";
+import CardPreviewDialog from "../../card/components/CardPreviewDialog.vue";
 import { downloadByApi } from "@/plugins/download";
 
 export default {
   name: "card-manage",
-  components: { ModifyCardInfo, ModifyCard, SimpleImagePreview },
+  components: {
+    ModifyCardInfo,
+    ModifyCard,
+    SimpleImagePreview,
+    CardPreviewDialog,
+  },
   data() {
     return {
       filter: {
@@ -302,15 +313,8 @@ export default {
       this.$refs.ModifyCardInfo.open();
     },
     toPreview(row) {
-      window.open(
-        this.getRouterPath({
-          name: "CardPreview",
-          params: {
-            cardId: row.id,
-            viewType: "view",
-          },
-        })
-      );
+      this.curCard = row;
+      this.$refs.CardPreviewDialog.open();
     },
     toNewCard(data) {
       this.$ls.set("prepareTcPCard", data);

src/modules/card/components/CardPreviewDialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-dialog
+    :class="['card-preview-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
+  >
+    <div slot="title"></div>
+    <div slot="footer"></div>
+
+    <card-preview
+      v-if="modalIsShow"
+      is-dialog
+      :card-data="cardData"
+      :view-type="viewType"
+      :card-id="cardId"
+      @confirm="confirm"
+    ></card-preview>
+  </el-dialog>
+</template>
+
+<script>
+import CardPreview from "../views/CardPreview.vue";
+
+export default {
+  name: "card-preview-dialog",
+  components: { CardPreview },
+  props: {
+    viewType: {
+      type: String,
+      default: "view",
+    },
+    cardData: {
+      type: Object,
+      default: null,
+    },
+    cardId: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+    };
+  },
+  methods: {
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    confirm(content) {
+      this.cancel();
+      this.$emit("confirm", content);
+    },
+  },
+};
+</script>

src/modules/card/components/CardRulePreviewDialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-dialog
+    class="card-preview-dialog"
+    :visible.sync="modalIsShow"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :modal="false"
+    append-to-body
+    fullscreen
+  >
+    <div slot="title"></div>
+    <div slot="footer"></div>
+
+    <card-rule-preview v-if="modalIsShow" :rule-id="ruleId"></card-rule-preview>
+  </el-dialog>
+</template>
+
+<script>
+import CardRulePreview from "../views/CardRulePreview.vue";
+
+export default {
+  name: "card-rule-preview-dialog",
+  components: { CardRulePreview },
+  props: {
+    ruleId: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+    };
+  },
+  methods: {
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+  },
+};
+</script>

src/modules/card/views/CardEdit.vue

@@ -12,27 +12,13 @@
       @on-exit="toExit"
     ></component>
 
-    <!-- card-view-frame -->
-    <div class="design-preview-frame" v-if="cardPreviewUrl">
-      <iframe :src="cardPreviewUrl" frameborder="0"></iframe>
-    </div>
-    <!-- card-view-dialog -->
-    <el-dialog
-      class="card-view-dialog"
-      :visible.sync="dialogIsShow"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      append-to-body
-      fullscreen
-      @closed="dialogClosed"
-    >
-      <iframe
-        v-if="dialogIsShow && cardDialogPreviewUrl"
-        :src="cardDialogPreviewUrl"
-        frameborder="0"
-        :style="dialogFrameStyle"
-      ></iframe>
-    </el-dialog>
+    <!-- card-preview-dialog -->
+    <card-preview-dialog
+      ref="CardPreviewDialog"
+      :cardData="cardData"
+      :view-type="viewType"
+      @confirm="previewConfirm"
+    ></card-preview-dialog>
   </div>
 </template>
 
@@ -40,6 +26,7 @@
 import { cardConfigInfos, cardDetail, saveCard } from "../api";
 import CardDesign from "../../../../card/components/CardDesign";
 import CardFreeDesign from "../../../../card/modules/free/components/CardFreeDesign";
+import CardPreviewDialog from "../components/CardPreviewDialog.vue";
 import { examRuleDetail } from "../../base/api";
 import { getEnums } from "../../login/api";
 
@@ -48,6 +35,7 @@ export default {
   components: {
     CardDesign,
     CardFreeDesign,
+    CardPreviewDialog,
   },
   props: {
     isDialog: {
@@ -66,10 +54,9 @@ export default {
       cardPreviewUrl: "",
       canSave: false,
       dataReady: false,
-      // card-view-dialog
-      dialogIsShow: false,
-      cardDialogPreviewUrl: "",
-      dialogFrameStyle: {},
+      // card-preview-dialog
+      viewType: "view",
+      cardData: null,
     };
   },
   computed: {
@@ -89,19 +76,7 @@ export default {
     this.cardCreateMethod = this.prepareTcPCard.createMethod || "STANDARD";
     this.cardId = this.cardId || this.prepareTcPCard.id;
     this.cardType = this.prepareTcPCard.type || "CUSTOM";
-    // if (
-    //   !this.prepareTcPCard.examTaskId &&
-    //   !this.isEdit &&
-    //   this.cardType === "CUSTOM"
-    // ) {
-    //   this.$message.error("找不到命题任务，请退出题卡制作！");
-    //   return;
-    // }
     this.initCard();
-    this.registWindowSubmit();
-    // card-view
-    this.initFrameStyle();
-    window.addEventListener("resize", this.initFrameStyle);
   },
   methods: {
     initFrameStyle() {
@@ -239,58 +214,24 @@ export default {
       this.cardDialogPreviewUrl = "";
     },
     toPreview(cardData) {
-      window.cardData = {
+      this.cardData = {
         ...cardData,
         createMethod: this.cardCreateMethod,
         type: this.cardType,
       };
-      const { href } = this.$router.resolve({
-        name: "CardPreview",
-        params: {
-          cardId: 1,
-          viewType: "frame-view",
-        },
-        query: {
-          t: Date.now(),
-        },
-      });
-      this.cardDialogPreviewUrl = href;
-      this.dialogIsShow = true;
+      this.viewType = "view";
+      this.$refs.CardPreviewDialog.open();
     },
     // save
     async toSave(datas) {
-      if (!this.cardName) {
-        const res = await this.$prompt("请输入题卡名称", "提示", {
-          type: "warning",
-          showInput: true,
-          inputPlaceholder: "请输入题卡名称",
-          inputValue: this.cardName,
-          inputValidator: (val) => {
-            if (!val) return "请输入题卡名称！";
-            if (val.length > 50) return "题卡名称不得超过50个字符！";
-            return true;
-          },
-        }).catch(() => {});
-        if (!res || res.action !== "confirm") {
-          this.$refs.CardDesign.unloading();
-          return;
-        }
-        this.cardName = res.value;
-      }
-
       let cardInfo = this.getCardInfo(datas);
       cardInfo.status = "STAGE";
       const result = await saveCard(cardInfo, this.getRequestConfig()).catch(
         () => {}
       );
-
-      this.$refs.CardDesign.unloading();
       if (!result) return;
-
       this.cardId = result;
       this.$ls.set("cardId", this.cardId);
-      this.$message.success("保存成功！");
-      return this.cardId;
     },
     async toSubmit(cardData) {
       const res = await this.$prompt("确定要提交当前题卡吗?", "提示", {
@@ -308,52 +249,39 @@ export default {
       this.cardName = res.value;
 
       this.$refs.CardDesign.loading();
-      window.cardData = {
+      this.cardData = {
         ...cardData,
         createMethod: this.cardCreateMethod,
         type: this.cardType,
       };
-      const { href } = this.$router.resolve({
-        name: "CardPreview",
-        params: {
-          cardId: 1,
-          viewType: "frame",
-        },
-        query: {
-          t: Date.now(),
-        },
-      });
-      this.cardPreviewUrl = href;
+      this.viewType = "print";
+      this.$refs.CardPreviewDialog.open();
     },
-    registWindowSubmit() {
-      window.submitCardTemp = async (htmlContent, model) => {
-        if (!htmlContent || !model) {
-          this.$refs.CardDesign.unloading();
-          window.cardData = null;
-          this.cardPreviewUrl = "";
-          this.$message.error("提交失败，请重新尝试！");
-          return;
-        }
-        this.cardPreviewUrl = "";
-        const datas = this.$refs.CardDesign.getCardData(htmlContent, model);
-        const cardInfo = this.getCardInfo(datas);
-        cardInfo.status = "SUBMIT";
-        const result = await saveCard(cardInfo, this.getRequestConfig()).catch(
-          () => {}
-        );
+    async previewConfirm(content) {
+      if (!content) {
         this.$refs.CardDesign.unloading();
-        window.cardData = null;
-        if (result) {
-          this.cardName = "";
-          this.cardId = result;
-          this.$ls.set("cardId", this.cardId);
-          this.canSave = false;
-          this.$message.success("提交成功！");
-          this.goback();
-        } else {
-          this.$message.error("提交失败，请重新尝试！");
-        }
-      };
+        this.cardData = null;
+        this.$message.error("错误：预览，提交失败，请重新尝试！");
+        return;
+      }
+      const { htmlContent, model } = content;
+      const datas = this.$refs.CardDesign.getCardData(htmlContent, model);
+      const cardInfo = this.getCardInfo(datas);
+      cardInfo.status = "SUBMIT";
+
+      const result = await saveCard(cardInfo, this.getRequestConfig()).catch(
+        () => {}
+      );
+      this.$refs.CardDesign.unloading();
+      if (result) {
+        this.cardName = "";
+        this.cardId = result;
+        this.$ls.set("cardId", this.cardId);
+        this.$message.success("提交成功！");
+        this.goback();
+      } else {
+        this.$message.error("提交失败，请重新尝试！");
+      }
     },
     toExit() {
       this.$confirm(
@@ -379,8 +307,6 @@ export default {
   beforeDestroy() {
     this.$ls.remove("cardId");
     this.$ls.remove("prepareTcPCard");
-    window.removeEventListener("resize", this.initFrameStyle);
-    delete window.submitCardTemp;
   },
 };
 </script>

src/modules/card/views/CardPreview.vue

@@ -23,12 +23,27 @@ const JsBarcode = require("jsbarcode");
 export default {
   name: "card-preview",
   components: { CardView, CardFreeView },
+  props: {
+    isDialog: {
+      type: Boolean,
+      default: false,
+    },
+    viewType: {
+      type: String,
+      default: "view",
+    },
+    cardData: {
+      type: Object,
+      default: null,
+    },
+    cardId: {
+      type: String,
+      default: null,
+    },
+  },
   data() {
     return {
-      viewType: this.$route.params.viewType,
       isPrint: "",
-      isFrame: "",
-      cardId: this.$route.params.cardId,
       cardCreateMethod: "STANDARD",
       cardType: "CUSTOM",
       cardConfig: {},
@@ -51,21 +66,17 @@ export default {
     },
   },
   mounted() {
-    this.isPrint = this.viewType === "frame";
-    this.isFrame = this.viewType === "frame" || this.viewType === "frame-view";
+    this.isPrint = this.viewType !== "view";
 
-    if (this.isFrame) {
-      this.initFrame();
+    if (this.cardData) {
+      this.initFromData();
     } else {
-      this.init();
+      this.initFromApi();
     }
   },
   methods: {
-    initFrame() {
-      const cardData = window.parent.cardData;
-      if (!cardData) return;
-
-      const { cardConfig, pages, createMethod, type } = deepCopy(cardData);
+    initFromData() {
+      let { cardConfig, pages, createMethod, type } = deepCopy(this.cardData);
       this.cardCreateMethod = createMethod;
       this.cardType = type;
 
@@ -96,26 +107,28 @@ export default {
       this.cardConfig = cardConfig;
       this.pages = this.appendFieldInfo(pages, fieldInfos);
 
-      if (this.viewType !== "frame") return;
+      if (this.viewType === "view") return;
+
       this.$nextTick(() => {
-        const cardContentTemp = this.$refs.CardView.getPreviewTemp(
-          this.$el.outerHTML
-        );
         try {
-          const model = this.$refs.CardView.getPageModel(cardData);
-          window.parent &&
-            window.parent.submitCardTemp &&
-            window.parent.submitCardTemp(cardContentTemp, model);
+          const htmlContent = this.$refs.CardView.getPreviewTemp(
+            this.$el.outerHTML
+          );
+          const model = this.$refs.CardView.getPageModel(this.cardData);
+          this.$emit("confirm", { htmlContent, model });
         } catch (error) {
           console.dir(error);
-          window.parent &&
-            window.parent.submitCardTemp &&
-            window.parent.submitCardTemp("", "");
+          this.$emit("confirm", null);
         }
       });
     },
-    async init() {
-      const detData = await cardDetail(this.cardId);
+    async initFromApi() {
+      const cardId = this.cardId || this.$route.params.cardId;
+      if (!cardId) {
+        this.$message.error("题卡id丢失！");
+        return;
+      }
+      const detData = await cardDetail(cardId);
       this.cardCreateMethod = detData.createMethod;
       this.cardType = detData.type;
 
@@ -142,7 +155,7 @@ export default {
     initHtmlTemp(htmlTemp) {
       const iframeDom = document.createElement("iframe");
       document.getElementById("preview-frame").appendChild(iframeDom);
-      const wwidth = window.innerWidth - 10;
+      const wwidth = window.innerWidth;
       const wheight = window.innerHeight - 10;
       iframeDom.style.cssText = `width: ${wwidth}px;height: ${wheight}px;border:none;outline:none;`;
       const iframeDoc = iframeDom.contentDocument;

src/modules/card/views/CardRulePreview.vue

@@ -19,6 +19,12 @@ const JsBarcode = require("jsbarcode");
 export default {
   name: "card-rule-preview",
   components: { CardView },
+  props: {
+    ruleId: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       cardRuleId: this.$route.params.cardRuleId,
@@ -32,7 +38,7 @@ export default {
     },
   },
   mounted() {
-    if (!this.cardRuleId) {
+    if (!this.cardRuleId && !this.ruleId) {
       this.$message.error("题卡规则id缺失！");
       return;
     }
@@ -40,7 +46,7 @@ export default {
   },
   methods: {
     async init() {
-      const data = await cardConfigInfos(this.cardRuleId);
+      const data = await cardConfigInfos(this.ruleId || this.cardRuleId);
       if (!data) {
         this.$message.error("找不到题卡规则！");
         return;
@@ -56,7 +62,7 @@ export default {
         },
       };
       config.fillNumber = data.examNumberDigit;
-      config.aOrB = true; // 默认开启A/B卷型
+      config.aOrB = false; // 默认关闭A/B卷型
       config.requiredFields = JSON.parse(config.requiredFields);
       config.extendFields = JSON.parse(config.extendFields);
       config.cardTitle = config.titleRule;

src/modules/exam/components/ApplyContent.vue

@@ -529,6 +529,11 @@
     ></select-user-dialog>
     <!-- ModifyCard -->
     <modify-card ref="ModifyCard" @modified="cardModified"></modify-card>
+    <!-- card-preview-dialog -->
+    <card-preview-dialog
+      ref="CardPreviewDialog"
+      :card-id="curAttachment.cardId"
+    ></card-preview-dialog>
   </div>
 </template>
 
@@ -545,6 +550,7 @@ import { attachmentPreview } from "../../login/api";
 import SimpleImagePreview from "@/components/SimpleImagePreview";
 import SelectUserDialog from "../../base/components/SelectUserDialog";
 import ModifyCard from "../../card/components/ModifyCard";
+import CardPreviewDialog from "../../card/components/CardPreviewDialog.vue";
 import { TASK_AUDIT_RESULT, COMMON_CARD_RULE_ID } from "@/constants/enumerate";
 import {
   taskFlowDetail,
@@ -594,6 +600,7 @@ export default {
     SimpleImagePreview,
     SelectUserDialog,
     ModifyCard,
+    CardPreviewDialog,
   },
   props: {
     examTask: {
@@ -952,16 +959,8 @@ export default {
       this.paperConfirmAttachments.splice(index, 1);
     },
     toViewCard(attachment) {
-      this.addPreviewLog(attachment, "card");
-      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/ModifyTaskPaper.vue

@@ -260,12 +260,18 @@
     ></upload-paper-dialog>
     <!-- ModifyCard -->
     <modify-card ref="ModifyCard" @modified="cardModified"></modify-card>
+    <!-- card-preview-dialog -->
+    <card-preview-dialog
+      ref="CardPreviewDialog"
+      :card-id="curAttachment.cardId"
+    ></card-preview-dialog>
   </div>
 </template>
 
 <script>
 import UploadPaperDialog from "./UploadPaperDialog";
 import ModifyCard from "../../card/components/ModifyCard";
+import CardPreviewDialog from "../../card/components/CardPreviewDialog.vue";
 import { taskApplyDetail, taskPaperApplyEdit, cardForSelectList } from "../api";
 import { attachmentPreview } from "../../login/api";
 import { COMMON_CARD_RULE_ID } from "@/constants/enumerate";
@@ -292,7 +298,7 @@ const initTaskApply = {
 
 export default {
   name: "modify-task-paper",
-  components: { UploadPaperDialog, ModifyCard },
+  components: { UploadPaperDialog, ModifyCard, CardPreviewDialog },
   props: {
     instance: {
       type: Object,
@@ -457,15 +463,8 @@ export default {
       window.open(data.url);
     },
     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 };

vue.config.js

@@ -21,6 +21,7 @@ module.exports = defineConfig({
       overlay: false,
     },
   },
+  productionSourceMap: false,
   configureWebpack: {
     output: {
       filename: `js/[name].${v}.${timestamp}.js`,