题卡预览修改

card/assets/styles/card-preview.scss

@@ -1470,12 +1470,14 @@
 
 // card-free-preview
 .card-free-preview {
-  padding: 10px 0;
-  background-color: #f0f0f0;
+  &:not(.card-print) {
+    padding: 10px 0;
+    background-color: #f0f0f0;
 
-  .page-box {
-    margin: 10px auto;
-    box-shadow: 0 0 4px #ddd;
+    .page-box {
+      margin: 10px auto;
+      box-shadow: 0 0 4px #ddd;
+    }
   }
   .page-column-element {
     .element-item {

card/assets/styles/card-temp.css

@@ -8,9 +8,7 @@
   -webkit-box-shadow: 0 0 4px #ddd;
   box-shadow: 0 0 4px #ddd;
 }
-.card-preview .element-item {
-  width: 100% !important;
-}
+
 .card-print {
   padding: 0;
 }
@@ -20,10 +18,12 @@
   box-shadow: none;
   page-break-after: always;
 }
+.card-print .elem-fill-question::before {
+  display: none;
+}
+
 .page-box {
   position: relative;
-  width: 1586px;
-  height: 1122px;
   background: #fff;
   margin: 0 auto;
   font-weight: normal;
@@ -34,28 +34,80 @@
   white-space: nowrap;
   margin: 0 -10px;
 }
+.page-box .page-main-2 .page-column {
+  width: 50%;
+}
 .page-box .page-main-3 .page-column {
   width: 33.33%;
 }
-.page-box .page-main-3 .page-column-forbid-area::before {
+.page-box .page-main-4 .page-column {
+  width: 25%;
+}
+.page-box-A3 {
+  width: 1586px;
+  height: 1122px;
+}
+.page-box-A3 .page-main-inner {
+  padding: 60px 80px 86px;
+}
+.page-box-A3 .page-main-1 .page-column-forbid-area::before {
+  width: 2000px;
+  -webkit-transform: rotate(34.326deg);
+  transform: rotate(34.326deg);
+}
+.page-box-A3 .page-main-1 .page-column-forbid-area::after {
+  width: 2000px;
+  -webkit-transform: rotate(-34.326deg);
+  transform: rotate(-34.326deg);
+}
+.page-box-A3 .page-main-2 .page-column-forbid-area::before {
+  -webkit-transform: rotate(54.216deg);
+  transform: rotate(54.216deg);
+}
+.page-box-A3 .page-main-2 .page-column-forbid-area::after {
+  -webkit-transform: rotate(-54.216deg);
+  transform: rotate(-54.216deg);
+}
+.page-box-A3 .page-main-3 .page-column-forbid-area::before {
   -webkit-transform: rotate(64.6555deg);
   transform: rotate(64.6555deg);
 }
-.page-box .page-main-3 .page-column-forbid-area::after {
+.page-box-A3 .page-main-3 .page-column-forbid-area::after {
   -webkit-transform: rotate(-64.6555deg);
   transform: rotate(-64.6555deg);
 }
-.page-box .page-main-4 .page-column {
-  width: 25%;
-}
-.page-box .page-main-4 .page-column-forbid-area::before {
+.page-box-A3 .page-main-4 .page-column-forbid-area::before {
   -webkit-transform: rotate(70.3109deg);
   transform: rotate(70.3109deg);
 }
-.page-box .page-main-4 .page-column-forbid-area::after {
+.page-box-A3 .page-main-4 .page-column-forbid-area::after {
   -webkit-transform: rotate(-70.3109deg);
   transform: rotate(-70.3109deg);
 }
+.page-box-A4 {
+  width: 793px;
+  height: 1122px;
+}
+.page-box-A4 .page-main-inner {
+  padding: 60px 45px 86px;
+}
+.page-box-A4 .page-main-1 .page-column-forbid-area::before {
+  -webkit-transform: rotate(54.216deg);
+  transform: rotate(54.216deg);
+}
+.page-box-A4 .page-main-1 .page-column-forbid-area::after {
+  -webkit-transform: rotate(-54.216deg);
+  transform: rotate(-54.216deg);
+}
+.page-box-A4 .page-main-2 .page-column-forbid-area::before {
+  -webkit-transform: rotate(70.5109deg);
+  transform: rotate(70.5109deg);
+}
+.page-box-A4 .page-main-2 .page-column-forbid-area::after {
+  -webkit-transform: rotate(-70.5109deg);
+  transform: rotate(-70.5109deg);
+}
+
 .page-main-inner {
   position: absolute;
   width: 100%;
@@ -66,6 +118,7 @@
   z-index: 9;
   font-size: 0;
 }
+
 .page-main-outer {
   position: absolute;
   top: 0;
@@ -76,12 +129,13 @@
   background-color: transparent;
   overflow: hidden;
 }
+
 .page-column {
   display: inline-block;
   vertical-align: middle;
   position: relative;
   height: 100%;
-  width: 50%;
+  width: 100%;
   font-size: 14px;
   padding: 0 10px;
 }
@@ -124,7 +178,6 @@
   z-index: 1;
 }
 .page-column-forbid-area > p {
-  color: #333;
   padding: 20px;
   position: absolute;
   width: 260px;
@@ -155,6 +208,9 @@
 .page-column-element .element-item {
   position: relative;
 }
+.page-column-element .element-item-width {
+  width: 100% !important;
+}
 .page-column-element .element-item::before {
   content: "";
   position: absolute;
@@ -193,8 +249,9 @@
 }
 .page-column-element:last-child
   .element-item-card-head.element-item-type-pre::before {
-  border-bottom: 0;
+  border-bottom: none;
 }
+
 .page-locators {
   position: absolute;
   top: 60px;
@@ -203,6 +260,7 @@
   bottom: 86px;
   z-index: 8;
 }
+
 .page-locator-group {
   position: absolute;
   top: 0;
@@ -217,6 +275,7 @@
   margin-left: -12px;
 }
 .page-locator-group:last-child {
+  left: auto;
   right: 96px;
 }
 .page-locator-group li {
@@ -231,9 +290,11 @@
 .page-locator-group li:last-child {
   bottom: -46px;
 }
+
 .page-box-1 .page-locator-group:first-child {
   left: -30px;
 }
+
 .page-number {
   position: absolute;
   bottom: 40px;
@@ -255,7 +316,7 @@
 }
 .page-number-rect-list li.rect-li-act {
   height: 0;
-  border: 0;
+  border: none;
   border-bottom: 16px solid #000;
 }
 .page-number-text {
@@ -265,6 +326,7 @@
   height: 16px;
   line-height: 16px;
 }
+
 .elem-title {
   padding: 10px;
   font-size: 14px;
@@ -275,10 +337,12 @@
 .elem-body {
   padding: 10px;
 }
+
 .grid-container {
   margin-left: -10px;
   margin-right: -10px;
 }
+
 .grid-row {
   display: table;
   width: 100%;
@@ -298,6 +362,7 @@
   border-style: dashed;
   vertical-align: middle;
 }
+
 .card-head-top {
   text-align: center;
   color: #000;
@@ -310,8 +375,8 @@
 }
 .card-head-title > h1 {
   line-height: 33px;
-  letter-spacing: -1px;
   white-space: nowrap;
+  letter-spacing: -1px;
 }
 .card-head-subtitle {
   height: 44px;
@@ -626,7 +691,7 @@
   border-right: 1px solid #333;
 }
 .card-head-body .head-dynamic-aorb-fill .dynamic-aorb-item:first-child {
-  border: 0;
+  border: none;
 }
 .card-head-body .head-dynamic-aorb .dynamic-aorb-title {
   width: 83px;
@@ -677,6 +742,7 @@
 .card-head-handle.card-head-narrow .head-stdno {
   height: 286px;
 }
+
 .card-head-body-auto-resize {
   margin-left: -5px;
   margin-right: -5px;
@@ -706,9 +772,10 @@
   margin-top: 10px;
 }
 .card-head-body-auto-resize .rect-col-item-none {
-  border: 0;
+  border: none;
   margin: 0 !important;
 }
+
 .elem-topic-head {
   text-align: center;
 }
@@ -733,6 +800,7 @@
   white-space: nowrap;
   overflow: hidden;
 }
+
 .elem-line-horizontal {
   height: 100%;
   line-height: 30px;
@@ -743,6 +811,7 @@
   width: 100%;
   border-bottom: 1px solid #000;
 }
+
 .elem-line-vertical {
   height: 100%;
   text-align: center;
@@ -753,10 +822,12 @@
   height: 100%;
   border-left: 1px solid #000;
 }
+
 .elem-lines .line-item {
   display: inline-block;
   vertical-align: top;
 }
+
 .elem-rect .rect-body {
   position: absolute;
   width: 100%;
@@ -764,6 +835,7 @@
   top: 0;
   left: 0;
 }
+
 .elem-text .text-body {
   padding: 5px;
   line-height: 1.4;
@@ -777,6 +849,7 @@
   color: #a0a0a0;
   margin: 0 2px;
 }
+
 .elem-barcode {
   height: 100%;
   border-color: transparent;
@@ -793,6 +866,7 @@
   right: 0;
   margin: auto;
 }
+
 .elem-image {
   height: 100%;
   border-color: transparent;
@@ -824,6 +898,7 @@
   right: 0;
   margin: auto;
 }
+
 .elem-grids > table {
   table-layout: fixed;
   border-spacing: 0;
@@ -836,9 +911,34 @@
   table-layout: auto;
   width: 100%;
 }
+
 .elem-fill-question {
   white-space: normal;
 }
+.elem-fill-question::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 99;
+  color: #fff;
+  padding: 6px 10px;
+  line-height: 1;
+  font-size: 18px;
+  border-bottom-left-radius: 10px;
+}
+.elem-fill-question-simple::before {
+  content: "单选";
+  background-color: #65d5ad;
+}
+.elem-fill-question-multiply::before {
+  content: "多选";
+  background-color: #617bea;
+}
+.elem-fill-question-boolean::before {
+  content: "判断";
+  background-color: #ffa952;
+}
 .elem-fill-question .elem-body {
   padding: 18px 0 18px 16px;
 }
@@ -851,9 +951,6 @@
 .elem-fill-question .question-item {
   font-size: 0;
 }
-.elem-fill-question .question-item:last-child {
-  margin-bottom: 0 !important;
-}
 .elem-fill-question .option-item {
   display: inline-block;
   vertical-align: middle;
@@ -903,6 +1000,7 @@
 .elem-fill-question-vertical .option-item:last-child {
   margin-bottom: 0 !important;
 }
+
 .elem-fill-area .option-item {
   display: inline-block;
   vertical-align: middle;
@@ -919,6 +1017,7 @@
 .elem-fill-area-vertical .option-item:last-child {
   margin-bottom: 0 !important;
 }
+
 .elem-fill-line {
   white-space: normal;
 }
@@ -956,7 +1055,7 @@
   min-width: 20px;
   text-align: left;
   background-color: #fff;
-  border: 0;
+  border: none;
 }
 .elem-fill-line .elem-fill-quesiton li.elem-fill-no span {
   display: block;
@@ -977,8 +1076,9 @@
   padding-bottom: 4px;
   background-color: #fff;
   text-align: center;
-  border: 0;
+  border: none;
 }
+
 .elem-explain .elem-title {
   padding-bottom: 0;
 }
@@ -1004,6 +1104,7 @@
 .elem-explain .elem-explain-element .explain-element-body {
   position: absolute;
 }
+
 .elem-composition .elem-title {
   padding-bottom: 0;
 }
@@ -1023,3 +1124,135 @@
   position: absolute;
   overflow: hidden;
 }
+
+.elem-fill-number {
+  border: 1px solid #000;
+}
+.elem-fill-number .fill-number-rect {
+  font-size: 0;
+  height: 27px;
+  border-bottom: 1px solid #333;
+}
+.elem-fill-number .fill-number-number {
+  display: inline-block;
+  vertical-align: top;
+  width: 7.692%;
+  height: 100%;
+}
+.elem-fill-number .fill-number-number:not(:last-child) {
+  border-right: 1px solid #333;
+}
+.elem-fill-number .fill-number-head {
+  height: 51px;
+}
+.elem-fill-number .fill-number-head > h5 {
+  border-bottom: 1px solid #333;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+}
+.elem-fill-number .fill-number-body {
+  display: table;
+  width: 100%;
+}
+.elem-fill-number .fill-number-list {
+  display: table-cell;
+  width: 7.692%;
+  padding: 1px 0;
+}
+.elem-fill-number .fill-number-option {
+  margin: 8px auto;
+  width: 20px;
+  height: 14px;
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  color: #000;
+  border: 1px solid #000;
+  font-family: "Times New Roman", Arial, sans-serif;
+}
+.elem-fill-number .fill-number-option > i {
+  display: inline-block;
+  -webkit-transform: scale(0.67, 0.67);
+  transform: scale(0.67, 0.67);
+}
+
+.elem-fill-field {
+  white-space: normal;
+  overflow: hidden;
+}
+
+.fill-field-item {
+  display: inline-block;
+  padding: 0 10px;
+  width: 100%;
+}
+.fill-field-content {
+  height: 30px;
+  line-height: 26px;
+  overflow: hidden;
+  position: relative;
+}
+.fill-field-content::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  border-bottom: 1px solid #333;
+  bottom: 2px;
+  left: 0;
+  z-index: 1;
+}
+.fill-field-content > span {
+  z-index: 2;
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
+  vertical-align: top;
+}
+.fill-field-content > span:first-child {
+  background-color: #fff;
+  text-align: justify;
+}
+.fill-field-content > span:first-child::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  line-height: 0;
+}
+.fill-field-content > span:nth-of-type(2) {
+  width: 10px;
+  background-color: #fff;
+}
+
+.elem-fill-pane {
+  font-size: 0;
+  white-space: normal;
+  overflow: hidden;
+}
+.elem-fill-pane .fill-pane-item {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 14px;
+}
+.elem-fill-pane .fill-pane-cont {
+  border: 1px solid #000;
+}
+
+.card-free-preview:not(.card-print) {
+  padding: 10px 0;
+  background-color: #f0f0f0;
+}
+.card-free-preview:not(.card-print) .page-box {
+  margin: 10px auto;
+  -webkit-box-shadow: 0 0 4px #ddd;
+  box-shadow: 0 0 4px #ddd;
+}
+.card-free-preview .page-column-element .element-item {
+  position: absolute;
+}
+.card-free-preview .page-column-element .element-item::before {
+  display: none;
+}

card/modules/free/components/CardFreeView.vue

@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import TopicElementPreview from "../components/TopicElementPreview";
+import TopicElementPreview from "./TopicElementPreview";
 import PageNumber from "../../../components/PageNumber";
 import previewTemp from "../../../previewTemp";
 import { getPageModel } from "../cardFormatTransform";

src/modules/card/views/CardEdit.vue

@@ -150,7 +150,7 @@ export default {
           };
         });
         const examRule = await examRuleDetail();
-        const extendFields = examRule.extendFields | "[]";
+        const extendFields = examRule.extendFields || "[]";
         let config = {
           pageSize: "A3",
           columnNumber: 2,
@@ -215,7 +215,12 @@ export default {
       }).catch(() => {});
       if (res !== "confirm") return;
 
-      window.cardData = cardData;
+      this.$refs.CardDesign.loading();
+      window.cardData = {
+        ...cardData,
+        createMethod: this.cardCreateMethod,
+        type: this.cardType
+      };
       const { href } = this.$router.resolve({
         name: "CardPreview",
         params: {
@@ -227,6 +232,7 @@ export default {
     },
     registWindowSubmit() {
       window.submitCardTemp = async (htmlContent, model) => {
+        this.cardPreviewUrl = "";
         const datas = this.$refs.CardDesign.getCardData(htmlContent, model);
         const cardInfo = this.getCardInfo(datas);
         cardInfo.status = "SUBMIT";
@@ -234,7 +240,7 @@ export default {
           cardInfo,
           this.getRequestConfig()
         ).catch(() => {});
-        this.cardPreviewUrl = "";
+        this.$refs.CardDesign.unloading();
         window.cardData = null;
         if (result) {
           this.cardId = result;

src/modules/card/views/CardPreview.vue

@@ -40,15 +40,13 @@ export default {
       return [
         "card-preview",
         {
-          "card-print": this.isPrint
+          "card-print": this.isPrint,
+          "card-free-preview": this.cardCreateMethod === "FREE"
         }
       ];
     },
     editComp() {
       return this.cardCreateMethod === "FREE" ? "card-free-view" : "card-view";
-    },
-    IS_HTML_TEMPLATE1() {
-      return this.cardType === "GENERIC" && this.cardCreateMethod === "UPLOAD";
     }
   },
   mounted() {
@@ -66,6 +64,9 @@ export default {
       const { cardConfig, pages, createMethod, type } = deepCopy(cardData);
       this.cardCreateMethod = createMethod;
       this.cardType = type;
+
+      this.IS_HTML_TEMPLATE =
+        this.cardType === "GENERIC" && this.cardCreateMethod === "UPLOAD";
       let fieldInfos = {};
       [...cardConfig.requiredFields, ...cardConfig.extendFields]
         .filter(item => item.enable)
@@ -138,8 +139,6 @@ export default {
       let fieldInfos = {};
       const defContent = "相关信息";
       const defNumber = "123456789";
-      console.log(cardConfig);
-      // TODO:extendFields => 0 bug
       [...cardConfig.requiredFields, ...cardConfig.extendFields]
         .filter(item => item.enable)
         .map(item => {