字+横线的录入效果70%

src/components/Adult/common/data3.js

@@ -770,6 +770,10 @@ let fnData = [{
         type: "listen_record_single_syllable_chs",
         name: "听录音选音节",
     },
+    {
+        type: "zi_transverse_line_chs",
+        name: "字+横线",
+    },
 ]
 
 

src/components/Adult/inputModules/PurePreview.vue

@@ -56,7 +56,7 @@
               @blur="onBlur(item, 'number')"
             ></el-input>
             <img
-              @click="deleteOptionOne"
+              @click="deleteOptionOne(index)"
               class="close"
               src="../../../assets/adult/del-close.png"
               alt=""
@@ -78,7 +78,7 @@
               @blur="onBlur(item, 'pinyin')"
             ></el-input>
             <img
-              @click="deleteOptionOne"
+              @click="deleteOptionOne(index)"
               class="close"
               src="../../../assets/adult/del-close.png"
               alt=""
@@ -118,17 +118,126 @@
               @blur="onBlur(item, 'pinyin')"
             ></el-input>
             <img
-              @click="deleteOptionOne"
+              @click="deleteOptionOne(index)"
               class="close"
               src="../../../assets/adult/del-close.png"
               alt=""
             />
           </div>
         </template>
+        <template v-if="type == 'zi_transverse_line_chs'">
+          <div class="adult-book-input-item">
+            <span class="adult-book-lable">序号：</span>
+            <el-input
+              class="adult-book-input"
+              type="textarea"
+              :autosize="{ minRows: 2 }"
+              placeholder="请输入序号"
+              v-model="item.number"
+              @blur="onBlur(item, 'number')"
+            ></el-input>
+            <img
+              @click="deleteOptionOne(index)"
+              class="close"
+              src="../../../assets/adult/del-close.png"
+              alt=""
+            />
+          </div>
+          <div class="adult-book-input-item">
+            <span class="adult-book-lable">内容：</span>
+            <el-input
+              class="adult-book-input"
+              type="textarea"
+              :autosize="{ minRows: 2 }"
+              placeholder="请输入内容"
+              v-model="item.con"
+              @blur="onBlur(item, 'con')"
+            ></el-input>
+          </div>
+          <div
+            class="adult-book-input-item"
+            v-for="(ans, anIndex) in item.answer"
+            :key="'an' + anIndex"
+          >
+            <span class="adult-book-lable">答案：</span>
+            <el-input
+              class="adult-book-input"
+              type="textarea"
+              :autosize="{ minRows: 2 }"
+              placeholder="请输入答案"
+              v-model="ans.con"
+              @blur="onBlur(ans, 'con')"
+            ></el-input>
+            <img
+              @click="deleteanswer(anIndex, index)"
+              class="close"
+              src="../../../assets/adult/del-close.png"
+              alt=""
+            />
+          </div>
+          <div class="addoption" @click="addanswer(index)">添加答案</div>
+          <div class="adult-book-input-item">
+            <span class="adult-book-lable">拼音状态：</span>
+            <el-radio-group v-model="item.Ispinyin">
+              <el-radio :label="true">需要拼音</el-radio>
+              <el-radio :label="false">不需要拼音</el-radio>
+            </el-radio-group>
+          </div>
+          <div class="adult-book-input-item" v-if="item.Ispinyin">
+            <span class="adult-book-lable">拼音位置：</span>
+            <el-radio-group v-model="item.pinyinSite">
+              <el-radio label="top">上</el-radio>
+              <el-radio label="bottom">下</el-radio>
+              <el-radio label="left">左</el-radio>
+              <el-radio label="right">右</el-radio>
+            </el-radio-group>
+          </div>
+          <template v-if="item.Ispinyin && item.pinyinSite">
+            <div
+              class="adult-book-input-item"
+              v-for="(py, pyIndex) in item.pinyinList"
+              :key="'py' + pyIndex"
+            >
+              <span class="adult-book-lable">拼音：</span>
+              <el-input
+                class="adult-book-input"
+                type="textarea"
+                :autosize="{ minRows: 2 }"
+                placeholder="请输入拼音"
+                v-model="py.con"
+                @blur="onBlur(py, 'con')"
+              ></el-input>
+              <img
+                @click="deletepinyin(pyIndex, index)"
+                class="close"
+                src="../../../assets/adult/del-close.png"
+                alt=""
+              />
+            </div>
+            <div class="addoption" @click="addpinyin(index)">添加拼音</div>
+          </template>
+          <div class="adult-book-input-item">
+            <span class="adult-book-lable">音频控件：</span>
+            <img src="../../../assets/adult/mini.png" alt="" />
+          </div>
+        </template>
       </div>
       <div class="Big-Book-addrole">
         <div class="addoption" @click="addOption">添加一个</div>
       </div>
+      <div class="Big-Book-divide" v-if="type == 'zi_transverse_line_chs'">
+        <el-divider content-position="center">功能设置</el-divider>
+        <span style="margin: 0 10px">请选择每行数量</span>
+        <el-select v-model="curQue.numberList.con" placeholder="请选择">
+          <el-option
+            v-for="(item, i) in curQue.numberList.arr"
+            :key="i"
+            :label="item.value"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
     </div>
   </div>
 </template>
