题卡填空题新增自定义小题空数

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

@@ -840,3 +840,60 @@
     }
   }
 }
+
+/* table */
+.table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  text-align: left;
+
+  &.table-white {
+    background-color: #fff;
+  }
+
+  th {
+    padding: 5px;
+    line-height: 1.2;
+    letter-spacing: 1px;
+    color: $--color-text-gray-2;
+    border: 1px solid $--color-border;
+  }
+  td {
+    padding: 5px;
+    line-height: 1.2;
+    color: $--color-text-dark;
+    border: 1px solid $--color-border;
+
+    &.td-link {
+      span {
+        cursor: pointer;
+        &:hover {
+          color: $--color-text-gray;
+        }
+      }
+    }
+  }
+  .td-th {
+    font-weight: 600;
+    color: $--color-text-gray;
+  }
+
+  &--border {
+    border: 1px solid $--color-border;
+    border-radius: 10px;
+    th {
+      background-color: #fcfcfd;
+      border: none;
+      border-bottom: 1px solid $--color-border;
+    }
+    td {
+      border: none;
+      border-bottom: 1px solid $--color-border;
+    }
+  }
+}
+.el-input-tips {
+  color: rgb(117, 116, 116);
+  margin-left: 13px;
+}

src/modules/card/autoBuild/paperCard.js

@@ -175,7 +175,7 @@ export function getFillBackClozeCount(questionBodyContent) {
   return num;
 }
 
-export function buildCardElements(structList) {
+export function buildCardElements(structList, elementTypePreSetInfo = {}) {
   let cardElements = [];
   structList.forEach((struct) => {
     const detailChineseNumber = numberToChinese(struct.detailNo);
@@ -184,10 +184,12 @@ export function buildCardElements(structList) {
         ? `${detailChineseNumber}、${struct.detailName}`
         : `${detailChineseNumber}（${struct.nestedQNo}）`;
     const modelType = structTypeToCardElementType[struct.structType];
+    const elementTypePreSet = elementTypePreSetInfo[modelType] || {};
 
     if (!struct.isCommon && struct.structType === "TEXT_ANSWER_QUESTION") {
       struct.questions.forEach((qno) => {
         const presetData = {
+          ...elementTypePreSet,
           topicName: `${topicName}、${qno}`,
           paperStruct: { ...struct, questions: [qno] },
         };
@@ -199,6 +201,7 @@ export function buildCardElements(structList) {
     }
 
     let presetData = {
+      ...elementTypePreSet,
       topicName,
       paperStruct: struct,
     };

src/modules/card/autoBuild/simplePaperCard.js

@@ -173,9 +173,12 @@ function parseCommonTypeQuestions(structType, dataList) {
   return questions;
 }
 
-export function buildCardFromPaperSimpleStruct(paperSimpleStruct) {
+export function buildCardFromPaperSimpleStruct(
+  paperSimpleStruct,
+  elementTypePreSetInfo
+) {
   const structList = parsePaperStruct(paperSimpleStruct);
-  const cardElements = buildCardElements(structList);
+  const cardElements = buildCardElements(structList, elementTypePreSetInfo);
   // console.log(cardElements);
   return cardElements;
 }

src/modules/card/elements/fill-line/EditFillLine.vue

@@ -40,7 +40,16 @@
         ></el-input-number>
         <span class="el-input-tips">*指一行显示空位数量</span>
       </el-form-item>
-      <el-form-item label="小题空数：">
+      <el-form-item label="小题空数类型：">
+        <el-radio-group v-model="modalForm.questionLineType" size="small">
+          <el-radio-button label="norm">标准</el-radio-button>
+          <el-radio-button label="custom">自定义</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        v-if="modalForm.questionLineType === 'norm'"
+        label="小题空数："
+      >
         <el-input-number
           v-model="modalForm.fillCount"
           style="width: 125px"
@@ -52,6 +61,29 @@
         ></el-input-number>
         <span class="el-input-tips">*指每一小题的空位数量</span>
       </el-form-item>
+      <el-form-item v-else prop="questionLineNums" label="各小题空数：">
+        <table class="table table-white table-narrow">
+          <tr>
+            <th>小题号</th>
+            <th>空数</th>
+          </tr>
+          <tr v-for="option in questionLineNumOptions" :key="option.no">
+            <td>{{ option.questionNo }}</td>
+            <td>
+              <el-input-number
+                v-model="option.fillCount"
+                size="mini"
+                :min="1"
+                :max="50"
+                :step="1"
+                step-strictly
+                :controls="false"
+                style="width: 125px"
+              ></el-input-number>
+            </td>
+          </tr>
+        </table>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -65,6 +97,7 @@ const initModalForm = {
   fillCountPerLine: 1,
   lineSpacing: 40,
   fillCount: null,
+  questionLineType: "custom",
 };
 
 export default {
@@ -81,7 +114,7 @@ export default {
     return {
       modalForm: { ...initModalForm },
       DIRECTION_TYPE,
-      questionLineNumOptions: [{ no: 1, count: 1 }],
+      questionLineNumOptions: [],
       rules: {
         topicName: [
           {
@@ -117,12 +150,29 @@ export default {
       const valInfo = val.parent;
       this.modalForm = this.$objAssign(initModalForm, valInfo);
       if (!valInfo.fillCount) this.modalForm.fillCount = undefined;
+      this.questionLineNumOptions = valInfo.paperStruct.questions.map(
+        (item) => {
+          return { ...item };
+        }
+      );
     },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;
       const data = this.$objAssign(this.instance.parent, this.modalForm);
-      if (!data.fillCount) data.fillCount = null;
+      if (data.questionLineType === "norm") {
+        if (!data.fillCount) data.fillCount = null;
+      } else {
+        data.fillCount = null;
+        const unfinishedQnos = this.questionLineNumOptions
+          .filter((item) => !item.fillCount)
+          .map((item) => item.questionNo);
+        if (unfinishedQnos.length) {
+          this.$message.error(`请输入小题${unfinishedQnos.join("、")}的空数`);
+          return;
+        }
+        data.paperStruct.questions = this.questionLineNumOptions;
+      }
       this.$emit("modified", data);
     },
   },

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

@@ -13,6 +13,7 @@ const FILL_LINE_PROP = {
   fillCountPerLine: 4,
   fillCount: null,
   lineSpacing: 40,
+  questionLineType: "custom",
   paperStruct: {},
 };
 
@@ -44,6 +45,7 @@ const getModel = (presetData) => {
 
 // questions:[{questionNo,fillCount}]
 const getFullModel = (modelProp) => {
+  // console.log(modelProp);
   const parent = deepCopy(modelProp);
   const childModel = objAssign(MODEL, parent);
 

src/modules/card/views/CardBuild.vue

@@ -91,7 +91,11 @@ export default {
       const pageDefaultElems = getPageInitElements(cardConfig);
       this.setPageDefaultElems(pageDefaultElems);
 
-      const elements = buildCardFromPaperSimpleStruct(paperSimpleStruct);
+      const elementTypePreSetInfo = { FILL_LINE: { fillCountPerLine: 1 } };
+      const elements = buildCardFromPaperSimpleStruct(
+        paperSimpleStruct,
+        elementTypePreSetInfo
+      );
       this.setTopics([...this.pageDefaultElems.elements, ...elements]);
       this.resetTopicSeries();