Browse Source

add: 填空->拖拽

dusenyao 3 years ago
parent
commit
e65fd5c9eb

BIN
src/assets/NPC/delete-24.png


BIN
src/assets/NPC/tian-zige-noactive.png


BIN
src/assets/NPC/tian-zige.png


+ 10 - 0
src/components/Adult/Preview.vue

@@ -324,6 +324,14 @@
                     :task-model="TaskModel"
                   />
                 </template>
+                <template v-if="itemss.type === 'fill_drag'">
+                  <FillDrag
+                    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"
@@ -538,6 +546,7 @@ 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 FillDrag from './preview/FillDrag.vue'; // 填空 -> 拖拽
 import RecordModule from "./preview/RecordModule.vue"; // 录音组件
 import UploadControlView from "./preview/UploadControlView.vue"; // 预览控件
 import DialogueAnswerViewChs from "./preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue"; // 文章模板
@@ -574,6 +583,7 @@ export default {
     SentenceSortQP,
     Checkbox,
     VoiceMatrix,
+    FillDrag,
     SelectDrag,
     RecordModule,
     UploadControlView,

+ 15 - 17
src/components/Adult/common/Upload.vue

@@ -9,7 +9,7 @@
       :on-preview="handlePreview"
       multiple
       :limit="filleNumber ? filleNumber : 1"
-      :before-upload="handlebeforeUplaod"
+      :before-upload="handlebeforeUpload"
       :on-exceed="handleExceed"
       :on-success="handleSuccess"
       :on-change="handleChange"
@@ -120,23 +120,21 @@ export default {
         this.loading.close();
       }
     },
