新增插件

src/api/question/questionconfig.js

@@ -84,13 +84,13 @@ export function CreateQuestion(questionKey) {
         Name: "A",
         Content: ""
       }];
-      var array3 = [{
+      var array2 = [{
         Name: "1",
         Content: "A"
       }];
       AnswerList.push(array1);
       AnswerList.push(array2);
-      AnswerList.push(array3);
+      AnswerList.push(array2);
       break;
       //排序题
     case "sorting-problem":
@@ -107,7 +107,25 @@ export function CreateQuestion(questionKey) {
         Name: "D",
         Content: ""
       }];
-
+      var array2 = [{
+        Name: "A",
+        Content: ""
+      }, {
+        Name: "A",
+        Content: ""
+      }, {
+        Name: "A",
+        Content: ""
+      }, {
+        Name: "A",
+        Content: ""
+      }];
+      AnswerList.push(tempArray);
+      AnswerList.push(array2);
+      break;
+      //完型天空
+    case "cloze":
+      var tempArray = optionListConfig();
       AnswerList.push(tempArray);
       break;
   }

src/components/question/question-form.vue

@@ -52,8 +52,10 @@
           <!--连线题-->
           <matching v-if="questionObj.Key=='matching'" :questionData="AnswerList" @getChild="getChildData"></matching>
           <!--排序题-->
-          <sorting-problem v-if="questionObj.Key=='sorting-problem '" :questionData="AnswerList"
+          <sorting-problem v-if="questionObj.Key=='sorting-problem'" :questionData="AnswerList"
             @getChild="getChildData"></sorting-problem>
+          <!--完型填空-->
+          <cloze v-if="questionObj.Key=='cloze'" :questionData="AnswerList" @getChild="getChildData"></cloze>
           <br />
           <div class="col-12">
             答案解析<UeEditor v-model="objOption.AnswerParse" :config="config" ref="AnswerParse"></UeEditor>
@@ -111,6 +113,7 @@
   import entryProblem from '../questiontype/entry-problem'
   import matching from '../questiontype/matching'
   import sortingProblem from '../questiontype/sorting-problem'
