Merge branch 'master' of http://60.205.254.193:3000/GCLS/GCLS_Page_Exercise

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

@@ -21,29 +21,30 @@
             :class="['content-item-' + data.property.layout_type]"
           >
             <span
+              v-if="data.property.layout_type === 'horizontal'"
               class="question-number"
               title="双击切换序号类型"
               @dblclick="changeOptionType(data)"
-              v-if="data.property.layout_type === 'horizontal'"
             >
               {{ computedQuestionNumber(i, data.option_number_show_mode) }}
             </span>
-
-            <div class="option-content" v-for="(items, indexs) in item" :key="indexs">
-              <RichText v-model="items.content" placeholder="输入内容" :inline="true" />
-              <i class="el-icon-circle-close" @click="deleteOptionItem(i, indexs)"></i>
+            <div class="option-box">
+              <div v-for="(items, indexs) in item.data_list" :key="indexs" class="option-content">
+                <RichText v-model="items.content" placeholder="输入内容" :inline="true" />
+                <i class="el-icon-circle-close" @click="deleteOptionItem(i, indexs)"></i>
+              </div>
             </div>
             <SvgIcon
+              v-if="data.property.layout_type === 'horizontal'"
               icon-class="add-circle"
               size="16"
               @click="addOptionItem(i)"
-              v-if="data.property.layout_type === 'horizontal'"
             />
             <SvgIcon
+              v-if="data.property.layout_type === 'horizontal'"
               icon-class="delete"
               class="delete pointer"
               @click="deleteOption(i)"
-              v-if="data.property.layout_type === 'horizontal'"
             />
           </li>
         </ul>
@@ -120,7 +121,7 @@ import QuestionMixin from '../common/QuestionMixin.js';
 
 import { getOption, sortTypeList, getSortDataTemplate } from '@/views/exercise_questions/data/sort';
 import { changeOptionType } from '@/views/exercise_questions/data/common';
