md

src/modules/card/assets/styles/card-preview.scss

@@ -63,11 +63,17 @@
     &.page-box-0 {
       .page-main-inner {
         padding: 60px 40px 86px 160px;
+        &.page-main-noside {
+          padding: 60px 60px 86px;
+        }
       }
     }
     &.page-box-1 {
       .page-main-inner {
         padding: 60px 160px 86px 40px;
+        &.page-main-noside {
+          padding: 60px 60px 86px;
+        }
       }
       .page-main-side {
         right: 40px;
@@ -170,11 +176,17 @@
     &.page-box-0 {
       .page-main-inner {
         padding: 40px 20px 66px 130px;
+        &.page-main-noside {
+          padding: 40px 40px 66px;
+        }
       }
     }
     &.page-box-1 {
       .page-main-inner {
         padding: 40px 130px 66px 20px;
+        &.page-main-noside {
+          padding: 40px 40px 66px;
+        }
       }
       .page-main-side {
         right: 20px;
@@ -463,7 +475,7 @@
     position: absolute;
     width: 100%;
     text-align: center;
-    bottom: -30px;
+    bottom: -26px;
   }
 }
 
@@ -698,48 +710,6 @@
           &:last-child {
             margin-right: 0;
           }
-          // wkhtmltopdf 工具无法渲染如下样式：
-          // &:nth-of-type(1) {
-          //   position: relative;
-          //   &::before {
-          //     content: "";
-          //     display: block;
-          //     position: absolute;
-          //     left: 30%;
-          //     top: 1px;
-          //     height: 5px;
-          //     width: 11px;
-          //     transform: rotate(-45deg);
-          //     border-left: 1px solid #000;
-          //     border-bottom: 1px solid #000;
-          //   }
-          // }
-          // &:nth-of-type(2) {
-          //   position: relative;
-          //   &::before {
-          //     content: "";
-          //     display: block;
-          //     position: absolute;
-          //     left: 7px;
-          //     top: 5px;
-          //     width: 11px;
-          //     transform: rotate(-45deg);
-          //     transform-origin: center center;
-          //     border-bottom: 1px solid #000;
-          //   }
-          //   &::after {
-          //     content: "";
-          //     display: block;
-          //     position: absolute;
-          //     left: 8px;
-          //     top: 5px;
-          //     width: 11px;
-          //     transform: rotate(45deg);
-          //     transform-origin: center center;
-          //     border-bottom: 1px solid #000;
-          //   }
-          // }
-
           &:nth-of-type(3) {
             &::before {
               content: "";
@@ -767,6 +737,91 @@
     }
   }
 }
+.card-head-model-two {
+  .card-head {
+    &-info {
+      padding-bottom: 15px;
+      text-align: center;
+      .info-item {
+        height: 30px;
+        line-height: 30px;
+        position: relative;
+        overflow: hidden;
+        width: 26%;
+        display: inline-block;
+        vertical-align: text-bottom;
+        margin: 0 10px;
+      }
+    }
+    &-body {
+      border: 1px solid #000;
+      position: relative;
+    }
+    &-notice {
+      position: relative;
+      min-height: 200px;
+      width: 50%;
+      left: 50%;
+      border: none;
+      border-left: 1px solid #000;
+    }
+    &-stdno {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 50%;
+      height: 65%;
+      z-index: 2;
+      border-bottom: 1px solid #000;
+      display: table;
+
+      .stdno-empty {
+        height: 100%;
+        text-align: center;
+        line-height: 100%;
+        font-size: 26px;
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+    &-dynamic {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 50%;
+      height: 35%;
+      z-index: 2;
+      border: none;
+      padding: 10px;
+      .head-dynamic-content {
+        height: 100%;
+        display: table;
+        width: 100%;
+        text-align: center;
+
+        > * {
+          display: table-cell;
+          vertical-align: middle;
+        }
+      }
+      .dynamic-miss {
+        &-title {
+          width: 50%;
+          & > h5 {
+            font-size: 16px;
+            font-weight: 600;
+          }
+        }
+      }
+      .head-dynamic-rect {
+        display: inline-block;
+        width: 30px;
+        height: 15px;
+        border: 1px solid #000;
+      }
+    }
+  }
+}
 // elem-topic-head
 .elem-topic-head {
   text-align: center;
@@ -931,6 +986,7 @@
 // elem-fill-question
 .elem-fill-question {
   white-space: normal;
+  line-height: 1;
 
   // 客观题强调标记
   .fill-question-sign {

src/modules/card/components/CardDesign.vue

@@ -96,7 +96,14 @@
             ></div>
           </div>
           <!-- inner edit area -->
-          <div class="page-main-inner">
+          <div
+            :class="[
+              'page-main-inner',
+              {
+                'page-main-noside': !curPage.sides,
+              },
+            ]"
+          >
             <div
               :class="['page-main', `page-main-${curPage.columns.length}`]"
               :style="{ margin: `0 -${curPage.columnGap / 2}px` }"
@@ -138,7 +145,7 @@
             </div>
           </div>
           <!-- side edit erea -->
-          <div class="page-main-side">
+          <div v-if="curPage.sides" class="page-main-side">
             <free-element-preview
               v-for="element in curPage.sides"
               :key="element.id"

src/modules/card/components/CardView.vue

@@ -27,7 +27,14 @@
           ></div>
         </div>
         <!-- inner edit area -->
-        <div class="page-main-inner">
+        <div
+          :class="[
+            'page-main-inner',
+            {
+              'page-main-noside': !page.sides,
+            },
+          ]"
+        >
           <div
             :class="['page-main', `page-main-${page.columns.length}`]"
             :style="{ margin: `0 -${page.columnGap / 2}px` }"
@@ -68,7 +75,7 @@
           </div>
         </div>
         <!-- side edit erea -->
-        <div class="page-main-side">
+        <div v-if="page.sides" class="page-main-side">
           <free-element-preview
             v-for="element in page.sides"
             :key="element.id"

src/modules/card/datas/model-two/8K.json

@@ -0,0 +1,8 @@
+{
+  "elements": [
+    {
+      "type": "CARD_HEAD",
+      "modelType": "MODEL_TWO"
+    }
+  ]
+}

src/modules/card/datas/model-two/A3.json

@@ -0,0 +1,8 @@
+{
+  "elements": [
+    {
+      "type": "CARD_HEAD",
+      "modelType": "MODEL_TWO"
+    }
+  ]
+}

src/modules/card/elements/card-head/CardHead.vue

@@ -1,48 +1,16 @@
 <template>
   <div :class="classes">
-    <div class="card-head-title">
-      <h1 v-for="(t, tindex) in titles" :key="tindex">
-        {{ t }}
-      </h1>
-    </div>
-    <div class="card-head-info">
-      <div v-for="(info, index) in fields" :key="index" class="info-item">
-        <span>{{ info }}</span>
-        <span>：</span>
-        <span></span>
-      </div>
-    </div>
-
-    <div class="card-head-notice">
-      <h4>注意事项：</h4>
-      <div
-        v-for="(cont, index) in notices"
-        :key="index"
-        class="card-head-notice-cont"
-      >
-        <span>{{ index + 1 }}、</span>
-        <span>{{ cont }}</span>
-      </div>
-    </div>
-    <div class="card-head-dynamic">
-      <p><span>正确填涂：</span><i></i></p>
-      <p>
-        <span>错误填涂：</span>
-        <i>√</i>
-        <i>×</i>
-        <i></i>
-        <i></i>
-      </p>
-    </div>
+    <component :is="compName" :data="data"></component>
   </div>
 </template>
 
 <script>
-/**
- * TODO:默认MODEL_ONE,后续扩展其他类型
- */
+import CardHeadModelOne from "./CardHeadModelOne.vue";
+import CardHeadModelTwo from "./CardHeadModelTwo.vue";
+
 export default {
   name: "CardHead",
+  components: { CardHeadModelOne, CardHeadModelTwo },
   props: {
     data: {
       type: Object,
@@ -52,19 +20,16 @@ export default {
     },
   },
   data() {
-    return {
-      fields: ["招生单位代码及名称", "考试科目代码及名称"],
-    };
+    return {};
   },
   computed: {
-    classes() {
-      return ["page-element", "card-head"];
+    compName() {
+      let name = this.data.modelType.toLowerCase().replace("_", "-");
+      name = "model-two";
+      return `card-head-${name}`;
     },
-    notices() {
-      return this.data.attention.split("\n") || [];
-    },
-    titles() {
-      return this.data.title.split("\n") || [];
+    classes() {
+      return ["page-element", this.compName];
     },
   },
   methods: {},

src/modules/card/elements/card-head/CardHeadModelOne.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="card-head">
+    <div class="card-head-title">
+      <h1 v-for="(t, tindex) in titles" :key="tindex">
+        {{ t }}
+      </h1>
+    </div>
+    <div class="card-head-info">
+      <div v-for="(info, index) in fields" :key="index" class="info-item">
+        <span>{{ info }}</span>
+        <span>：</span>
+        <span></span>
+      </div>
+    </div>
+
+    <div class="card-head-notice">
+      <h4>注意事项：</h4>
+      <div
+        v-for="(cont, index) in notices"
+        :key="index"
+        class="card-head-notice-cont"
+      >
+        <span>{{ index + 1 }}、</span>
+        <span>{{ cont }}</span>
+      </div>
+    </div>
+    <div class="card-head-dynamic">
+      <p><span>正确填涂：</span><i></i></p>
+      <p>
+        <span>错误填涂：</span>
+        <i>√</i>
+        <i>×</i>
+        <i></i>
+        <i></i>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardHeadModelOne",
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      fields: ["招生单位代码及名称", "考试科目代码及名称"],
+    };
+  },
+  computed: {
+    classes() {
+      return ["page-element", "card-head"];
+    },
+    notices() {
+      return this.data.attention.split("\n") || [];
+    },
+    titles() {
+      return this.data.title.split("\n") || [];
+    },
+  },
+  methods: {},
+};
+</script>

src/modules/card/elements/card-head/CardHeadModelTwo.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="card-head">
+    <div class="card-head-title">
+      <h1 v-for="(t, tindex) in titles" :key="tindex">
+        {{ t }}
+      </h1>
+    </div>
+    <div class="card-head-info">
+      <div v-for="(info, index) in fields" :key="index" class="info-item">
+        <span>{{ info }}</span>
+        <span>：</span>
+        <span></span>
+      </div>
+    </div>
+    <div class="card-head-body">
+      <div class="card-head-notice">
+        <h4>注意事项：</h4>
+        <div
+          v-for="(cont, index) in notices"
+          :key="index"
+          class="card-head-notice-cont"
+        >
+          <span>{{ index + 1 }}、</span>
+          <span>{{ cont }}</span>
+        </div>
+      </div>
+
+      <div class="card-head-stdno">
+        <div class="stdno-empty">条码粘贴区</div>
+      </div>
+      <div class="card-head-dynamic">
+        <div class="head-dynamic-content">
+          <span class="dynamic-miss-title">
+            <h5>缺考标记</h5>
+            <p>（由监考老师填涂）</p>
+          </span>
+          <span class="dynamic-miss-body"
+            ><i class="head-dynamic-rect" id="dynamic-miss-area"></i
+          ></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardHeadModelTwo",
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      fields: ["学号", "姓名", "学院"],
+    };
+  },
+  computed: {
+    classes() {
+      return ["page-element", "card-head"];
+    },
+    notices() {
+      return this.data.attention.split("\n") || [];
+    },
+    titles() {
+      return this.data.title.split("\n") || [];
+    },
+  },
+  methods: {},
+};
+</script>

src/modules/card/store/card.js

@@ -667,9 +667,13 @@ const actions = {
 
     pages.forEach((page, pindex) => {
       if (numberIsOdd(pindex + 1)) {
-        page.sides = deepCopy(state.pageDefaultElems.sideLeft);
+        page.sides =
+          state.pageDefaultElems.sideLeft &&
+          deepCopy(state.pageDefaultElems.sideLeft);
       } else {
-        page.sides = deepCopy(state.pageDefaultElems.sideRight);
+        page.sides =
+          state.pageDefaultElems.sideRight &&
+          deepCopy(state.pageDefaultElems.sideRight);
       }
     });
 

src/modules/paper/paperUtils.js

@@ -0,0 +1,43 @@
+import { isAnEmptyRichText } from "@/utils/utils";
+import { numberToUpperCase } from "@/plugins/utils";
+
+export function modifyQuestionCont(qData) {
+  const { question, number } = qData;
+  question.quesBody = appendNoToRichText(question.quesBody, `${number}、`);
+  if (question.quesOptions && question.quesOptions.length) {
+    question.quesOptions.forEach((option, optionIndex) => {
+      option.optionBody = appendNoToRichText(
+        option.optionBody,
+        `${numberToUpperCase(optionIndex + 1)}、`
+      );
+    });
+  }
+  if (question.subQuestions && question.subQuestions.length) {
+    question.subQuestions.forEach((subq, subIndex) => {
+      modifyQuestionCont({ question: subq, number: subIndex + 1 });
+    });
+  }
+}
+
+function getRichStruct(blocks) {
+  return {
+    sections: [
+      {
+        blocks: [...blocks],
+      },
+    ],
+  };
+}
+
+function appendNoToRichText(richText, noStr) {
+  const cont = {
+    type: "text",
+    value: noStr,
+  };
+  if (isAnEmptyRichText(richText)) {
+    return getRichStruct([cont]);
+  }
+
+  richText.sections[0].blocks.unshift(cont);
+  return richText;
+}