完成 选择 -> 拖拽

src/components/Adult/Preview.vue

@@ -1,9 +1,9 @@
 <!--  -->
 <template>
   <div
+    v-if="cur"
     class="NPC-Big-Book-preview adult-book-preview-sty"
     :class="['NPC-Big-Book-preview-' + themeColor]"
-    v-if="cur"
   >
     <div class="NNPE-title">
       <!-- 页眉 -->
@@ -16,21 +16,21 @@
           <template
             v-if="
               item.detail &&
-              item.detail.wordsList &&
-              item.detail.wordsList.length == 0
+                item.detail.wordsList &&
+                item.detail.wordsList.length == 0
             "
           >
             <p
               v-if="item.detail.sentence"
               :class="[
                 'content-con',
-                /^[\u4e00-\u9fa5]/.test(item.detail.sentence) ? 'hasCn' : '',
+                /^[\u4e00-\u9fa5]/.test(item.detail.sentence) ? 'hasCn' : ''
               ]"
               v-html="item.detail.sentence"
-            ></p>
+            />
           </template>
           <template v-else>
-            <div class="con-box" v-if="item.detail && item.detail.resArr">
+            <div v-if="item.detail && item.detail.resArr" class="con-box">
               <div
                 v-for="(itemCon, indexCon) in item.detail.resArr"
                 v-show="itemCon.isShow"
@@ -40,11 +40,12 @@
                 <template
                   v-if="
                     item.detail &&
-                    item.detail.wordsList &&
-                    item.detail.wordsList[indexCon + 1] &&
-                    item.detail.wordsList[indexCon + 1].chs &&
-                    chsFhList.indexOf(item.detail.wordsList[indexCon + 1].chs) >
-                      -1
+                      item.detail.wordsList &&
+                      item.detail.wordsList[indexCon + 1] &&
+                      item.detail.wordsList[indexCon + 1].chs &&
+                      chsFhList.indexOf(
+                        item.detail.wordsList[indexCon + 1].chs
+                      ) > -1
                   "
                 >
                   <div class="synthesis-box">
@@ -52,15 +53,14 @@
                       <span
                         class="pinyin"
                         :class="[
-                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                         ]"
-                        >{{ itemCon.pinyin }}</span
-                      >
+                      >{{ itemCon.pinyin }}</span>
                       <span class="hanzi content-con">{{ itemCon.chs }}</span>
                     </div>
                     <div
-                      style="text-align: left"
                       v-if="item.detail.wordsList[indexCon + 1]"
+                      style="text-align: left"
                     >
                       <span
                         class="pinyin"
@@ -69,10 +69,9 @@
                             item.detail.wordsList[indexCon + 1].pinyin
                           ) > -1
                             ? 'noFont'
-                            : '',
+                            : ''
                         ]"
-                        >{{ item.detail.wordsList[indexCon + 1].pinyin }}</span
-                      >
+                      >{{ item.detail.wordsList[indexCon + 1].pinyin }}</span>
                       <span class="hanzi content-con">{{
                         item.detail.wordsList[indexCon + 1].chs
                       }}</span>
@@ -83,21 +82,28 @@
                   <span
                     class="pinyin"
                     :class="[
-                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                     ]"
-                    >{{ itemCon.pinyin }}</span
-                  >
+                  >{{ itemCon.pinyin }}</span>
                   <span class="hanzi content-con">{{ itemCon.chs }}</span>
                 </template>
               </div>
             </div>
           </template>
-          <p class="NNPE-title-item-en" v-html="item.en"></p>
+          <p class="NNPE-title-item-en" v-html="item.en" />
         </div>
       </div>
-      <div class="NNPE-operate" v-if="isShowTitle">
-        <a class="btn-prev" :class="[preClick?'':'btn-prev-disabled']" @click="handleNNPEprev" />
-        <a class="btn-next" :class="[nextClick?'':'btn-next-disabled']" @click="handleNNPEnext" />
+      <div v-if="isShowTitle" class="NNPE-operate">
+        <a
+          class="btn-prev"
+          :class="[preClick ? '' : 'btn-prev-disabled']"
+          @click="handleNNPEprev"
+        />
+        <a
+          class="btn-next"
+          :class="[nextClick ? '' : 'btn-next-disabled']"
+          @click="handleNNPEnext"
+        />
       </div>
     </div>
     <div
@@ -121,30 +127,30 @@
         class="title-box-preview"
       >
         <div
-          class="title-big"
           v-if="item.number || item.z_title || item.f_title"
+          class="title-big"
         >
           <b v-if="item.number">{{ item.number }}</b>
           <div
             class="title-box-right"
             :class="[item.is_textIndex ? 'title-box-right-index' : '']"
           >
-            <h2 v-if="item.z_title" v-html="item.z_title"></h2>
+            <h2 v-if="item.z_title" v-html="item.z_title" />
             <h3
               v-if="item.f_title"
-              v-html="item.f_title"
               :style="{ marginTop: item.z_title ? '8px' : '0' }"
-            ></h3>
+              v-html="item.f_title"
+            />
           </div>
         </div>
         <div
           class="title-little"
           :class="[
-            item.little_title_number || item.little_title ? 'marginTop' : '',
+            item.little_title_number || item.little_title ? 'marginTop' : ''
           ]"
         >
-          <b v-html="item.little_title_number"></b>
-          <p v-html="item.little_title"></p>
+          <b v-html="item.little_title_number" />
+          <p v-html="item.little_title" />
         </div>
         <div
           :class="['NNPE-tableList', item.is_bg ? 'NNPE-tableList-hasBg' : '']"
@@ -156,7 +162,7 @@
             :class="[
               indexs === item.table_list.length - 1
                 ? 'NNPE-tableList-tr-last'
-                : '',
+                : ''
             ]"
           >
             <div
@@ -166,7 +172,7 @@
                 'NNPE-tableList-item',
                 items.length == 1
                   ? 'NNPE-tableList-item-noMargin'
-                  : 'NNPE-tableList-item' + items.length,
+                  : 'NNPE-tableList-item' + items.length
               ]"
             >
               <template v-if="itemss.data">
@@ -174,63 +180,63 @@
                   <Ligature
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.data.type == 'image'">
                   <Picture
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :child-type="itemss.type"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'phrase_chs'">
                   <WordPhrase
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'NewWord_chs'">
                   <WordPhrase
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :currentTreeID="currentTreeID"
+                    :current-tree-i-d="currentTreeID"
                     :indexs="indexs"
                     :indexss="indexss"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'annotation_chs'">
                   <WordPhrase
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'notes_chs'">
                   <Notes
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'article_chs'">
                   <ArticleTemChs
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :n-n-p-e-new-word-list="NNPENewWordList"
                     :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                     :n-n-p-e-annotation-list="NNPEAnnotationList"
                     :theme-color="themeColor"
-                    :currentTreeID="currentTreeID"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :current-tree-i-d="currentTreeID"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <!-- <template v-if="itemss.type == 'sentence_segword_chs'">
@@ -242,232 +248,240 @@
                 </template> -->
                 <template v-if="itemss.type == 'dialogue_article_chs'">
                   <DialogueArticleViewChs
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :n-n-p-e-new-word-list="NNPENewWordList"
                     :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                     :n-n-p-e-annotation-list="NNPEAnnotationList"
                     :color-box="colorBox"
                     :theme-color="themeColor"
-                    :currentTreeID="currentTreeID"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :current-tree-i-d="currentTreeID"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'dialogue_answer_chs'">
                   <DialogueAnswerViewChs
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :color-box="colorBox"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'input_record_chs'">
                   <InputHasRecord
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
                   <TextInputRecord
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template
                   v-if="
                     itemss.type == 'inputItem_chs' ||
-                    itemss.type == 'sentence_input_chs' ||
-                    itemss.type == 'sentence_judge_chs' ||
-                    itemss.type == 'sentence_record_chs' ||
-                    itemss.type == 'sentence_input_record_chs'
+                      itemss.type == 'sentence_input_chs' ||
+                      itemss.type == 'sentence_judge_chs' ||
+                      itemss.type == 'sentence_record_chs' ||
+                      itemss.type == 'sentence_input_record_chs'
                   "
                 >
                   <SentenceInput
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'NumberCombination_chs'">
                   <NumberSelectHasRecord
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type === 'voice_matrix'">
                   <voice-matrix
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
+                    :task-model="TaskModel"
+                  />
+                </template>
+                <template v-if="itemss.type === 'select_drag'">
+                  <select-drag
                     v-if="refresh"
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'toneSelect_chs'">
                   <SelectTone
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'sudoku_chs'">
                   <Soduko
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'single_chs'">
                   <Single
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'text_problem_chs'">
                   <TextProblem
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'newWord_preview_chs'">
                   <NewWordShow
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :indexStr="index + '_' + indexs + '_' + indexss"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :index-str="index + '_' + indexs + '_' + indexss"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template
                   v-if="itemss.type == 'listen_record_single_syllable_chs'"
                 >
                   <SelectYinjie
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'sentence_listen_read_chs'">
                   <SentenceListenRead
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'sort_chs'">
                   <SentenceSortQP
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'checkbox_self_assessment_chs'">
                   <Checkbox
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template
                   v-if="
                     itemss.type == 'record_control_mini' ||
-                    itemss.type == 'record_control_normal' ||
-                    itemss.type == 'record_control_pro' ||
-                    itemss.type == 'record_control_promax'
+                      itemss.type == 'record_control_normal' ||
+                      itemss.type == 'record_control_pro' ||
+                      itemss.type == 'record_control_promax'
                   "
                 >
                   <RecordModule
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template
                   v-if="
                     itemss.type == 'upload_control_chs' ||
-                    itemss.type == 'upload_control_preview_chs'
+                      itemss.type == 'upload_control_preview_chs'
                   "
                 >
                   <UploadControlView
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :type="itemss.type"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'CourseStart_chs'">
                   <CourseStart
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :handle-n-n-p-enext="handleNNPEnext"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'tinydemo_chs'">
                   <Tinydemo
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'video_chs'">
                   <VideoControl
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :type="itemss.type"
                     :theme-color="themeColor"
-                    :indexStr="
+                    :index-str="
                       index + '_' + indexs + '_' + indexss + '_' + currentTreeID
                     "
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'table_chs'">
                   <TableView
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :type="itemss.type"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'play_record_chs'">
                   <PlayRecordView
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :type="itemss.type"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
                 <template v-if="itemss.type == 'upload_pdf_chs'">
                   <PdfView