@@ -204,6 +313,50 @@ export default {
           },
         ],
       },
+      data_structure4: {
+        type: "zi_transverse_line_chs",
+        name: "字+横线",
+        title: "",
+        mp3_list: [],
+        option: [
+          {
+            number: "", //序号
+            con: "", //内容
+            Ispinyin: null, //是否有拼音
+            pinyinSite: null, //拼音位置
+            pinyinList: [{ con: "" }],
+            answer: [
+              {
+                con: "",
+              },
+            ],
+          },
+        ],
+
+        numberList: {
+          type: "number",
+          name: "每行几个",
+          con: "2",
+          arr: [
+            {
+              id: 1,
+              value: 1,
+            },
+            {
+              id: 2,
+              value: 2,
+            },
+            {
+              id: 3,
+              value: 3,
+            },
+            {
+              id: 4,
+              value: 4,
+            },
+          ],
+        },
+      },
     };
   },
   computed: {},
@@ -213,6 +366,46 @@ export default {
     onBlur(item, field) {
       item[field] = item[field] ? item[field].trim() : "";
     },
+    // 增加拼音
+    addpinyin(index) {
+      let obj;
+      if (this.type == "zi_transverse_line_chs") {
+        obj = JSON.parse(
+          JSON.stringify(this.data_structure4.option[0].pinyinList[0])
+        );
+        this.curQue.option[index].pinyinList.push(obj);
+      }
+    },
+    // 删除拼音
+    deletepinyin(aindex, index) {
+      if (this.type == "zi_transverse_line_chs") {
+        if (this.curQue.option[index].pinyinList.length <= 1) {
+          this.$message.warning("至少要保留1个拼音");
+          return;
+        }
+        this.curQue.option[index].pinyinList.splice(aindex, 1);
+      }
+    },
+    // 增加答案
+    addanswer(index) {
+      let obj;
+      if (this.type == "zi_transverse_line_chs") {
+        obj = JSON.parse(
+          JSON.stringify(this.data_structure4.option[0].answer[0])
+        );
+        this.curQue.option[index].answer.push(obj);
+      }
+    },
+    // 删除答案
+    deleteanswer(aindex, index) {
+      if (this.type == "zi_transverse_line_chs") {
+        if (this.curQue.option[index].answer.length <= 1) {
+          this.$message.warning("至少要保留1个答案");
+          return;
+        }
+        this.curQue.option[index].answer.splice(aindex, 1);
+      }
+    },
     // 删除其中一个选项
     deleteOptionOne(index) {
       if (this.curQue.option.length <= 1) {
@@ -230,6 +423,8 @@ export default {
         obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
       } else if (this.type == "listen_record_single_syllable_chs") {
         obj = JSON.parse(JSON.stringify(this.data_structure3.option[0]));
+      } else if (this.type == "zi_transverse_line_chs") {
+        obj = JSON.parse(JSON.stringify(this.data_structure4.option[0]));
       }
       this.curQue.option.push(obj);
     },
@@ -241,9 +436,12 @@ export default {
         data = JSON.parse(JSON.stringify(this.data_structure));
       } else if (this.type == "listen_record_single_syllable_chs") {
         data = JSON.parse(JSON.stringify(this.data_structure3));
+      } else if (this.type == "zi_transverse_line_chs") {
+        data = JSON.parse(JSON.stringify(this.data_structure4));
       }
       this.changeCurQue(data);
     },
+    // 选项的音频
     changeMp3(fileList, item, index) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));
       const articleImgRes = [];
@@ -253,7 +451,6 @@ export default {
             name: item.name,
             url: item.response.file_info_list[0].file_url,
             id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
-
             media_duration: item.response.file_info_list[0].media_duration, //音频时长
           };
           articleImgRes.push(obj);
@@ -263,6 +460,7 @@ export default {
         JSON.stringify(articleImgRes)
       );
     },
+    // 题目的音频
     timuchangeMp3(fileList) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));
       const articleImgRes = [];
@@ -324,7 +522,19 @@ export default {
       }
     }
   }
-
+  .addoption {
+    width: 200px;
+    height: 40px;
+    left: 40px;
+    top: 304px;
+    background: #f3f3f3;
+    border: 1px dashed rgba(0, 0, 0, 0.15);
+    box-sizing: border-box;
+    border-radius: 4px;
+    text-align: center;
+    line-height: 40px;
+    cursor: pointer;
+  }
   .Big-Book-addrole {
     > div {
       width: 300px;

src/views/adultInput3.vue

@@ -294,7 +294,9 @@
                       v-if="
                         topicIitem.type == 'text_problem_chs' ||
                         topicIitem.type == 'newWord_preview_chs' ||
-                        topicIitem.type == 'listen_record_single_syllable_chs'
+                        topicIitem.type ==
+                          'listen_record_single_syllable_chs' ||
+                        topicIitem.type == 'zi_transverse_line_chs'
                       "
                     >
                       <template v-if="topicIitem.is_edit">