修改生字展示和听录音选音节的展示及实现效果

src/components/Adult/inputModules/PurePreview.vue

@@ -38,20 +38,114 @@
           />
         </div>
       </template>
-      <div
-        class="Big-Book-main"
-        v-for="(item, index) in curQue.option"
-        :key="item + index"
-        style="margin-bottom: 20px"
+      <template
+        v-if="type == 'text_problem_chs' || type == 'newWord_preview_chs'"
       >
-        <template v-if="type == 'text_problem_chs'">
+        <div
+          class="Big-Book-main"
+          v-for="(item, index) in curQue.option"
+          :key="item + index"
+          style="margin-bottom: 20px"
+        >
+          <template v-if="type == 'text_problem_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="NPC-sentence-Segword">
+              <SentenceSegwordChs :curQue="item.detail" />
+            </div>
+          </template>
+          <template v-if="type == 'newWord_preview_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.pinyin"
+                @blur="onBlur(item, 'pinyin')"
+              ></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-radio-group v-model="item.imgOrText">
+                <el-radio label="image">图片</el-radio>
+                <el-radio label="text">文本</el-radio>
+              </el-radio-group>
+            </div>
+            <template v-if="item.imgOrText == 'image'">
+              <div class="adult-book-input-item">
+                <span class="adult-book-lable">图片：</span>
+                <Upload
+                  :changeFillId="changeImage"
+                  :datafileList="item.img_list"
+                  :filleNumber="mp3Number"
+                  :uploadType="'image'"
+                  :index="index"
+                />
+              </div>
+            </template>
+            <template v-if="item.imgOrText == 'text'">
+              <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">
+                <span class="adult-book-lable">音频：</span>
+                <Upload
+                  :changeFillId="changeMp3"
+                  :datafileList="item.mp3_list"
+                  :filleNumber="mp3Number"
+                  :uploadType="'mp3'"
+                  :index="index"
+                />
+              </div>
+            </template>
+          </template>
+        </div>
+      </template>
+      <template v-if="type == 'listen_record_single_syllable_chs'">
+        <div
+          class="Big-Book-main"
+          v-for="(item, index) in curQue"
+          :key="item + index"
+          style="margin-bottom: 20px"
+        >
           <div class="adult-book-input-item">
             <span class="adult-book-lable">序号：</span>
             <el-input
               class="adult-book-input"
               type="textarea"
               :autosize="{ minRows: 2 }"
-              placeholder="请输入序号"
+              placeholder="请输入拼音"
               v-model="item.number"
               @blur="onBlur(item, 'number')"
             ></el-input>
@@ -62,70 +156,30 @@
               alt=""
             />
           </div>
-          <div class="NPC-sentence-Segword">
-            <SentenceSegwordChs :curQue="item.detail" />
-          </div>
-        </template>
-        <template v-if="type == 'newWord_preview_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.pinyin"
-              @blur="onBlur(item, 'pinyin')"
-            ></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 v-for="(it, itI) in item.option" :key="'it' + itI">
+            <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="it.pinyin"
+                @blur="onBlur(it, 'pinyin')"
+              ></el-input>
+              <img
+                @click="deleteyinjie(index, itI)"
+                class="close"
+                src="../../../assets/adult/del-close.png"
+                alt=""
+              />
+            </div>
           </div>
-          <div class="adult-book-input-item">
-            <span class="adult-book-lable">音频：</span>
-            <Upload
-              :changeFillId="changeMp3"
-              :datafileList="item.mp3_list"
-              :filleNumber="mp3Number"
-              :uploadType="'mp3'"
-              :index="index"
-            />
-          </div>
-        </template>
-        <template v-if="type == 'listen_record_single_syllable_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.pinyin"
-              @blur="onBlur(item, 'pinyin')"
-            ></el-input>
-            <img
-              @click="deleteOptionOne(index)"
-              class="close"
-              src="../../../assets/adult/del-close.png"
-              alt=""
-            />
+          <div class="addoption" @click="addyinjie(index, itI)">
+            添加一个音节
           </div>
-        </template>
-      </div>
+        </div>
+      </template>
       <div class="Big-Book-addrole">
         <div class="addoption" @click="addOption">添加一个</div>
       </div>
