feat: 题卡8K页面支持

card/assets/styles/card-design.scss

@@ -242,13 +242,20 @@
   }
 
   .design-back {
-    line-height: 30px;
-    font-size: 16px;
-    color: #fff;
+    height: 32px;
+    padding: 5px 10px;
+    line-height: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #ddd;
     cursor: pointer;
 
     &:hover {
       color: $--color-danger;
+      border-color: $--color-danger;
+      background-color: #ffefed;
     }
   }
 

card/assets/styles/card-preview.scss

@@ -98,12 +98,6 @@
   &-A3 {
     width: 1586px;
     height: 1122px;
-
-    .page-main {
-      &-inner {
-        padding: 60px 80px;
-      }
-    }
   }
   &-A4 {
     width: 793px;
@@ -115,6 +109,11 @@
       }
     }
   }
+  &-8K {
+    // w:370mm,h:255mm
+    width: 1399px;
+    height: 964px;
+  }
 
   &-less {
     .page-number-rect {
@@ -131,7 +130,7 @@
   height: 100%;
   top: 0;
   left: 0;
-  padding: 60px 80px 86px;
+  padding: 60px 80px;
   z-index: 9;
   font-size: 0;
 }
@@ -1610,7 +1609,7 @@
     }
   }
   .para-std {
-    bottom: 150px;
+    bottom: 130px;
     top: auto;
     left: 0;
   }

card/assets/styles/card-temp.css

@@ -82,9 +82,6 @@
   width: 1586px;
   height: 1122px;
 }
-.page-box-A3 .page-main-inner {
-  padding: 60px 80px;
-}
 .page-box-A4 {
   width: 793px;
   height: 1122px;
@@ -92,6 +89,10 @@
 .page-box-A4 .page-main-inner {
   padding: 60px 45px;
 }
+.page-box-8K {
+  width: 1399px;
+  height: 964px;
+}
 .page-box-less .page-number-rect {
   display: none;
 }
@@ -102,7 +103,7 @@
   height: 100%;
   top: 0;
   left: 0;
-  padding: 60px 80px 86px;
+  padding: 60px 80px;
   z-index: 9;
   font-size: 0;
 }
@@ -1352,7 +1353,7 @@
   padding-top: 30px;
 }
 .elem-undertaking .para-std {
-  bottom: 150px;
+  bottom: 130px;
   top: auto;
   left: 0;
 }

card/components/CardDesign.vue

@@ -6,8 +6,7 @@
         请将答题卡里设计的客观题的题目数量和选项个数与试卷题目保持一致
       </div>
       <div class="design-back" @click="toExit">
-        <i class="el-icon-d-arrow-left" title="退出"></i>
-        返回
+        返回<i class="el-icon-arrow-right"></i>
       </div>
     </div>
 
@@ -192,6 +191,7 @@
             <elem-undertaking
               v-if="cardConfig.undertakingEnable && pageNo === pages.length - 1"
               :content="cardConfig.undertakingBody"
+              :page-size="cardConfig.pageSize"
             ></elem-undertaking>
             <course-barcode
               v-if="pageNo % 2 === 0"

card/components/CardView.vue

@@ -80,6 +80,7 @@
           <elem-undertaking
             v-if="cardConfig.undertakingEnable && pageNo === pages.length - 1"
             :content="cardConfig.undertakingBody"
+            :page-size="cardConfig.pageSize"
           ></elem-undertaking>
           <course-barcode
             v-if="pageNo % 2 === 0"

card/components/PagePropEdit.vue

@@ -5,7 +5,7 @@
         <el-select
           v-model="form.pageSize"
           placeholder="请选择"
-          :disabled="pageSizeOptions.length < 2"
+          disabled
           @change="modifyPageSize"
         >
           <el-option
@@ -57,6 +57,7 @@
 import { mapState, mapMutations, mapActions } from "vuex";
 import { objAssign } from "../plugins/utils";
 import PageStructDialog from "./PageStructDialog.vue";
