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

<!--  -->
<template>
  <div
    class="NNPE-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'"
      />
    </div>
    <div
      class="NPC-dia-art-option"
      v-for="(item, index) in curQue.option"
      :key="'daChs' + index"
    >
      <!--对话角色-->
      <div class="NPC-da-role">
        <!-- <RoleChs :roleCon="item.role" /> -->
        <el-button type="primary" @click="editRole(item, index)"
          >编辑角色</el-button
        >
      </div>
      <!--对话内容-->
      <div class="NPC-da-article">
        <el-button type="primary" @click="editDialogue(item, index)"
          >编辑对话内容</el-button
        >
      </div>
      <!--标注信息-->
      <div class="NPC-da-tag">
        <el-button type="primary">编辑标注</el-button>
      </div>
    </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="编辑角色" :visible.sync="isEditRole" width="60%">
      <template v-if="curOption">
        <RoleChs ref="roleChs" :curRole="curOption.role" />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditRole = false">取 消</el-button>
        <el-button type="primary" @click="saveRole">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑对话内容"
      top="30px"
      :visible.sync="isEditDia"
      width="60%"
    >
      <template v-if="curOption">
        <el-steps
          :active="active"
          finish-status="success"
          simple
          style="margin-top: 20px"
        >
          <el-step title="对话内容"></el-step>
          <el-step title="分段结果"></el-step>
          <el-step title="分句结果"></el-step>
          <el-step title="分词结果"></el-step>
        </el-steps>
        <template v-if="active == 1">
          <ArticleChs
            ref="articleChs"
            :curOption="curOption"
            :changeActive="changeActive"
          />
        </template>
        <template v-if="active == 2">
          <ParagraphChs
            ref="articleChs"
            :curOption="curOption"
            :changeActive="changeActive"
          />
        </template>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditDia = false">取 消</el-button>
        <el-button type="primary" @click="saveDialogue">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { segSentences, BatchSegContent, createPinyin } from "@/api/ajax";
const Base64 = require("js-base64").Base64;
import Upload from "../../common/Upload.vue";
import UploadArt from "../../common/UploadArt.vue";
import ParagraphChs 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";
import ArticleChs from "./components/ArticleChs.vue";

export default {
  name: "DialogueArticleChs",
  components: {
    Upload,
    UploadArt,
    ParagraphChs,
    Clauseresult,
    Segbyword,
    Createtimelist,
    RoleChs,
    ArticleChs,
  },
  props: ["curQue", "changeCurQue", "tmIndex"],
  data() {
    return {
      imageNumber: 1000,
      mp3Number: 1,
      fileCon: {
        img_list: [],
        mp3_list: [],
      },
      isClause: false,
      isByWord: false,
      paraIndex: 0, //段落索引
      cTVisible: false,
      loading: false,
      segList: null,
      isEditRole: false,
      isEditDia: false,
      curOpIndex: -1,
      curOption: null,
      active: 1,

      data_structure: {
        type: "dialog_article_chs",
        name: "对话课文",
        model: 1,
        pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
        title: "", //描述
        option: [
          {
            site: "left",
            role: {
              roleName: "",
              fullName: "",
              segList: [],
              seg_words: "",
              wordsList: [],
              namePinyin: "",
            },
            article: "",
            detail: [],
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    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);
    },
    //生成分句
    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 = {
          text: 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);
          });
          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.paraIndex = paraIndex;
        this.loading = false;
        let list = res.data.result.list;
        this.$set(this.curQue.detail[paraIndex], "segList", list);
        this.segList = list;
        this.isByWord = true;
      });
    },
    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;
    },
    initCurQueData() {
      let res_data = JSON.parse(JSON.stringify(this.data_structure));
      this.changeCurQue(res_data);
    },
    //编辑角色
    editRole(item, index) {
      this.isEditRole = true;
      this.curOption = item;
      this.curOpIndex = index;
    },
    //保存角色
    saveRole() {
      this.isEditRole = false;
      console.log(this.curQue);
    },
    //编辑对话内容
    editDialogue(item, index) {
      this.isEditDia = true;
      this.curOption = item;
      this.curOpIndex = index;
    },
    //保存对话内容
    saveDialogue() {},
    changeActive(active) {
      this.active = active;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log("ArticleTem");
    console.log(this.curQue);
    if (this.curQue) {
      // 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));
    } else {
      this.initCurQueData();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
p {
  margin: 0;
  padding: 0;
}
.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;
    }
  }
}
.NNPE-Book-Article {
  > div {
    margin-bottom: 20px;
  }
}
.NNPE-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;
  }
}
.NPC-dia-art-option {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > div {
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>