+                    v-if="refresh"
                     :cur-que="itemss.data"
                     :type="itemss.type"
                     :theme-color="themeColor"
-                    :TaskModel="TaskModel"
-                    v-if="refresh"
+                    :task-model="TaskModel"
                   />
                 </template>
               </template>
@@ -476,12 +490,24 @@
         </div>
       </div>
     </div>
-    <div class="NNPE-title NNPE-title-gray" v-if="isShowSave||isShowTitle">
+    <div v-if="isShowSave || isShowTitle" class="NNPE-title NNPE-title-gray">
       <!-- 页眉 -->
-      <a class="submitAnswer" v-if="isShowSave" @click="submitUserAnswerNPC">提交</a>
-      <div class="NNPE-operate" v-if="isShowTitle">
-        <a class="btn-prev" :class="[preClick?'':'btn-prev-disabled']" @click="handleNNPEprev" />
-        <a class="btn-next" :class="[nextClick?'':'btn-next-disabled']" @click="handleNNPEnext" />
+      <a
+        v-if="isShowSave"
+        class="submitAnswer"
+        @click="submitUserAnswerNPC"
+      >提交</a>
+      <div v-if="isShowTitle" class="NNPE-operate">
+        <a
+          class="btn-prev"
+          :class="[preClick ? '' : 'btn-prev-disabled']"
+          @click="handleNNPEprev"
+        />
+        <a
+          class="btn-next"
+          :class="[nextClick ? '' : 'btn-next-disabled']"
+          @click="handleNNPEnext"
+        />
       </div>
     </div>
   </div>
@@ -511,6 +537,7 @@ import SentenceListenRead from "./preview/SentenceListenRead.vue"; // 听并朗
 import SentenceSortQP from "./preview/SentenceSortQP.vue"; // 句子拖拽排序
 import Checkbox from "./preview/CheckBoxModule.vue"; // 问卷调查-多选题
 import VoiceMatrix from "./preview/VoiceMatrix.vue"; // 语音矩阵
+import SelectDrag from './preview/SelectDrag.vue'; // 选择 -> 拖拽
 import RecordModule from "./preview/RecordModule.vue"; // 录音组件
 import UploadControlView from "./preview/UploadControlView.vue"; // 预览控件
 import DialogueAnswerViewChs from "./preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue"; // 文章模板