-    handlebeforeUplaod(file) {
-        if(this.uploadType=='image'){
-            if (file.size > 2 * 1024 * 1024) {
-                this.$message.warning('上传图片大小不能超过2M');
-                return false   //必须返回false
-            }
-        }else if(this.uploadType=='mp4'){
-            if (file.size > 500 * 1024 * 1024) {
-                this.$message.warning('上传视频大小不能超过500M');
-                return false   //必须返回false
-            }
-        }else{
-            if (file.size > 20 * 1024 * 1024) {
-                this.$message.warning('上传文件大小不能超过20M');
-                return false   //必须返回false
-            }
+    handlebeforeUpload(file) {
+      if (this.uploadType === 'image') {
+        if (file.size > 2 * 1024 * 1024) {
+          this.$message.warning('上传图片大小不能超过2M');
+          return false; // 必须返回false
         }
+      } else if (this.uploadType === 'mp4') {
+        if (file.size > 500 * 1024 * 1024) {
+          this.$message.warning('上传视频大小不能超过500M');
+          return false; // 必须返回false
+        }
+      } else if (file.size > 20 * 1024 * 1024) {
+        this.$message.warning('上传文件大小不能超过20M');
+        return false; // 必须返回false
+      }
       this.loading = this.$loading({
         lock: true,
         text: "Loading",

+ 713 - 698
src/components/Adult/common/data.js

@@ -1,738 +1,753 @@
-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: "dialogue_answer_chs",
-  name: "对话题模板"
-}, {
-  type: "sentence_chs",
-  name: "句子模板",
-  list: [{
-    type: "sentence_input_chs",
-    name: "句子填空",
+let fnData = [
+  {
+    type: "article_chs",
+    name: "课文"
   },
   {
-    type: "sentence_judge_chs",
-    name: "句子判断",
+    type: "dialogue_article_chs",
+    name: "对话课文"
   },
+  // {
+  //     type: "sentence_segword_chs",
+  //     name: "句子分词",
+  // },
   {
-    type: "sentence_record_chs",
-    name: "句子录音",
+    type: "NewWord_chs",
+    name: "生词"
   },
   {
-    type: "sentence_input_record_chs",
-    name: "句子填空+录音",
+    type: "notes_chs",
+    name: "注释"
   },
   {
-    type: "sentence_listen_read_chs",
-    name: "句子听+朗读",
+    type: "dialogue_answer_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: '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: ''
-//         }],
-
-//         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: "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: 'image_judge',
-    name: "图片判断",
+    type: "voice_matrix",
+    name: "语音矩阵"
   },
   {
-    type: 'image_single',
-    name: "图片单选",
+    type: "select_drag",
+    name: "选择-拖拽"
   },
   {
-    type: 'image_dobleinput',
-    name: "双输入",
+    type: "fill_drag",
+    name: "填空-拖拽"
   },
   {
-    type: 'image_gdcy',
-    name: "固定词语",
+    type: 'config_table',
+    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: 'image_input',
-    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: ''
+  //         }],
+
+  //         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: "imgage_image",
-    name: "纯图片",
+    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: "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: 'record_control_normal',
-    name: "录音控件-normal",
+    type: "recordHZ_inputPY_chs",
+    name: "读汉字写拼音"
   },
+  // {
+  //     type: "inputItem_chs",
+  //     name: "输入选项",
+  // },
   {
-    type: 'record_control_pro',
-    name: "录音控件-pro",
+    type: "upload_control_chs",
+    name: "上传控件"
   },
   {
-    type: 'record_control_promax',
-    name: "录音控件-promax",
+    type: "upload_control_preview_chs",
+    name: "上传控件预览查看"
   },
-  ],
-  data_structure: {
-    type: 'record_control',
+  // {
+  //     type: "switch_control_chs",
+  //     name: "开关控件",
+  // },
+  {
+    type: "record_control",
     name: "录音控件",
-    option: [{
-      hanzi: '',
-      pinyin: '',
-      mp3_list: [],
-      img_list: [],
-      isAnswer: '',
-      isChecked: '',
-      isJudge: '',
-      correctInput: '',
-    }],
+    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: "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 };

+ 43 - 0
src/components/Adult/inputModules/ConfigurableTable.vue

@@ -0,0 +1,43 @@
+<!-- 可配置表格 -->
+<template>
+  <div class="config-table">
+    <div>
+      <el-input v-model="curQue.val" />
+    </div>
+    <div />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    curQue: {
+      type: Object,
+      default: () => {
+        return {
+          type: "config_table",
+          name: "可配置表格",
+          val: "",
+          isFirst: true
+        };
+      }
+    },
+    changeCurQue: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {};
+  },
+  created() {
+    if (this.curQue.isFirst) {
+      this.curQue.isFirst = false;
+      this.changeCurQue(this.curQue);
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped></style>

+ 159 - 0
src/components/Adult/inputModules/FillDrag.vue

@@ -0,0 +1,159 @@
+<!-- 填空 -> 拖拽 -->
+<template>
+  <div class="fill-drag">
+    <div class="fill-drag-options">
+      <div
+        v-for="(item, i) in curQue.options"
+        :key="`option-${i}`"
+        class="drag-option"
+      >
+        <div>
+          <el-input v-model="item.text" />
+          <Upload
+            :change-fill-id="changeFill"
+            :datafile-list="item.imageList"
+            upload-type="image"
+            :index="i"
+            :fille-number="1"
+          />
+        </div>
+        <div>
+          <el-button type="danger" @click="deleteOption(i)">删除</el-button>
+        </div>
+      </div>
+      <el-button @click="addOption">添加选项</el-button>
+    </div>
+
+    <div class="fill-drag-fill">
+      <div v-for="(item, i) in curQue.fills" :key="`fill-${i}`" class="drag-fill">
+        <span>填空数量:</span><el-input v-model.number="item.number" type="number" @change="changeFillNumber($event, i)" />
+        <span>偏旁:</span><el-input v-model.trim="item.side" />
+      </div>
+      <el-button @click="addFill">添加填空行</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Upload from "@/components/Adult/common/Upload.vue";
+
+export default {
+  components: {
+    Upload
+  },
+  props: {
+    curQue: {
+      type: Object,
+      default: () => {
+        return {
+          type: "fill_drag",
+          name: "填空-拖拽",
+          options: [],
+          fills: [],
+          isFirst: true
+        };
+      }
+    },
+    changeCurQue: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {};
+  },
+  created() {
+    if (this.curQue.isFirst) {
+      this.curQue.isFirst = false;
+      this.changeCurQue(this.curQue);
+    }
+  },
+  methods: {
+    // 选项
+    addOption() {
+      this.curQue.options.push({
+        text: "",
+        imageList: []
+      });
+    },
+
+    deleteOption(i) {
+      this.curQue.options.splice(i, 1);
+    },
+
+    // 填空
+    addFill() {
+      this.curQue.fills.push({
+        number: 0,
+        side: "",
+        dragList: []
+      });
+    },
+
+    changeFill(fileList, duration, i) {
+      const articleImgList = JSON.parse(JSON.stringify(fileList));
+      let articleImgRes = [];
+      articleImgList.forEach(({ response, name }) => {
+        console.log(response);
+        if (response) {
+          let { file_url, file_id } = response.file_info_list[0];
+          articleImgRes.push({
+            name,
+            temporary_url: file_url,
+            url: "[FID##" + file_id + "##FID]",
+            file_id
+          });
+        }
+      });
+      this.curQue.options[i].imageList = articleImgRes;
+    },
+
+    changeFillNumber(val, i) {
+      let arr = [];
+      for (let index = 0; index < Number(val); index++) {
+        arr.push({
+          fillList: []
+        });
+      }
+      this.curQue.fills[i].dragList = arr;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.fill-drag {
+  &-options {
+    margin-bottom: 24px;
+
+    .drag-option {
+      margin-bottom: 12px;
+      padding: 12px 6px;
+      border: 1px solid #ccc;
+      display: flex;
+
+      > :first-child {
+        flex: 1;
+        margin-right: 24px;
+      }
+
+      .el-input {
+        margin-bottom: 12px;
+      }
+    }
+  }
+
+  &-fill {
+
+    .drag-fill {
+      padding: 12px 6px;
+      display: flex;
+      align-items: center;
+
+      .el-input {
+        width: 120px;
+      }
+    }
+  }
+}
+</style>

+ 1 - 1
src/components/Adult/inputModules/SelectDrag.vue

@@ -90,7 +90,7 @@ export default {
   created() {
     if (this.curQue.isFirst) {
       this.curQue.isFirst = false;
-      this.changeCurQue(JSON.parse(JSON.stringify(this.curQue)));
+      this.changeCurQue(this.curQue);
     }
   },
   methods: {

+ 12 - 7
src/components/Adult/inputModules/VoiceMatrix.vue

@@ -296,7 +296,7 @@ export default {
   created() {
     if (this.curQue.isFirst) {
       this.curQue.isFirst = false;
-      this.changeCurQue(JSON.parse(JSON.stringify(this.curQue)));
+      this.changeCurQue(this.curQue);
     }
   },
   methods: {
@@ -464,16 +464,21 @@ export default {
 
     changeMp3(fileList) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));
-      const articleImgRes = [];
+      let articleImgRes = [];
       articleImgList.forEach(({ response, name }) => {
         if (response) {
-          let fileList = response.file_info_list[0];
+          let {
+            file_url,
+            file_id,
+            media_duration
+          } = response.file_info_list[0];
+
           articleImgRes.push({
             name,
-            media_duration: fileList.media_duration,
-            temporary_url: fileList.file_url,
-            url: "[FID##" + fileList.file_id + "##FID]",
-            file_id: fileList.file_id
+            media_duration,
+            temporary_url: file_url,
+            url: "[FID##" + file_id + "##FID]",
+            file_id
           });
         }
       });

+ 308 - 0
src/components/Adult/preview/FillDrag.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="fill-drag">
+    <!-- 选项 -->
+    <div class="fill-drag-options">
+      <draggable
+        v-model="curQue.options"
+        group="option"
+        animation="300"
+        class="draggable-options"
+        :sort="false"
+        ghost-class="draggable-options-ghost"
+        :disabled="isAnswerMode"
+        :move="onMove"
+      >
+        <span
+          v-for="({ text, imageList }, i) in curQue.options"
+          :key="`option-${i}`"
+          class="drag-option"
+          :style="{
+            cursor: `${isAnswerMode ? 'default' : 'pointer'}`,
+            padding: `${imageList.length > 0 ? '0px' : '8px'}`
+          }"
+        >
+          <template v-if="imageList.length > 0">
+            <el-image :src="imageList[0].url" fit="fill" />
+          </template>
+          <template v-else>
+            {{ text }}
+          </template>
+        </span>
+      </draggable>
+    </div>
+
+    <!-- 填空 -->
+    <div class="fill-drag-fills">
+      <div
+        v-for="(fill, i) in curQue.fills"
+        :key="`fill-${i}`"
+        class="drag-fill"
+        :data-serial="i + 1"
+      >
+        <!-- 偏旁 -->
+        <span class="drag-fill-space active" v-text="fill.side" />
+
+        <div class="drag-fill-container">
+          <span
+            v-for="(drag, j) in fill.dragList"
+            :key="j"
+            :class="[
+              'drag-fill-space',
+              `${drag.fillList.length > 0 ? 'active' : ''}`
+            ]"
+          >
+            <draggable
+              v-model="drag.fillList"
+              class="draggable-fill"
+              group="option"
+              animation="300"
+              :sort="false"
+              :data-fill="i"
+              :data-space="j"
+              :disabled="isAnswerMode"
+              :move="onMoveTo"
+              @change="changeFill"
+            >
+              <span
+                v-for="{ text, imageList } in drag.fillList"
+                :key="text"
+                :style="{
+                  cursor: `${isAnswerMode ? 'default' : 'pointer'}`,
+                  padding: `${imageList.length > 0 ? '0px' : '8px'}`
+                }"
+              >
+                <template v-if="imageList.length > 0">
+                  <el-image :src="imageList[0].url" fit="fill" />
+                </template>
+                <template v-else>
+                  {{ text }}
+                </template>
+              </span>
+            </draggable>
+          </span>
+        </div>
+
+        <span
+          class="drag-delete"
+          :style="{
+            cursor: `${isAnswerMode ? 'default' : 'pointer'}`
+          }"
+          @click="emptyFill(i)"
+        >
+          <el-image :src="require('../../../assets/NPC/delete-24.png')" />
+        </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: {
+        fillIndex: 0,
+        spaceIndex: 0
+      }
+    };
+  },
+  created() {
+    const Bookanswer = this.curQue.Bookanswer;
+    if (Bookanswer) {
+      this.isAnswerMode = true;
+      Bookanswer.dragList.forEach(({ fillIndex, spaceIndex, ...data }) => {
+        this.curQue.fills[fillIndex].dragList[spaceIndex].fillList = [
+          { ...data }
+        ];
+      });
+    } else {
+      let Bookanswer = {
+        dragList: []
+      };
+      this.$set(this.curQue, "Bookanswer", Bookanswer);
+    }
+  },
+  methods: {
+    onMove(e) {
+      if (e.relatedContext.component.realList.length > 0) return false;
+      let { fill, space } = e.to.dataset;
+      this.curDrag = {
+        fillIndex: fill,
+        spaceIndex: space
+      };
+      return true;
+    },
+
+    onMoveTo(e) {
+      if (
+        e.to.classList.contains("draggable-fill") &&
+        e.relatedContext.component.realList.length > 0
+      ) { return false; }
+      let { fill, space } = e.from.dataset;
+      this.curDrag = {
+        fillIndex: fill,
+        spaceIndex: space
+      };
+    },
+
+    changeFill({ added, removed }) {
+      if (added) {
+        this.curQue.Bookanswer.dragList.push({
+          ...this.curDrag,
+          ...added.element
+        });
+      }
+      if (removed) {
+        this.curQue.Bookanswer.dragList = this.curQue.Bookanswer.dragList.filter(
+          ({ fillIndex, spaceIndex }) => {
+            let { fillIndex: fIndex, spaceIndex: sIndex } = this.curDrag;
+            if (fillIndex === fIndex && spaceIndex === sIndex) return false;
+            return true;
+          }
+        );
+      }
+    },
+
+    emptyFill(i) {
+      if (this.isAnswerMode) return;
+      this.curQue.fills[i].dragList.forEach(({ fillList }) => {
+        if (fillList.length > 0) {
+          this.curQue.options.push(...fillList.splice(0, 1));
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+$image-size: 64px;
+
+.fill-drag {
+  width: 100%;
+  color: #000;
+
+  %drag-option {
+    width: $image-size;
+    height: $image-size;
+    font-size: 48px;
+    font-family: "FZJCGFKTK";
+    border-radius: 8px;
+    text-align: center;
+    background-size: $image-size $image-size;
+    overflow: hidden;
+
+    .el-image {
+      width: $image-size;
+      height: $image-size;
+    }
+  }
+
+  &-options {
+    width: 100%;
+    background-color: #f7f7f7;
+    border: 1px solid #dedede;
+    border-radius: 8px;
+    padding: 24px;
+
+    .draggable-options {
+      display: flex;
+      flex-wrap: wrap;
+      min-height: 64px;
+      column-gap: 16px;
+      row-gap: 24px;
+
+      .drag-option {
+        @extend %drag-option;
+
+        background-image: url("../../../assets/NPC/tian-zige.png");
+      }
+    }
+
+    // 拖拽插件,占位符样式,需要加 !important
+    .draggable-options-ghost {
+      width: $image-size !important;
+      height: $image-size !important;
+      font-size: 48px !important;
+      font-family: "FZJCGFKTK" !important;
+      border-radius: 8px !important;
+      text-align: center !important;
+      background-size: $image-size $image-size !important;
+      background-image: url("../../../assets/NPC/tian-zige.png") !important;
+    }
+  }
+
+  &-fills {
+    margin-left: 24px;
+
+    .drag-fill {
+      margin-top: 24px;
+      display: flex;
+      flex-wrap: no-wrap;
+      align-items: center;
+      column-gap: 16px;
+
+      &::before {
+        content: attr(data-serial) ".";
+        display: inline-block;
+        height: 16px;
+        width: 16px;
+        font-size: 16px;
+        margin-right: 16px;
+      }
+
+      .drag-fill-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        column-gap: 16px;
+        row-gap: 12px;
+      }
+
+      &-space {
+        @extend %drag-option;
+
+        min-width: 64px;
+        background-image: url("../../../assets/NPC/tian-zige-noactive.png");
+
+        &.active {
+          background-image: url("../../../assets/NPC/tian-zige.png");
+        }
+      }
+
+      .drag-delete {
+        flex: 1;
+        padding-right: 16px;
+
+        .el-image {
+          float: right;
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+      .draggable-fill {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        column-gap: 16px;
+        row-gap: 12px;
+      }
+    }
+  }
+}
+</style>

+ 7 - 3
src/components/Adult/preview/SelectDrag.vue

@@ -17,7 +17,7 @@
           :key="`option-${i}`"
           class="drag-option"
           :style="{
-            cursor: `${isAnswerMode ? 'default':'pointer'}`
+            cursor: `${isAnswerMode ? 'default' : 'pointer'}`
           }"
         >
           <div>
@@ -64,6 +64,7 @@
           <template v-if="item.isSpace">
             <draggable
               v-model="item.dragList"
+              class="draggable-space"
               :data-sentence="i"
               :data-subsection="j"
               :sort="false"
@@ -80,7 +81,7 @@
                     item.dragList.length > 0
                       ? `repeat(${item.dragList[0].wordsList.length}, auto) / repeat(${item.dragList[0].wordsList.length}, auto)`
                       : '',
-                  cursor: `${isAnswerMode ? 'default':'pointer'}`
+                  cursor: `${isAnswerMode ? 'default' : 'pointer'}`
                 }"
               >
                 <template v-if="item.dragList.length > 0">
@@ -181,6 +182,10 @@ export default {
     },
 
     onMoveTo(e) {
+      if (
+        e.to.classList.contains("draggable-space") &&
+        e.relatedContext.component.realList.length > 0
+      ) { return false; }
       let { sentence, subsection } = e.from.dataset;
       this.curDrag = {
         sentenceIndex: sentence,
@@ -190,7 +195,6 @@ export default {
 
     change({ added, removed }) {
       if (added) {
-        console.log(added.element);
         this.curQue.Bookanswer.dragList.push({
           ...this.curDrag,
           ...added.element

+ 16 - 0
src/views/adultInput.vue

@@ -357,6 +357,18 @@
                     :change-cur-que="changeCurQue"
                   />
                 </template>
+                <template v-if="topicIitem.type === 'config_table'">
+                  <configurable-table
+                    :cur-que="topicIitem.data"
+                    :change-cur-que="changeCurQue"
+                  />
+                </template>
+                <template v-if="topicIitem.type === 'fill_drag'">
+                  <fill-drag
+                    :cur-que="topicIitem.data"
+                    :change-cur-que="changeCurQue"
+                  />
+                </template>
                 <template v-if="topicIitem.type == 'ligature_chs'">
                   <template v-if="topicIitem.is_edit">
                     <Ligature
@@ -795,6 +807,8 @@ import NumberCombination from "@/components/Adult/inputModules/NumberCombination
 import DialogueAnswerChs from "@/components/Adult/inputModules/DialogueAnswerChs";
 import VoiceMatrix from "@/components/Adult/inputModules/VoiceMatrix.vue";
 import SelectDrag from "@/components/Adult/inputModules/SelectDrag.vue";
+import ConfigurableTable from "@/components/Adult/inputModules/ConfigurableTable.vue";
+import FillDrag from "@/components/Adult/inputModules/FillDrag.vue";
 import ImageQuestion from "@/components/Adult/inputModules/ImageQuestion.vue";
 import PurePreview from "@/components/Adult/inputModules/PurePreview.vue";
 import ZiLine from "@/components/Adult/inputModules/ZiLine.vue";
@@ -883,7 +897,9 @@ export default {
     ToneSelect,
     DialogueAnswerChs,
     VoiceMatrix,
+    FillDrag,
     SelectDrag,
+    ConfigurableTable,
     ImageQuestion,
     PurePreview,
     ZiLine,