bug fix

card/assets/styles/card-design.scss

@@ -406,7 +406,7 @@
     text-align: right;
     flex-grow: 0;
     .el-button {
-      width: 60px;
+      min-width: 75px;
     }
   }
   .control-left {

card/assets/styles/card-preview.scss

@@ -23,6 +23,7 @@
     }
   }
   .elem-fill-question .option-item,
+  .card-print .elem-fill-number .fill-number-option,
   .card-head-body .head-stdno .stdno-fill-option,
   .page-number-rect-list li,
   .card-head-body .head-dynamic-rect {
@@ -1380,10 +1381,10 @@
     }
     &-option {
       margin: 8px auto;
-      width: 20px;
-      height: 14px;
+      width: 18px;
+      height: 10px;
       font-size: 12px;
-      line-height: 1;
+      line-height: 8px;
       text-align: center;
       color: #000;
       // border-rect
@@ -1427,14 +1428,18 @@
 
     > span {
       z-index: 2;
-      display: inline-block;
+      display: block;
       position: relative;
       font-size: 14px;
-      vertical-align: top;
 
       &:first-child {
+        float: left;
         background-color: #fff;
         text-align: justify;
+        font-size: 0px;
+        & > i {
+          font-size: 14px;
+        }
 
         &::after {
           content: "";
@@ -1445,9 +1450,14 @@
         }
       }
       &:nth-of-type(2) {
-        width: 10px;
+        float: left;
+        width: 20px;
         background-color: #fff;
       }
+      &:last-child {
+        margin-left: 80px;
+        height: 100%;
+      }
     }
   }
 }
@@ -1493,6 +1503,9 @@
     border-spacing: 0;
     border-collapse: collapse;
     text-align: left;
+    td {
+      padding: 0;
+    }
   }
 }
 
