题卡修改

card/assets/styles/card-design.scss

@@ -84,7 +84,7 @@
   }
   .page-column-element {
     .element-item-error {
-      box-shadow: 0 0 10px inset $--color-danger;
+      box-shadow: 0 0 10px $--color-danger;
     }
 
     > .element-resize {
@@ -161,6 +161,10 @@
       background-color: $--color-primary;
       color: #fff;
       border-radius: 50% 0 50% 50%;
+      cursor: pointer;
+      &:hover {
+        background-color: $--color-success;
+      }
     }
     // 编辑时，小题扩展答题区之间用虚线
     .element-item {
@@ -252,6 +256,35 @@
     z-index: 1001;
     visibility: hidden;
   }
+  // card-head
+  .card-head {
+    &-top {
+      .el-input > .el-input__inner {
+        text-align: center;
+        border-radius: 0;
+        border: 0;
+        background-color: transparent;
+        box-shadow: 0 0 1px #ccc;
+        color: #000;
+      }
+    }
+    &-title {
+      .el-input__inner {
+        font-size: 24px;
+        font-family: "楷体";
+        font-weight: bold;
+        line-height: 33px;
+        height: 33px;
+      }
+    }
+    &-subtitle {
+      .el-input__inner {
+        line-height: 22px;
+        height: 22px;
+        padding: 0 10px;
+      }
+    }
+  }
 }
 .design-head {
   position: fixed;

card/assets/styles/card-preview.scss

@@ -314,7 +314,6 @@
   &-title {
     padding: 10px;
     font-size: 14px;
-    font-weight: bold;
     color: rgba(0, 0, 0, 1);
     line-height: 1;
     white-space: normal;
@@ -354,15 +353,6 @@
   &-top {
     text-align: center;
     color: #000;
-
-    .el-input > input {
-      text-align: center;
-      border-radius: 0;
-      border: 0;
-      background-color: transparent;
-      box-shadow: 0 0 1px #ccc;
-      color: #000;
-    }
   }
   &-title {
     font-size: 24px;
@@ -370,35 +360,19 @@
     font-weight: bold;
     overflow: hidden;
 
-    .el-input__inner {
-      font-size: 24px;
-      font-family: "楷体";
-      font-weight: bold;
-      line-height: 33px;
-      height: 33px;
-    }
     > h1 {
       line-height: 33px;
       white-space: nowrap;
     }
   }
   &-subtitle {
-    height: 45px;
+    height: 44px;
     font-family: $--font-family;
     font-size: 14px;
-    font-weight: bold;
     overflow: hidden;
-    textarea {
-      line-height: 22px;
-      height: 45px;
-      padding: 0 10px;
-      text-align: center;
-      border-radius: 0;
-      border: 0;
-      background-color: transparent;
-      box-shadow: 0 0 1px #ccc;
-      color: #000;
-    }
+    white-space: normal;
+    margin-bottom: 10px;
+
     > p {
       padding: 0 10px;
       line-height: 22px;
@@ -437,7 +411,6 @@
         z-index: 2;
         display: block;
         position: relative;
-        font-weight: bold;
         font-size: 14px;
 
         &:first-child {
@@ -561,7 +534,7 @@
 
     .head-notice {
       > h4 {
-        font-weight: bold;
+        font-weight: normal;
         margin-bottom: 8px;
       }
       &-cont {
@@ -903,6 +876,7 @@
     height: 29px;
     line-height: 28px;
     border-bottom: 1px dotted #333;
+    font-weight: normal;
   }
   p {
     font-size: 12px;

card/components/PagePropEdit.vue

@@ -39,9 +39,9 @@
           ></i>
         </el-button>
       </el-form-item>
-      <el-form-item label-width="0px">
+      <!-- <el-form-item label-width="0px">
         <el-checkbox v-model="form.aOrB" disabled>启用A/B卷</el-checkbox>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label-width="0px">
         <el-checkbox
           v-model="form.showForbidArea"

card/components/TopicElementEdit.vue

@@ -25,7 +25,11 @@
         <component :is="compName" :data="data"></component>
       </div>
       <!-- topic-number -->
-      <topic-number :data="data.topicNo"></topic-number>
+      <topic-number
+        :data="data.topicNo"
+        title="点击选中当前题目"
+        @click="activeCurElement"
+      ></topic-number>
     </element-resize>
   </div>
 </template>
@@ -33,6 +37,7 @@
 <script>
 import { mapState, mapMutations, mapActions } from "vuex";
 import { objAssign } from "../plugins/utils";
+import { checkElementisCovered } from "../store/card";
 
 import EditCardHead from "../elements/card-head/CardHead";
 import EditFillQuestion from "../elements/fill-question/ElemFillQuestion";
@@ -106,9 +111,7 @@ export default {
       this.setCurElement(this.data);
     },
     sizeChange() {
-      const elementDom = document.getElementById(this.data.id);
-      this.data.isCovered =
-        elementDom.offsetHeight < elementDom.firstChild.offsetHeight;
+      this.data.isCovered = checkElementisCovered(this.data.id, this.data.type);
     },
     resizeOver() {
       this.modifyTopic(Object.assign({}, this.curElement, this.elemData));

card/elements/card-head/CardHead.vue

@@ -16,17 +16,20 @@
         <h1 v-else>{{ data.cardTitle }}</h1>
       </div>
       <div class="card-head-subtitle">
-        <el-input
-          v-if="!preview && !data.isSimple"
-          id="cardDescInput"
-          v-model="cardDesc"
-          type="textarea"
-          resize="none"
-          :rows="2"
-          placeholder="请输入题卡描述信息，最多只展示两行内容"
-          @blur="nameChange"
-        >
-        </el-input>
+        <div v-if="!preview && !data.isSimple">
+          <el-input
+            v-model="cardDescLineOne"
+            placeholder="请输入题卡描述信息"
+            @blur="nameChange"
+          >
+          </el-input>
+          <el-input
+            v-model="cardDescLineTwo"
+            placeholder="更多题卡描述信息"
+            @blur="nameChange"
+          >
+          </el-input>
+        </div>
         <p v-else>{{ data.cardDesc }}</p>
       </div>
     </div>
@@ -124,9 +127,16 @@ export default {
   data() {
     return {
       cardTitle: this.data.cardTitle,
-      cardDesc: this.data.cardDesc
+      cardDesc: this.data.cardDesc,
+      cardDescLineOne: "",
+      cardDescLineTwo: ""
     };
   },
+  created() {
+    const contents = this.data.cardDesc.split("\n");
+    this.cardDescLineOne = contents[0];
+    this.cardDescLineTwo = contents[1];
+  },
   computed: {
     ...mapState("card", ["cardConfig"]),
     classes() {
@@ -159,7 +169,7 @@ export default {
     nameChange() {
       this.setCardConfig({
         cardTitle: this.cardTitle,
-        cardDesc: this.cardDesc
+        cardDesc: [this.cardDescLineOne, this.cardDescLineTwo].join("\n")
       });
     }
   }

card/elements/composition/ElemCompositionElementEdit.vue

@@ -66,8 +66,8 @@ export default {
       actives: {
         TEXT: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
         IMAGE: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
-        LINES: ["b"],
-        GRIDS: ["b"],
+        LINES: [],
+        GRIDS: [],
         LINE_HORIZONTAL: ["l", "r"],
         LINE_VERTICAL: ["t", "b"]
       }

card/store/card.js

@@ -154,6 +154,48 @@ const findElementById = (id, topics) => {
   return curElement;
 };
 
+const checkElementisCovered = (id, type) => {
+  const elementDom = document.getElementById(id);
+
+  if (type === "EXPLAIN") {
+    const elemTitleDome = elementDom.querySelector(".elem-title");
+    const limitHeight = elemTitleDome
+      ? elementDom.offsetHeight - elemTitleDome.offsetHeight
+      : elementDom.offsetHeight;
+
+    let elementHeights = [];
+    elementDom
+      .querySelector(".elem-explain-elements")
+      .childNodes.forEach(node => {
+        if (!node.className.includes("elem-explain-element")) return;
+        elementHeights.push(
+          node.firstChild.offsetHeight + node.firstChild.offsetTop
+        );
+      });
+    return elementHeights.some(item => item > limitHeight);
+  }
+
+  if (type === "COMPOSITION") {
+    const elemTitleDome = elementDom.querySelector(".elem-title");
+    const limitHeight = elemTitleDome
+      ? elementDom.offsetHeight - elemTitleDome.offsetHeight
+      : elementDom.offsetHeight;
+
+    let elementHeights = [];
+    elementDom
+      .querySelector(".elem-composition-elements")
+      .childNodes.forEach(node => {
+        if (!node.className.includes("elem-composition-element")) return;
+        elementHeights.push(
+          node.firstChild.offsetHeight + node.firstChild.offsetTop
+        );
+      });
+    return elementHeights.some(item => item > limitHeight);
+  }
+
+  return elementDom.offsetHeight < elementDom.firstChild.offsetHeight;
+};
+
 const createFunc = {
   EXPLAIN(element) {
     return getExplainElements(element);
@@ -349,6 +391,16 @@ const actions = {
     const columnElements = state.topics[pos].elements;
     const childIndex = columnElements.findIndex(item => item.id === element.id);
     element.id = getElementId();
+    // 作文题中的多线条和网格元素重新计算高度。
+    if (element.container.type === "COMPOSITION") {
+      if (element.type === "LINES") {
+        element.h = element.lineCount * (element.lineSpacing + 1);
+      }
+      if (element.type === "GRIDS") {
+        element.h =
+          element.rowCount * (element.columnSize + 1 + element.rowSpace) + 1;
+      }
+    }
     if (childIndex === -1) {
       columnElements.push(element);
     } else {
@@ -510,10 +562,10 @@ const actions = {
         element.w = elementDom.offsetWidth;
         // 解答题小题与其他题有些区别。
         // 其他题都是通过内部子元素自动撑高元件，而解答题则需要手动设置高度。
-        const ESCAPE_ELEMENTS = ["EXPLAIN", "CARD_HEAD", "COMPOSITION"];
+        const ESCAPE_ELEMENTS = ["CARD_HEAD"];
         element.isCovered =
           !ESCAPE_ELEMENTS.includes(element.type) &&
-          elementDom.offsetHeight < elementDom.firstChild.offsetHeight;
+          checkElementisCovered(`preview-${element.id}`, element.type);
       }
     });
 
@@ -621,7 +673,7 @@ const actions = {
   }
 };
 
-export { fetchSameSerialNumberChildrenPositionInfo };
+export { fetchSameSerialNumberChildrenPositionInfo, checkElementisCovered };
 
 export default {
   namespaced: true,

card/views/CardDesign.vue

@@ -419,9 +419,11 @@ export default {
           makeMethod: this.prepareTcPCard.makeMethod
         }
       };
-      config.aOrB = this.prepareTcPCard["paperType"]
-        ? this.prepareTcPCard.paperType.split(",").length > 1
-        : false;
+      // 暂时禁用A/B
+      // config.aOrB = this.prepareTcPCard["paperType"]
+      //   ? this.prepareTcPCard.paperType.split(",").length > 1
+      //   : false;
+      config.aOrB = false;
       config.requiredFields = JSON.parse(config.requiredFields);
       config.extendFields = JSON.parse(config.extendFields);
       config.cardTitle = this.getCardTitle(config.titleRule);
@@ -531,14 +533,14 @@ export default {
         });
         return false;
       }
-      if (!this.cardConfig.cardDesc) {
-        this.$message.error("题卡描述信息不能为空！");
-        this.setCurPage(0);
-        setTimeout(() => {
-          document.getElementById("cardDescInput").focus();
-        });
-        return false;
-      }
+      // if (!this.cardConfig.cardDesc) {
+      //   this.$message.error("题卡描述信息不能为空！");
+      //   this.setCurPage(0);
+      //   setTimeout(() => {
+      //     document.getElementById("cardDescInput").focus();
+      //   });
+      //   return false;
+      // }
       if (this.checkElementCovered()) {
         this.$message.error("题卡中存在被遮挡的元件，请注意调整！");
         return false;