@@ -183,37 +237,61 @@ export default {
         type: "newWord_preview_chs",
         name: "生字展示",
         title: "",
+        imgOrText: null,
         option: [
           {
             mp3_list: [],
+            img_list: [],
             con: "", //生字
             pinyin: "", //拼音
           },
         ],
       },
-      data_structure3: {
-        type: "listen_record_single_syllable_chs",
-        name: "听录音选择音节",
-        title: "",
-        mp3_list: [],
-        number: "",
-        option: [
-          {
-            pinyin: "", //拼音
-          },
-        ],
-      },
+      data_structure3: [
+        {
+          type: "listen_record_single_syllable_chs",
+          name: "听录音选择音节",
+          title: "",
+          mp3_list: [],
+          number: "",
+          option: [
+            {
+              number: "",
+              pinyin: "", //拼音
+            },
+          ],
+        },
+      ],
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
+    // 添加音节
+    addyinjie(index) {
+      let obj = JSON.parse(JSON.stringify(this.data_structure3[0].option[0]));
+      this.curQue[index].option.push(obj);
+    },
+    // 删除音节
+    deleteyinjie(index, yjIndex) {
+      if (this.curQue[index].option.length <= 1) {
+        this.$message.warning("至少要保留1个音节");
+        return;
+      }
+      this.curQue[index].option.splice(yjIndex, 1);
+    },
     onBlur(item, field) {
       item[field] = item[field] ? item[field].trim() : "";
     },
     // 删除其中一个选项
     deleteOptionOne(index) {
+      if (this.type == "listen_record_single_syllable_chs") {
+        if (this.curQue[index].option.length <= 1) {
+          this.$message.warning("至少要保留1个选项");
+          return;
+        }
+      }
       if (this.curQue.option.length <= 1) {
         this.$message.warning("至少要保留1个选项");
         return;
@@ -225,12 +303,14 @@ export default {
       let obj;
       if (this.type == "newWord_preview_chs") {
         obj = JSON.parse(JSON.stringify(this.data_structure2.option[0]));
+        this.curQue.option.push(obj);
       } else if (this.type == "text_problem_chs") {
         obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
+        this.curQue.option.push(obj);
       } else if (this.type == "listen_record_single_syllable_chs") {
-        obj = JSON.parse(JSON.stringify(this.data_structure3.option[0]));
-      } 
-      this.curQue.option.push(obj);
+        obj = JSON.parse(JSON.stringify(this.data_structure3[0]));
+        this.curQue.push(obj);
+      }
     },
     initcurQue() {
       let data;
@@ -262,6 +342,24 @@ export default {
         JSON.stringify(articleImgRes)
       );
     },
+    changeImage(fileList, item, index) {
+      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.curQue.option[index].img_list = JSON.parse(
+        JSON.stringify(articleImgRes)
+      );
+    },
     // 题目的音频
     timuchangeMp3(fileList) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));

src/components/Adult/inputModules/ZiLine.vue

@@ -52,12 +52,21 @@
             :key="'col' + colIndex"
           >
             <div class="td">
-              <span>1</span>
-              <div></div>
-              <img src="../../../assets/adult/mini.png" alt="" />
+              <span v-if="curQue.Isnumber">1</span>
+              <div>
+                <!-- <p
+                  v-for="(item, i) in col.list"
+                  :key="'input' + i"
+                ></p> -->
+              </div>
+              <img
+                v-if="curQue.IsRecord"
+                src="../../../assets/adult/mini.png"
+                alt=""
+              />
             </div>
             <p>
-              <span> 编辑 </span>
+              <span @click="edit(col, rowIndex, colIndex)"> 编辑 </span>
             </p>
           </div>
         </div>
@@ -66,7 +75,7 @@
     <el-dialog
       title="提示"
       :visible.sync="dialogVisible"
-      width="30%"
+      width="50%"
       :before-close="handleClose"
     >
       <div class="Module" v-if="dialogData">
@@ -86,7 +95,14 @@
               placeholder="请输入内容"
               v-model="item.con"
               @blur="onBlur(item, 'con')"
+              @change="changecon(item.con)"
             ></el-input>
+            <img
+              @click="deleterow(index)"
+              class="close"
+              src="../../../assets/adult/del-close.png"
+              alt=""
+            />
           </div>
           <div
             class="adult-book-input-item"
