GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/PurePreview.vue

<!--  -->
<template>
  <div class="Big-Book-PurePreview" v-if="curQue">
    <div
      class="Big-Book-Single-content"
      style="margin-left: 20px; margin-top: 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="请输入标题"
          v-model="curQue.title"
          @blur="onBlur(curQue, 'title')"
        ></el-input>
      </div>
      <template
        v-if="type == 'text_problem_chs' || type == 'newWord_preview_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>
            <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.en"
                @blur="onBlur(item, 'en')"
              ></el-input>
              <img
                @click="deleteOptionOne(index)"
                class="close"
                src="../../../assets/adult/del-close.png"
                alt=""
              />
            </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.en"
                @blur="onBlur(item, 'en')"
              ></el-input>
            </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="请输入拼音"
              v-model="item.number"
              @blur="onBlur(item, 'number')"
            ></el-input>
            <img
              @click="deleteyinjie(index, itI)"
              class="close"
              src="../../../assets/adult/del-close.png"
              alt=""
            />
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">音频：</span>
            <Upload
              :changeFillId="listenchangeMp3"
              :datafileList="item.mp3_list"
              :filleNumber="mp3Number"
              :uploadType="'mp3'"
              :index="index"
            />
          </div>
          <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="addoption" @click="addyinjie(index, itI)">
            添加一个音节
          </div>
        </div>
      </template>
      <div class="Big-Book-addrole">
        <div class="addoption" @click="addOption">添加一个</div>
      </div>

      <template v-if="type == 'newWord_preview_chs'">
        <div class="Big-Book-divide">
          <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>
      </template>
    </div>
  </div>
</template>

<script>
import Upload from "../common/Upload";
import SentenceSegwordChs from "../common/SentenceSegwordChs/index.vue";
export default {
  name: "PurePreview",
  props: ["curQue", "fn_data", "changeCurQue", "type"],
  components: {
    SentenceSegwordChs,
    Upload,
  },
  data() {
    return {
      checkList: [],
      mp3Number: 1,
      form: {
        stem: {
          con: "",
          pinyin: "",
          english: "",
          highlight: "",
          underline: "",
          img_url: [],
          mp3_url: [],
        },
      },
      data_structure: {
        type: "text_problem_chs",
        name: "课文上面的问题",
        title: "",
        option: [
          {
            mp3_list: [],
            number: "",
            detail: {
              en: "",
              pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
              sentence: "", //句子
              segList: [], //分词结果
              seg_words: "",
              wordsList: [],
            },
            en: "", //英文
            answer: [""],
            judge: true,
          },
        ],
      },
      data_structure2: {
        type: "newWord_preview_chs",
        name: "生字展示",
        title: "",
        imgOrText: null,
        option: [
          {
            mp3_list: [],
            img_list: [],
            con: "", //生字
            en: "",
            pinyin: "", //拼音
          },
        ],
        numberList: {
          type: "number",
          name: "每行几个",
          con: "7",
          arr: [
            {
              id: 1,
              value: 1,
            },
            {
              id: 2,
              value: 2,
            },
            {
              id: 3,
              value: 3,
            },
            {
              id: 4,
              value: 4,
            },
            {
              id: 5,
              value: 5,
            },
            {
              id: 6,
              value: 6,
            },
            {
              id: 7,
              value: 7,
            },
          ],
        },
      },
      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;
      }
      this.curQue.option.splice(index, 1);
    },
    // 新增选项
    addOption() {
      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[0]));
        this.curQue.push(obj);
      }
    },
    initcurQue() {
      let data;
      if (this.type == "newWord_preview_chs") {
        data = JSON.parse(JSON.stringify(this.data_structure2));
      } else if (this.type == "text_problem_chs") {
        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));
      }
      this.changeCurQue(data);
    },
    // 选项的图片
    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].mp3_list = JSON.parse(
        JSON.stringify(articleImgRes)
      );
    },
    // 选项的音频
    changeMp3(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].mp3_list = JSON.parse(
        JSON.stringify(articleImgRes)
      );
    },
    // 听录音选择音调的上传音频
    listenchangeMp3(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[index].mp3_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    // 题目的音频
    timuchangeMp3(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.curQue.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (!this.curQue) {
      this.initcurQue();
    } else {
      if (this.type == "newWord_preview_chs") {
        let obj = {
          type: "number",
          name: "每行几个",
          con: "7",
          arr: [
            {
              id: 1,
              value: 1,
            },
            {
              id: 2,
              value: 2,
            },
            {
              id: 3,
              value: 3,
            },
            {
              id: 4,
              value: 4,
            },
            {
              id: 5,
              value: 5,
            },
            {
              id: 6,
              value: 6,
            },
            {
              id: 7,
              value: 7,
            },
          ],
        };
        this.$set(this.curQue, "numberList", obj);
      }
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scope>
//@import url(); 引入公共css类
.Big-Book-PurePreview {
  &-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: 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;
      height: 40px;
      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-more {
    .Big-Book-more-text {
      position: relative;
      text-align: center;
    }
    .Big-Book-more-text:before,
    .Big-Book-more-text:after {
      position: absolute;
      background: #ccc;
      content: "";
      height: 1px;
      top: 50%;
      width: 45%;
    }
    .Big-Book-more-text:before {
      left: 10px;
    }
    .Big-Book-more-text:after {
      right: 10px;
    }
    .Big-Book-more-main {
      display: flex;
      > :not(:nth-child(1)) {
        margin-left: 30px;
      }
    }
  }
  .Big-Book-con {
    display: flex;
    align-items: center;
  }
  .close {
    width: 24px;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
</style>