连线题优化

src/views/exercise_questions/data/common.js

@@ -144,3 +144,5 @@ export const questionNumberTypeList = [
   { value: 'recalculate', label: '重新计算' },
   { value: 'follow', label: '跟随上题' },
 ];
+
+export const svgNS = 'http://www.w3.org/2000/svg'; // SVG命名空间

src/views/exercise_questions/data/matching.js

@@ -7,8 +7,6 @@ export const columnNumberList = [
   { value: 3, label: '3列' },
 ];
 
-export const svgNS = 'http://www.w3.org/2000/svg'; // SVG命名空间
-
 export function getOption(content = '') {
   return { content, mark: getRandomNumber() };
 }

src/views/exercise_questions/preview/MatchingPreview.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { svgNS } from '@/views/exercise_questions/data/matching';
+import { svgNS } from '@/views/exercise_questions/data/common';
 
 import PreviewMixin from './components/PreviewMixin';
 
@@ -69,7 +69,13 @@ export default {
     optionList: {
       handler() {
         this.clearLine();
-        this.initAnswerList();
+
+        let list = this.optionList.map((item) => {
+          return item.map(({ mark }) => {
+            return { mark, preMark: '', nextMark: '' };
+          });
+        });
+        this.$set(this, 'answerList', list);
       },
       immediate: true,
     },
@@ -95,6 +101,10 @@ export default {
         arr.forEach((item, i) => {
           item.every((li) => li.length <= 0) ? emptyStringArray.push(i) : '';
         });
+        if (column_number === 2) {
+          this.answer = arr;
+          return;
+        }
 
         // 从后向前遍历，如果有 preMark，就往前找，直到没有 preMark，并过滤掉无数据的列
         let preArr = [];
@@ -193,6 +203,9 @@ export default {
     },
     /* 用 mouse 事件模拟拖拽 结束 */
 
+    resetCurConnectionPoint() {
+      this.curConnectionPoint = { i: -1, j: -1, position: 'pre', mark: '' };
+    },
     /**
      * 当点击的不是连线点时，清除所有连线点的选中状态
      * @param {PointerEvent} e
@@ -202,7 +215,7 @@ export default {
       Array.from(document.getElementsByClassName('connection')).forEach((item) => {
         item.classList.remove('focus');
       });
-      this.curConnectionPoint = { i: -1, j: -1, position: 'pre', mark: '' };
+      this.resetCurConnectionPoint();
     },
 
     /**
@@ -245,8 +258,7 @@ export default {
      * @param {Boolean} isDrag 是否是拖拽
      */
     createLine(i, j, position, mark, isDrag = false) {
-      let offsetLeft = document.getElementsByClassName(`${position}-line-${i}-${j}`)[0].offsetLeft;
-      let offsetTop = document.getElementsByClassName(`${position}-line-${i}-${j}`)[0].offsetTop;
+      let { offsetLeft, offsetTop } = document.getElementsByClassName(`${position}-line-${i}-${j}`)[0];
       const { curOffsetLeft, curOffsetTop, curMark } = this.computedCurConnectionPoint(isDrag);
       let top = Math.min(offsetTop, curOffsetTop) + 5;
       let left = Math.min(offsetLeft, curOffsetLeft) + 5;
@@ -269,7 +281,7 @@ export default {
       this.$refs.list.appendChild(svg); // 将SVG元素插入到文档中
 
       // 清除当前连线点
-      this.curConnectionPoint = { i: -1, j: -1, position: 'pre', mark: '' };
+      this.resetCurConnectionPoint();
     },
     // 设置 path 公用属性
     setPathAttr(path) {
@@ -284,27 +296,17 @@ export default {
      */
     computedCurConnectionPoint(isDrag = false) {
       const { i, j, position, mark } = isDrag ? this.mousePointer : this.curConnectionPoint;
-      if (i === -1 && j === -1) return {};
       let dom = document.getElementsByClassName(`${position}-line-${i}-${j}`)[0];
       return { curOffsetLeft: dom.offsetLeft, curOffsetTop: dom.offsetTop, curMark: mark };
     },
 
-    // 清除连线
+    // 清除所有连接线
     clearLine() {
       document.querySelectorAll('svg.connection-line').forEach((item) => {
         item.remove();
       });
     },
 
-    // 初始化答案列表
-    initAnswerList() {
-      let list = this.optionList.map((item) => {
-        return item.map(({ mark }) => {
-          return { mark, preMark: '', nextMark: '' };
-        });
-      });
-      this.$set(this, 'answerList', list);
-    },
     /**
      * 修改连接列表
      * @param {String} mark 选项标识
@@ -324,6 +326,7 @@ export default {
      */
     changeAnswerList(curMark, mark, position) {
       let oldPointer = { mark: '', position: '' };
+      // 找到当前选项，修改 preMark 或 nextMark
       this.answerList.find((item) =>
         item.find((li) => {
           if (li.mark === curMark) {
@@ -342,10 +345,12 @@ export default {
           }
         }),
       );
+      // 如果当前选项有 preMark 或 nextMark，则清除原来的连线
       if (!oldPointer.mark) return;
       document.querySelector(`svg.connection-line.svg-${curMark}-${oldPointer.mark}`)?.remove();
       document.querySelector(`svg.connection-line.svg-${oldPointer.mark}-${curMark}`)?.remove();
 
+      // 找到原来的选项，清除 preMark 或 nextMark
       this.answerList.find((item) =>
         item.find((li) => {
           if (li.mark === oldPointer.mark) {