增加数字组合删除和音调图片的导入和命名

src/components/Adult/common/data.js

@@ -907,6 +907,10 @@ let fnData = [{
         type: "NumberCombination_chs",
         name: "数字组合",
     },
+    {
+        type: "toneSelect_chs",
+        name: "音调选择",
+    },
 ]
 
 

src/components/Adult/inputModules/NumberCombination.vue

@@ -29,6 +29,12 @@
             @input="numberInput(index)"
             maxlength="1"
            -->
+          <img
+            @click="deleteGroup"
+            class="close"
+            src="../../../assets/adult/del-close.png"
+            alt=""
+          />
         </div>
       </div>
       <div class="addoption" @click="addoption">增加数字</div>
@@ -120,11 +126,16 @@ export default {
     .Big-Book-main {
       > div {
         margin-bottom: 10px;
-        &.Big-Book-pinyin {
+        &.Big-Book-en {
           display: flex;
           justify-content: flex-start;
           align-items: center;
         }
+        img{
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+        }
       }
     }
   }

src/components/Adult/inputModules/ToneSelect.vue

@@ -0,0 +1,189 @@
+<!--  -->
+<template>
+  <div class="Big-Book-Single" v-if="curQue">
+    <div class="Big-Book-Single-content" style="margin-top: 20px">
+      <div class="Big-Book-con">
+        <span>标题：</span>           
+        <el-input
+          style="width: 300px"
+          placeholder="请输入标题"
+          v-model="curQue.title"
+          @blur="onBlur(curQue, 'title')"
+        ></el-input>
+      </div>
+      <div
+        class="Big-Book-main"
+        v-for="(curQueItem, index) in curQue.option"
+        :key="'curQueItem' + index"
+        style="border-bottom: 1px #ccc solid; margin-bottom: 20px"
+      >
+        <div class="Big-Book-en">
+          <span>拼音：</span>
+          <el-input
+            style="width: 150px"
+            placeholder="请输入拼音"
+            v-model="curQueItem.con"
+            @blur="onBlur(curQueItem, 'con')"
+          ></el-input>
+          <img
+            @click="deleteGroup"
+            class="close"
+            src="../../../assets/adult/del-close.png"
+            alt=""
+          />
+        </div>
+        <div class="Big-Book-mp3">
+          <Upload
+            :changeFillId="changeMp3"
+            :datafileList="curQueItem.mp3_list"
+            :filleNumber="mp3Number"
+            :uploadType="'mp3'"
+          />
+        </div>
+      </div>
+      <div class="addoption" @click="addoption">增加数字</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Upload from "../common/Upload.vue";
+export default {
+  name: "Single",
+  props: ["curQue", "changeCurQue"],
+  components: { Upload },
+  data() {
+    return {
+      mp3Number: 1,
+      toneList: [
+        {
+          imgSrC: "",
+        },
+      ],
+      data_structure: {
+        type: "toneSelect_chs",
+        name: "音调选择",
+        title: "",
+        option: [
+          {
+            con: "", //内容
+            mp3_list: [],
+            Answer: "",
+          },
+        ],
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    numberInput(value) {
+      this.curQue.option[value].con = this.curQue.option[value].con.replace(
+        /\D/g,
+        ""
+      );
+    },
+    onBlur(item, field) {
+      item[field] = item[field] ? item[field].trim() : "";
+    },
+    changeMp3(fileList) {
+      console.log(fileList);
+      const articleImgList = JSON.parse(JSON.stringify(fileList));
+      const articleImgRes = [];
+      articleImgList.forEach((item) => {
+        if (item.response) {
+          const obj = {
+            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);
+        }
+      });
+      //this.articleImgList = articleImgRes;
+      this.curQueItem.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
+    },
+    addoption() {
+      let leg = this.curQue.option.length;
+      let last = this.curQue.option[leg - 1];
+      let res_data = JSON.parse(JSON.stringify(this.data_structure));
+      let obj = res_data.option[0];
+      this.curQue.option.push(obj);
+    },
+    deleteGroup(index) {
+      if (this.curQue.option.length == 1) {
+        this.$message.warning("至少剩余1个，不能全部删除");
+        return;
+      }
+      this.curQue.option.splice(index, 1);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (!this.curQue) {
+      let res_data = JSON.parse(JSON.stringify(this.data_structure));
+      this.changeCurQue(res_data);
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scope>
+//@import url(); 引入公共css类
+.Big-Book-Single {
+  &-content {
+    &.m {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+
+    .Big-Book-title {
+      font-size: 16px;
+      line-height: 40px;
+      color: #000;
+      margin-right: 15px;
+    }
+    .Big-Book-main {
+      > div {
+        margin-bottom: 10px;
+        &.Big-Book-pinyin {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+      }
+    }
+  }
+  .addoption {
+    width: 300px;
+    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-con {
+    display: flex;
+    padding-bottom: 6px;
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
+  }
+}
+</style>
+<style lang="scss">
+</style>

src/views/adultInput.vue

@@ -228,6 +228,17 @@
                       </template>
                       <template v-else> </template>
                     </template>
+                    <template v-if="topicIitem.type == 'toneSelect_chs'">
+                      <template v-if="topicIitem.is_edit">
+                        <ToneSelect
+                          :curQue="topicIitem.data"
+                          :type="topicIitem.type"
+                          :fn_data="fn_data"
+                          :changeCurQue="changeCurQue"
+                        />
+                      </template>
+                      <template v-else> </template>
+                    </template>
                   </div>
                   <div
                     class="addoption"
@@ -347,9 +358,11 @@ import UploadControl from "@/components/Adult/inputModules/UploadControl.vue";
 import TextItem from "@/components/Adult/inputModules/TextItem.vue";
 import Sentence from "@/components/Adult/inputModules/Sentence.vue";
 import Sudoku from "@/components/Adult/inputModules/Sudoku.vue";
+import ToneSelect from "@/components/Adult/inputModules/ToneSelect.vue";
 import NumberCombination from "@/components/Adult/inputModules/NumberCombination.vue";
 
 
+
 import Textdes from "@/components/Adult/inputModules/Textdes.vue";
 import Record from "@/components/Adult/inputModules/Record.vue";
 import Hanzi from "@/components/Adult/inputModules/Hanzi.vue";
@@ -414,6 +427,7 @@ export default {
     UploadControlView,
     Sudoku,
     NumberCombination,
+    ToneSelect,
   },
   data() {
     return {