@@ -1510,6 +1523,7 @@
   .page-column-element {
     .element-item {
       position: absolute;
+      overflow: hidden;
 
       &::before {
         display: none;
@@ -1534,6 +1548,7 @@
       }
     }
     .elem-fill-question .option-item,
+    .card-print .elem-fill-number .fill-number-option,
     .card-head-body .head-stdno .stdno-fill-option,
     .page-number-rect-list li,
     .card-head-body .head-dynamic-rect {

card/assets/styles/card-temp.css

@@ -20,6 +20,7 @@
   display: none;
 }
 .card-print .elem-fill-question .option-item,
+.card-print .card-print .elem-fill-number .fill-number-option,
 .card-print .card-head-body .head-stdno .stdno-fill-option,
 .card-print .page-number-rect-list li,
 .card-print .card-head-body .head-dynamic-rect {
@@ -1146,10 +1147,10 @@
 }
 .elem-fill-number .fill-number-option {
   margin: 8px auto;
-  width: 20px;
-  height: 14px;
+  width: 18px;
+  height: 10px;
   font-size: 12px;
-  line-height: 1;
+  line-height: 8px;
   text-align: center;
   color: #000;
   border: 1px solid #000;
@@ -1189,14 +1190,18 @@
 }
 .fill-field-content > span {
   z-index: 2;
-  display: inline-block;
+  display: block;
   position: relative;
   font-size: 14px;
-  vertical-align: top;
 }
 .fill-field-content > span:first-child {
+  float: left;
   background-color: #fff;
   text-align: justify;
+  font-size: 0px;
+}
+.fill-field-content > span:first-child > i {
+  font-size: 14px;
 }
 .fill-field-content > span:first-child::after {
   content: "";
@@ -1206,9 +1211,14 @@
   line-height: 0;
 }
 .fill-field-content > span:nth-of-type(2) {
-  width: 10px;
+  float: left;
+  width: 20px;
   background-color: #fff;
 }
+.fill-field-content > span:last-child {
+  margin-left: 80px;
+  height: 100%;
+}
 
 .elem-fill-pane {
   font-size: 0;
@@ -1245,6 +1255,9 @@
   border-collapse: collapse;
   text-align: left;
 }
+.elem-fill-table .table td {
+  padding: 0;
+}
 
 .card-free-preview:not(.card-print) {
   padding: 10px 0;
@@ -1256,7 +1269,29 @@
 }
 .card-free-preview .page-column-element .element-item {
   position: absolute;
+  overflow: hidden;
 }
 .card-free-preview .page-column-element .element-item::before {
   display: none;
 }
+
+@media print {
+  .card-preview {
+    padding: 0;
+  }
+  .card-preview .page-box {
+    margin: 0 auto;
+    box-shadow: none;
+    page-break-after: always;
+  }
+  .card-preview .elem-fill-question-first::before {
+    display: none;
+  }
+  .card-preview .elem-fill-question .option-item,
+  .card-preview .card-print .elem-fill-number .fill-number-option,
+  .card-preview .card-head-body .head-stdno .stdno-fill-option,
+  .card-preview .page-number-rect-list li,
+  .card-preview .card-head-body .head-dynamic-rect {
+    border-width: 0.5pt;
+  }
+}

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

@@ -3,7 +3,7 @@
     <div class="stdinfo-item" v-for="(info, index) in fields" :key="index">
       <span :style="paramStyle" v-html="info.contentHtml"></span>
       <span>：</span>
-      <span>{{ fieldInfos[info.code] }}</span>
+      <span :style="contStyle">{{ fieldInfos[info.code] }}</span>
     </div>
   </div>
 </template>
@@ -21,6 +21,7 @@ export default {
       fieldInfos: this.data["fieldInfos"] || {},
       fields: [],
       paramStyle: {},
+      contStyle: {},
       lenWidths: {
         3: 45,
         4: 62,
@@ -52,6 +53,9 @@ export default {
       this.paramStyle = {
         width: this.lenWidths[num] + "px",
       };
+      this.contStyle = {
+        marginLeft: this.lenWidths[num] + 20 + "px",
+      };
     },
   },
 };

card/elements/fill-field/ElemFillField.vue

@@ -2,21 +2,23 @@
   <div class="elem-fill-field">
     <div
       class="fill-field-item"
-      v-for="(info, index) in data.fields"
+      v-for="(info, index) in fields"
       :key="index"
       :style="itemStyles"
     >
       <div class="fill-field-content" :style="lineStyles">
-        <span :style="paramStyle">{{ info.name }}</span>
+        <span :style="paramStyle" v-html="info.contentHtml"></span>
         <span>：</span>
-        <span>{{ fieldInfos[info.code] }}</span>
+        <span :style="info.contStyle || contStyle">{{
+          fieldInfos[info.code]
+        }}</span>
       </div>
     </div>
     <div v-if="!data.fields.length" class="fill-field-item" :style="itemStyles">
       <div class="fill-field-content" :style="lineStyles">
         <span :style="paramStyle">变量名</span>
         <span>：</span>
-        <span>12345</span>
+        <span :style="contStyle">12345</span>
       </div>
     </div>
   </div>
@@ -33,15 +35,16 @@ export default {
   data() {
     return {
       fieldInfos: this.data["fieldInfos"] || {},
-      questions: [],
+      fields: [],
       paramStyle: {},
+      contStyle: {},
       lenWidths: {
-        3: 44,
+        3: 45,
         4: 62,
-        5: 72,
-        6: 86,
-        7: 100,
-        8: 114,
+        5: 75,
+        6: 90,
+        7: 105,
+        8: 120,
       },
     };
   },
@@ -60,6 +63,20 @@ export default {
   },
   methods: {
     init() {
+      this.fields = this.data.fields.map((item) => {
+        // 兼容wkhtmltopdf 汉字两端对齐的问题
+        let nitem = { ...item };
+        nitem.contentHtml = item.name
+          .split("")
+          .map((str) => `<i>${str}</i>`)
+          .join(" ");
+        if (!this.data.nameIsJustify) {
+          nitem.contStyle = {
+            marginLeft: item.name.length * 14 + 4 + 20 + "px",
+          };
+        }
+        return nitem;
+      });
       if (this.data.nameIsJustify) {
         const nameNums = this.data.fields.map((item) => item.name.length);
         const maxNameLen = Math.max.apply(null, nameNums);
@@ -67,8 +84,12 @@ export default {
         this.paramStyle = {
           width: this.lenWidths[num] + "px",
         };
+        this.contStyle = {
+          marginLeft: this.lenWidths[num] + 20 + "px",
+        };
       } else {
         this.paramStyle = {};
+        this.contStyle = {};
       }
     },
   },

card/elements/fill-number/model.js

@@ -5,7 +5,7 @@ const MODEL = {
   x: 0,
   y: 0,
   w: 300,
-  h: 280,
+  h: 244,
   sign: "",
   name: "准考证号",
   numberCount: 9,

card/elements/fill-table/ElemFillTable.vue

@@ -3,7 +3,9 @@
     <table class="table">
       <tr v-for="rowNo in data.rowCount" :key="rowNo">
         <td v-for="colNo in data.colCount" :key="colNo" :style="tdStyles">
-          <span> {{ data.content[`${rowNo}_${colNo}`] }}</span>
+          <div :style="tdContStyles">
+            {{ data.content[`${rowNo}_${colNo}`] }}
+          </div>
         </td>
       </tr>
     </table>
@@ -24,8 +26,12 @@ export default {
   computed: {
     tdStyles() {
       return {
-        padding: this.data.padding.map((item) => `${item}px`).join(" "),
         border: `1px ${this.data.lineStyle} #000`,
+      };
+    },
+    tdContStyles() {
+      return {
+        padding: this.data.padding.map((item) => `${item}px`).join(" "),
         fontSize: this.data.fontSize,
         height: this.data.lineHeight + "px",
       };

card/modules/free/elements/fill-question/EditFillQuestion.vue

@@ -7,6 +7,13 @@
       :key="modalForm.id"
       label-width="120px"
     >
+      <el-form-item prop="topicType" label="题型：">
+        <el-radio-group v-model="topicType" @change="topicTypeChange">
+          <el-radio-button label="single">单选</el-radio-button>
+          <el-radio-button label="multiply">多选</el-radio-button>
+          <el-radio-button label="boolean">判断</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item prop="endNumber" label="起止题号：">
         <el-input-number
           style="width: 40px"
@@ -40,8 +47,8 @@
           :disabled="modalForm.isBoolean"
         ></el-input-number>
       </el-form-item>
-      <!-- <el-form-item label="小题排列方向：" required>
-        <el-radio-group v-model="modalForm.questionDirection" size="small">
+      <el-form-item label="选项排列方向：" required>
+        <el-radio-group v-model="modalForm.optionDirection" size="small">
           <el-radio-button
             v-for="(val, key) in DIRECTION_TYPE"
             :key="key"
@@ -49,56 +56,6 @@
             >{{ val }}</el-radio-button
           >
         </el-radio-group>
-      </el-form-item> -->
-      <el-form-item>
-        <el-checkbox
-          v-model="modalForm.isMultiply"
-          :disabled="modalForm.isBoolean"
-          >多选</el-checkbox
-        >
-      </el-form-item>
-      <el-form-item>
-        <el-checkbox
-          v-model="modalForm.isBoolean"
-          @change="selectTypeChange"
-          :disabled="modalForm.isMultiply"
-          >判断题</el-checkbox
-        >
-        <el-select
-          v-if="modalForm.isBoolean"
-          v-model="modalForm.booleanType"
-          style="margin-left: 20px; width: 125px"
-          placeholder="请选择"
-          @change="booleanTypeChange"
-        >
-          <el-option
-            v-for="item in BOOLEAN_TYPE"
-            :key="item"
-            :label="item"
-            :value="item"
-          ></el-option>
-        </el-select>
-        <span v-if="modalForm.isBoolean">（备选是否配置）</span>
-      </el-form-item>
-      <el-form-item
-        v-if="modalForm.isBoolean"
-        prop="booleanType"
-        label="是否配置："
-      >
-        <span>是：</span>
-        <el-input
-          v-model.trim="booleanTypes.yes"
-          :maxlength="1"
-          placeholder="是"
-          style="margin-right: 20px; width: 60px"
-        ></el-input>
-        <span>否：</span>
-        <el-input
-          v-model.trim="booleanTypes.no"
-          :maxlength="1"
-          placeholder="否"
-          style="margin-right: 20px; width: 60px"
-        ></el-input>
       </el-form-item>
     </el-form>
   </div>
@@ -131,6 +88,13 @@ export default {
     },
   },
   data() {
+    const topicTypeValidater = (rule, value, callback) => {
+      if (!this.topicType) {
+        callback(new Error("请选择题型"));
+      } else {
+        callback();
+      }
+    };
     const numberRangeValidater = (rule, value, callback) => {
       if (!this.modalForm.startNumber || !this.modalForm.endNumber) {
         return callback(new Error("请输入起止题号"));
@@ -142,32 +106,19 @@ export default {
       }
     };
 
-    const booleanTypeValidater = (rule, value, callback) => {
-      if (this.modalForm.isBoolean) {
-        if (
-          this.booleanTypes.yes &&
-          this.booleanTypes.no &&
-          this.booleanTypes.yes.length <= 2 &&
-          this.booleanTypes.no.length <= 2
-        ) {
-          callback();
-        } else {
-          callback(new Error("请设置是否配置，单个设置最多两个字符。"));
-        }
-      } else {
-        callback();
-      }
-    };
-
     return {
       modalForm: { ...initModalForm },
       BOOLEAN_TYPE,
       DIRECTION_TYPE,
-      booleanTypes: {
-        yes: "",
-        no: "",
-      },
+      topicType: null,
       rules: {
+        topicType: [
+          {
+            required: true,
+            validator: topicTypeValidater,
+            trigger: "change",
+          },
+        ],
         endNumber: [
           {
             required: true,
@@ -188,13 +139,6 @@ export default {
             trigger: "change",
           },
         ],
-        booleanType: [
-          {
-            required: true,
-            validator: booleanTypeValidater,
-            trigger: "change",
-          },
-        ],
       },
     };
   },
@@ -204,23 +148,30 @@ export default {
   methods: {
     initData(val) {
       const valInfo = val.parent || val;
+      this.topicType = this.getTopicType(valInfo);
       this.modalForm = Object.assign({}, this.initModalForm, valInfo);
       this.modalForm.endNumber =
         this.modalForm.startNumber + this.modalForm.questionsCount - 1;
-      this.booleanTypeChange();
     },
-    selectTypeChange(val) {
-      if (val) {
-        this.modalForm.optionCount = 2;
+    topicTypeChange() {
+      if (this.topicType === "single") {
         this.modalForm.isMultiply = false;
-        this.modalForm.booleanType = BOOLEAN_TYPE[0];
-        this.booleanTypeChange();
+        this.modalForm.isBoolean = false;
+        this.modalForm.optionCount = 4;
+      } else if (this.topicType === "multiply") {
+        this.modalForm.isMultiply = true;
+        this.modalForm.isBoolean = false;
+        this.modalForm.optionCount = 4;
+      } else {
+        this.modalForm.isMultiply = false;
+        this.modalForm.isBoolean = true;
+        this.modalForm.optionCount = 2;
       }
     },
-    booleanTypeChange() {
-      const [yes, no] = this.modalForm.booleanType.split(",");
-      this.booleanTypes.yes = yes;
-      this.booleanTypes.no = no;
+    getTopicType(info) {
+      if (info.isMultiply) return "multiply";
+      if (info.isBoolean) return "boolean";
+      return "single";
     },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});
@@ -228,10 +179,6 @@ export default {
 
       this.modalForm.questionsCount =
         this.modalForm.endNumber - this.modalForm.startNumber + 1;
-      this.modalForm.booleanType = [
-        this.booleanTypes.yes,
-        this.booleanTypes.no,
-      ].join();
       this.$emit("modified", this.modalForm);
     },
   },

card/modules/free/elements/fill-question/ElemFillQuestion.vue

@@ -11,7 +11,7 @@
           class="question-item"
           v-for="(question, qindex) in group"
           :key="qindex"
-          :style="questionGapStyles"
+          :style="getQuestionGapStyles(group, qindex)"
         >
           <span
             class="option-item"
@@ -53,11 +53,6 @@ export default {
         marginRight: this.data.groupGap + "px",
       };
     },
-    questionGapStyles() {
-      return this.data.optionDirection === "vertical"
-        ? { marginRight: this.data.questionGap + "px" }
-        : { marginBottom: this.data.questionGap + "px" };
-    },
     optionGapStyles() {
       const styles =
         this.data.optionDirection === "vertical"
@@ -102,7 +97,7 @@ export default {
     },
     getChoiceList(data) {
       if (data.isBoolean) {
-        return data.booleanType.split(",");
+        return ["", ""];
       } else {
         return "abcdefghijklmnopqrstuv"
           .toUpperCase()
@@ -110,6 +105,17 @@ export default {
           .split("");
       }
     },
+    getQuestionGapStyles(group, qindex) {
+      const size =
+        group.length - 1 === qindex
+          ? 0
+          : this.data.optionDirection === "vertical"
+          ? this.data.optionGap
+          : this.data.questionGap;
+      return this.data.optionDirection === "vertical"
+        ? { marginRight: size + "px" }
+        : { marginBottom: size + "px" };
+    },
   },
   watch: {
     data: {

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

@@ -5,9 +5,9 @@ const MODEL = {
   type: "FILL_QUESTION",
   x: 0,
   y: 0,
-  w: 500,
-  h: 138,
-  minHeight: 138,
+  w: 280,
+  h: 102,
+  minHeight: 102,
   sign: "objective",
   topicName: "",
   topicNo: null,
@@ -20,7 +20,7 @@ const MODEL = {
   questionDirection: "vertical",
   questionGap: 8,
   groupGap: 30,
-  optionGap: 12,
+  optionGap: 6,
   isBoolean: false, // 是否是判断题
   booleanType: BOOLEAN_TYPE[0],
   isMultiply: false, // 是否是多选题

src/modules/card/views/CardEdit.vue

@@ -121,13 +121,15 @@ export default {
         let cardConfig = await this.getCardConfig();
         if (this.IS_GENERIC) {
           cardConfig.cardTitle = this.prepareTcPCard.title;
+          this.cardName = this.prepareTcPCard.title;
+        } else {
+          this.cardName = "";
         }
         this.cardContent = {
           pages: [],
           cardConfig,
           paperParams: {},
         };
-        this.cardName = "";
       }
       this.dataReady = true;
     },
@@ -153,13 +155,15 @@ export default {
         // 没有题卡内容时，直接创建新的内容
         if (detData.makeMethod === "CUST" || detData.type === "GENERIC") {
           cardConfig.cardTitle = detData.title;
+          this.cardName = detData.title;
+        } else {
+          this.cardName = "";
         }
         this.cardContent = {
           pages: [],
           cardConfig,
           paperParams: {},
         };
-        this.cardName = "";
       }
     },
     async getCardConfig() {