-
+import { getRandomNumber } from '@/utils/index';
 export default {
   name: 'SortQuestion',
   components: {},
@@ -137,9 +138,13 @@ export default {
       handler(val) {
         if (!val) return;
         this.data.answer.answer_list = val.map((item) => {
-          let answer_item = item.map((items) => {
+          let value_list = item.data_list.map((items) => {
             return items.mark;
           });
+          let answer_item = {
+            mark: item.mark,
+            value_list,
+          };
           return answer_item;
         });
       },
@@ -149,13 +154,16 @@ export default {
   methods: {
     addOption() {
       if (this.data.property.layout_type === 'vertical') {
-        this.data.option_list[0].push(getOption());
+        this.data.option_list[0].data_list.push(getOption());
       } else {
-        this.data.option_list.push([getOption(), getOption(), getOption(), getOption(), getOption(), getOption()]);
+        this.data.option_list.push({
+          mark: getRandomNumber(),
+          data_list: [getOption(), getOption(), getOption(), getOption(), getOption(), getOption()],
+        });
       }
     },
     addOptionItem(i) {
-      this.data.option_list[i].push(getOption());
+      this.data.option_list[i].data_list.push(getOption());
     },
     /**
      * 智能识别
@@ -169,7 +177,16 @@ export default {
 
       if (arr.length > 0) {
         this.data.stem = arr[0];
-        this.data.option_list = arr.slice(1).map((content) => getOption(content));
+        let option_list = arr.slice(1);
+        this.data.option_list = option_list.map((item) => {
+          let data_list = item.split(' ').map((content) => getOption(content));
+          let item_obj = {
+            mark: getRandomNumber(),
+            data_list,
+          };
+          return item_obj;
+        });
+        // this.data.option_list = arr.slice(1).map((content) => getOption(content));
       }
     },
     changeType(item) {
@@ -179,7 +196,7 @@ export default {
     },
     // 删除小题里的选项
     deleteOptionItem(i, index) {
-      this.data.option_list[i].splice(index, 1);
+      this.data.option_list[i].data_list.splice(index, 1);
     },
   },
 };
@@ -187,13 +204,20 @@ export default {
 <style lang="scss" scoped>
 .content-item {
   flex-wrap: wrap;
-  row-gap: 4px;
+  gap: 4px 4px;
 }
 
 .content-item-horizontal {
+  .option-box {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: 4px 4px;
+  }
+
   .option-content {
     min-width: 110px;
-    max-width: 120px;
+    max-width: 110px;
   }
 }
 

src/views/exercise_questions/data/sort.js

@@ -11,14 +11,27 @@ export const sortTypeList = [
 // 选择题数据模板
 export function getSortDataTemplate() {
   let option_list = [
-    [getOption(), getOption(), getOption(), getOption(), getOption(), getOption()],
-    [getOption(), getOption(), getOption(), getOption(), getOption(), getOption()],
-    [getOption(), getOption(), getOption(), getOption(), getOption(), getOption()],
+    {
+      mark: getRandomNumber(),
+      data_list: [getOption(), getOption(), getOption(), getOption(), getOption(), getOption()],
+    },
+    {
+      mark: getRandomNumber(),
+      data_list: [getOption(), getOption(), getOption(), getOption(), getOption(), getOption()],
+    },
+    {
+      mark: getRandomNumber(),
+      data_list: [getOption(), getOption(), getOption(), getOption(), getOption(), getOption()],
+    },
   ];
   let answer_list = option_list.map((item) => {
-    let answer_item = item.map((items) => {
+    let value_list = item.data_list.map((items) => {
       return items.mark;
     });
+    let answer_item = {
+      mark: item.mark,
+      value_list,
+    };
     return answer_item;
   });
 

src/views/exercise_questions/preview/SortPreview.vue

@@ -15,28 +15,32 @@
       :key="move_index"
       :class="['move-box-' + data.property.layout_type]"
     >
-      <span class="option-number" v-if="data.property.layout_type === 'horizontal'"
-        >{{ computeOptionMethods[data.option_number_show_mode](move_index) }}
-      </span>
+      <template v-if="data.property.layout_type === 'horizontal'">
+        <span class="option-number"
+          >{{ computeOptionMethods[data.option_number_show_mode](move_index) }}
+        </span></template
+      >
       <draggable
-        v-model="move_list[move_index]"
+        v-model="move_list[move_index].data_list"
         animation="300"
         :options="{
           group: { name: 'itxst', pull: 'clone' },
         }"
         :sort="!disabled"
         :class="['content-box', 'content-box-' + data.property.layout_type]"
+        :group="'move' + move_index"
         @start="onStart($event)"
         @end="onEnd($event)"
-        :group="'move' + move_index"
       >
         <transition-group>
           <div
-            v-for="(itemNode, indexNode) in move_item"
+            v-for="(itemNode, indexNode) in move_item.data_list"
             :key="indexNode"
             :class="[
               'drag-item',
-              { error: itemNode.mark !== data.option_list[move_index][indexNode].mark && isJudgingRightWrong },
+              {
+                error: itemNode.mark !== data.option_list[move_index].data_list[indexNode].mark && isJudgingRightWrong,
+              },
               click_index_list.indexOf(indexNode) > -1 && select_index === move_index ? 'drag-item-active' : '',
             ]"
             @click="handleClickItem(move_index, indexNode)"
@@ -51,15 +55,18 @@
 
       <template v-for="(move_item, move_index) in data.option_list">
         <div
-          v-if="JSON.stringify(answer.answer_list[move_index]) !== JSON.stringify(data.answer.answer_list[move_index])"
+          v-if="
+            JSON.stringify(answer.answer_list[move_index].value_list) !==
+            JSON.stringify(data.answer.answer_list[move_index].value_list)
+          "
           :key="'answer' + move_index"
           :class="['move-box-' + data.property.layout_type]"
         >
-          <span class="option-number" v-if="data.property.layout_type === 'horizontal'"
-            >{{ computeOptionMethods[data.option_number_show_mode](move_index) }}
-          </span>
+          <template v-if="data.property.layout_type === 'horizontal'">
+            <span class="option-number">{{ computeOptionMethods[data.option_number_show_mode](move_index) }} </span>
+          </template>
           <draggable
-            v-model="move_list[move_index]"
+            v-model="move_list[move_index].data_list"
             animation="300"
             :options="{
               group: { name: 'itxst', pull: 'clone' },
@@ -68,7 +75,11 @@
             :class="['content-box', 'content-box-' + data.property.layout_type]"
           >
             <transition-group>
-              <div v-for="(itemNode, indexNode) in move_item" :key="'answer-item' + indexNode" :class="['drag-item']">
+              <div
+                v-for="(itemNode, indexNode) in move_item.data_list"
+                :key="'answer-item' + indexNode"
+                :class="['drag-item']"
+              >
                 <span class="drag-content rich-text" v-html="sanitizeHTML(itemNode.content)"></span>
               </div>
             </transition-group>
@@ -104,9 +115,13 @@ export default {
       handler(val) {
         if (!val || this.isJudgingRightWrong) return;
         this.answer.answer_list = val.map((item) => {
-          let answer_item = item.map((items) => {
+          let value_list = item.data_list.map((items) => {
             return items.mark;
           });
+          let answer_item = {
+            mark: item.mark,
+            value_list,
+          };
           return answer_item;
         });
       },
@@ -117,11 +132,15 @@ export default {
         if (!val) return;
 
         this.move_list = this.answer.answer_list.map((item, index) => {
-          let move_item = item.map((itemm) => {
+          let data_list = item.value_list.map((itemm) => {
             return {
-              ...this.data.option_list[index].find((items) => items.mark === itemm),
+              ...this.data.option_list[index].data_list.find((items) => items.mark === itemm),
             };
           });
+          let move_item = {
+            mark: item.mark,
+            data_list,
+          };
           return move_item;
         });
         this.is_all_right = JSON.stringify(this.answer.answer_list) === JSON.stringify(this.data.answer.answer_list);
@@ -133,13 +152,17 @@ export default {
         if (!val) return;
         this.disrupted = false;
         this.move_list = val.slice().map((item, index) => {
-          let shuffe_item = this.shuffle(item.slice()).map(
+          let shuffe_item = this.shuffle(item.data_list.slice()).map(
             (items) => ({
               ...items,
             }),
             index === val.length - 1,
           );
-          return shuffe_item;
+          let move_item = {
+            mark: item.mark,
+            data_list: shuffe_item,
+          };
+          return move_item;
         });
       },
       deep: true,
@@ -171,6 +194,8 @@ export default {
     // 拖拽结束事件
     onEnd() {
       this.drag = false;
+      this.click_index_list = [];
+      this.select_index = null;
       this.$forceUpdate();
     },
     // 点击item
@@ -191,11 +216,21 @@ export default {
       let indexs = this.select_index;
       let index1 = this.click_index_list[0];
       let index2 = this.click_index_list[1];
-      [this.move_list[indexs][index1], this.move_list[indexs][index2]] = [
-        this.move_list[indexs][index2],
-        this.move_list[indexs][index1],
+      [this.move_list[indexs].data_list[index1], this.move_list[indexs].data_list[index2]] = [
+        this.move_list[indexs].data_list[index2],
+        this.move_list[indexs].data_list[index1],
       ];
       this.click_index_list = [];
+      this.answer.answer_list = this.move_list.map((item) => {
+        let value_list = item.data_list.map((items) => {
+          return items.mark;
+        });
+        let answer_item = {
+          mark: item.mark,
+          value_list,
+        };
+        return answer_item;
+      });
     },
   },
 };