GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/DialogueTem/index.vue

<!--  -->
<template>
  <div
    class="NPC-Book-Article Big-Book-Maxwidth"
    v-if="curQue"
    v-loading="loading"
  >
    <div class="Big-Book-img">
      <UploadArt
        :change-fill-id="changeImage"
        :datafile-list="fileCon.img_list"
        upload-type="image"
        class="article_pdf"
        :filleNumber="imageNumber"
      />
      <ul
        class="uploadArt_list"
        v-if="curQue.img_list && curQue.img_list.length > 0"
      >
        <li
          v-for="(artItem, artIndex) in curQue.img_list"
          :key="'articleImgList' + artIndex"
        >
          <img :src="artItem.url" style="width: 26px" />
          <span class="art_name">{{ artItem.name }}</span>
          <p>
            图片放到第<el-input
              class="imgNumber"
              type="number"
              v-model="artItem.imgNumber"
              size="mini"
              @input="forceUpdate"
            ></el-input
            >段落的后面
          </p>
          <img
            src="@/assets/adult/del-close.png"
            class="del-close"
            @click="delImage(artIndex)"
          />
        </li>
      </ul>
    </div>
    <div class="Big-Book-mp3">
      <Upload
        type="mp3"
        :changeFillId="changeMp3"
        :datafileList="fileCon.mp3_list"
        :filleNumber="mp3Number"
        :uploadType="'mp3'"
        :handleMp3Base64="handleChange"
      />
    </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="curQue.notice"
        @blur="onBlur(curQue, 'notice')"
      ></el-input>
    </div>
    <div class="NPC-Book-role">
      <ul class="adult-book-input-role" v-if="curQue.roleList.length > 0">
        <li
          v-for="(rItem, rIndex) in curQue.roleList"
          :key="'roleList' + rIndex"
        >
          <div class="rItem" @click="editRole(rItem)">
            <span v-if="rItem.role" class="adult-book-input-roleText">{{
              rItem.role
            }}</span>
            <img
              v-else
              :src="rItem.img_list[0] && rItem.img_list[0].url"
              class="adult-book-input-roleImg"
            />
            <template v-if="rItem.detail.wordsList.length > 0">
              <span class="pinyin">{{
                rItem.detail.wordsList | handlePinyin
              }}</span>
              <span class="chs">{{ rItem.detail.wordsList | handleChs }}</span>
            </template>
          </div>
          <i class="el-icon-circle-close" @click="delRole(rIndex)"></i>
        </li>
      </ul>
      <el-button type="primary" @click="addRole">添加角色</el-button>
    </div>
    <div class="NPC-Book-article">
      <ArticleChs
        :curQue="curQue"
        :isPara="isPara"
        :changeIsPara="changeIsPara"
      />
    </div>
    <div class="NPC-Book-Paragraph" v-if="isPara">
      <Paragraph :curQue="curQue" :isClause="isClause" :sureSeg="sureSeg" />
    </div>
    <!---上传rlc文件-->
    <!-- <div class="NPC-Book-Paragraph" v-if="isClause">
      <el-button
        type="warning"
        size="small"
        @click="uploadLRC"
        v-if="curQue.detail[0].timeList.length == 0"
        >上传lrc文件</el-button
      >
      <div v-else class="lrc-box">
        <span>已有字幕时间节点</span>
        <el-button type="text" @click="editTimeList">去编辑</el-button>
      </div>
    </div> -->

    <!---分句-->
    <div class="NPC-Book-Paragraph" v-if="isClause">
      <Clauseresult :curQue="curQue" :segByWord="segByWord" />
    </div>
    <div class="lrc-box">
      <div
        v-if="this.curQue.wordTime && this.curQue.wordTime.length > 0"
        class="lrc-box"
      >
        <span>已有字幕时间节点</span>
        <el-button type="text" @click="againWordTime">重新生成</el-button>
      </div>
      <template v-else>
        <el-button v-if="!isWordTime" size="medium" @click="createWordTime"
          >自动生成字幕节点</el-button
        >
        <p v-else>字幕节点生成中...请等待</p>
      </template>
    </div>
    <!---分词-->
    <div class="NPC-Book-Word" v-if="isByWord">
      <Segbyword :curQue="curQue" :paraIndex="paraIndex" :segList="segList" />
    </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="curQue.answer"
        @blur="onBlur(curQue, 'answer')"
      ></el-input>
    </div>

    <el-dialog title="段落分句字幕打点" :visible.sync="cTVisible" width="30%">
      <Createtimelist ref="createtimelist" :curQue="curQue" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="cTVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTimeList">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="roleStatus == 1 ? '添加角色' : '编辑角色'"
      :visible.sync="roleVisible"
      :modal="false"
      width="60%"
    >
      <template v-if="roleStatus == 1">
        <RoleChs
          ref="createRolelist"
          :curRole="curQue.roleList[curQue.roleList.length - 1]"
        />
      </template>
      <template v-else>
        <RoleChs ref="createRolelist" :curRole="curRole" />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roleVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRoleList">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  segSentences,
  BatchSegContent,
  createPinyin,
  prepareTranscribe,
  getWordTime,
} from "@/api/ajax";
const Base64 = require("js-base64").Base64;
import Upload from "../../common/Upload.vue";
import UploadArt from "../../common/UploadArt.vue";
import ArticleChs from "./components/ArticleChs.vue";
import Paragraph from "./components/ParagraphChs.vue";
import Clauseresult from "./components/ClauseresultChs.vue";
import Segbyword from "./components/SegbywordChs.vue";
import Createtimelist from "./components/CreatetimelistChs.vue";
import RoleChs from "./components/RoleChs.vue";