+import { CARD_SIZE_TYPE } from "@/constants/enumerate";
 
 const COLUMN_OPTIONS = [
   {
@@ -70,21 +71,21 @@ const COLUMN_OPTIONS = [
     value: 2,
     title: "二栏",
     label: "two",
-    sizeValid: ["A3", "A4"],
+    sizeValid: ["A3", "A4", "8K"],
     disabled: false,
   },
   {
     value: 3,
     title: "三栏",
     label: "three",
-    sizeValid: ["A3"],
+    sizeValid: ["A3", "8K"],
     disabled: false,
   },
   {
     value: 4,
     title: "四栏",
     label: "four",
-    sizeValid: ["A3"],
+    sizeValid: ["A3", "8K"],
     disabled: false,
   },
 ];
@@ -95,8 +96,7 @@ export default {
   data() {
     return {
       columnOptions: [],
-      pageSizeOptions: ["A3"],
-      // pageSizeOptions: ["A3", "A4"],
+      pageSizeOptions: CARD_SIZE_TYPE,
       form: {
         pageSize: "A3",
         columnNumber: 2,
@@ -119,7 +119,7 @@ export default {
         this.columnOptions = COLUMN_OPTIONS.filter((item) =>
           item.sizeValid.includes(this.form.pageSize)
         );
-        if (this.form.pageSize === "A3") {
+        if (this.form.pageSize === "A3" || this.form.pageSize === "8K") {
           this.columnOptions[2].disabled = val.examNumberStyle === "fill";
         }
       },

card/elementModel.js

@@ -196,6 +196,7 @@ const getNewPage = (pageNo, { pageSize, columnNumber }) => {
   npage.pageSize = pageSize;
   npage.columnNumber = columnNumber;
   if (
+    (pageSize === "8K" && columnNumber === 4) ||
     (pageSize === "A3" && columnNumber === 4) ||
     (pageSize === "A4" && columnNumber === 2)
   ) {

card/elements/card-head/CardHead.vue

@@ -155,6 +155,7 @@ export default {
     },
     narrowCard() {
       return (
+        (this.data.pageSize === "8K" && this.data.columnNumber > 2) ||
         (this.data.pageSize === "A3" && this.data.columnNumber > 2) ||
         (this.data.pageSize === "A4" && this.data.columnNumber === 2)
       );

card/elements/card-head/cardHeadSpin/HeadDynamic.vue

@@ -137,6 +137,7 @@ export default {
       const { examNumberStyle, columnNumber, pageSize } = this.data;
       if (
         examNumberStyle === "FILL" ||
+        (pageSize === "8K" && columnNumber !== 2) ||
         (pageSize === "A3" && columnNumber !== 2) ||
         (pageSize === "A4" && columnNumber !== 1)
       )

card/elements/fill-question/model.js

@@ -47,6 +47,12 @@ const getOptionStructInfo = (pageSize, columnNumber, model) => {
   // 不同栏数，不同选项个数，每一行对应的组数
   // 以一行4题，每题5选项为标准展示效果
   const numberPerChildren = {
+    "8K": {
+      1: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      2: [0, 0, 6, 5, 4, 3, 3, 2, 2, 2, 2, 2, 1],
+      3: [0, 0, 4, 3, 3, 2, 2, 1],
+      4: [0, 0, 3, 3, 2, 1],
+    },
     A3: {
       2: [0, 0, 7, 6, 5, 4, 3, 3, 3, 2, 2, 2, 2, 1],
       3: [0, 0, 5, 4, 3, 2, 2, 2, 1],
@@ -58,6 +64,11 @@ const getOptionStructInfo = (pageSize, columnNumber, model) => {
     },
   };
   const groupGapSet = {
+    "8K": {
+      2: [0, 0, 35, 30, 38, 70, 45, 90, 70, 60, 50, 20],
+      3: [0, 0, 32, 35, 16, 60, 40, 30],
+      4: [0, 0, 33, 27, 40, 30],
+    },
     A3: {
       2: [0, 0, 33, 28, 27, 40, 40, 40, 27, 40, 40],
       3: [0, 0, 27, 27, 40, 40, 40, 40, 30],

card/elements/page/EditPage.vue

@@ -57,25 +57,25 @@ const COLUMN_OPTIONS = [
     value: 1,
     title: "一栏",
     label: "one",
-    sizeValid: ["A3", "A4"],
+    sizeValid: ["A3", "A4", "8K"],
   },
   {
     value: 2,
     title: "二栏",
     label: "two",
-    sizeValid: ["A3", "A4"],
+    sizeValid: ["A3", "A4", "8K"],
   },
   {
     value: 3,
     title: "三栏",
     label: "three",
-    sizeValid: ["A3"],
+    sizeValid: ["A3", "8K"],
   },
   {
     value: 4,
     title: "四栏",
     label: "four",
-    sizeValid: ["A3"],
+    sizeValid: ["A3", "8K"],
   },
 ];
 
@@ -98,7 +98,7 @@ export default {
   data() {
     return {
       columnOptions: [],
-      pageSizeOptions: ["A3", "A4"],
+      pageSizeOptions: ["A3", "A4", "8K"],
       form: {
         pageSize: "A3",
         columnNumber: 2,

card/elements/page/model.js

@@ -62,6 +62,7 @@ const getModel = (datas = {}) => {
   npage.id = getElementId();
   const { pageSize, columnNumber } = npage;
   if (
+    (pageSize === "8K" && columnNumber === 4) ||
     (pageSize === "A3" && columnNumber === 4) ||
     (pageSize === "A4" && columnNumber === 2)
   ) {

card/elements/undertaking/EditUndertaking.vue

@@ -25,7 +25,7 @@
           :rows="4"
           placeholder="请输入内容"
           v-model="modalForm.undertakingBody"
-          maxlength="100"
+          maxlength="90"
           show-word-limit
           class="ut-textarea"
           @input="contentChange"

card/elements/undertaking/ElemUndertaking.vue

@@ -19,14 +19,22 @@ export default {
       type: String,
       default: "",
     },
+    pageSize: {
+      type: String,
+      default: "A3",
+    },
   },
   data() {
     return {};
   },
   computed: {
     contentList() {
+      const pageSizeChartCountConfig = {
+        A3: 65,
+        "8K": 54,
+      };
       let len = this.content.length;
-      const maxParaCharCount = 65;
+      const maxParaCharCount = pageSizeChartCountConfig[this.pageSize];
       const count = Math.ceil(len / maxParaCharCount);
       let conts = [];
       for (let i = 0; i < count; i++) {

card/modules/free/components/PagePropEdit.vue

@@ -32,31 +32,32 @@
 import { mapState, mapMutations, mapActions } from "vuex";
 import { objAssign } from "../../../plugins/utils";
 import { getModel as getPageModel } from "../../../elements/page/model";
+import { CARD_SIZE_TYPE } from "@/constants/enumerate";
 
 const COLUMN_OPTIONS = [
   {
     value: 1,
     title: "一栏",
     label: "one",
-    sizeValid: ["A3", "A4"],
+    sizeValid: ["A3", "A4", "8K"],
   },
   {
     value: 2,
     title: "二栏",
     label: "two",
-    sizeValid: ["A3", "A4"],
+    sizeValid: ["A3", "A4", "8K"],
   },
   {
     value: 3,
     title: "三栏",
     label: "three",
-    sizeValid: ["A3"],
+    sizeValid: ["A3", "8K"],
   },
   {
     value: 4,
     title: "四栏",
     label: "four",
-    sizeValid: ["A3"],
+    sizeValid: ["A3", "8K"],
   },
 ];
 
@@ -65,8 +66,7 @@ export default {
   data() {
     return {
       columnOptions: [],
-      pageSizeOptions: ["A3"],
-      // pageSizeOptions: ["A3", "A4"],
+      pageSizeOptions: CARD_SIZE_TYPE,
       form: {
         pageSize: "A3",
         columnNumber: 2,

src/constants/enumerate.js

@@ -173,6 +173,8 @@ export const EXAM_NUMBER_STYLE = {
   PASTE: "粘贴条码",
   FILL: "学号填涂",
 };
+export const CARD_SIZE_TYPE = ["A3", "8K"];
+
 // 试卷类型方式
 export const PAPER_TYPE = {
   PRINT: "印刷",

src/modules/admin/components/school/SchoolSetPaper.vue

@@ -13,6 +13,13 @@
           }}</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
+      <el-form-item prop="cardSize" label="答题卡规格：">
+        <el-radio-group v-model="modalForm.cardSize">
+          <el-radio v-for="item in CARD_SIZE_TYPE" :key="item" :label="item">{{
+            item
+          }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" :loading="loading" @click="confirm"
           >保存</el-button
@@ -28,6 +35,7 @@ import {
   schoolSetPaperInfo,
   schoolSetPaperUpdate,
 } from "../../api";
+import { CARD_SIZE_TYPE } from "@/constants/enumerate";
 
 export default {
   name: "school-set-paper",
@@ -44,8 +52,10 @@ export default {
       loading: false,
       modalForm: {
         pdfSize: [],
+        cardSize: "",
       },
       sysPdfSize: [],
+      CARD_SIZE_TYPE,
       paperInfo: [],
       rules: {
         pdfSize: [
@@ -61,6 +71,13 @@ export default {
             trigger: "change",
           },
         ],
+        cardSize: [
+          {
+            required: true,
+            message: "请选择答题卡规格",
+            trigger: "change",
+          },
+        ],
       },
     };
   },
@@ -73,16 +90,18 @@ export default {
       this.sysPdfSize = paperData.result[0].value;
       const data = await schoolSetPaperInfo(this.school.id);
       this.paperInfo = data.result;
-      this.modalForm.pdfSize = data.result[0].value;
+      this.modalForm.pdfSize = data.result[0]?.value || [];
+      this.modalForm.cardSize = data.result[1]?.value || "";
     },
     async confirm() {
-      const valid = await this.$refs.modalFormComp.validate();
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;
 
       if (this.loading) return;
       this.loading = true;
 
       this.paperInfo[0].value = this.modalForm.pdfSize;
+      this.paperInfo[1].value = this.modalForm.cardSize;
       let datas = { param: this.paperInfo, schoolId: this.school.id };
       const res = await schoolSetPaperUpdate(datas).catch(() => {});
       this.loading = false;

src/modules/base/components/ModifyCardRuleUndertaking.vue

@@ -25,7 +25,7 @@
           :rows="4"
           placeholder="请输入内容"
           v-model="modalForm.undertakingBody"
-          maxlength="100"
+          maxlength="90"
           show-word-limit
           class="ut-textarea"
           @input="contentChange"

src/modules/card/components/CardBuildDialog.vue

@@ -104,6 +104,7 @@ export default {
       paperInfo: {},
       answers: {},
       cachePages: [],
+      sysCardSize: "",
     };
   },
   computed: {
@@ -125,6 +126,10 @@ export default {
     ...mapActions("card", ["resetTopicSeries", "rebuildPages"]),
     async initData() {
       this.loading = true;
+      this.sysCardSize = this.$ls.get("schoolInfo", {
+        cardSize: this.sysCardSize,
+      }).cardSize;
+
       this.initState();
 
       // 题卡规则
@@ -169,7 +174,7 @@ export default {
         const paperSimpleStruct = getPaperJsonSimpleStructInfo(paperJson);
         const elementTypePreSetInfo = {
           FILL_QUESTION: {
-            pageSize: "A3",
+            pageSize: this.sysCardSize,
             columnNumber: 2,
           },
         };
@@ -288,7 +293,7 @@ export default {
       let config = {
         ...data,
         ...{
-          pageSize: "A3",
+          pageSize: this.sysCardSize,
           columnNumber: 2,
           columnGap: 20,
           showForbidArea: false,

src/modules/card/views/CardEdit.vue

@@ -59,6 +59,7 @@ export default {
       canSave: false,
       dataReady: false,
       lastStageCardContent: "",
+      sysCardSize: "",
       // card-preview-dialog
       viewType: "view",
       cardData: null,
@@ -81,6 +82,7 @@ export default {
     this.cardCreateMethod = this.prepareTcPCard.createMethod || "STANDARD";
     this.cardId = this.cardId || this.prepareTcPCard.id;
     this.cardType = this.prepareTcPCard.type || "CUSTOM";
+    this.sysCardSize = this.$ls.get("schoolInfo", { cardSize: "A3" }).cardSize;
     this.initCard();
     this.openAutoSave();
   },
@@ -170,7 +172,7 @@ export default {
         let config = {
           ...data,
           ...{
-            pageSize: "A3",
+            pageSize: this.sysCardSize,
             columnNumber: 2,
             columnGap: 20,
             showForbidArea: false,
@@ -205,7 +207,7 @@ export default {
         const examRule = await examRuleDetail();
         const extendFields = examRule.extendFields || "[]";
         let config = {
-          pageSize: "A3",
+          pageSize: this.sysCardSize,
           columnNumber: 2,
           columnGap: 20,
           showForbidArea: false,

src/modules/card/views/CardRulePreview.vue

@@ -30,6 +30,7 @@ export default {
       cardRuleId: this.$route.params.cardRuleId,
       cardConfig: {},
       pages: [],
+      sysCardSize: "",
     };
   },
   computed: {
@@ -42,6 +43,10 @@ export default {
       this.$message.error("题卡规则id缺失！");
       return;
     }
+
+    this.sysCardSize = this.$ls.get("schoolInfo", {
+      cardSize: this.sysCardSize,
+    }).cardSize;
     this.init();
   },
   methods: {
@@ -54,7 +59,7 @@ export default {
       let config = {
         ...data,
         ...{
-          pageSize: "A3",
+          pageSize: this.sysCardSize,
           columnNumber: 2,
           columnGap: 20,
           showForbidArea: false,
@@ -69,7 +74,7 @@ export default {
       this.cardConfig = config;
       let cardHeadElement = getCardHeadModel(this.cardConfig);
       cardHeadElement.fieldInfos = this.fetchFieldInfos(config, {});
-      let page = getNewPage(0, { pageSize: "A3", columnNumber: 2 });
+      let page = getNewPage(0, { pageSize: this.sysCardSize, columnNumber: 2 });
       page.columns[0].elements.push(cardHeadElement);
       this.pages.push(page);
     },

src/modules/login/views/Login.vue

@@ -216,6 +216,8 @@ export default {
       this.$parent.schoolInfo = data;
       this.schoolInfo = data;
       this.loginModel.schoolCode = data.schoolCode;
+      // 测试
+      if (!data.cardSize) data.cardSize = "8K";
       this.$ls.set("schoolInfo", data);
     },
     async submit(name) {