GCLS_Page_Book_Component_NPC/src/components/Adult/common/SentenceModule.vue

<!--  -->
<template>
  <div class="Big-Book-SentenceModule" v-if="curQueItem">
    <div class="adult-book-input-item">
      <span class="adult-book-lable">序号：</span>
      <el-input
        size="small"
        class="adult-book-input"
        placeholder="请输入序号"
        v-model="curQueItem.number"
        @blur="onBlur(curQueItem, 'number')"
      ></el-input>
      <div class="deleteOptionBox">
        <img
          @click="deleteOption"
          class="close"
          src="../../../assets/adult/del-close.png"
          alt=""
        />
      </div>
    </div>
    <div class="NPC-sentence-Segword">
      <SentenceSegwordChs :curQue="curQueItem.detail" />
    </div>
    <div class="adult-book-input-item" v-if="type == 'sentence_input'">
      <span class="adult-book-lable">答案：</span>
      <div
        class="NPC-sentence-input-box"
        v-for="(ansItem, ansIndex) in curQueItem.answer"
        :key="'answer' + ansIndex"
      >
        <el-input
          class="adult-book-input"
          type="textarea"
          autosize
          placeholder="请输入答案"
          v-model="curQueItem.answer[ansIndex]"
          @blur="onBlurIndex(ansIndex, 'answer')"
        ></el-input>
        <div class="adult-book-del-icon">
          <i class="el-icon-circle-close"></i>
        </div>
      </div>
    </div>
    <div class="adult-book-input-item" style="padding-left: 80px">
      <el-button size="mini" type="primary" icon="el-icon-plus"
        >添加答案</el-button
      >
    </div>
    <div class="adult-book-input-item" v-if="type == 'sentence_judge'">
      <span class="adult-book-lable">判断：</span>
      <el-radio v-model="curQueItem.judge" :label="true">正确</el-radio>
      <el-radio v-model="curQueItem.judge" :label="false">错误</el-radio>
    </div>
    <div class="adult-book-input-item" v-if="type == 'sentence_record'">
      <span class="adult-book-lable">录音组件：</span>
      <img src="../../../assets/adult/mini.png" alt="" />
    </div>
    <div class="adult-book-input-item" v-if="type == 'recordHZ_inputPY_chs'">
      <span>录音</span>
      <el-radio v-model="curQueItem.IsRecord" :label="true">需要</el-radio>
      <el-radio v-model="curQueItem.IsRecord" :label="false">不需要</el-radio>
    </div>
    <div
      class="adult-book-input-item"
      v-if="type == 'recordHZ_inputPY_chs' && curQueItem.IsRecord"
    >
      <img src="../../../assets/adult/pro-plus.png" alt="" />
    </div>
    <div class="adult-book-input-item" v-if="type == 'inputItem_chs'">
      <span class="adult-book-lable">音频</span>
      <Upload
        :changeFillId="changeMp3"
        :datafileList="fileCon.mp3_list"
        :filleNumber="mp3Number"
        :uploadType="'mp3'"
      />
    </div>
  </div>
</template>

<script>
import SentenceSegwordChs from "./SentenceSegwordChs/index.vue";
import Upload from "./Upload.vue";
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
export default {
  components: { Upload, SentenceSegwordChs },
  props: [
    "curQue",
    "curQueItem",
    "index",
    "changAnswer",
    "deleteOptionOne",
    "checkList",
    "type",
  ],
  data() {
    return {
      //checkListRes: [],
      fileCon: {
        mp3_list: [],
        img_list: [],
      },
      mp3Number: 1,
      imgNumber: 1,
    };
  },
  computed: {},
  watch: {
    // checkList: {
    //   handler: function (val, oldVal) {
    //     const _this = this;
    //     _this.checkListRes = val;
    //   },
    //   // 深度观察监听
    //   deep: true,
    // },
  },
  //方法集合
  methods: {
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    onBlurIndex(index, field) {
      let res = this.curQueItem[field][index].trim();
      this.$set(this.curQueItem[field], index, res);
    },
    onBlurCorrect(item) {
      item[index] = item[index].trim();
    },
    //   删除当前选项
    deleteOption() {
      this.$confirm("确定要删除此选项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // this.deleteOptionOne(this.index);
        console.log(this.deleteOptionOne());
      });
    },
    //   修改正确答案
    changeIsAnswer(type) {
      this.changAnswer(this.index, type);
    },
    // 点击生成拼音
    getPinyin(item) {
      let bool = false;
      let value = "";
      if (item.hanzi == "") {
        this.$message.warning("请先输入内容,再生成拼音");
        bool = true;
      } else {
        value = item.hanzi;
      }
      if (bool) {
        return;
      }
      let result = pinyinUtil.getPinyin(value);
      item.pinyin = result;
    },
    changeMp3(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.curQueItem.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    changeImage(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]",
          };
          articleImgRes.push(obj);
        }
      });
      //this.articleImgList = articleImgRes;
      this.curQueItem.img_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    //添加释义
    addDef() {
      let leg = this.curQueItem.definition_list.length;
      let last = this.curQueItem.definition_list[leg - 1];
      if (!last) {
        this.$message.warning("请填写");
        return;
      }
      this.curQueItem.definition_list.push("");
    },
    delDef(defIndex) {
      this.curQueItem.definition_list.splice(defIndex, 1);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.curQueItem);
    if (this.curQueItem) {
      this.fileCon.img_list = this.curQueItem.img_list;
      this.fileCon.mp3_list = this.curQueItem.mp3_list;
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book {
  &-delDef {
    padding: 0;
    line-height: 32px;
    color: #f56c6c;
  }
  &-def-list {
    margin-bottom: 8px;
  }
  &-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    .deleteOptionBox {
      width: 40px;
      height: 33px;
      display: flex;
      justify-content: center;
      align-items: center;
      .close {
        width: 24px;
        cursor: pointer;
      }
    }
  }

  &-SentenceModule {
    // display: flex;
    // justify-content: flex-start;
    // align-items: center;
    > .adult-book-input-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 10px;
      > span {
        line-height: 32px;
        font-size: 14px;
      }
    }
    .NPC-sentence-Segword {
      margin-top: 16px;
    }
  }

  &-mp3 {
    margin-top: 6px;
    span {
      width: 50px;
    }
  }
  &-img {
    span {
      width: 50px;
    }
  }
}
.NPC-sentence-input-box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>
<style lang="scss">
.NPC-sentence-input-box {
  .NPC-sentence-input {
    margin-right: 10px;
  }
  > i {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
</style>