@@ -102,14 +118,46 @@
               @blur="onBlur(item, 'pinyin')"
             ></el-input>
           </div>
+          <div
+            class="adult-book-input-item"
+            v-if="dialogData.type == '拼音+中文'"
+          >
+            <span class="adult-book-lable">拼音位置：</span>
+            <el-radio-group v-model="dialogData.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>
+          <div
+            class="adult-book-input-item"
+            v-for="(answ, anIndex) in item.answer"
+            :key="'anw' + anIndex"
+          >
+            <span class="adult-book-lable">答案：</span>
+            <el-input
+              class="adult-book-input"
+              type="textarea"
+              :autosize="{ minRows: 2 }"
+              placeholder="请输入答案"
+              v-model="answ.con"
+              @blur="onBlur(answ, 'con')"
+            ></el-input>
+            <img
+              @click="deleteAnswer(index, anIndex)"
+              class="close"
+              src="../../../assets/adult/del-close.png"
+              alt=""
+            />
+          </div>
+          <div class="addoption" @click="addAnswer(index)">增加答案</div>
         </div>
-        <div class="addoption">增加</div>
+        <div class="addoption" @click="addrowCol">增加</div>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleClose">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false"
-          >确 定</el-button
-        >
+        <el-button type="primary" @click="save">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -150,11 +198,12 @@ export default {
         option: [
           [
             {
-              type: "", //英文还是拼音+中文
+              type: "英文", //英文还是拼音+中文
               list: [
                 {
                   con: "",
                   pinyin: "",
+                  pinyinSite: "", //拼音的位置
                   answer: [
                     {
                       con: "",
@@ -191,16 +240,69 @@ export default {
       },
       dialogVisible: false,
       dialogData: null,
+      rowIndex: null,
+      colIndex: null,
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
+    changecon(value) {
+      console.log(value);
+      console.log(value.split(""));
+    },
+    //   增加答案
+    addAnswer(index) {
+      let obj = JSON.stringify(this.data_structure.option[0][0].list[0].answer);
+      this.dialogData.list[index].answer.push(obj);
+    },
+    //   删除答案
+    deleteAnswer(index, anindex) {
+      if (this.dialogData.list[index].answer.length <= 1) {
+        this.$message.warning("至少要存在一个答案");
+        return;
+      }
+      this.dialogData.list[index].answer.splice(anindex, 1);
+    },
+    //   删除某一个的行
+    deleterow(index) {
+      if (this.dialogData.list.length <= 1) {
+        this.$message.warning("至少要存在一个");
+        return;
+      }
+      this.dialogData.list.splice(index, 1);
+    },
+    //   增加某一个的行数
+    addrowCol() {
+      let obj = JSON.parse(
+        JSON.stringify(this.data_structure.option[0][0].list[0])
+      );
+      this.dialogData.list.push(obj);
+    },
+    // 保存
+    save() {
+      this.curQue.option[this.rowIndex][this.colIndex] = JSON.parse(
+        JSON.stringify(this.dialogData)
+      );
+      this.rowIndex = null;
+      this.colIndex = null;
+    },
+    //   编辑某一个
+    edit(item, rindex, cindex) {
+      console.log(item);
+      this.dialogData = JSON.parse(JSON.stringify(item));
+      this.dialogVisible = true;
+      //   记录索引
+      this.rowIndex = rindex;
+      this.colIndex = cindex;
+    },
     //   关闭弹窗
     handleClose() {
       this.dialogVisible = false;
       this.dialogData = null;
+      this.rowIndex = null;
+      this.colIndex = null;
     },
     //   修改排列方式
     changearrangeWay(value) {
@@ -371,8 +473,6 @@ 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;
@@ -380,6 +480,7 @@ export default {
     text-align: center;
     line-height: 40px;
     cursor: pointer;
+    margin-bottom: 15px;
   }
   .Big-Book-addrole {
     > div {
@@ -444,7 +545,7 @@ export default {
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
-    padding: 24px 16px;
+    padding: 24px 20px;
     .row {
       display: flex;
       .col {
@@ -463,7 +564,7 @@ export default {
           padding: 0 12px;
           > div {
             margin: 0 8px;
-            width: 67%;
+            flex: 1;
           }
           > span {
             display: inline-block;