@@ -547,6 +574,7 @@ export default {
     SentenceSortQP,
     Checkbox,
     VoiceMatrix,
+    SelectDrag,
     RecordModule,
     UploadControlView,
     DialogueAnswerViewChs,
@@ -555,7 +583,7 @@ export default {
     VideoControl,
     TableView,
     PdfView,
-    PlayRecordView,
+    PlayRecordView
   },
   props: [
     "context",
@@ -572,7 +600,7 @@ export default {
   data() {
     return {
       contextData: null,
-      answerData: [], //获取的答案数据
+      answerData: [], // 获取的答案数据
       queIndex: -1, // 题目的索引
       cur: null, // 当前的题目
       watchIndex: -1, // 监听的值
@@ -585,32 +613,32 @@ export default {
       colorBox: [
         {
           touxiang: "#72B51D",
-          bg: "#E9F0DF",
+          bg: "#E9F0DF"
         },
         {
           touxiang: "#DE4444",
-          bg: "rgba(222, 68, 68, 0.1)",
+          bg: "rgba(222, 68, 68, 0.1)"
         },
         {
           touxiang: "#A7A7A7",
-          bg: "#ffffff",
+          bg: "#ffffff"
         },
         {
           touxiang: "#4D91F6",
-          bg: "#F1F7FF",
+          bg: "#F1F7FF"
         },
         {
           touxiang: "#FF8A00",
-          bg: "rgba(255, 138, 0, 0.1)",
-        },
+          bg: "rgba(255, 138, 0, 0.1)"
+        }
       ],
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
-      idArr: [], //当前的pid
+      idArr: [], // 当前的pid
       oldCurrentTreeID: "",
       refresh: true,
       preClick: false, // 上一页是否可点
-      nextClick: false, // 下一页是否可点
+      nextClick: false // 下一页是否可点
     };
   },
   computed: {},
@@ -630,18 +658,18 @@ export default {
           _this.handleTitleData();
           if (_this.queIndex == _this.queTotal - 1) {
             this.idArr.forEach((item, i) => {
-                if (item == _this.currentTreeID) {
-                    if(i==0){
-                        _this.preClick = false
-                        _this.nextClick = true
-                    }else if (i == this.idArr.length - 1) {
-                        _this.nextClick = false
-                        _this.preClick = true
-                    } else {
-                        _this.nextClick = true
-                        _this.preClick = true
-                    }
+              if (item == _this.currentTreeID) {
+                if (i == 0) {
+                  _this.preClick = false;
+                  _this.nextClick = true;
+                } else if (i == this.idArr.length - 1) {
+                  _this.nextClick = false;
+                  _this.preClick = true;
+                } else {
+                  _this.nextClick = true;
+                  _this.preClick = true;
                 }
+              }
             });
           }
           _this.$nextTick(() => {
@@ -651,8 +679,8 @@ export default {
         }
       },
       // 深度观察监听
-      deep: true,
-    },
+      deep: true
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -670,18 +698,18 @@ export default {
       });
       if (_this.queIndex == _this.queTotal - 1) {
         this.idArr.forEach((item, i) => {
-            if (item == _this.currentTreeID) {
-                if(i==0){
-                    _this.preClick = false
-                    _this.nextClick = true
-                }else if (i == this.idArr.length - 1) {
-                    _this.nextClick = false
-                    _this.preClick = true
-                } else {
-                    _this.nextClick = true
-                    _this.preClick = true
-                }
+          if (item == _this.currentTreeID) {
+            if (i == 0) {
+              _this.preClick = false;
+              _this.nextClick = true;
+            } else if (i == this.idArr.length - 1) {
+              _this.nextClick = false;
+              _this.preClick = true;
+            } else {
+              _this.nextClick = true;
+              _this.preClick = true;
             }
+          }
         });
       }
     }
@@ -706,7 +734,7 @@ export default {
             let obj = {
               pinyin: sItem.pinyin,
               chs: sItem.chs,
-              isShow: true,
+              isShow: true
             };
             paraArr.push(obj);
           });
@@ -716,7 +744,7 @@ export default {
     },
     initContextData() {
       const _this = this;
-      //_this.$root.isRecording = false;
+      // _this.$root.isRecording = false;
 
       _this.contextData = JSON.parse(JSON.stringify(_this.context));
       _this.queIndex = 0;
@@ -759,9 +787,9 @@ export default {
                   itemss.data.option
                 );
               }
-            //   let Bookanswer = localStorage.getItem("Bookanswer");
-            let Bookanswer = this.bookAnswerContent
-              //if (_this.TaskModel == "lookAnswer" && _this.bookAnswerContent) {
+              //   let Bookanswer = localStorage.getItem("Bookanswer");
+              let Bookanswer = this.bookAnswerContent;
+              // if (_this.TaskModel == "lookAnswer" && _this.bookAnswerContent) {
               if (Bookanswer) {
                 // let answerData = JSON.parse(_this.bookAnswerContent);
                 let answerData = JSON.parse(Bookanswer);
@@ -773,7 +801,7 @@ export default {
                     answerData[index].table_list[indexs].length > 0 &&
                     answerData[index].table_list[indexs][indexss].data
                       ? answerData[index].table_list[indexs][indexss].data
-                          .Bookanswer
+                        .Bookanswer
                       : [];
                 }
               }
@@ -791,12 +819,12 @@ export default {
         this.idArr.forEach((item, i) => {
           if (item == _this.currentTreeID) {
             if (i == 0) {
-                _this.preClick = false
-                _this.nextClick = true
+              _this.preClick = false;
+              _this.nextClick = true;
             } else {
               _this.changeId(this.idArr[i - 1]);
-              _this.preClick = true
-              _this.nextClick = true
+              _this.preClick = true;
+              _this.nextClick = true;
             }
           }
         });
@@ -824,11 +852,11 @@ export default {
     },
     puaseAudio() {
       let audio = document.getElementsByTagName("audio");
-      audio.forEach((item) => {
+      audio.forEach(item => {
         item.pause();
       });
       let video = document.getElementsByTagName("video");
-      video.forEach((item) => {
+      video.forEach(item => {
         item.pause();
       });
     },
@@ -840,12 +868,12 @@ export default {
         this.idArr.forEach((item, i) => {
           if (item == _this.currentTreeID) {
             if (i == this.idArr.length - 1) {
-                _this.nextClick = false
-                _this.preClick = true
+              _this.nextClick = false;
+              _this.preClick = true;
             } else {
               _this.changeId(this.idArr[i + 1]);
-              _this.nextClick = true
-              _this.preClick = true
+              _this.nextClick = true;
+              _this.preClick = true;
             }
           }
         });
@@ -860,7 +888,7 @@ export default {
       let result = [];
       contextData.cur_fn_data.forEach((item, index) => {
         result[index] = {
-          table_list: [],
+          table_list: []
         };
         item.table_list.forEach((items, indexs) => {
           result[index].table_list[indexs] = [];
@@ -869,24 +897,24 @@ export default {
               let Bookanswer = itemss.data.Bookanswer;
               let obj = {
                 data: {
-                  Bookanswer: Bookanswer,
-                },
+                  Bookanswer
+                }
               };
               result[index].table_list[indexs][indexss] = obj;
             } else {
               result[index].table_list[indexs][indexss] = {
-                data: null,
+                data: null
               };
             }
           });
         });
       });
       this.$emit("finishTaskMaterial", JSON.stringify(result));
-    },
-  }, // 如果页面有keep-alive缓存功能，这个函数会触发
+    }
+  } // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .NPC-Big-Book-preview {
   width: 860px;
@@ -901,34 +929,36 @@ export default {
     height: 64px;
     display: flex;
     align-items: center;
-    &.NNPE-title-gray{
-        background: #EEEEEE;
-        border-radius: 0;
-        margin-top: 24px;
-        .NNPE-operate {
-            position: absolute;
-            top: 10px;
-            right: 20px;
-            a {
-                background: #fff url("../../assets/newImage/common/btn-pre-black.png")
-                center no-repeat;
-                background-size: 24px;
-                &.btn-next {
-                    background: #fff url("../../assets/newImage/common/btn-next-black.png")
-                        center no-repeat;
-                    background-size: 24px;
-                }
-                &:hover {
-                    background-color: #fff;
-                }
-                &:active {
-                    background-color: #fff;
-                }
-                &.btn-prev-disabled,&.btn-next-disabled{
-                    background-color: rgba(0, 0, 0, 0.25);
-                }
-            }
+    &.NNPE-title-gray {
+      background: #eeeeee;
+      border-radius: 0;
+      margin-top: 24px;
+      .NNPE-operate {
+        position: absolute;
+        top: 10px;
+        right: 20px;
+        a {
+          background: #fff url("../../assets/newImage/common/btn-pre-black.png")
+            center no-repeat;
+          background-size: 24px;
+          &.btn-next {
+            background: #fff
+              url("../../assets/newImage/common/btn-next-black.png") center
+              no-repeat;
+            background-size: 24px;
+          }
+          &:hover {
+            background-color: #fff;
+          }
+          &:active {
+            background-color: #fff;
+          }
+          &.btn-prev-disabled,
+          &.btn-next-disabled {
+            background-color: rgba(0, 0, 0, 0.25);
+          }
         }
+      }
     }
     h1 {
       color: #ffffff;
@@ -1015,7 +1045,8 @@ export default {
         &:active {
           background-color: #d24444;
         }
-        &.btn-prev-disabled,&.btn-next-disabled{
+        &.btn-prev-disabled,
+        &.btn-next-disabled {
           background-color: rgba(0, 0, 0, 0.25);
           cursor: not-allowed;
         }
@@ -1140,23 +1171,23 @@ export default {
       }
     }
   }
-  .submitAnswer{
-      width: 160px;
-      height: 44px;
-      border-radius: 4px;
-      font-size: 16px;
-      line-height: 44px;
-      text-align: center;
-      font-family: robot;
-      background: #e35454;
-      color: #fff;
-      margin-left: 16px;
-      &:hover {
-        background-color: #f76565;
-      }
-      &:active {
-        background-color: #d24444;
-      }
+  .submitAnswer {
+    width: 160px;
+    height: 44px;
+    border-radius: 4px;
+    font-size: 16px;
+    line-height: 44px;
+    text-align: center;
+    font-family: robot;
+    background: #e35454;
+    color: #fff;
+    margin-left: 16px;
+    &:hover {
+      background-color: #f76565;
+    }
+    &:active {
+      background-color: #d24444;
+    }
   }
 }
 .NPC-Big-Book-preview-green {
@@ -1181,14 +1212,14 @@ export default {
       }
     }
   }
-  .submitAnswer{
-      background: #24b99e;
-      &:hover {
-        background-color: #3dd4b8;
-      }
-      &:active {
-        background-color: #1fa189;
-      }
+  .submitAnswer {
+    background: #24b99e;
+    &:hover {
+      background-color: #3dd4b8;
+    }
+    &:active {
+      background-color: #1fa189;
+    }
   }
   .classTopic-box {
     background: #24b99e;
@@ -1228,14 +1259,14 @@ export default {
       }
     }
   }
-  .submitAnswer{
-      background: #bd8865;
-      &:hover {
-        background-color: #d6a687;
-      }
-      &:active {
-        background-color: #a37557;
-      }
+  .submitAnswer {
+    background: #bd8865;
+    &:hover {
+      background-color: #d6a687;
+    }
+    &:active {
+      background-color: #a37557;
+    }
   }
   .classTopic-box {
     background: #bd8865;

src/components/Adult/common/data.js

@@ -1,735 +1,738 @@
 let fnData = [{
-        type: "article_chs",
-        name: "课文",
-    }, {
-        type: "dialogue_article_chs",
-        name: "对话课文",
-    },
-    // {
-    //     type: "sentence_segword_chs",
-    //     name: "句子分词",
-    // },
-    {
-        type: "NewWord_chs",
-        name: "生词",
-    },
-    {
-        type: "notes_chs",
-        name: "注释",
+  type: "article_chs",
+  name: "课文",
+}, {
+  type: "dialogue_article_chs",
+  name: "对话课文",
+},
+// {
+//     type: "sentence_segword_chs",
+//     name: "句子分词",
+// },
+{
+  type: "NewWord_chs",
+  name: "生词",
+},
+{
+  type: "notes_chs",
+  name: "注释",
 
-    }, {
-        type: "dialogue_answer_chs",
-        name: "对话题模板"
-    }, {
-        type: "sentence_chs",
-        name: "句子模板",
-        list: [{
-                type: "sentence_input_chs",
-                name: "句子填空",
-            },
-            {
-                type: "sentence_judge_chs",
-                name: "句子判断",
-            },
-            {
-                type: "sentence_record_chs",
-                name: "句子录音",
-            },
-            {
-                type: "sentence_input_record_chs",
-                name: "句子填空+录音",
-            },
-            {
-                type: "sentence_listen_read_chs",
-                name: "句子听+朗读",
-            },
-        ],
+}, {
+  type: "dialogue_answer_chs",
+  name: "对话题模板"
+}, {
+  type: "sentence_chs",
+  name: "句子模板",
+  list: [{
+    type: "sentence_input_chs",
+    name: "句子填空",
+  },
+  {
+    type: "sentence_judge_chs",
+    name: "句子判断",
+  },
+  {
+    type: "sentence_record_chs",
+    name: "句子录音",
+  },
+  {
+    type: "sentence_input_record_chs",
+    name: "句子填空+录音",
+  },
+  {
+    type: "sentence_listen_read_chs",
+    name: "句子听+朗读",
+  },
+  ],
 
-    },
-    // {
-    //     type: "image_question",
-    //     name: "看图模板",
-    //     list: [{
-    //         type: "image_question_input",
-    //         name: "看图填空",
-    //     }, {
-    //         type: "image_question_record",
-    //         name: "看图录入",
-    //     }, {
-    //         type: "image_question_input_record",
-    //         name: "看图填空+录入",
-    //     }]
-    // }, 
-    {
-        type: "voice_matrix",
-        name: "语音矩阵",
-    },
-    //  {
-    //     type: "divider",
-    //     name: "分割线",
-    //     data_structure: {
-    //         type: 'divider',
-    //         name: "分割线",
-    //     }
-    // },
-    // {
-    //     type: "text",
-    //     name: "文本描述",
-    //     data_structure: {
-    //         type: 'text',
-    //         name: "文本描述",
-    //         con: '',
-    //         pinyin: '',
-    //         english: '',
-    //         img_list: [],
-    //         mp3_list: []
-    //     }
-    // },
-    // {
-    //     type: "single_chs",
-    //     name: "单选题",
-    // },
-    // {
-    //     type: "listen_record_single_chs",
-    //     name: "听录音选答案",
-    // },
-    // {
-    //     type: "checkbox_chs",
-    //     name: "多选题",
-    // },
-    {
-        type: "checkbox_self_assessment_chs",
-        name: "自我评估"
-    },
-    // {
-    //     type: "judge",
-    //     name: "判断题",
-    //     data_structure: {
-    //         type: 'judge',
-    //         name: "判断题",
-    //         title: "",
-    //         con: '',
-    //         pinyin: '',
-    //         img_list: [],
-    //         mp3_list: [],
-    //         judge: ''
-    //     }
-    // },
-    // {
-    //     type: "multiRowInput",
-    //     name: "多行文本题",
-    //     data_structure: {
-    //         type: 'multiRowInput',
-    //         name: "多行文本题",
-    //         title: "",
-    //         con: [{
-    //             con: '',
-    //             annotation: "", //注释
-    //         }],
-    //         pinyin: '',
-    //         img_list: [],
-    //         mp3_list: [],
-    //         fn_list: [{
-    //             type: 'astrictNumber',
-    //             name: '限制字数',
-    //             isFn: false,
-    //         }, ],
-    //     }
-    // },
-    // {
-    //     type: "singleRowInput",
-    //     name: "单行文本题",
-    //     data_structure: {
-    //         type: 'singleRowInput',
-    //         name: "单行文本题",
-    //         title: "",
+},
+// {
+//     type: "image_question",
+//     name: "看图模板",
+//     list: [{
+//         type: "image_question_input",
+//         name: "看图填空",
+//     }, {
+//         type: "image_question_record",
+//         name: "看图录入",
+//     }, {
+//         type: "image_question_input_record",
+//         name: "看图填空+录入",
+//     }]
+// },
+{
+  type: "voice_matrix",
+  name: "语音矩阵",
+},
+{
+  type: 'select_drag',
+  name: '选择-拖拽'
+},
+//  {
+//     type: "divider",
+//     name: "分割线",
+//     data_structure: {
+//         type: 'divider',
+//         name: "分割线",
+//     }
+// },
+// {
+//     type: "text",
+//     name: "文本描述",
+//     data_structure: {
+//         type: 'text',
+//         name: "文本描述",
+//         con: '',
+//         pinyin: '',
+//         english: '',
+//         img_list: [],
+//         mp3_list: []
+//     }
+// },
+// {
+//     type: "single_chs",
+//     name: "单选题",
+// },
+// {
+//     type: "listen_record_single_chs",
+//     name: "听录音选答案",
+// },
+// {
+//     type: "checkbox_chs",
+//     name: "多选题",
+// },
+{
+  type: "checkbox_self_assessment_chs",
+  name: "自我评估"
+},
+// {
+//     type: "judge",
+//     name: "判断题",
+//     data_structure: {
+//         type: 'judge',
+//         name: "判断题",
+//         title: "",
+//         con: '',
+//         pinyin: '',
+//         img_list: [],
+//         mp3_list: [],
+//         judge: ''
+//     }
+// },
+// {
+//     type: "multiRowInput",
+//     name: "多行文本题",
+//     data_structure: {
+//         type: 'multiRowInput',
+//         name: "多行文本题",
+//         title: "",
+//         con: [{
+//             con: '',
+//             annotation: "", //注释
+//         }],
+//         pinyin: '',
+//         img_list: [],
+//         mp3_list: [],
+//         fn_list: [{
+//             type: 'astrictNumber',
+//             name: '限制字数',
+//             isFn: false,
+//         }, ],
+//     }
+// },
+// {
+//     type: "singleRowInput",
+//     name: "单行文本题",
+//     data_structure: {
+//         type: 'singleRowInput',
+//         name: "单行文本题",
+//         title: "",
 
-    //         con: [{
-    //             con: '',
-    //             annotation: "", //注释
-    //         }],
-    //         pinyin: '',
-    //         img_list: [],
-    //         mp3_list: [],
-    //         fn_list: [{
-    //             type: 'astrictNumber',
-    //             name: '限制字数',
-    //             isFn: false,
-    //         }, ],
-    //     }
-    // },
-    // {
-    //     type: "hanzi",
-    //     name: "汉字模版",
-    //     data_structure: {
-    //         type: 'hanzi',
-    //         name: "汉字模版",
-    //         title: "",
-    //         option: [{
-    //             hanzi: '',
-    //             pinyin: '',
-    //             mp3_list: [],
-    //             img_list: [],
-    //             definition_list: [''],
-    //             isAnswer: '',
-    //             isChecked: '',
-    //             isJudge: '',
-    //             correctInput: ''
-    //         }],
+//         con: [{
+//             con: '',
+//             annotation: "", //注释
+//         }],
+//         pinyin: '',
+//         img_list: [],
+//         mp3_list: [],
+//         fn_list: [{
+//             type: 'astrictNumber',
+//             name: '限制字数',
+//             isFn: false,
+//         }, ],
+//     }
+// },
+// {
+//     type: "hanzi",
+//     name: "汉字模版",
+//     data_structure: {
+//         type: 'hanzi',
+//         name: "汉字模版",
+//         title: "",
+//         option: [{
+//             hanzi: '',
+//             pinyin: '',
+//             mp3_list: [],
+//             img_list: [],
+//             definition_list: [''],
+//             isAnswer: '',
+//             isChecked: '',
+//             isJudge: '',
+//             correctInput: ''
+//         }],
 
-    //         correct: [{
-    //             single: [],
-    //             checkBox: [],
-    //             judge: [],
-    //             input: [],
-    //             spell: []
-    //         }],
-    //         fn_list: [{
-    //                 type: 'def',
-    //                 name: '更多释义',
-    //                 isFn: false,
-    //                 isDisable: false,
-    //             },
-    //             {
-    //                 type: 'record',
-    //                 name: '跟读',
-    //                 isFn: false,
-    //                 isDisable: false,
-    //             },
-    //             {
-    //                 type: 'spell',
-    //                 name: '拼写',
-    //                 isFn: false,
-    //                 isDisable: false,
-    //             },
-    //             {
-    //                 type: 'input',
-    //                 name: '输入',
-    //                 isFn: false,
-    //                 isDisable: false,
-    //             },
-    //             {
-    //                 type: 'copy',
-    //                 name: '摹写',
-    //                 isFn: false,
-    //                 isDisable: false,
-    //             },
-    //             {
-    //                 type: 'single',
-    //                 name: '单选',
-    //                 isFn: false,
-    //                 isDisable: false,
-    //             }, {
-    //                 type: 'checkBox',
-    //                 name: '多选',
-    //                 isFn: false,
-    //                 isDisable: false,
-    //             }, {
-    //                 type: 'judge',
-    //                 name: '判断',
-    //                 isFn: false,
-    //                 isDisable: false,
-    //             },
-    //         ]
-    //     },
-    // },
-    {
-        type: "image",
-        name: "图片控件",
-        list: [{
-                type: 'image_checkBox',
-                name: "图片多选",
-            },
-            {
-                type: 'image_judge',
-                name: "图片判断",
-            },
-            {
-                type: 'image_single',
-                name: "图片单选",
-            },
-            {
-                type: 'image_dobleinput',
-                name: "双输入",
-            },
-            {
-                type: 'image_gdcy',
-                name: "固定词语",
-            },
-            {
-                type: 'image_input',
-                name: "单行输入",
-            },
-            {
-                type: "imgage_image",
-                name: "纯图片",
-            },
-        ],
-    },
+//         correct: [{
+//             single: [],
+//             checkBox: [],
+//             judge: [],
+//             input: [],
+//             spell: []
+//         }],
+//         fn_list: [{
+//                 type: 'def',
+//                 name: '更多释义',
+//                 isFn: false,
+//                 isDisable: false,
+//             },
+//             {
+//                 type: 'record',
+//                 name: '跟读',
+//                 isFn: false,
+//                 isDisable: false,
+//             },
+//             {
+//                 type: 'spell',
+//                 name: '拼写',
+//                 isFn: false,
+//                 isDisable: false,
+//             },
+//             {
+//                 type: 'input',
+//                 name: '输入',
+//                 isFn: false,
+//                 isDisable: false,
+//             },
+//             {
+//                 type: 'copy',
+//                 name: '摹写',
+//                 isFn: false,
+//                 isDisable: false,
+//             },
+//             {
+//                 type: 'single',
+//                 name: '单选',
+//                 isFn: false,
+//                 isDisable: false,
+//             }, {
+//                 type: 'checkBox',
+//                 name: '多选',
+//                 isFn: false,
+//                 isDisable: false,
+//             }, {
+//                 type: 'judge',
+//                 name: '判断',
+//                 isFn: false,
+//                 isDisable: false,
+//             },
+//         ]
+//     },
+// },
+{
+  type: "image",
+  name: "图片控件",
+  list: [{
+    type: 'image_checkBox',
+    name: "图片多选",
+  },
+  {
+    type: 'image_judge',
+    name: "图片判断",
+  },
+  {
+    type: 'image_single',
+    name: "图片单选",
+  },
+  {
+    type: 'image_dobleinput',
+    name: "双输入",
+  },
+  {
+    type: 'image_gdcy',
+    name: "固定词语",
+  },
+  {
+    type: 'image_input',
+    name: "单行输入",
+  },
+  {
+    type: "imgage_image",
+    name: "纯图片",
+  },
+  ],
+},
 
-    // {
-    //     type: "audio_control",
-    //     name: "音频控制条",
-    //     data_structure: {
-    //         type: 'audio_control',
-    //         name: "音频控制条",
-    //         option: [{
-    //             xuhao: '',
-    //             yinbiao: '',
-    //             img_list: [],
-    //             mp3_list: [],
-    //             isAnswer: ''
-    //         }, ],
-    //     }
-    // },
-    // {
-    //     type: "audio_control_easy",
-    //     name: "音频控制条-简易",
-    //     data_structure: {
-    //         type: 'audio_control_easy',
-    //         name: "音频控制条-简易",
-    //         option: [{
-    //             xuhao: '',
-    //             yinbiao: '',
-    //             img_list: [],
-    //             mp3_list: [],
-    //             isAnswer: ''
-    //         }, ],
-    //     }
-    // },
-    {
-        type: "input_record_chs",
-        name: "输入+录音",
-    },
-    {
-        type: "recordHZ_inputPY_chs",
-        name: "读汉字写拼音",
-    },
-    // {
-    //     type: "inputItem_chs",
-    //     name: "输入选项",
-    // },
-    {
-        type: "upload_control_chs",
-        name: "上传控件",
-    },
-    {
-        type: "upload_control_preview_chs",
-        name: "上传控件预览查看",
-    },
-    // {
-    //     type: "switch_control_chs",
-    //     name: "开关控件",
-    // },
-    {
-        type: "record_control",
-        name: "录音控件",
-        list: [{
-                type: 'record_control_mini',
-                name: "录音控件-mini",
-            },
-            {
-                type: 'record_control_normal',
-                name: "录音控件-normal",
-            },
-            {
-                type: 'record_control_pro',
-                name: "录音控件-pro",
-            },
-            {
-                type: 'record_control_promax',
-                name: "录音控件-promax",
-            },
-        ],
-        data_structure: {
-            type: 'record_control',
-            name: "录音控件",
-            option: [{
-                hanzi: '',
-                pinyin: '',
-                mp3_list: [],
-                img_list: [],
-                isAnswer: '',
-                isChecked: '',
-                isJudge: '',
-                correctInput: '',
-            }],
-        },
-    },
-    // {
-    //     type: "pure_input",
-    //     name: "纯输入",
-    //     data_structure: {
-    //         type: 'pure_input',
-    //         name: "纯输入",
-    //         option: [{
-    //             answer: "",
-    //         }, ],
-    //         answer: "",
-    //         record: false, //需要录音
-    //         mp3_list: [],
-    //     }
-    // },
-    // {
-    //     type: "matrixSingle",
-    //     name: "矩阵单选",
-    //     data_structure: {
-    //         type: 'matrixSingle',
-    //         name: "矩阵单选",
-    //         title: "",
-    //         con: [{
-    //                 con: "",
-    //                 Answer: "",
-    //             },
-    //             {
-    //                 con: "",
-    //                 Answer: "",
-    //             },
-    //         ],
-    //         option: [{
-    //                 con: '',
-    //                 pinyin: '',
-    //                 img_list: [],
-    //                 mp3_list: [],
-    //                 isAnswer: ''
-    //             },
-    //             {
-    //                 con: '',
-    //                 pinyin: '',
-    //                 img_list: [],
-    //                 mp3_list: [],
-    //                 isAnswer: ''
-    //             }
-    //         ],
-    //         correct: ["", ""]
-    //     }
-    // },
-    // {
-    //     type: "matrixChckbox",
-    //     name: "矩阵多选",
-    //     data_structure: {
-    //         type: 'matrixChckbox',
-    //         name: "矩阵多选",
-    //         title: "",
+// {
+//     type: "audio_control",
+//     name: "音频控制条",
+//     data_structure: {
+//         type: 'audio_control',
+//         name: "音频控制条",
+//         option: [{
+//             xuhao: '',
+//             yinbiao: '',
+//             img_list: [],
+//             mp3_list: [],
+//             isAnswer: ''
+//         }, ],
+//     }
+// },
+// {
+//     type: "audio_control_easy",
+//     name: "音频控制条-简易",
+//     data_structure: {
+//         type: 'audio_control_easy',
+//         name: "音频控制条-简易",
+//         option: [{
+//             xuhao: '',
+//             yinbiao: '',
+//             img_list: [],
+//             mp3_list: [],
+//             isAnswer: ''
+//         }, ],
+//     }
+// },
+{
+  type: "input_record_chs",
+  name: "输入+录音",
+},
+{
+  type: "recordHZ_inputPY_chs",
+  name: "读汉字写拼音",
+},
+// {
+//     type: "inputItem_chs",
+//     name: "输入选项",
+// },
+{
+  type: "upload_control_chs",
+  name: "上传控件",
+},
+{
+  type: "upload_control_preview_chs",
+  name: "上传控件预览查看",
+},
+// {
+//     type: "switch_control_chs",
+//     name: "开关控件",
+// },
+{
+  type: "record_control",
+  name: "录音控件",
+  list: [{
+    type: 'record_control_mini',
+    name: "录音控件-mini",
+  },
+  {
+    type: 'record_control_normal',
+    name: "录音控件-normal",
+  },
+  {
+    type: 'record_control_pro',
+    name: "录音控件-pro",
+  },
+  {
+    type: 'record_control_promax',
+    name: "录音控件-promax",
+  },
+  ],
+  data_structure: {
+    type: 'record_control',
+    name: "录音控件",
+    option: [{
+      hanzi: '',
+      pinyin: '',
+      mp3_list: [],
+      img_list: [],
+      isAnswer: '',
+      isChecked: '',
+      isJudge: '',
+      correctInput: '',
+    }],
+  },
+},
+// {
+//     type: "pure_input",
+//     name: "纯输入",
+//     data_structure: {
+//         type: 'pure_input',
+//         name: "纯输入",
+//         option: [{
+//             answer: "",
+//         }, ],
+//         answer: "",
+//         record: false, //需要录音
+//         mp3_list: [],
+//     }
+// },
+// {
+//     type: "matrixSingle",
+//     name: "矩阵单选",
+//     data_structure: {
+//         type: 'matrixSingle',
+//         name: "矩阵单选",
+//         title: "",
+//         con: [{
+//                 con: "",
+//                 Answer: "",
+//             },
+//             {
+//                 con: "",
+//                 Answer: "",
+//             },
+//         ],
+//         option: [{
+//                 con: '',
+//                 pinyin: '',
+//                 img_list: [],
+//                 mp3_list: [],
+//                 isAnswer: ''
+//             },
+//             {
+//                 con: '',
+//                 pinyin: '',
+//                 img_list: [],
+//                 mp3_list: [],
+//                 isAnswer: ''
+//             }
+//         ],
+//         correct: ["", ""]
+//     }
+// },
+// {
+//     type: "matrixChckbox",
+//     name: "矩阵多选",
+//     data_structure: {
+//         type: 'matrixChckbox',
+//         name: "矩阵多选",
+//         title: "",
 
-    //         con: [{
-    //                 con: "",
-    //                 AnswerList: [],
-    //             },
-    //             {
-    //                 type: "matrixChekbox",
-    //                 name: "矩阵多选",
-    //                 data_structure: {
-    //                     type: 'matrixChekbox',
-    //                     name: "矩阵多选",
-    //                     con: [{
-    //                             con: "",
-    //                             AnswerList: [],
-    //                         },
-    //                         {
-    //                             con: "",
-    //                             AnswerList: [],
-    //                         },
-    //                     ],
-    //                     option: [{
-    //                             con: '',
-    //                             pinyin: '',
-    //                             img_list: [],
-    //                             mp3_list: [],
-    //                             isAnswer: ''
-    //                         },
-    //                         {
-    //                             con: '',
-    //                             pinyin: '',
-    //                             img_list: [],
-    //                             mp3_list: [],
-    //                             isAnswer: ''
-    //                         }
-    //                     ],
-    //                     correct: [
-    //                         [],
-    //                         []
-    //                     ]
-    //                 }
-    //             },
+//         con: [{
+//                 con: "",
+//                 AnswerList: [],
+//             },
+//             {
+//                 type: "matrixChekbox",
+//                 name: "矩阵多选",
+//                 data_structure: {
+//                     type: 'matrixChekbox',
+//                     name: "矩阵多选",
+//                     con: [{
+//                             con: "",
+//                             AnswerList: [],
+//                         },
+//                         {
+//                             con: "",
+//                             AnswerList: [],
+//                         },
+//                     ],
+//                     option: [{
+//                             con: '',
+//                             pinyin: '',
+//                             img_list: [],
+//                             mp3_list: [],
+//                             isAnswer: ''
+//                         },
+//                         {
+//                             con: '',
+//                             pinyin: '',
+//                             img_list: [],
+//                             mp3_list: [],
+//                             isAnswer: ''
+//                         }
+//                     ],
+//                     correct: [
+//                         [],
+//                         []
+//                     ]
+//                 }
+//             },
 
-    //             {
-    //                 con: '',
-    //                 pinyin: '',
-    //                 img_list: [],
-    //                 mp3_list: [],
-    //                 isAnswer: ''
-    //             }
-    //         ],
-    //         correct: [
-    //             [],
-    //             []
-    //         ]
-    //     }
-    // },
+//             {
+//                 con: '',
+//                 pinyin: '',
+//                 img_list: [],
+//                 mp3_list: [],
+//                 isAnswer: ''
+//             }
+//         ],
+//         correct: [
+//             [],
+//             []
+//         ]
+//     }
+// },
 
-    // {
-    //     type: "text_input_RecoedItem",
-    //     name: "文字+录入+录音条",
-    //     data_structure: {
-    //         type: "text_input_RecoedItem",
-    //         name: "文字+录入+录音条",
-    //         title: "",
-    //         option: [{
-    //             number: "",
-    //             con: "",
-    //             answer: "",
-    //         }, ]
-    //     },
-    // },
-    // {
-    //     type: "dialogue",
-    //     name: "对话题",
-    //     data_structure: {
-    //         type: 'dialogue',
-    //         name: "对话题",
-    //         title: "",
-    //         option: [{
-    //                 roleName: "",
-    //                 site: "left",
-    //                 con: '',
-    //                 number: "",
-    //                 isRecord: "", //是否需要录音
-    //                 mp3_list: [],
-    //                 img_list: [],
-    //                 definition_list: [],
-    //                 AnswerList: [""],
-    //                 isAnswer: '',
-    //                 isChecked: '',
-    //                 judge: '',
-    //                 correctInput: ''
-    //             },
-    //             {
-    //                 roleName: "",
-    //                 site: "left",
-    //                 con: '',
-    //                 number: "",
-    //                 isRecord: "", //是否需要录音
-    //                 mp3_list: [],
-    //                 img_list: [],
-    //                 definition_list: [],
-    //                 AnswerList: [""],
-    //                 isAnswer: '',
-    //                 isChecked: '',
-    //                 judge: '',
-    //                 correctInput: ''
-    //             },
-    //         ],
-    //         fn_list: [
-    //             // {
-    //             //       type: 'def',
-    //             //       name: '更多释义',
-    //             //       isFn: false,
-    //             //   },
-    //             {
-    //                 type: 'record',
-    //                 name: '跟读',
-    //                 isFn: false,
-    //             },
-    //             // {
-    //             //     type: 'spell',
-    //             //     name: '拼写',
-    //             //     isFn: false,
-    //             // },
-    //             {
-    //                 type: 'input',
-    //                 name: '输入',
-    //                 isFn: false,
-    //             },
-    //             // {
-    //             //     type: 'copy',
-    //             //     name: '摹写',
-    //             //     isFn: false,
-    //             // },
-    //             // {
-    //             //     type: 'single',
-    //             //     name: '单选',
-    //             //     isFn: false,
-    //             // }, {
-    //             //     type: 'checkout',
-    //             //     name: '多选',
-    //             //     isFn: false,
-    //             // }, {
-    //             //     type: 'judge',
-    //             //     name: '判断',
-    //             //     isFn: false,
-    //             // },
-    //         ],
-    //         correct: [{
-    //             input: ["", ""],
-    //         }]
-    //     },
-    // },
-    {
-        type: "ligature_chs",
-        name: "连线",
-    },
-    // {
-    //     type: "record",
-    //     name: "录音题",
-    //     data_structure: {
-    //         type: "record",
-    //         name: "录音题",
-    //         title: "",
-    //         option: [{
-    //             mp3_list: [],
-    //             con: "",
-    //             value: "",
-    //         }, ]
-    //     }
-    // },
-    // {
-    //     type: "hearRecord",
-    //     name: "听录音题",
-    //     data_structure: {
-    //         type: "hearRecord",
-    //         name: "听录音题",
+// {
+//     type: "text_input_RecoedItem",
+//     name: "文字+录入+录音条",
+//     data_structure: {
+//         type: "text_input_RecoedItem",
+//         name: "文字+录入+录音条",
+//         title: "",
+//         option: [{
+//             number: "",
+//             con: "",
+//             answer: "",
+//         }, ]
+//     },
+// },
+// {
+//     type: "dialogue",
+//     name: "对话题",
+//     data_structure: {
+//         type: 'dialogue',
+//         name: "对话题",
+//         title: "",
+//         option: [{
+//                 roleName: "",
+//                 site: "left",
+//                 con: '',
+//                 number: "",
+//                 isRecord: "", //是否需要录音
+//                 mp3_list: [],
+//                 img_list: [],
+//                 definition_list: [],
+//                 AnswerList: [""],
+//                 isAnswer: '',
+//                 isChecked: '',
+//                 judge: '',
+//                 correctInput: ''
+//             },
+//             {
+//                 roleName: "",
+//                 site: "left",
+//                 con: '',
+//                 number: "",
+//                 isRecord: "", //是否需要录音
+//                 mp3_list: [],
+//                 img_list: [],
+//                 definition_list: [],
+//                 AnswerList: [""],
+//                 isAnswer: '',
+//                 isChecked: '',
+//                 judge: '',
+//                 correctInput: ''
+//             },
+//         ],
+//         fn_list: [
+//             // {
+//             //       type: 'def',
+//             //       name: '更多释义',
+//             //       isFn: false,
+//             //   },
+//             {
+//                 type: 'record',
+//                 name: '跟读',
+//                 isFn: false,
+//             },
+//             // {
+//             //     type: 'spell',
+//             //     name: '拼写',
+//             //     isFn: false,
+//             // },
+//             {
+//                 type: 'input',
+//                 name: '输入',
+//                 isFn: false,
+//             },
+//             // {
+//             //     type: 'copy',
+//             //     name: '摹写',
+//             //     isFn: false,
+//             // },
+//             // {
+//             //     type: 'single',
+//             //     name: '单选',
+//             //     isFn: false,
+//             // }, {
+//             //     type: 'checkout',
+//             //     name: '多选',
+//             //     isFn: false,
+//             // }, {
+//             //     type: 'judge',
+//             //     name: '判断',
+//             //     isFn: false,
+//             // },
+//         ],
+//         correct: [{
+//             input: ["", ""],
+//         }]
+//     },
+// },
+{
+  type: "ligature_chs",
+  name: "连线",
+},
+// {
+//     type: "record",
+//     name: "录音题",
+//     data_structure: {
+//         type: "record",
+//         name: "录音题",
+//         title: "",
+//         option: [{
+//             mp3_list: [],
+//             con: "",
+//             value: "",
+//         }, ]
+//     }
+// },
+// {
+//     type: "hearRecord",
+//     name: "听录音题",
+//     data_structure: {
+//         type: "hearRecord",
+//         name: "听录音题",
 
-    //         title: "",
-    //         option: [{
-    //             mp3_list: [],
-    //             con: "",
-    //             value: "",
-    //         }, ]
-    //     }
-    // },
-    // {
-    //     type: "sort",
-    //     name: "排序题",
-    // },
-    // {
-    //     type: "blank",
-    //     name: "填空题",
-    // },
-    // {
-    //     type: "annex",
-    //     name: "附件题",
-    // },
-    // {
-    //     type: "dropdown",
-    //     name: "下拉题",
-    // },
-    // {
-    //     type: "drawing",
-    //     name: "画图题",
-    // },
-    // {
-    //     type: "text_item",
-    //     name: "文本条",
-    //     data_structure: {
-    //         type: "text_item",
-    //         name: "文本条",
-    //         title: "",
-    //         option: [{
-    //             number: "",
-    //             con: "",
-    //         }],
-    //         numberList: {
-    //             type: "number",
-    //             name: "每行几个",
-    //             con: "2",
-    //             arr: [{
-    //                     id: 1,
-    //                     value: 1,
-    //                 }, {
-    //                     id: 2,
-    //                     value: 2,
+//         title: "",
+//         option: [{
+//             mp3_list: [],
+//             con: "",
+//             value: "",
+//         }, ]
+//     }
+// },
+// {
+//     type: "sort",
+//     name: "排序题",
+// },
+// {
+//     type: "blank",
+//     name: "填空题",
+// },
+// {
+//     type: "annex",
+//     name: "附件题",
+// },
+// {
+//     type: "dropdown",
+//     name: "下拉题",
+// },
+// {
+//     type: "drawing",
+//     name: "画图题",
+// },
+// {
+//     type: "text_item",
+//     name: "文本条",
+//     data_structure: {
+//         type: "text_item",
+//         name: "文本条",
+//         title: "",
+//         option: [{
+//             number: "",
+//             con: "",
+//         }],
+//         numberList: {
+//             type: "number",
+//             name: "每行几个",
+//             con: "2",
+//             arr: [{
+//                     id: 1,
+//                     value: 1,
+//                 }, {
+//                     id: 2,
+//                     value: 2,
 
-    //                 }, {
-    //                     id: 3,
-    //                     value: 3,
-    //                 },
-    //                 {
-    //                     id: 4,
-    //                     value: 4,
-    //                 },
-    //             ]
-    //         }
-    //     }
-    // },
-    // {
-    //     type: "bg_control",
-    //     name: "背景图控件",
-    //     data_structure: {
-    //         type: 'bg_control',
-    //         name: "背景图控件",
-    //         img_list: [],
-    //     }
-    // },
-    // {
-    //     type: "NumberCombination_chs",
-    //     name: "数字组合",
-    // },
-    {
-        type: "toneSelect_chs",
-        name: "音调选择",
-    },
-    // {
-    //     type: "sudoku_chs",
-    //     name: "数独",
-    // },
-    {
-        type: "text_problem_chs",
-        name: "课文上方的问题",
-    },
-    {
-        type: "newWord_preview_chs",
-        name: "生字展示",
-    },
-    {
-        type: "listen_record_single_syllable_chs",
-        name: "听录音选音节",
-    },
-    // {
-    //     type: "zi_transverse_line_chs",
-    //     name: "字+横线",
-    // },
-    // {
-    //     type: "select_input_chs",
-    //     name: "选择填空控件",
-    // },
-    // {
-    //     type: "play_input_record_chs",
-    //     name: "播放+输入+录音",
-    // },
-    // {
-    //     type: "drag_chs",
-    //     name: "拖拽",
-    // },
-    {
-        type: "sort_chs",
-        name: "排序"
-    },
-    {
-        type: "CourseStart_chs",
-        name: "封面",
-    },
-    {
-        type: "tinydemo_chs",
-        name: "富文本"
-    },
-    {
-        type: "video_chs",
-        name: "视频控件"
-    },
-    {
-        type: "table_chs",
-        name: "表格",
-    },
-    {
-        type: "play_record_chs",
-        name: "播放音频控件",
-    },
-    {
-        type: "upload_pdf_chs",
-        name: "上传pdf",
-    },
-]
+//                 }, {
+//                     id: 3,
+//                     value: 3,
+//                 },
+//                 {
+//                     id: 4,
+//                     value: 4,
+//                 },
+//             ]
+//         }
+//     }
+// },
+// {
+//     type: "bg_control",
+//     name: "背景图控件",
+//     data_structure: {
+//         type: 'bg_control',
+//         name: "背景图控件",
+//         img_list: [],
+//     }
+// },
+// {
+//     type: "NumberCombination_chs",
+//     name: "数字组合",
+// },
+{
+  type: "toneSelect_chs",
+  name: "音调选择",
+},
+// {
+//     type: "sudoku_chs",
+//     name: "数独",
+// },
+{
+  type: "text_problem_chs",
+  name: "课文上方的问题",
+},
+{
+  type: "newWord_preview_chs",
+  name: "生字展示",
+},
+{
+  type: "listen_record_single_syllable_chs",
+  name: "听录音选音节",
+},
+// {
+//     type: "zi_transverse_line_chs",
+//     name: "字+横线",
+// },
+// {
+//     type: "select_input_chs",
+//     name: "选择填空控件",
+// },
+// {
+//     type: "play_input_record_chs",
+//     name: "播放+输入+录音",
+// },
+// {
+//     type: "drag_chs",
+//     name: "拖拽",
+// },
+{
+  type: "sort_chs",
+  name: "排序"
+},
+{
+  type: "CourseStart_chs",
+  name: "封面",
+},
+{
+  type: "tinydemo_chs",
+  name: "富文本"
+},
+{
+  type: "video_chs",
+  name: "视频控件"
+},
+{
+  type: "table_chs",
+  name: "表格",
+},
+{
+  type: "play_record_chs",
+  name: "播放音频控件",
+},
+{
+  type: "upload_pdf_chs",
+  name: "上传pdf",
+},
+];
 
-
-export default { fnData: fnData }
+export default { fnData };

src/components/Adult/inputModules/SelectDrag.vue

@@ -0,0 +1,198 @@
+<!-- 选择 -> 拖拽 -->
+<template>
+  <div v-if="curQue" class="select-drag">
+    <div class="select-drag-configure">
+      <span>拼音位置：</span>
+      <el-radio-group v-model="curQue.pyPosition">
+        <el-radio v-for="{type, label} in pyPositionList" :key="type" :label="type">{{ label }}</el-radio>
+      </el-radio-group>
+    </div>
+    <!-- 选项 -->
+    <div class="select-drag-options">
+      <div v-for="(item, i) in curQue.options" :key="i" class="select-drag-options-item">
+        <sentence-segword-chs :cur-que="item" type="adultinput" :is-hide-py-position="true" />
+        <div>
+          <el-button type="danger" @click="deleteOption(i)">删除</el-button>
+        </div>
+      </div>
+
+      <el-button type="primary" @click="addOption">添加选项</el-button>
+    </div>
+    <!-- 句子 -->
+    <div class="select-drag-sentences">
+      <div v-for="(item, i) in curQue.sentences" :key="`sentences-${i}`" class="select-drag-sentences-item">
+        <span>{{ i + 1 }}.</span>
+        <div v-for="(x, j) in item" :key="`segmentation-${j}`" class="segmentation">
+          <div>
+            <template v-if="x.isSpace">
+              <el-input class="space-placeholder" disabled />
+            </template>
+            <template v-else>
+              <sentence-segword-chs :cur-que="x" type="adultinput" :is-hide-py-position="true" />
+            </template>
+          </div>
+          <div>
+            <el-button type="danger" @click="deleteSegmentation(i, j)">删除</el-button>
+          </div>
+        </div>
+        <div>
+          <el-button @click="addSentenceSeg(i)">添加分句</el-button>
+          <el-button @click="addSentenceSeg(i, true)">添加空格</el-button>
+          <el-button type="danger" @click="deleteSentenceSeg(i)">删除分句</el-button>
+        </div>
+      </div>
+
+      <el-button type="primary" @click="addSentence">添加句子</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import SentenceSegwordChs from "@/components/Adult/inputModules/SentenceSegwordChs/index.vue";
+
+export default {
+  components: {
+    SentenceSegwordChs
+  },
+  props: {
+    curQue: {
+      type: Object,
+      default: () => {
+        return {
+          type: "select_drag",
+          name: "选择-拖拽",
+          pyPosition: "top",
+          options: [],
+          sentences: [],
+          isFirst: true
+        };
+      }
+    },
+    changeCurQue: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      pyPositionList: [
+        {
+          type: "top",
+          label: "拼音在上"
+        },
+        {
+          type: "bottom",
+          label: "拼音在下"
+        }
+      ]
+    };
+  },
+  created() {
+    if (this.curQue.isFirst) {
+      this.curQue.isFirst = false;
+      this.changeCurQue(JSON.parse(JSON.stringify(this.curQue)));
+    }
+  },
+  methods: {
+    addOption() {
+      this.curQue.options.push({
+        type: "sentence_segword_chs",
+        name: "句子分词",
+        pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
+        sentence: "", // 句子
+        segList: [], // 分词结果
+        seg_words: "",
+        wordsList: []
+      });
+    },
+
+    deleteOption(i) {
+      this.curQue.options.splice(i, 1);
+    },
+
+    addSentence() {
+      this.curQue.sentences.push([]);
+    },
+
+    addSentenceSeg(i, isSpace = false) {
+      let sentences = this.curQue.sentences[i];
+
+      if (isSpace) {
+        sentences.push({
+          isSpace,
+          dragList: []
+        });
+        return;
+      }
+
+      sentences.push({
+        isSpace,
+        type: "sentence_segword_chs",
+        name: "句子分词",
+        pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
+        sentence: "", // 句子
+        segList: [], // 分词结果
+        seg_words: "",
+        wordsList: []
+      });
+    },
+
+    deleteSentenceSeg(i) {
+      this.curQue.sentences.splice(i, 1);
+    },
+
+    deleteSegmentation(i, j) {
+      this.curQue.sentences[i].splice(j, 1);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.select-drag {
+  &-options {
+    margin-top: 24px;
+    margin-bottom: 24px;
+
+    &-item {
+      margin-top: 12px;
+      display: flex;
+      align-items: center;
+
+      :first-child {
+        flex: 1;
+      }
+
+      div:last-child {
+        padding-left: 24px;
+      }
+    }
+  }
+
+  &-sentences {
+    margin-bottom: 12px;
+
+    &-item {
+      padding: 12px 0;
+
+      .segmentation {
+        display: flex;
+        align-items: center;
+
+        :first-child {
+          flex: 1;
+        }
+
+        div:last-child {
+          padding-left: 24px;
+        }
+      }
+
+      .space-placeholder {
+        margin-bottom: 12px;
+        width: 200px;
+      }
+    }
+  }
+}
+</style>

src/components/Adult/inputModules/SentenceSegwordChs/index.vue

@@ -1,58 +1,57 @@
 <!--  -->
 <template>
   <div
-    class="NPC-Book-Article Big-Book-Maxwidth"
     v-if="curQue"
     v-loading="loading"
+    class="NPC-Book-Article Big-Book-Maxwidth"
   >
-    <div class="Big-Book-img" v-if="type != 'adultinput'">
+    <div v-if="type != 'adultinput'" class="Big-Book-img">
       <UploadArt
         :change-fill-id="changeImage"
         :datafile-list="fileCon.img_list"
         upload-type="image"
         class="article_pdf"
-        :filleNumber="imageNumber"
+        :fille-number="imageNumber"
         :before-upload="beforeUpload"
       />
       <ul
-        class="uploadArt_list"
         v-if="curQue.img_list && curQue.img_list.length > 0"
+        class="uploadArt_list"
       >
         <li
           v-for="(artItem, artIndex) in curQue.img_list"
           :key="'articleImgList' + artIndex"
         >
-          <img :src="artItem.url" style="width: 26px" />
+          <img :src="artItem.url" style="width: 26px">
           <span class="art_name">{{ artItem.name }}</span>
           <p>
             图片放到第<el-input
+              v-model="artItem.imgNumber"
               class="imgNumber"
               type="number"
-              v-model="artItem.imgNumber"
               size="mini"
               @input="forceUpdate"
-            ></el-input
-            >段落的后面
+            />段落的后面
           </p>
           <img
             src="@/assets/adult/del-close.png"
             class="del-close"
             @click="delImage(artIndex)"
-          />
+          >
         </li>
       </ul>
     </div>
-    <div class="Big-Book-mp3" v-if="type != 'adultinput'">
+    <div v-if="type != 'adultinput'" class="Big-Book-mp3">
       <Upload
         type="mp3"
-        :changeFillId="changeMp3"
-        :datafileList="fileCon.mp3_list"
-        :filleNumber="mp3Number"
-        :uploadType="'mp3'"
+        :change-fill-id="changeMp3"
+        :datafile-list="fileCon.mp3_list"
+        :fille-number="mp3Number"
+        :upload-type="'mp3'"
         :before-upload="beforeUploadMp3"
       />
     </div>
-    <div class="NPC-Book-model">
+    <div v-if="!isHidePyPosition" class="NPC-Book-model">
       <span class="Big-Book-left-text">拼音位置：</span>
       <el-radio-group v-model="curQue.pyPosition">
         <el-radio :label="'top'">字上面</el-radio>
@@ -61,11 +60,11 @@
     </div>
     <!---分句-->
     <div class="NPC-Book-Paragraph">
-      <Clauseresult :curQue="curQue" :segByWord="segByWord" />
+      <Clauseresult :cur-que="curQue" :seg-by-word="segByWord" />
     </div>
     <!---分词-->
-    <div class="NPC-Book-Word" v-if="isByWord">
-      <Segbyword :curQue="curQue" :segList="segList" />
+    <div v-if="isByWord" class="NPC-Book-Word">
+      <Segbyword :cur-que="curQue" :seg-list="segList" />
     </div>
   </div>
 </template>
@@ -86,7 +85,7 @@ export default {
     Clauseresult,
     Segbyword,
   },
-  props: ["curQue", "changeCurQue", "tmIndex", "type"],
+  props: ["curQue", "changeCurQue", "tmIndex", "type", "isHidePyPosition"],
   data() {
     return {
       imageNumber: 1000,
@@ -102,9 +101,9 @@ export default {
       data_structure: {
         type: "sentence_segword_chs",
         name: "句子分词",
-        pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
-        sentence: "", //句子
-        segList: [], //分词结果
+        pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
+        sentence: "", // 句子
+        segList: [], // 分词结果
         seg_words: "",
         wordsList: [],
       },
@@ -112,12 +111,39 @@ export default {
   },
   computed: {},
   watch: {},
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.curQue) {
+      if (this.curQue.wordsList.length > 0) {
+        this.isByWord = true;
+      }
+      if (!this.curQue.img_list) {
+        this.curQue.img_list = [];
+      }
+      if (!this.curQue.mp3_list) {
+        this.curQue.mp3_list = [];
+      }
+      this.fileCon.img_list = JSON.parse(JSON.stringify(this.curQue.img_list));
+      this.fileCon.mp3_list = JSON.parse(JSON.stringify(this.curQue.mp3_list));
+    } else {
+      this.initCurQueData();
+    }
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
     changeMp3(fileList) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));
       const articleImgRes = [];
-      articleImgList.forEach((item) => {
+      articleImgList.forEach(item => {
         if (item.response) {
           const obj = {
             name: item.name,
@@ -130,17 +156,17 @@ export default {
       });
       this.curQue.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
     },
-    beforeUploadMp3(file){
-        if (file.size > 20 * 1024 * 1024) {
-            this.$message.warning('上传音频大小不能超过20M');
-            return false   //必须返回false
-        }
+    beforeUploadMp3(file) {
+      if (file.size > 20 * 1024 * 1024) {
+        this.$message.warning('上传音频大小不能超过20M');
+        return false; // 必须返回false
+      }
     },
     beforeUpload(file) {
-        if (file.size > 2 * 1024 * 1024) {
-            this.$message.warning('上传图片大小不能超过2M');
-            return false   //必须返回false
-        }
+      if (file.size > 2 * 1024 * 1024) {
+        this.$message.warning('上传图片大小不能超过2M');
+        return false; // 必须返回false
+      }
     },
     changeImage(file) {
       if (file.response) {
@@ -167,7 +193,7 @@ export default {
     changeIsClause(isClause) {
       this.isClause = isClause;
     },
-    //生成分词
+    // 生成分词
     segByWord(sentence) {
       this.loading = true;
       let textList = [];
@@ -175,9 +201,9 @@ export default {
       textList.push(str);
 
       let data = {
-        textList: textList,
+        textList,
       };
-      BatchSegContent(data).then((res) => {
+      BatchSegContent(data).then(res => {
         this.loading = false;
         let list = res.data.result.list[0];
         this.$set(this.curQue, "segList", list);
@@ -189,34 +215,7 @@ export default {
       let res_data = JSON.parse(JSON.stringify(this.data_structure));
       this.changeCurQue(res_data);
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (this.curQue) {
-      if (this.curQue.wordsList.length > 0) {
-        this.isByWord = true;
-      }
-      if (!this.curQue.img_list) {
-        this.curQue.img_list = [];
-      }
-      if (!this.curQue.mp3_list) {
-        this.curQue.mp3_list = [];
-      }
-      this.fileCon.img_list = JSON.parse(JSON.stringify(this.curQue.img_list));
-      this.fileCon.mp3_list = JSON.parse(JSON.stringify(this.curQue.mp3_list));
-    } else {
-      this.initCurQueData();
-    }
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='scss' scoped>
@@ -281,4 +280,4 @@ p {
     margin-right: 16px;
   }
 }
-</style>
+</style>

src/components/Adult/inputModules/VoiceMatrix.vue

@@ -1,3 +1,4 @@
+<!-- 语音矩阵 -->
 <template>
   <div v-if="curQue" class="voice-matrix">
     <div class="voice-matrix-upload">
@@ -84,7 +85,7 @@
       <el-button type="primary" @click="createMatrix">创建矩阵</el-button>
     </div>
 
-    <div v-if="isShowMatrix" class="voice-matrix-data">
+    <div v-if="curQue.voiceMatrix.matrix.length > 0" class="voice-matrix-data">
       <div class="matrix-group">
         <div>
           <el-checkbox v-model="curQue.voiceMatrix.firstLineHighlight">
@@ -143,11 +144,19 @@
                   v-if="Object.keys(column.lrc_data).length > 0"
                   class="lrc"
                 >
-                  <el-input v-model="column.lrc_data.begin_time" size="small" maxlength="200"
-        show-word-limit />
+                  <el-input
+                    v-model="column.lrc_data.begin_time"
+                    size="small"
+                    maxlength="200"
+                    show-word-limit
+                  />
                   <span> ~ </span>
-                  <el-input v-model="column.lrc_data.end_time" size="small" maxlength="200"
-        show-word-limit />
+                  <el-input
+                    v-model="column.lrc_data.end_time"
+                    size="small"
+                    maxlength="200"
+                    show-word-limit
+                  />
                   {{ column.lrc_data.text }}
                 </span>
               </div>
@@ -220,10 +229,36 @@ export default {
     Upload,
     SentenceSegwordChs
   },
-  props: ["curQue", "changeCurQue"],
+  props: {
+    curQue: {
+      type: Object,
+      default: () => {
+        return {
+          type: "voice_matrix",
+          name: "语音矩阵",
+          isFirst: true,
+          mp3_list: [],
+          lrc_list: [],
+          voiceMatrix: {
+            isAudioNumber: false,
+            audioSerialNumber: 1,
+            lastColumnHighlight: false,
+            rowSelection: false,
+            columnSelection: false,
+            firstLineHighlight: false,
+            matrix: []
+          },
+          lrc_arr: []
+        };
+      }
+    },
+    changeCurQue: {
+      type: Function,
+      required: true
+    }
+  },
   data() {
     return {
-      isShowMatrix: false,
       match_type: "pinyin",
       rowNumber: 1,
       columnNumber: 1,
@@ -255,49 +290,22 @@ export default {
         { type: "pinyin", name: "纯拼音（例：yu）" },
         { type: "chinese", name: "中文（例：鱼）" },
         { type: "pinyinWithToneMark", name: "拼音符号音调（例：yú）" }
-      ],
-      data_structure: {
-        type: "voice_matrix",
-        name: "语音矩阵",
-        mp3_list: [],
-        lrc_list: [],
-        voiceMatrix: {
-          isAudioNumber: false,
-          audioSerialNumber: 1,
-          lastColumnHighlight: false,
-          rowSelection: false,
-          columnSelection: false,
-          firstLineHighlight: false,
-          matrix: []
-        },
-        lrc_arr: []
-      }
+      ]
     };
   },
   created() {
-    if (!this.curQue) {
-      this.changeCurQue(JSON.parse(JSON.stringify(this.data_structure)));
-    } else {
-      this.isShowMatrix = true;
+    if (this.curQue.isFirst) {
+      this.curQue.isFirst = false;
+      this.changeCurQue(JSON.parse(JSON.stringify(this.curQue)));
     }
   },
   methods: {
     createMatrix() {
-      if (this.rowNumber === 0 || this.columnNumber === 0) {
-        this.$message.warning("请填写行、列");
-        return;
+      if (Number(this.rowNumber) === 0 || Number(this.columnNumber) === 0) {
+        return this.$message.warning("请填写行、列");
       }
 
-      this.curQue.voiceMatrix = {
-        isAudioNumber: false,
-        audioSerialNumber: 1,
-        firstLineHighlight: false,
-        lastColumnHighlight: false,
-        rowSelection: false,
-        columnSelection: false,
-        matrix: this.matrix()
-      };
-      this.isShowMatrix = true;
+      this.curQue.voiceMatrix.matrix = this.matrix();
     },
 
     matrix() {

src/components/Adult/preview/SelectDrag.vue

@@ -0,0 +1,311 @@
+<!-- 选择 -> 拖拽 -->
+<template>
+  <div class="select-drag">
+    <!-- 选项 -->
+    <div class="select-drag-options">
+      <draggable
+        v-model="curQue.options"
+        group="option"
+        animation="300"
+        class="draggable-options"
+        :sort="false"
+        :disabled="isAnswerMode"
+        :move="onMove"
+      >
+        <span
+          v-for="(item, i) in curQue.options"
+          :key="`option-${i}`"
+          class="drag-option"
+          :style="{
+            cursor: `${isAnswerMode ? 'default':'pointer'}`
+          }"
+        >
+          <div>
+            <span
+              v-for="({ chs, pinyin }, j) in item.wordsList"
+              :key="`${isPyTop ? 'pinyin' : 'chs'}-${j}`"
+              :class="[`${isPyTop ? 'pinyin' : 'chs'}`]"
+              v-text="`${isPyTop ? pinyin : chs}`"
+            />
+          </div>
+          <div>
+            <span
+              v-for="({ chs, pinyin }, j) in item.wordsList"
+              :key="`${isPyTop ? 'chs' : 'pinyin'}-${j}`"
+              :class="[`${isPyTop ? 'chs' : 'pinyin'}`]"
+              v-text="`${isPyTop ? chs : pinyin}`"
+            />
+          </div>
+        </span>
+      </draggable>
+    </div>
+    <!-- 句子 -->
+    <div class="select-drag-sentences">
+      <div
+        v-for="(sentence, i) in curQue.sentences"
+        :key="`sentence-${i}`"
+        :data-serial="i + 1"
+        class="drag-sentence"
+      >
+        <span
+          v-for="(item, j) in sentence"
+          :key="`sentence-item-${j}`"
+          :class="[
+            'drag-sentence-item',
+            `${item.isSpace && item.dragList.length <= 0 ? 'space' : ''}`
+          ]"
+          :style="{
+            'grid-template': item.isSpace
+              ? ''
+              : `repeat(${item.wordsList.length}, auto) / repeat(${item.wordsList.length}, auto)`
+          }"
+        >
+          <!-- 空格 -> 拖拽 -->
+          <template v-if="item.isSpace">
+            <draggable
+              v-model="item.dragList"
+              :data-sentence="i"
+              :data-subsection="j"
+              :sort="false"
+              :disabled="isAnswerMode"
+              group="option"
+              animation="300"
+              :move="onMoveTo"
+              @change="change"
+            >
+              <div
+                :class="[`${item.dragList.length > 0 ? 'drag-list' : ''}`]"
+                :style="{
+                  'grid-template':
+                    item.dragList.length > 0
+                      ? `repeat(${item.dragList[0].wordsList.length}, auto) / repeat(${item.dragList[0].wordsList.length}, auto)`
+                      : '',
+                  cursor: `${isAnswerMode ? 'default':'pointer'}`
+                }"
+              >
+                <template v-if="item.dragList.length > 0">
+                  <span
+                    v-for="({ chs, pinyin }, k) in item.dragList[0].wordsList"
+                    :key="`${isPyTop ? 'pinyin' : 'chs'}-${k}`"
+                    :class="[`${isPyTop ? 'pinyin' : 'chs'}`]"
+                    v-text="isPyTop ? pinyin : chs"
+                  />
+                  <span
+                    v-for="({ chs, pinyin }, k) in item.dragList[0].wordsList"
+                    :key="`${isPyTop ? 'chs' : 'pinyin'}-${k}`"
+                    :class="[`${isPyTop ? 'chs' : 'pinyin'}`]"
+                    v-text="isPyTop ? chs : pinyin"
+                  />
+                </template>
+              </div>
+            </draggable>
+          </template>
+          <template v-else>
+            <span
+              v-for="({ chs, pinyin }, k) in item.wordsList"
+              :key="`${isPyTop ? 'pinyin' : 'chs'}-${k}`"
+              :class="[`${isPyTop ? 'pinyin' : 'chs'}`]"
+            >
+              {{ isPyTop ? pinyin : chs }}
+            </span>
+            <span
+              v-for="({ chs, pinyin }, k) in item.wordsList"
+              :key="`${isPyTop ? 'chs' : 'pinyin'}-${k}`"
+              :class="[`${isPyTop ? 'chs' : 'pinyin'}`]"
+            >
+              {{ isPyTop ? chs : pinyin }}
+            </span>
+          </template>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+
+export default {
+  components: { draggable },
+  props: {
+    curQue: {
+      type: Object,
+      required: true
+    },
+    themeColor: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isAnswerMode: false,
+      curDrag: {
+        sentenceIndex: 0,
+        subsectionIndex: 0
+      }
+    };
+  },
+  computed: {
+    isPyTop() {
+      return this.curQue.pyPosition === "top";
+    }
+  },
+  created() {
+    const Bookanswer = this.curQue.Bookanswer;
+    if (Bookanswer) {
+      this.isAnswerMode = true;
+      Bookanswer.dragList.forEach(
+        ({ sentenceIndex, subsectionIndex, ...data }) => {
+          this.curQue.sentences[sentenceIndex][subsectionIndex].dragList = [
+            { ...data }
+          ];
+        }
+      );
+    } else {
+      let Bookanswer = {
+        dragList: []
+      };
+      this.$set(this.curQue, "Bookanswer", Bookanswer);
+    }
+  },
+  methods: {
+    onMove(e) {
+      if (e.relatedContext.component.realList.length > 0) return false;
+      let { sentence, subsection } = e.to.dataset;
+      this.curDrag = {
+        sentenceIndex: sentence,
+        subsectionIndex: subsection
+      };
+      return true;
+    },
+
+    onMoveTo(e) {
+      let { sentence, subsection } = e.from.dataset;
+      this.curDrag = {
+        sentenceIndex: sentence,
+        subsectionIndex: subsection
+      };
+    },
+
+    change({ added, removed }) {
+      if (added) {
+        console.log(added.element);
+        this.curQue.Bookanswer.dragList.push({
+          ...this.curDrag,
+          ...added.element
+        });
+      }
+      if (removed) {
+        this.curQue.Bookanswer.dragList = this.curQue.Bookanswer.dragList.filter(
+          ({ sentenceIndex, subsectionIndex }) => {
+            let {
+              sentenceIndex: senIndex,
+              subsectionIndex: subIndex
+            } = this.curDrag;
+            if (sentenceIndex === senIndex && subsectionIndex === subIndex) {
+              return false;
+            }
+            return true;
+          }
+        );
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.select-drag {
+  width: 100%;
+  color: #000;
+
+  .pinyin {
+    font-family: "GB-PINYINOK-B";
+    font-size: 14px;
+    line-height: 1.3;
+  }
+
+  .chs {
+    font-family: "FZJCGFKTK";
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  &-options {
+    width: 100%;
+    background-color: #f7f7f7;
+    border: 1px solid #dedede;
+    border-radius: 8px;
+    padding: 24px;
+
+    .draggable-options {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 16px;
+      row-gap: 24px;
+
+      .drag-option {
+        min-width: 96px;
+        height: 58px;
+        text-align: center;
+        padding: 8px 12px;
+        background-color: #fff;
+        border: 1px solid #dedede;
+        border-radius: 8px;
+      }
+    }
+  }
+
+  &-sentences {
+    .drag-sentence {
+      margin-top: 24px;
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: attr(data-serial);
+        display: inline-block;
+        text-align: center;
+        color: #fff;
+        font-size: 16px;
+        line-height: 1.5;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: #32a5d8;
+        margin-right: 12px;
+      }
+
+      &-item {
+        padding: 8px 12px;
+        height: 58px;
+        background-color: #fff;
+        border: 1px solid #dedede;
+        border-radius: 8px;
+        margin-left: 4px;
+        display: grid;
+        column-gap: 4px;
+
+        > :not(:first-child) {
+          text-align: center;
+        }
+
+        &.space {
+          min-width: 96px;
+          background-color: #f1f1f1;
+        }
+
+        .drag-list {
+          display: grid;
+          column-gap: 4px;
+
+          > :not(:first-child) {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+</style>