|
@@ -14,13 +14,17 @@
|
|
|
</div>
|
|
|
<div class="exercise-list">
|
|
|
<ul>
|
|
|
- <li v-for="(item, i) in index_list" :key="i" :class="['exercise-item', { active: i === curIndex }]">
|
|
|
- <SvgIcon icon-class="child" :size="20" />
|
|
|
- <span class="item-name nowrap-ellipsis" @click="selectExerciseItem(i)">
|
|
|
- {{ i + 1 }}. {{ exerciseNames[item.type] }}
|
|
|
- </span>
|
|
|
- <SvgIcon icon-class="copy" class="pointer" :size="10" @click="copy(i)" />
|
|
|
- </li>
|
|
|
+ <draggable v-model="index_list" animation="300" @end="onEnd">
|
|
|
+ <transition-group>
|
|
|
+ <li v-for="(item, i) in index_list" :key="i" :class="['exercise-item', { active: i === curIndex }]">
|
|
|
+ <SvgIcon icon-class="child" :size="20" />
|
|
|
+ <span class="item-name nowrap-ellipsis" @click="selectExerciseItem(i)">
|
|
|
+ {{ i + 1 }}. {{ exerciseNames[item.type] }}
|
|
|
+ </span>
|
|
|
+ <SvgIcon icon-class="copy" class="pointer" :size="10" @click="copy(i)" />
|
|
|
+ </li>
|
|
|
+ </transition-group>
|
|
|
+ </draggable>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="list-operate">
|
|
@@ -74,17 +78,20 @@ import {
|
|
|
GetQuestionInfo,
|
|
|
GetExerciseInfo,
|
|
|
UpdateExercise,
|
|
|
+ MoveQuestion,
|
|
|
} from '@/api/exercise';
|
|
|
|
|
|
import CreateMain from './components/create.vue';
|
|
|
import PreviewQuestionTypeMixin from '../data/PreviewQuestionTypeMixin';
|
|
|
import SelectQuestionType from './components/common/SelectQuestionType.vue';
|
|
|
+import draggable from 'vuedraggable';
|
|
|
|
|
|
export default {
|
|
|
name: 'CreateExercise',
|
|
|
components: {
|
|
|
CreateMain,
|
|
|
SelectQuestionType,
|
|
|
+ draggable,
|
|
|
},
|
|
|
mixins: [PreviewQuestionTypeMixin],
|
|
|
provide() {
|
|
@@ -286,6 +293,24 @@ export default {
|
|
|
let type = arr[arr.length - 1];
|
|
|
this.index_list[this.curIndex].type = type;
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 移动题目
|
|
|
+ * @param {object} param0 移动参数
|
|
|
+ * @param {number} param0.newIndex 移动后的索引
|
|
|
+ */
|
|
|
+ onEnd({ newIndex }) {
|
|
|
+ MoveQuestion({
|
|
|
+ question_id: this.index_list[newIndex].id,
|
|
|
+ dest_question_id: this.index_list[newIndex + 1].id,
|
|
|
+ dest_position: 0,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$message.success('移动成功');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.error('移动失败');
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|