修改移动题目问题

src/views/exercise_questions/create/components/common/QuestionMixin.js

@@ -110,6 +110,13 @@ const mixin = {
       this.data = content;
     },
     /**
+     * 单独设置题号
+     * @param {string} question_number 题号
+     */
+    setQuestionNumber(question_number) {
+      this.data.property.question_number = question_number;
+    },
+    /**
      * 删除选项
      * @param {Number} i 索引
      */

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

@@ -29,9 +29,7 @@
     <div class="create-content">
       <QuestionHeader v-if="indexList.length > 0" />
       <template v-for="({ id }, i) in indexList">
-        <KeepAlive :key="id">
-          <component :is="curExercisePage" v-if="i === curIndex" ref="exercise" :question-id="id" />
-        </KeepAlive>
+        <component :is="curExercisePage" v-if="i === curIndex" :key="id" ref="exercise" :question-id="id" />
       </template>
     </div>
   </main>

src/views/exercise_questions/create/index.vue

@@ -14,7 +14,7 @@
       </div>
       <div class="exercise-list">
         <ul>
-          <draggable v-model="index_list" animation="300" @end="moveQuestion">
+          <draggable v-model="index_list" animation="300" @end="moveQuestion" @start="handleStart">
             <transition-group>
               <li v-for="(item, i) in index_list" :key="i" :class="['exercise-item', { active: i === curIndex }]">
                 <SvgIcon icon-class="child" :size="20" />
@@ -108,6 +108,8 @@ export default {
       exercise_id: id, // 练习id
       exercise: { name: '' }, // 练习信息
       isEditExercise: false, // 是否编辑练习
+      moveQuestionData: {}, // 移动题目数据
+      isMoveQuestion: false, // 是否移动题目
       curIndex: 0, // 当前练习索引
       index_list: [], // 练习列表
       exerciseNames, // 练习名称
@@ -125,7 +127,7 @@ export default {
   },
   watch: {
     curIndex() {
-      if (this.index_list.length === 0) return;
+      if (this.index_list.length === 0 || this.isMoveQuestion) return;
       this.getQuestionInfo();
     },
   },
@@ -301,6 +303,12 @@ export default {
      */
     moveQuestion({ newIndex, oldIndex }) {
       let order = newIndex > oldIndex;
+      this.curIndex = this.curIndex === newIndex ? oldIndex : newIndex;
+      this.$nextTick(() => {
+        this.$refs.createMain.$refs.exercise?.[0].setQuestion(this.moveQuestionData);
+        this.isMoveQuestion = false;
+        this.refreshPreviewData();
+      });
       MoveQuestion({
         question_id: this.index_list[newIndex].id,
         dest_question_id: this.index_list[order ? newIndex - 1 : newIndex + 1].id,
@@ -308,11 +316,22 @@ export default {
       })
         .then(() => {
           this.$message.success('移动成功');
+          // 移动题目后，单独更新当前题目的题号
+          GetQuestionInfo({ question_id: this.index_list[this.curIndex].id })
+            .then(({ question }) => {
+              if (!question) return;
+              this.$refs.createMain.$refs.exercise?.[0].setQuestionNumber(question.question_number);
+            })
+            .catch(() => {});
         })
         .catch(() => {
           this.$message.error('移动失败');
         });
     },
+    handleStart() {
+      this.isMoveQuestion = true;
+      this.moveQuestionData = this.$refs.createMain.$refs.exercise?.[0].data;
+    },
   },
 };
 </script>