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

<!--  -->
<template>
  <div class="Big-Book-input">
    <div class="Big-Book-content m">
      <div class="Big-Book-main">
        <div>
          <el-input
            style="width: 150px"
            type="textarea"
            autosize
            placeholder="请输入角色名"
            v-model="curQueItem.roleName"
            @blur="curQueItem.roleName = curQueItem.roleName.trim()"
          ></el-input>
        </div>
        <div style="margin-left: 50px">
          <div class="adult-book-input-item">
            <span class="adult-book-input-item">内容：</span>
            <el-input
              type="textarea"
              class="adult-book-input"
              :autosize="{ minRows: 2 }"
              placeholder="请输入内容"
              v-model="curQueItem.con"
              @blur="curQueItem.con = curQueItem.con.trim()"
            ></el-input>
            <img
              @click="deleteOption"
              class="close"
              src="../../../assets/adult/del-close.png"
              alt=""
            />
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-input-item">内容：</span>
            <el-input
              type="textarea"
              class="adult-book-input"
              :autosize="{ minRows: 2 }"
              placeholder="请输入内容"
              v-model="curQueItem.number"
              @blur="curQueItem.number = curQueItem.number.trim()"
            ></el-input>
          </div>
          <template v-if="checkList.indexOf('输入') != -1">
            <div
              class="adult-book-input-item"
              v-for="(item, i) in curQueItem.AnswerList"
              :key="i"
            >
              <span class="adult-book-input-item">答案：</span>
              <el-input
                type="textarea"
                autosize
                placeholder="请输入答案"
                v-model="curQueItem.AnswerList[i]"
                @blur="
                  curQueItem.AnswerList[i] = curQueItem.AnswerList[i].trim()
                "
              ></el-input>
              <img
                @click="deleteAnswer(i)"
                class="close"
                src="../../../assets/adult/del-close.png"
                alt=""
              />
              <!-- <img
              v-if="checkList.indexOf('跟读') != -1"
              src="../../../assets/adult/Dialogue-audio.png"
              alt=""
            /> -->
            </div>
            <div>
              <div class="addoption" @click="addAnswer">添加答案</div>
            </div>
          </template>
          <div class="adult-book-input-item">
            <span class="adult-book-input-item">位置：</span>
            <el-radio
              @change="changesite"
              v-model="curQueItem.site"
              label="left"
              >左侧</el-radio
            >
            <el-radio
              @change="changesite"
              v-model="curQueItem.site"
              label="right"
              >右侧</el-radio
            >
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-input-item">录音：</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">
            <Upload
              :changeFillId="changeImage"
              :datafileList="fileCon.img_list"
              :filleNumber="imgNumber"
              :uploadType="'image'"
            />
          </div>
          <div class="adult-book-input-item">
            <Upload
              :changeFillId="changeMp3"
              :datafileList="fileCon.mp3_list"
              :filleNumber="mp3Number"
              :uploadType="'mp3'"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Upload from "./Upload.vue";
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
export default {
  components: {
    Upload,
  },
  props: [
    "curQueItem",
    "index",
    "changAnswer",
    "deleteOptionOne",
    "type",
    "checkList",
  ],
  data() {
    return {
      imgNumber: 10,
      mp3Number: 1,
      fileCon: {
        img_list: [],
        mp3_list: [],
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    //   删除当前选项
    deleteOption() {
      this.$confirm("确定要删除此角色吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteOptionOne(this.index);
      });
    },
    deleteAnswer(i) {
      this.$confirm("确定要删除此答案选项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.curQueItem.AnswerList.length < 1) {
          this.$message.warning("至少保留一个答案选项");
          return;
        } else {
          this.curQueItem.AnswerList.splice(i, 1);
        }
      });
    },
    addAnswer() {
      this.curQueItem.AnswerList.push("");
    },
    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.articleImgList = articleImgRes;
      this.curQueItem.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    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: item.response.file_info_list[0].file_id,
          };
          articleImgRes.push(obj);
        }
      });
      //this.articleImgList = articleImgRes;
      this.curQueItem.img_list = JSON.parse(JSON.stringify(articleImgRes));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    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-input {
  .Big-Book-content {
    &.m {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .Big-Book-con {
      display: flex;
      align-items: center;
      img {
        width: 24px;
      }
    }
    .Big-Book-title {
      font-size: 16px;
      line-height: 40px;
      color: #000;
      margin-right: 15px;
    }
    .Big-Book-main {
      position: relative;
      width: 100%;
      display: flex;

      :nth-child(2) > div {
        margin-bottom: 10px;
        &.Big-Book-pinyin,
        &.Big-Book-en,
        &.Big-Book-answer,
        &.Big-Book-con {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .Big-Book-answer {
          margin-left: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
      .close {
        width: 24px;
        cursor: pointer;
      }
      .Big-Book-site {
        margin: 15px 0;
      }
    }
  }
  .addoption {
    width: 148px;
    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;
    font-size: 14px;
    color: #000000;
  }
}
</style>