替换回答增加列数配置

src/views/exercise_questions/create/components/exercises/ReplaceAnswerQuestion.vue

@@ -75,7 +75,17 @@
             :step="1"
             class="word-num-input"
             :precision="0"
-            @change="handleChangeRows"
+            @change="handleChangeRows('row')"
+          />
+        </el-form-item>
+        <el-form-item label="列数">
+          <el-input-number
+            v-model="data.property.column_count"
+            :min="1"
+            :step="1"
+            class="word-num-input"
+            :precision="0"
+            @change="handleChangeRows('column')"
           />
         </el-form-item>
       </el-form>
@@ -85,6 +95,7 @@
 
 <script>
 import QuestionMixin from '../common/QuestionMixin.js';
+import { getRandomNumber } from '@/utils/index';
 
 import { selectTypeList, changeOptionType } from '@/views/exercise_questions/data/common';
 import { replaceAnswerData, getOption } from '@/views/exercise_questions/data/replaceAnswer';
@@ -120,13 +131,32 @@ export default {
       this.data.option_list.push(getOption());
     },
     // 修改行数
-    handleChangeRows(val) {
-      if (this.data.option_list.length >= val) {
-        this.data.option_list = this.data.option_list.splice(0, val);
+    handleChangeRows(type) {
+      let row_count = this.data.property.row_count;
+      let column_count = this.data.property.column_count;
+      if (type === 'row') {
+        if (this.data.option_list.length >= row_count) {
+          this.data.option_list = this.data.option_list.splice(0, row_count);
+        } else {
+          let length = row_count - this.data.option_list.length;
+          for (let i = 0; i < length; i++) {
+            let table_item = [];
+            for (let j = 0; j < column_count; j++) {
+              table_item.push({ content: '', mark: getRandomNumber() });
+            }
+            this.data.option_list.push(table_item);
+          }
+        }
+      } else if (this.data.option_list[0].length >= column_count) {
+        this.data.option_list.forEach((item, index) => {
+          this.data.option_list[index] = item.splice(0, column_count);
+        });
       } else {
-        let length = val - this.data.option_list.length;
-        for (let i = 0; i < length; i++) {
-          this.addOption();
+        let length = column_count - this.data.option_list[0].length;
+        for (let i = 0; i < row_count; i++) {
+          for (let j = 0; j < length; j++) {
+            this.data.option_list[i].push({ content: '', mark: getRandomNumber() });
+          }
         }
       }
     },

src/views/exercise_questions/data/replaceAnswer.js

@@ -25,6 +25,7 @@ export const replaceAnswerData = {
     score: 1, // 分值
     score_type: scoreTypeList[0].value, // 分值类型
     row_count: 4,
+    column_count: 4,
   },
   // 其他属性
   other: {

src/views/exercise_questions/preview/ReplaceAnswerPreview.vue

@@ -85,7 +85,10 @@ export default {
           },
         ];
       }
-      let option_lists = [[], [], [], []];
+      let option_lists = [];
+      this.data.option_list[0].forEach(() => {
+        option_lists.push([]);
+      });
       this.data.option_list.forEach((item) => {
         item.forEach((items, indexs) => {
           if (items.content) {
@@ -145,6 +148,7 @@ export default {
 
   .option-list {
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     width: max-content;
     margin: 0 auto;