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"
        :autosize="{ minRows: 2 }"
        placeholder="请输入序号"
        v-model="curQueItem.number"
        @blur="onBlur(curQueItem, 'number')"
        maxlength="200"
        show-word-limit
      ></el-input>
      <div class="deleteOptionBox">
        <img
          @click="deleteOption"
          class="close"
          src="../../../assets/adult/del-close.png"
          alt=""
        />
      </div>
    </div>

    <div class="NPC-sentence-Segword" v-if="type != 'recordHZ_inputPY_chs'">
      <SentenceSegwordChs :curQue="curQueItem.detail" :type="type"/>
      <div class="adult-book-input-item">
        <span class="adult-book-lable"></span>
        <span v-if="curQue.wordTime&&curQue.wordTime.length > 0" class="lrc">
          <el-input v-model="curQue.wordTime[index].bg" size="small" maxlength="200"
            show-word-limit />
          <span> ~ </span>
          <el-input v-model="curQue.wordTime[index].ed" size="small" maxlength="200"
            show-word-limit />
          {{ curQue.wordTime[index].text }}
        </span>
      </div>
    </div>
    <div class="adult-book-input-item" v-if="type != 'recordHZ_inputPY_chs'">
      <span class="adult-book-lable">英文：</span>
      <el-input
        size="small"
        class="adult-book-input"
        placeholder="请输入句子翻译"
        v-model="curQueItem.en"
        @blur="onBlur(curQueItem, 'en')"
        maxlength="200"
        show-word-limit
      ></el-input>
    </div>
    <div class="adult-book-input-item" v-if="type == 'recordHZ_inputPY_chs'">
      <span class="adult-book-lable">内容：</span>
      <el-input
        size="small"
        class="adult-book-input"
        placeholder="请输入内容"
        v-model="curQueItem.con"
        @blur="onBlur(curQueItem, 'con')"
        @change="forceUpdate"
        maxlength="200"
        show-word-limit
      ></el-input>
    </div>
    <div
      class="adult-book-input-item"
      v-if="
        type == 'sentence_listen_read_chs' || type == 'recordHZ_inputPY_chs'
      "
    >
      <span class="adult-book-lable">内容字体：</span>
      <el-radio-group v-model="curQueItem.font">
        <el-radio label="cn">中文字体</el-radio>
        <el-radio label="en">英文字体</el-radio>
        <el-radio label="py">拼音字体</el-radio>
      </el-radio-group>
    </div>
    <div class="adult-book-input-item" v-if="type == 'recordHZ_inputPY_chs'">
      <span class="adult-book-lable"></span>
      <span v-if="curQue.wordTime.length > 0" class="lrc">
        <el-input v-model="curQue.wordTime[index].bg" size="small" maxlength="200"
            show-word-limit />
        <span> ~ </span>
        <el-input v-model="curQue.wordTime[index].ed" size="small" maxlength="200"
            show-word-limit />
        {{ curQue.wordTime[index].text }}
      </span>
    </div>
    <div class="adult-book-input-item" v-if="type == 'recordHZ_inputPY_chs'">
      <span class="adult-book-lable">答案：</span>
      <el-input
        size="small"
        class="adult-book-input"
        placeholder="请输入答案"
        v-model="curQueItem.answer"
        @blur="onBlur(curQueItem, 'answer')"
        maxlength="200"
        show-word-limit
      ></el-input>
    </div>
    <div
      class="adult-book-input-item"
      v-if="
        type == 'sentence_listen_read_chs' || type == 'recordHZ_inputPY_chs'
      "
    >
      <span class="adult-book-lable">输入字体：</span>
      <el-radio-group v-model="curQueItem.Inputfont">
        <el-radio label="cn">中文字体</el-radio>
        <el-radio label="en">英文字体</el-radio>
        <el-radio label="py">拼音字体</el-radio>
      </el-radio-group>
    </div>
    <div v-for="(item, i) in fn_list" :key="i + 'answer'">
      <template v-if="item.type == 'sentence_input_chs' && item.isFn">
        <div class="adult-book-input-item">
          <span class="adult-book-lable">答案：</span>
          <div>
            <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')"
                maxlength="200"
                show-word-limit
              ></el-input>
              <!-- <div class="adult-book-del-icon" @click="delAnswer(ansIndex)">
                <i class="el-icon-circle-close"></i>
              </div> -->
            </div>
          </div>
        </div>
        <!-- <div class="adult-book-input-item" style="padding-left: 80px">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="addAnswer"
            >添加答案</el-button
          >
        </div> -->
      </template>
    </div>
    <div v-for="(item, i) in fn_list" :key="i + 'judge'">
      <div
        class="adult-book-input-item"
        v-if="item.type == 'sentence_judge_chs' && item.isFn"
      >
        <span class="adult-book-lable">判断：</span>
        <el-radio-group v-model="curQueItem.judge">
          <el-radio :label="true">正确</el-radio>
          <el-radio :label="false">错误</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div v-for="(item, i) in fn_list" :key="i + 'record'">
      <div
        class="adult-book-input-item"
        v-if="
          item.type == 'sentence_record_chs' &&
          item.isFn &&
          type != 'sentence_listen_read_chs'
        "
      >
        <span class="adult-book-lable">录音：</span>
        <el-radio-group v-model="curQueItem.IsRecord">
          <el-radio :label="true">需要</el-radio>
          <el-radio :label="false">不需要</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div
      class="adult-book-input-item"
      v-if="
        (type == 'sentence_input_record_chs' && curQueItem.IsRecord) ||
        type == 'sentence_record_chs' ||
        type == 'sentence_listen_read_chs'
      "
    >
      <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' && curQueItem.IsRecord"
    >
      <img src="../../../assets/adult/pro-plus.png" alt="" />
    </div>
    <div class="adult-book-input-item" v-if="type != 'recordHZ_inputPY_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",
    "fn_list",
  ],
  data() {
    return {
      //checkListRes: [],
      fileCon: {
        mp3_list: [],
        img_list: [],
      },
      mp3Number: 1,
      imgNumber: 1,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    forceUpdate(){
        this.$forceUpdate()
    },
    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);
    },
    //   删除当前选项
    deleteOption() {
      this.$confirm("确定要删除此选项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteOptionOne(this.index);
      });
    },
    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));
    },
    //添加答案
    addAnswer() {
      let leg = this.curQueItem.answer.length;
      let last = this.curQueItem.answer[leg - 1];
      if (!last) {
        this.$message.warning("请先填写完整");
        return;
      }
      this.curQueItem.answer.push("");
    },
    delAnswer(ansIndex) {
        this.$confirm("确定要删除此条答案吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            if (this.curQueItem.answer.length <= 1) {
                this.$message.warning("至少要保留一个");
                return;
            }
            this.curQueItem.answer.splice(ansIndex, 1);
        })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.curQueItem) {
      this.fileCon.img_list = this.curQueItem.img_list;
      this.fileCon.mp3_list = this.curQueItem.mp3_list;
      if (!this.curQueItem.hasOwnProperty("con")) {
        this.$set(this.curQueItem, "con", '');
      }
      if(this.type=='recordHZ_inputPY_chs'){
        if(Object.prototype.toString.call(this.curQueItem.answer)=='[object Array]'){
            this.$set(this.curQueItem, "answer", '');
        }
      }
    }
  },
  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;
    }
  }

  &-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;
  margin-bottom: 10px;
}
.close {
  width: 24px;
  cursor: pointer;
}
.lrc {
  display: flex;
  align-items: center;
}
</style>
<style lang="scss">
.NPC-sentence-input-box {
  .NPC-sentence-input {
    margin-right: 10px;
  }
  > i {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
</style>