+  import cloze from '../questiontype/cloze'
   export default {
     components: {
       UeEditor,
@@ -123,6 +126,7 @@
       entryProblem, //分录题
       matching, //连线题
       sortingProblem, //排序题
+      cloze, //完型填空
     },
     props: {
       setingObj: {

src/components/questiontype/cloze.vue

+<!--完型填空-->
+<style>
+
+</style>
+<template>
+  <div class="clozeQuestion">
+    <template v-if="data&&data.length>0" v-for="(item,index) in data">
+      <div>
+        <span>第 {{index+1}} 题</span>
+        <span style="display:block" v-for="(subItem,subIndex) in item">
+          <el-checkbox v-model="subItem.IsAnswer" @change="ChangeItem(item,subItem)">{{subItem.Name}}</el-checkbox>
+          <UeEditor v-model="subItem.Content" :config="config"></UeEditor>
+          <a style="cursor:pointer;" @click="deleteOpion(item,subIndex)">删除</a>
+        </span>
+      </div>
+      <a style="cursor:pointer;" @click="addOption(item)">添加选项</a>
+    </template>
+    <br />
+    <a style="cursor:pointer;" @click="addQuestion()">添加问题</a>
+  </div>
+</template>
+<script>
+  import {
+    getOptionList, //获取选择标签【A,B,C,D....】
+    optionListConfig,
+  } from '../../api/question/questionconfig'
+  import UeEditor from '../editor/UeEditor'
+  export default {
+    props: {
+      questionData: {
+        type: Array,
+      }
+    },
+    components: {
+      UeEditor
+    },
+    data() {
+      return {
+        data: this.questionData,
+        config: {
+          initialFrameWidth: null,
+          initialFrameHeight: 80,
+        },
+        optionTitleList: [],
+      };
+    },
+    created() {
+      console.log("data", this.data);
+      this.initConfig();
+    },
+    methods: {
+      initConfig() {
+        this.optionTitleList = getOptionList();
+      },
+      //删除选项
+      deleteOpion(item, index) {
+        item.splice(index, 1);
+        this.calcOptionTitle();
+      },
+      //新增选项
+      addOption(item) {
+        if (item.length < 7) {
+          item.push({
+            Name: "",
+            Content: "",
+            IsAnswer: false
+          });
+          this.calcOptionTitle()
+        } else {
+          this.$q.notify({
+            type: 'warning',
+            position: 'center',
+            timeout: 1500,
+            message: `最多只能添加7个选项`
+          })
+          return
+        }
+      },
+      //添加小题
+      addQuestion() {
+        this.data.push(optionListConfig());
+      },
+      //重新计算选择Title[A,B,C,D....]
+      calcOptionTitle() {
+        if (this.data && this.data.length > 0) {
+          this.data.forEach((item, index) => {
+            item.forEach((subItem, subIndex) => {
+              subItem.Name = this.optionTitleList[subIndex];
+            })
+          })
+        }
+      },
+      //返回数据到父组件
+      returnDataToParent() {
+        this.$emit('getChild', this.data);
+      },
+      ChangeItem(item, subItem) {
+        if (item && item.length > 0) {
+          item.forEach(childItem => {
+            childItem.IsAnswer = false;
+          })
+        }
+        subItem.IsAnswer = true;
+      },
+    },
+    mounted() {
+
+    },
+    watch: {
+      data: {
+        handler(newValue) {
+          this.returnDataToParent();
+        },
+        deep: true
+      },
+    }
+  };
+
+</script>

src/components/questiontype/sorting-problem.vue

@@ -5,9 +5,9 @@
 <template>
   <div class="sortingProblemQuestion">
     <table v-if="data&&data.length>0">
-      <tr v-for="(item,index) in data">
+      <tr v-for="(item,index) in data[0]">
         <td>
-          第 {{index+1}} 空</el-checkbox>
+          {{item.Name}}
         </td>
         <td>
           <UeEditor v-model="item.Content" :config="config"></UeEditor>
@@ -22,18 +22,30 @@
             <a style="cursor:pointer;" @click="addOption()">添加选项</a>
           </td>
         </tr>
-        <tr>
-          <td colspan="3">
-            1. 一个空有多种答案时请用";"隔开。如：水;H2O
-            <br />
-            2. 若试题答案是数字，可设置范围，两个数字之间用"-"。如：1-9，学生填写1到9之间的数字都算正确（包括1和9）
-          </td>
-        </tr>
       </tfoot>
     </table>
+    答案：请在下方下拉框中对选项进行排序（顺序从左到右）
+    <br />
+    <table v-if="data&&data.length>0">
+      <tr>
+        <td>
+          <template v-for="(item,index) in data[1]">
+            <select v-model="item.Name">
+              <template v-for="(cItem,cIndex) in data[0]">
+                <option :key="cIndex" :label="cItem.Name" :value="cItem.Name">
+                </option>
+              </template>
+            </select>
+          </template>
+        </td>
+      </tr>
+    </table>
   </div>
 </template>
 <script>
+  import {
+    getOptionList, //获取选择标签【A,B,C,D....】
+  } from '../../api/question/questionconfig'
   import UeEditor from '../editor/UeEditor'
   export default {
     props: {
@@ -51,20 +63,50 @@
           initialFrameWidth: null,
           initialFrameHeight: 80,
         },
+        optionTitleList: [],
       };
     },
-    created() {},
+    created() {
+      this.initConfig();
+    },
     methods: {
+      initConfig() {
+        this.optionTitleList = getOptionList();
+      },
       //删除选项
       deleteOpion(index) {
-        this.data.splice(index, 1);
+        this.data[0].splice(index, 1);
         this.calcOptionTitle();
       },
       //新增选项
       addOption() {
-        this.data.push({
-          Content: "",
-        });
+        if (this.data.length < 26) {
+          this.data[0].push({
+            Name: "",
+            Content: "",
+          });
+          this.data[1].push({
+            Name: "A",
+            Content: "",
+          });
+          this.calcOptionTitle();
+        } else {
+          this.$q.notify({
+            type: 'warning',
+            position: 'center',
+            timeout: 1500,
+            message: `最多只能添加26个选项`
+          })
+          return
+        }
+      },
+      //重新计算选择Title[A,B,C,D....]
+      calcOptionTitle() {
+        if (this.data && this.data.length > 0) {
+          this.data[0].forEach((item, index) => {
+            item.Name = this.optionTitleList[index];
+          })
+        }
       },
       //返回数据到父组件
       returnDataToParent() {