md

src/modules/card/api.js

@@ -104,6 +104,7 @@ export const cardConfigInfos = () => {
   //     "测试题卡规则1-注意事项\n测试题卡规则1-注意事项\n测试题卡规则1-注意事项",
   //   objectiveAttention: "测试题卡规则1-客观题-注意事项",
   //   subjectiveAttention: "测试题卡规则1-主观题-注意事项",
+  //   paperSize: "A3",
   //   cardTemplateId: "1",
   // });
 };

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

@@ -151,6 +151,126 @@
       }
     }
   }
+
+  &-8K {
+    width: 1399px;
+    height: 964px;
+
+    .page-main-side {
+      position: absolute;
+      top: 40px;
+      bottom: 66px;
+      width: 90px;
+      left: 20px;
+    }
+
+    &.page-box-0 {
+      .page-main-inner {
+        padding: 40px 20px 66px 130px;
+      }
+    }
+    &.page-box-1 {
+      .page-main-inner {
+        padding: 40px 130px 66px 20px;
+      }
+      .page-main-side {
+        right: 20px;
+        top: 40px;
+        left: auto;
+      }
+    }
+
+    .page-main {
+      &-1 {
+        .page-column-forbid-area {
+          &::before {
+            width: 2000px;
+            transform: rotate(34.326deg);
+          }
+          &::after {
+            width: 2000px;
+            transform: rotate(-34.326deg);
+          }
+        }
+      }
+      &-2 {
+        .page-column-forbid-area {
+          &::before {
+            transform: rotate(54.25deg);
+          }
+          &::after {
+            transform: rotate(-54.25deg);
+          }
+        }
+      }
+
+      &-3 {
+        .page-column-forbid-area {
+          &::before {
+            transform: rotate(64.01deg);
+          }
+          &::after {
+            transform: rotate(-64.01deg);
+          }
+        }
+      }
+      &-4 {
+        .page-column-forbid-area {
+          &::before {
+            transform: rotate(69.65deg);
+          }
+          &::after {
+            transform: rotate(-69.65deg);
+          }
+        }
+      }
+    }
+
+    .page-locator {
+      position: absolute;
+
+      &-top {
+        top: 20px;
+      }
+      &-bottom {
+        bottom: 20px;
+      }
+
+      &-item {
+        width: 20px;
+        border-bottom: 14px solid #000;
+
+        &:nth-of-type(1) {
+          left: 40px;
+        }
+        &:nth-of-type(2) {
+          right: 86px;
+        }
+      }
+    }
+
+    .page-number {
+      &-rect {
+        bottom: 20px;
+        left: 260px;
+      }
+      &-rect-list {
+        li {
+          width: 24px;
+          height: 16px;
+          &.rect-li-act {
+            border-bottom: 16px solid #000;
+          }
+        }
+      }
+      &-text {
+        &-cont {
+          height: 14px;
+          line-height: 14px;
+        }
+      }
+    }
+  }
 }
 .page-main-side {
   position: absolute;

src/modules/card/cardTemps.js

@@ -1,3 +1,4 @@
+// A3
 export const temp1 = {
   elements: [
     {
@@ -53,3 +54,60 @@ export const temp1 = {
     },
   ],
 };
+
+// 8K
+export const temp2 = {
+  elements: [
+    {
+      type: "CARD_HEAD",
+      modelType: "MODEL_ONE",
+    },
+  ],
+  sideLeft: [
+    {
+      type: "GUTTER",
+      direction: "left",
+      x: 60,
+      w: 40,
+    },
+    {
+      type: "FILL_FIELD",
+      fieldCountPerLine: 2,
+      w: 400,
+      h: 40,
+      y: 870,
+      x: 26,
+      fields: [
+        {
+          name: "考生编号",
+          code: "",
+        },
+        {
+          name: "姓名",
+          code: "",
+        },
+      ],
+    },
+    {
+      type: "FILL_FIELD",
+      w: 220,
+      h: 40,
+      y: 210,
+      x: 26,
+      fields: [
+        {
+          name: "考生确认签名",
+          code: "",
+        },
+      ],
+    },
+  ],
+  sideRight: [
+    {
+      type: "GUTTER",
+      direction: "right",
+      x: 0,
+      w: 30,
+    },
+  ],
+};

src/modules/card/components/CardDesign.vue

@@ -365,6 +365,7 @@ export default {
       // title:暂时未使用
       const data = {
         title: this.cardConfig.cardTitle,
+        pageSize: this.cardConfig.pageSize,
         content: model,
       };
       return data;

src/modules/card/components/PagePropEdit.vue

@@ -2,7 +2,7 @@
   <div class="page-prop-edit">
     <el-form ref="form" :model="form" label-width="70px">
       <el-form-item label="纸张规格">
-        <el-select
+        <!-- <el-select
           v-model="form.pageSize"
           placeholder="请选择"
           :disabled="pageSizeOptions.length < 2"
@@ -15,7 +15,8 @@
             :value="item"
           >
           </el-option>
-        </el-select>
+        </el-select> -->
+        {{ form.pageSize }}
       </el-form-item>
       <!-- <el-form-item label="栏位布局">
         <el-button

src/modules/card/elements/fill-question/model.js

@@ -72,6 +72,9 @@ const getFullModel = (modelProp, { pageSize, columnNumber }) => {
     A3: {
       2: 20,
     },
+    "8K": {
+      2: 18,
+    },
     A4: {
       1: 20,
     },

src/modules/card/enumerate.js

@@ -20,6 +20,8 @@ export const DIRECTION_TYPE = {
   vertical: "纵向",
 };
 
+export const PAPER_SIZE_TYPE = ["A3", "8K"];
+
 export const SHORTCUT_KEYS = [
   {
     name: "向上轻微移动",

src/modules/card/previewTemp.js

@@ -12,7 +12,7 @@ export default (domeStr) => {
         maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" "="">
         <meta name=" renderer" content="webkit|ie-comp|ie-stand" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-        <title>知学知考题卡</title>
+        <title>题库题卡</title>
 
       </head>
       <style>${resetCss}${previewCss}</style>

src/modules/card/views/CardBuild.vue

@@ -113,7 +113,7 @@ export default {
         pages: this.pages,
         paperSimpleStruct: this.paperSimpleStruct,
       });
-      const images = await this.transformImags().catch(() => {});
+      // const images = await this.transformImags().catch(() => {});
       const cardContentTemp = this.$refs.CardView.getPreviewTemp(
         this.$el.outerHTML
       );
@@ -121,7 +121,7 @@ export default {
       const datas = {
         id: this.cardId,
         content: model,
-        images,
+        pageSize: this.cardConfig.pageSize,
         htmlContent: cardContentTemp,
         formal: true,
       };

src/modules/card/views/CardEdit.vue

@@ -155,14 +155,14 @@ export default {
       const config = {
         ...res.data,
         ...{
-          pageSize: "A3",
           columnNumber: 2,
           columnGap: 20,
-          showForbidArea: true,
+          showForbidArea: false,
           showScorePan: false,
           templateInfo: JSON.parse(tempRes.data.content),
         },
       };
+      config.pageSize = config.pageSize || "A3";
       return config;
     },
     // 操作
@@ -217,8 +217,8 @@ export default {
       this.cardPreviewUrl = href;
     },
     registWindowSubmit() {
-      window.submitCardTemp = async (model, cardImages, cardContentTemp) => {
-        if (!model || !cardImages || !cardImages.length || !cardContentTemp) {
+      window.submitCardTemp = async (model, cardContentTemp) => {
+        if (!model || !cardContentTemp) {
           this.$refs.CardDesign.unloading();
           window.cardData = null;
           this.cardPreviewUrl = "";
@@ -228,8 +228,8 @@ export default {
 
         let datas = {
           content: model,
-          images: cardImages,
           htmlContent: cardContentTemp,
+          pageSize: window.cardData.cardConfig.pageSize,
         };
         datas.id = this.cardId;
         datas.formal = true;

src/modules/card/views/CardHeadEdit.vue

@@ -58,10 +58,24 @@
             clearable
           ></el-input>
         </el-form-item>
+        <el-form-item prop="pageSize" label="纸张类型：">
+          <el-select
+            v-model="modalForm.pageSize"
+            placeholder="请选择纸张类型"
+            @change="pageSizeChange"
+          >
+            <el-option
+              v-for="item in PAPER_SIZE_TYPE"
+              :key="item"
+              :value="item"
+              :label="item"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item prop="cardTemplateId" label="模板选择">
           <div class="template-list">
             <div
-              v-for="item in templates"
+              v-for="item in templateList"
               :key="item.id"
               :class="[
                 'template-item',
@@ -107,6 +121,7 @@ import {
   cardTemplateListApi,
 } from "../api";
 import PreviewCardTemplate from "../components/PreviewCardTemplate.vue";
+import { PAPER_SIZE_TYPE } from "../enumerate";
 
 const initModalForm = {
   id: null,
@@ -115,6 +130,7 @@ const initModalForm = {
   attention: "",
   objectiveAttention: "",
   subjectiveAttention: "",
+  pageSize: "A3",
   cardTemplateId: null,
 };
 
@@ -136,6 +152,7 @@ export default {
       cardHeadId: this.$route.params.cardHeadId,
       templates: [],
       modalForm: { ...initModalForm },
+      PAPER_SIZE_TYPE,
       rules: {
         name: [
           {
@@ -211,6 +228,13 @@ export default {
             trigger: "change",
           },
         ],
+        pageSize: [
+          {
+            required: true,
+            message: "请选择纸张类型",
+            trigger: "change",
+          },
+        ],
         cardTemplateId: [
           {
             required: true,
@@ -222,6 +246,13 @@ export default {
       imageList: [],
     };
   },
+  computed: {
+    templateList() {
+      return this.templates.filter(
+        (item) => item.pageSize === this.modalForm.pageSize
+      );
+    },
+  },
   mounted() {
     this.initData();
     this.getTemplates();
@@ -252,6 +283,9 @@ export default {
       this.modalForm.cardTemplateId = item.id;
       this.$refs.modalFormComp.validateField("cardTemplateId");
     },
+    pageSizeChange() {
+      this.modalForm.cardTemplateId = "";
+    },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;

src/modules/card/views/CardManage.vue

@@ -405,14 +405,15 @@ export default {
       const config = {
         ...res.data,
         ...{
-          pageSize: "A3",
           columnNumber: 2,
           columnGap: 20,
-          showForbidArea: true,
+          showForbidArea: false,
           showScorePan: false,
           templateInfo: JSON.parse(tempRes.data.content),
         },
       };
+      config.pageSize = config.pageSize || "A3";
+
       return config;
     },
     registBuildEmit() {

src/modules/card/views/CardPreview.vue

@@ -64,17 +64,18 @@ export default {
         this.$el.outerHTML
       );
       // console.log(cardContentTemp);
-      const cardImages = await this.transformImags().catch(() => {});
+      // 使用html生成pdf之后，图片已经没必要再生成：20220927
+      // const cardImages = await this.transformImags().catch(() => {});
       try {
         const model = this.$refs.CardView.getPageModel(cardData);
         window.parent &&
           window.parent.submitCardTemp &&
-          window.parent.submitCardTemp(model, cardImages, cardContentTemp);
+          window.parent.submitCardTemp(model, cardContentTemp);
       } catch (error) {
         console.dir(error);
         window.parent &&
           window.parent.submitCardTemp &&
-          window.parent.submitCardTemp("", "", "");
+          window.parent.submitCardTemp("", "");
       }
     },
     async init() {