GCLS_Page_Book_Component_NPC/src/components/Adult/common/ImageQuestionModule.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">
      <SentenceSegwordChs :curQue="curQueItem.detail" />
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">英文：</span>
      <el-input
        size="small"
        class="adult-book-input"
        placeholder="请输入句子翻译"
        v-model="curQueItem.en"
        @blur="onBlur(curQueItem, 'en')"
      ></el-input>
    </div>
    <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')"
          ></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>

    <div class="adult-book-input-item">
      <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 class="adult-book-input-item" v-if="curQueItem.IsRecord">
      <span class="adult-book-lable">录音组件：</span>
      <img src="../../../assets/adult/mini.png" alt="" />
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">图片：</span>
      <Upload
        :changeFillId="changeImage"
        :datafileList="fileCon.img_list"
        :filleNumber="mp3Number"
        :uploadType="'image'"
      />
    </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: {},
  //方法集合
  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);
    },
    //   删除当前选项
    deleteOption() {
      this.$confirm("确定要删除此选项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(this.deleteOptionOne());
      });
    },
    changeImage(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));
    },
    //添加答案
    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() {
    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;
    }
  }

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