export default {
  name: "ArticleTemChs",
  components: {
    Upload,
    UploadArt,
    ArticleChs,
    Paragraph,
    Clauseresult,
    Segbyword,
    Createtimelist,
    RoleChs,
  },
  props: ["curQue", "changeCurQue", "listIndex"],
  filters: {
    handlePinyin(wordsList) {
      let str = "";
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += item.pinyin + " ";
        } else {
          str += item.pinyin;
        }
      });
      return str;
    },
    handleChs(wordsList) {
      let str = "";
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += item.chs + " ";
        } else {
          str += item.chs;
        }
      });
      return str;
    },
  },
  data() {
    return {
      imageNumber: 1000,
      mp3Number: 1,
      fileCon: {
        img_list: [],
        mp3_list: [],
      },
      isPara: false,
      isClause: false,
      isByWord: false,
      paraIndex: 0, //段落索引
      cTVisible: false,
      roleVisible: false,
      roleStatus: 1, //1添加；2是编辑
      curRole: null,
      loading: false,
      segList: null,
      isWordTime: false,
    };
  },
  computed: {},
  watch: {
    listIndex: {
      handler: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.isPara = false;
          this.isClause = false;
          this.isByWord = false;
          this.paraIndex = 0; //段落索引
          this.roleStatus = 1; //1添加；2是编辑
          this.curRole = null;
          this.loading = false;
          this.segList = null;
          this.isWordTime = false;
          this.initData();
        }
      },
      deep: true,
    },
  },
  //方法集合
  methods: {
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    changeMp3(fileList) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            duration: item.response.file_info_list[0].media_duration,
            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));
    },

    changeImage(file) {
      console.log(file);
      if (file.response) {
        const obj = {
          name: file.name,
          url: file.response.file_info_list[0].file_url,
          id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
          imgNumber: 0,
        };
        this.curQue.img_list.push(obj);
        this.$forceUpdate();
      }
    },
    forceUpdate() {
      this.$forceUpdate();
    },
    delImage(index) {
      this.curQue.img_list.splice(index, 1);
      this.fileCon.img_list.splice(index, 1);
    },
    //添加角色
    addRole() {
      this.roleVisible = true;
      console.log(this.roleVisible);
      this.roleStatus = 1;
      let id = Math.random().toString(36).substr(2);
      let roleCon = {
        id: id,
        role: "",
        img_list: [],
        detail: {
          fullName: "",
          seg_words: "",
          wordsList: [],
        },
      };
      this.curQue.roleList.push(JSON.parse(JSON.stringify(roleCon)));
    },
    //保存角色
    saveRoleList() {
      this.roleVisible = false;
      this.$message.success("保存成功！");
      console.log(this.curQue);
    },
    //删除角色
    delRole(index) {
      this.curQue.roleList.splice(index, 1);
    },
    //点击角色
    editRole(item) {
      this.roleVisible = true;
      this.roleStatus = 2;
      this.curRole = item;
    },
    changeIsPara() {
      this.isPara = true;
    },
    //生成分句
    sureSeg() {
      let detail = JSON.parse(JSON.stringify(this.curQue.detail));
      let leg = detail.length;
      let flag = false;
      for (let i = 0; i < leg; i++) {
        if (!detail[i].para) {
          flag = true;
          break;
        }
      }
      if (!flag) {
        let textList = [];
        detail.forEach((item) => {
          let str = Base64.encode(item.para);
          textList.push(str);
        });
        this.loading = true;
        let data = {
          textList: textList,
        };
        segSentences(data).then((res) => {
          this.loading = false;
          let result = res.data.result;
          result.forEach((item, index) => {
            this.$set(this.curQue.detail[index], "sentences", item);
            for (let i = 0; i < item.length; i++) {
              this.curQue.detail[index].sentencesEn.push("");
            }
          });
          this.isClause = true;
        });
      } else {
        this.$message.warning("段落不能为空");
      }
    },
    changeIsClause(isClause) {
      this.isClause = isClause;
    },
    //生成分词
    segByWord(sentences, paraIndex) {
      console.log(sentences);
      this.loading = true;
      let textList = [];
      sentences.forEach((item) => {
        let str = Base64.encode(item);
        textList.push(str);
      });
      let data = {
        textList: textList,
      };
      BatchSegContent(data).then((res) => {
        this.loading = false;
        let list = res.data.result.list;
        this.$set(this.curQue.detail[paraIndex], "segList", list);
        console.log(this.curQue);
        this.segList = list;
        this.isByWord = true;
        this.paraIndex = paraIndex;
      });
    },
    // 上传音频文件
    handleChange(file, fileList) {
      let _this = this;
      _this.getBase64(file.raw).then((res) => {
        let base_res = res.split("base64,");
        let data = {
          fileName: file.raw.name,
          speechBase64: base_res[1],
        };
        prepareTranscribe(data).then((res) => {
          _this.$set(_this.curQue, "taskId", res.data.taskId);
        });
      });
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    createWordTime() {
      if (this.curQue.taskId) {
        let verseList = [];
        this.curQue.detail.forEach((item) => {
          verseList = verseList.concat(item.sentences);
        });
        if (verseList.length > 0) {
          this.isWordTime = true;
          let data = {
            taskId: this.curQue.taskId,
            verseList: JSON.stringify(verseList),
          };
          getWordTime(data).then((res) => {
            this.curQue.wordTime = res.data.result;
            this.isWordTime = false;
          });
        }
      } else {
        this.$message.warning("请先上传音频");
      }
    },
    againWordTime() {
      this.isWordTime = false;
      this.$set(this.curQue, "wordTime", []);
    },
    uploadLRC() {
      this.cTVisible = true;
    },
    //保存字幕节点
    saveTimeList() {
      this.cTVisible = false;
      let detail = JSON.parse(JSON.stringify(this.$refs.createtimelist.detail));
      let detailRes = detail.map((item) => {
        let timeList = item.time_str.split("\n");
        item.timeList = this.handleTimeReg(timeList);
        return item;
      });
      this.curQue.detail = JSON.parse(JSON.stringify(detailRes));
      console.log(this.curQue.detail);
    },

    handleTimeReg(list) {
      list = list.map((item) => {
        let regArr = item.split("]");
        let reg = regArr[0];
        item = reg.replace("[", "");
        return item;
      });
      return list;
    },
    //点击字幕节点
    editTimeList() {
      this.cTVisible = true;
    },
    initData() {
      console.log("对话答题保存");
      console.log(this.curQue);
      if (this.curQue) {
        if (this.curQue.detail && this.curQue.detail.length > 0) {
          if (this.curQue.detail[0].para) {
            this.isPara = true;
          }
          if (this.curQue.detail[0].sentences.length > 0) {
            this.isClause = true;
          }
          if (this.curQue.detail[0].seg_words.length > 0) {
            this.isByWord = true;
          }
        }
        if (!this.curQue.img_list) {
          this.curQue.img_list = [];
        }
        if (!this.curQue.mp3_list) {
          this.curQue.mp3_list = [];
        }
        this.fileCon.img_list = JSON.parse(
          JSON.stringify(this.curQue.img_list)
        );
        this.fileCon.mp3_list = JSON.parse(
          JSON.stringify(this.curQue.mp3_list)
        );
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
p {
  margin: 0;
  padding: 0;
}
.adult-book-input-role {
  clear: both;
  overflow: hidden;

  > li {
    float: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 8px;
    border: 1px #a7a7a7 solid;
    border-radius: 8px;
    margin: 0 10px 10px 0px;
    .rItem {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .adult-book-input {
        &-roleText {
          width: 40px;
          height: 40px;
          background: #a7a7a7;
          border-radius: 100%;
          text-align: center;
          line-height: 40px;
        }
        &-roleImg {
          width: 40px;
          height: 40px;
        }
      }
      .pinyin {
        font-family: "GB-PINYINOK-B";
        font-size: 14px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.85);
        margin-right: 8px;
        margin-left: 8px;
      }
      .chs {
        font-family: "FZJCGFKTK";
        font-size: 16px;
        line-height: 24px;
        color: #000000;
        margin-right: 16px;
      }
    }
    > i {
      cursor: pointer;
    }
  }
}
.uploadArt_list {
  border: 1px #ccc solid;
  border-bottom: 0;
  margin-top: 10px;
  > li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px #ccc solid;

    > span {
      width: 320px;
      word-wrap: break-word;
      font-size: 14px;
      color: rgb(112, 110, 110);
      border-right: 1px #ccc solid;
      padding: 5px 10px;
    }
    > p {
      flex: 1;
      padding: 5px 10px;
    }
    .imgNumber {
      width: 80px;
    }
    .del-close {
      width: 24px;
      height: 24px;
      cursor: pointer;
      margin-right: 10px;
    }
  }
}
.NPC-Book-Article {
  > div {
    margin-bottom: 20px;
  }
}
.NPC-Book-model {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  > span {
    margin: 0;
  }
}
.lrc-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > span {
    font-size: 14px;
    margin-right: 16px;
  }
}
</style>