HM21St_Page_Manager/src/views/content_manage/newspaper_manage/CreateArticle.vue

<template>
  <div class="manage-root create-article">
    <Header />
    <breadcrumb
      :breadcrumbList="breadcrumbList"
      class="breadcrumb-box"
    ></breadcrumb>
    <div class="manage-root-contain" v-loading="subtitleLoading">
      <div
        class="manage-root-contain-inner"
        :style="{ height: tableHeight + 'px' }"
      >
        <el-form
          :inline="true"
          :model="articleForm"
          :rules="articleRules"
          ref="articleForm"
          label-width="100px"
          class="registerForm"
          label-position="top"
        >
          <el-form-item label="标题" prop="art_title" class="title-box">
            <el-input
              v-model="articleForm.art_title"
              autocomplete="off"
              placeholder="请输入标题"
              @blur="handleTrim('articleForm', 'art_title')"
              maxlength="100"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="来源" prop="art_author" class="source-box">
            <el-input
              v-model="articleForm.art_author"
              autocomplete="off"
              placeholder="请输入来源"
              @blur="handleTrim('articleForm', 'art_author')"
              maxlength="200"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="Page" prop="page_no_in_pub" class="page-box">
            <el-input
              v-model="articleForm.page_no_in_pub"
              autocomplete="off"
              placeholder="请输入"
              type="number"
              :min="1"
              maxlength="200"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <template>
          <label class="item-label">课文读音</label>
          <div class="article-mp3-box">
            <ul
              v-if="articleForm.articleMp3 && articleForm.articleMp3.length > 0"
              class="article-mp3-list"
            >
              <li v-for="(item, index) in articleForm.articleMp3" :key="index">
                <a
                  ><svg-icon :icon-class="'mp3'" class="icon-logo"></svg-icon
                  ><span>{{ item.name }}</span></a
                >
                <i class="el-icon-error" @click="handleDelResource(index)"></i>
              </li>
            </ul>
            <upload
              :class="['article-mp3']"
              :datafileList="articleForm.articleMp3"
              :changeFillId="handleAvatarSuccess"
              :fileName="'articleMp3'"
              uploadType="mp3"
              tips=" "
              :filleNumber="1"
              :showList="true"
            />
            <!-- <el-button type="primary" size="small" @click="handleSubtitle" :loading="subtitleLoading" v-if="!substitleReault">生成字幕</el-button>
                    <el-button size="small" @click="handleSubtitle" :loading="subtitleLoading" v-else>重新生成</el-button>
                    <p class="error-tips"><svg-icon icon-class="error-warning-line"></svg-icon>生成失败</p> -->
            <el-button
              v-if="en_flag === 1"
              type="primary"
              size="small"
              @click="handleChangeCn(0)"
              :loading="changeCnLoading"
              >转成中文内容</el-button
            >
            <el-button
              v-else
              type="primary"
              size="small"
              @click="handleChangeCn(1)"
              :loading="changeCnLoading"
              >转成英文内容</el-button
            >
          </div>
        </template>
        <Editor
          id="article-cn"
          v-model="articleForm.art_content"
          :init="init"
        />
        <template v-if="en_flag === 0"> </template>
        <!-- <template v-else> -->
        <!-- <el-input
                    style="width: 100%"
                    type="textarea"
                    :autosize="{ minRows: 20 }"
                    placeholder="请输入文章"
                    v-model="articleForm.articleEn"
                    @blur="handleTrim('articleForm', 'articleEn')"
                ></el-input> -->
        <el-form
          :model="articleRecourseForm"
          ref="articleResourceForm"
          label-width="40px"
          class="registerForm"
          style="margin-top: 16px"
        >
          <el-form-item label="生词" prop="newWordList">
            <el-button
              type="primary"
              size="small"
              plain
              class="add-btn"
              @click="handleAddWords()"
              ><i class="el-icon-plus"></i> 添加生词</el-button
            >
          </el-form-item>
          <new-word-list
            :list="wordLit"
            :colorObj="colorObj"
            @handleAddWords="handleAddWords"
            v-if="wordLit.length > 0"
          ></new-word-list>
          <el-form-item label="短语" prop="newWordList">
            <el-button
              type="primary"
              size="small"
              plain
              class="add-btn"
              @click="handleAddPhrase()"
              ><i class="el-icon-plus"></i> 添加短语</el-button
            >
          </el-form-item>
          <phrase-list
            class="newWord-list"
            :list="phraseList"
            :colorObj="colorObj"
            @handleAddPhrase="handleAddPhrase"
            v-if="phraseList.length > 0"
          ></phrase-list>
          <el-form-item label="注释" prop="newWordList">
            <el-button
              type="primary"
              size="small"
              plain
              class="add-btn"
              @click="handleAddExplain()"
              ><i class="el-icon-plus"></i> 添加注释</el-button
            >
          </el-form-item>
          <annotation-list
            class="newWord-list"
            :list="annotationList"
            :colorObj="colorObj"
            @handleAddExplain="handleAddExplain"
            v-if="annotationList.length > 0"
          ></annotation-list>
          <!-- <el-form-item label="图片" prop="pictureList">
                            <upload :datafileList="articleRecourseForm.pictureList" :changeFillId="handleAvatarSuccess" :uploadType="'image'" :fileName="'pictureList'" :filleNumber="99" tips="支持上传jpg、png格式图片，单张大小不超过2mb" :showList="true" />
                            <ul v-if="articleRecourseForm.pictureList.length>0" class="resource-list">
                                <li v-for="(itemR,indexR) in articleRecourseForm.pictureList" :key="indexR">
                                    <div>
                                        <el-image
                                            :src="itemR.url"
                                            fit="contain" style="width:40px;height:40px;margin-right:12px"
                                            :preview-src-list="[itemR.url]">
                                        </el-image>
                                        <span>{{itemR.name}}</span>
                                        <svg-icon icon-class="download" style="cursor: pointer;" @click="handlePreview(itemR)"></svg-icon>
                                    </div>
                                    <i class="el-icon-delete" @click="handleDelPicture(indexR)"></i>
                                </li>
                            </ul>   
                        </el-form-item> -->
          <!-- <el-divider></el-divider>
                        <el-form-item label="讲解教师" prop="teacher">
                            <el-input v-model="articleRecourseForm.teacher" autocomplete="off" placeholder="请输入" @blur="handleTrim('articleRecourseForm','teacher')" >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="讲解内容" prop="explanContent">
                            <upload :datafileList="articleRecourseForm.explanContent" :changeFillId="handleAvatarSuccess" :uploadType="'video&radio'" :fileName="'explanContent'" :filleNumber="99" tips="支持上传mp3, wav格式音频文件及 mp4, mov格式视频文件，音频大小不超过50mb，视频大小不超过 500mb。" :showList="true" />
                            <ul v-if="articleRecourseForm.explanContent.length>0" class="resource-list">
                                <li v-for="(itemR,indexR) in articleRecourseForm.explanContent" :key="indexR">
                                    <a @click="handlePreview(itemR)"><svg-icon :icon-class="itemR.type" class="icon-logo"></svg-icon><span>{{itemR.name}}</span></a>
                                    <i class="el-icon-delete" @click="handleDelExplanContent(indexR)"></i>
                                </li>
                            </ul>   
                        </el-form-item> -->
        </el-form>
        <!-- </template> -->
      </div>
      <div class="save-btn">
        <el-button
          type="primary"
          size="small"
          @click="handleSaveArticle('articleForm')"
          :loading="loading"
          >下一步</el-button
        >
        <el-button size="small" @click="onCancel('articleForm')"
          >取消</el-button
        >
      </div>
      <el-button
        type="primary"
        size="small"
        class="preview-btn"
        @click="handlePreviewArt"
        >预览</el-button
      >
    </div>
    <el-dialog
      :visible.sync="resourceFlag"
      :show-close="true"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="1000px"
      class="login-dialog"
      v-if="resourceFlag"
    >
      <iframe :src="resourceUrl" width="100%" height="600px"></iframe>
    </el-dialog>
    <el-dialog
      :visible.sync="newWordFlag"
      :show-close="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="1200px"
      class="login-dialog"
      v-if="newWordFlag"
    >
      <new-words
        @closeDialog="closeDialog"
        :itemData="newWordObj"
        :articleId="id || articleId"
        :vlInfo="vlInfo"
        :sentenceList="sentenceList"
      ></new-words>
    </el-dialog>
    <el-dialog
      :visible.sync="explainFlag"
      :show-close="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="510px"
      class="login-dialog"
      v-if="explainFlag"
    >
      <explain
        @closeDialog="closeDialog"
        :itemData="explainObj"
        :articleId="id || articleId"
        :sentenceList="sentenceList"
      ></explain>
    </el-dialog>
    <el-dialog
      :visible.sync="pharseFlag"
      :show-close="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="1200px"
      class="login-dialog"
      v-if="pharseFlag"
    >
      <phrase
        @closeDialog="closeDialog"
        :itemData="pharseObj"
        :articleId="id || articleId"
        :sentenceList="sentenceList"
      ></phrase>
    </el-dialog>
    <el-dialog
      :visible.sync="previewArticle"
      :show-close="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="100%"
      top="0"
      class="login-dialog"
      v-if="previewArticle"
    >
      <article-detail
        :id="id ? id : articleId"
        :iss_id="$route.query.issueId"
        @closePreviewArticle="closePreviewArticle"
      ></article-detail>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../../components/Header.vue";
import Breadcrumb from "../../../components/Breadcrumb.vue";
import { getLogin } from "@/api/ajax";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
// 引入富文本编辑器主题的js和css
import "tinymce/themes/silver/theme.min";
import "tinymce/skins/ui/oxide/skin.min.css";
// 扩展插件
// import "tinymce/plugins/"
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/template"; // 模板插件
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/paste";
import "tinymce/plugins/preview";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/colorpicker";
import Upload from "../../../components/Upload.vue";
const Base64 = require("js-base64").Base64;
import { mapState } from "vuex";
import { getToken } from "@/utils/auth";
import NewWords from "./NewWords.vue";
import NewWordList from "./components/NewWordList.vue";
import Explain from "./Explain.vue";
import AnnotationList from "./components/AnnotationList.vue";
import PhraseList from "./components/PhraseList.vue";
import Phrase from "./Phrase.vue";
import ArticleDetail from "./ArticleDetail.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
    Breadcrumb,
    Editor,
    Upload,
    NewWords,
    NewWordList,
    Explain,
    AnnotationList,
    PhraseList,
    Phrase,
    ArticleDetail,
  },
  props: {},
  data() {
    //这里存放数据
    const validatePage = (rule, value, callback) => {
      if (value === null) {
        callback();
      } else {
        if (value !== "" && value !== undefined) {
          if (value.length > 3) {
            callback(new Error("Page过长"));
          } else {
            let reg = /^[0-9]*[1-9][0-9]*$/;
            let result = reg.test(value);
            if (!result) {
              callback(new Error("Page只能输入正整数"));
            } else {
              callback();
            }
          }
        } else {
          callback();
        }
      }
    };
    return {
      id: this.$route.query.id ? this.$route.query.id : "",
      en_flag: this.$route.query.en_flag ? this.$route.query.en_flag * 1 : 0,
      breadcrumbList: [
        {
          icon: "file-list-line",
          url: "",
          text: "",
        },
        {
          icon: "",
          url: "",
          notLink: true,
          text: "...",
        },
        {
          icon: "",
          url: "",
          text: this.$route.query.isCreate ? "创建报纸" : "编辑报纸",
        },
        {
          icon: "",
          url: "",
          text: this.$route.query.id
            ? this.$route.query.en_flag * 1 === 1
              ? "编辑英文内容"
              : "编辑中文内容"
            : this.$route.query.en_flag * 1 === 1
            ? "创建英文内容"
            : "创建中文内容",
        },
      ],
      tableHeight: "",
      loading: false,
      articleForm: {
        art_title: "", // 标题
        art_author: "", // 来源
        page_no_in_pub: null, // 页码
        art_content: "", // 中文文章
        articleEn: "", // 英文文章
        articleMp3: [], // 课文音频
        articleMp3_id: "", // 音频文件id
      },
      articleRecourseForm: {
        newWordList: [], // 生词
        pharseList: [], // 短语
        annotationList: [], // 注释
        pictureList: [], // 图片
        teacher: "", // 讲解教师
        explanContent: [], // 讲解内容
      },
      articleRules: {
        art_title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        art_author: [
          { required: true, message: "请输入来源", trigger: "blur" },
        ],
        page_no_in_pub: [{ validator: validatePage, trigger: "blur" }],
        art_content: [{ required: true, message: "请输入", trigger: "blur" }],
        articleEn: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      init: null,
      subtitleLoading: false, //生成字幕loading
      substitleReault: false,
      resourceUrl: "", // 课节资源预览地址
      resourceFlag: false,
      vlInfo: null, // 词表信息
      sentenceList: [], // 句子信息
      articleId: null,
      newWordFlag: false, // 添加生词flag
      newWordObj: null, // 生词obj
      explainObj: null,
      explainFlag: false,
      pharseObj: null,
      pharseFlag: false,
      colorObj: {
        type: "white",
        contentBg: "#F2F3F5",
        contentInnerBg: "#FFFFFF",
        navBg: "#FFFFFF",
        border: "#E5E6EB",
        bg: "#FFFFFF",
        border_active: "#3459D2",
        boxBorder: "#E5E6EB",
        titleColor: "#1F2C5C",
        sourceColor: "#929CA8",
        contentColor: "#2F3742",
        btnColor: "#3459D2",
        glossaryTitle: "#2F3742",
        glossarySubtitle: "#4E5969",
        glossaryBg: "#F7F8FA",
        newWordColor: "#175DFF",
        newWordOtherColor: "#667180",
        newWordStar: "#FFB224",
        newWordType: {
          daochu: {
            text: "导出",
            color: "#F5319D",
            bg: "#FFE8F1",
          },
          xuanbi: {
            text: "选必",
            color: "#175DFF",
            bg: "#D9E2FC",
          },
        },
        phraseColor: "#ED5F00",
        phraseOhterColor: "#2F3742",
        annotationTitle: "#4E5969",
        annotationOhter: "#667180",
        statisticTitle: "#2F3742",
        statisticValue: "#3459D2",
        menuBg: "#EEF3FF",
        audiobg: "#FFFFFF",
        audioBorder: "#EBEBEB",
      },
      wordLit: [],
      annotationList: [],
      phraseList: [],
      previewArticle: false,
      changeCnLoading: false,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["file_preview_url"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    getTableHeight() {
      let tableH = 236; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    // 取消 恢复到修改前状态
    onCancel() {
      this.$router.go(-1);
    },
    handleSaveArticle(formName, flag) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let MethodName = "/PaperServer/Manager/ArticleManager/AddArticle";
          let data = {
            art_title: this.articleForm.art_title,
            page_no_in_pub: this.articleForm.page_no_in_pub
              ? this.articleForm.page_no_in_pub * 1
              : null,
            art_author: this.articleForm.art_author,
            art_content: this.articleForm.art_content,
            iss_id: this.$route.query.issueId,
            chn_item: this.$route.query.chn_name,
            en_flag: this.en_flag,
          };
          if (this.id || this.articleId) {
            MethodName = "/PaperServer/Manager/ArticleManager/EditArticle";
            (data.id = this.id || this.articleId),
              (data.updater_id = JSON.parse(getToken()).user_id);
          }
          if (!this.articleForm.art_content.trim()) {
            this.$message.warning("文章内容不能为空");
            return false;
          }
          if (this.en_flag === 0) {
          } else {
            data.art_content =
              this.id || this.articleId ? this.articleForm.art_content : null;
            data.art_org_content = this.articleForm.art_content.trim();
            data.art_sound_id = this.articleForm.articleMp3_id
              ? this.articleForm.articleMp3_id
              : null;
            // let resource_file_id_list = []
            // this.articleRecourseForm.pictureList.forEach(item => {
            //     if(item.file_id){
            //         resource_file_id_list.push(item.file_id)
            //     }else if(item.response&&item.response.file_info_list&&item.response.file_info_list[0]){
            //         resource_file_id_list.push(item.response.file_info_list[0].file_id)
            //     }

            // });
            // data.art_images = resource_file_id_list
          }
          getLogin(MethodName, data)
            .then((res) => {
              this.loading = false;
              if (res.status === 1) {
                if (flag) {
                  this.articleId = res.data.art.id;
                  if (res.data.vl) {
                    res.data.vl.levelList.forEach((item) => {
                      if (item.cn === "导出" || item.cn === "导出词") {
                        item.cn = "课标同根词";
                      }
                      if (item.cn === "选必") {
                        item.cn = "高中选必";
                      }
                      if (item.cn === "必修") {
                        item.cn = "高中必修";
                      }
                    });
                  }
                  this.vlInfo = res.data.vl.levelList;
                  this.sentenceList = res.data.art.art_corpus_data
                    ? res.data.art.art_corpus_data.sentList
                    : [];
                  if (flag === "newWord") {
                    this.newWordObj = null;
                    this.newWordFlag = true;
                  } else if (flag === "phrase") {
                    this.pharseObj = null;
                    this.pharseFlag = true;
                  } else if (flag === "explain") {
                    this.explainObj = null;
                    this.explainFlag = true;
                  } else if (flag === "preview") {
                    this.previewArticle = true;
                  }
                } else {
                  this.$message.success("文章保存成功");
                  this.$router.go(-1);
                }
              }
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 去掉前后空格
    handleTrim(form, fild) {
      this[form][fild] = this[form][fild].trim();
    },
    handleAvatarSuccess(fileList, name) {
      if (name === "articleMp3") {
        this.articleForm.articleMp3 = fileList;
        this.articleForm.articleMp3_id =
          fileList[0] &&
          fileList[0].response &&
          fileList[0].response.file_info_list &&
          fileList[0].response.file_info_list[0]
            ? fileList[0].response.file_info_list[0].file_id
            : "";
        this.$forceUpdate();
      } else if (name === "pictureList") {
        // fileList.forEach(item=>{
        //     if(item.response&&item.response.file_info_list&&item.response.file_info_list[0]){
        //         item.name = item.response.file_info_list[0].file_name
        //         item.file_id = item.response.file_info_list[0].file_id
        //         item.url = item.response.file_info_list[0].file_url
        //     }
        // })
        // this.articleRecourseForm.pictureList = fileList
      } else if (name === "explanContent") {
        fileList.forEach((item) => {
          if (
            item.response &&
            item.response.file_info_list &&
            item.response.file_info_list[0]
          ) {
            let index =
              item.response.file_info_list[0].file_name.lastIndexOf(".");
            item.name = item.response.file_info_list[0].file_name;
            let type = item.response.file_info_list[0].file_name
              .substring(index + 1)
              .toLowerCase();
            item.type = this.handleJudgeType(type);
            item.file_id = item.response.file_info_list[0].file_id;
          }
        });
        this.articleRecourseForm.explanContent = fileList;
      }
    },
    // 判断文件类型
    handleJudgeType(type) {
      let finalType = "";
      if (type === "wav") {
        finalType = "mp3";
      } else if (type === "png" || type === "jpg" || type === "jpeg") {
        finalType = "jpg";
      } else if (
        type === "avi" ||
        type === "wmv" ||
        type === "mpeg" ||
        type === "mov"
      ) {
        finalType = "mp4";
      } else if (
        type === "rar" ||
        type === "jar" ||
        type === "arj" ||
        type === "z" ||
        type === "jar"
      ) {
        finalType = "zip";
      } else if (type === "docx") {
        finalType = "doc";
      } else if (type === "xls") {
        finalType = "xlsx";
      } else if (type === "pptx") {
        finalType = "ppt";
      } else {
        finalType = type;
      }
      return finalType;
    },
    // 删除资源文件
    handleDelResource(i) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.articleForm.articleMp3.splice(i, 1);
        this.articleForm.articleMp3_id = "";
        this.$forceUpdate();
      });
    },
    handleDelPicture(i) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.articleRecourseForm.pictureList.splice(i, 1);
      });
    },
    handleDelExplanContent(i) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.articleRecourseForm.explanContent.splice(i, 1);
      });
    },
    // 生成字幕
    handleSubtitle() {
      this.subtitleLoading = true;
      this.substitleReault = true;
    },
    // 下载图片
    handleDownloadPic(url) {
      window.open(url, "_blank");
    },
    // 预览文件
    handlePreview(item) {
      let MethodName = "/FileServer/GetFileInfo";
      if (item.file_id) {
        let data = {
          file_id: item.file_id,
        };
        getLogin(MethodName, data).then((res) => {
          if (res.status === 1) {
            window.open(res.file_url, "_blank");
          }
        });
      } else {
        window.open(item.url, "_blank");
      }
    },
    // 获取文章信息
    getArticleInfo() {
      this.subtitleLoading = true;
      let MethodName = "/PaperServer/Manager/ArticleManager/FindArticleById";
      let data = {
        id: this.id || this.articleId,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.articleForm = JSON.parse(JSON.stringify(res.data.art));
            if (res.data.vl) {
              res.data.vl.levelList.forEach((item) => {
                if (item.cn === "导出" || item.cn === "导出词") {
                  item.cn = "课标同根词";
                }
                if (item.cn === "选必") {
                  item.cn = "高中选必";
                }
                if (item.cn === "必修") {
                  item.cn = "高中必修";
                }
              });
            }
            this.vlInfo = res.data.vl ? res.data.vl.levelList : [];
            this.sentenceList = res.data.art.art_corpus_data
              ? res.data.art.art_corpus_data.sentList
              : [];
            this.articleForm.articleEn = JSON.parse(
              JSON.stringify(res.data.art)
            ).art_org_content;
            if (res.data.art.art_sound_id) {
              this.articleForm.articleMp3_id = res.data.art.art_sound_id;
              if (res.data.art.art_sound_id.indexOf("http") == -1) {
                getLogin("/FileServer/GetFileInfo", {
                  file_id: res.data.art.art_sound_id,
                }).then((res) => {
                  if (res.status === 1) {
                    this.articleForm.articleMp3 = [
                      {
                        name: res.file_name,
                      },
                    ];
                    this.$forceUpdate();
                  }
                });
              } else {
                this.articleForm.articleMp3 = [
                  {
                    name: "音频文件.mp3",
                  },
                ];
              }
            } else {
              this.articleForm.articleMp3_id = "";
              this.articleForm.articleMp3 = [];
            }
            // this.articleRecourseForm.pictureList = []
            // if(res.data.art.art_images&&res.data.art.art_images.length>0){
            //     res.data.art.art_images.forEach((item,index)=>{
            //         if(item.indexOf('http')==-1){
            //             getLogin('/FileServer/GetFileInfo', {file_id:item})
            //             .then((res) => {
            //                 if(res.status===1){
            //                     this.articleRecourseForm.pictureList.push({
            //                         name:res.file_name,
            //                         url:res.file_url,
            //                         file_id: item
            //                     })
            //                 }
            //             })
            //         }else{
            //             this.articleRecourseForm.pictureList.push({
            //                 name:'图片'+(index+1),
            //                 url:item,
            //                 file_id: ''
            //             })
            //         }
            //     })
            // }
            if (
              res.data.art.art_voc_data &&
              res.data.art.art_voc_data.length > 0
            ) {
              this.wordLit = [];
              res.data.art.art_voc_data.forEach((items) => {
                if (
                  items.word_explain &&
                  items.word_explain.vl_level_name &&
                  (items.word_explain.vl_level_name === "导出" ||
                    items.word_explain.vl_level_name === "导出词")
                ) {
                  items.word_explain.vl_level_name = "课标同根词";
                }
                if (
                  items.word_explain &&
                  items.word_explain.vl_level_name &&
                  items.word_explain.vl_level_name === "必修"
                ) {
                  items.word_explain.vl_level_name = "高中必修";
                }
                if (
                  items.word_explain &&
                  items.word_explain.vl_level_name &&
                  items.word_explain.vl_level_name === "选必"
                ) {
                  items.word_explain.vl_level_name = "高中选必";
                }
                let obj = {
                  src: items.ph_file_url ? items.ph_file_url : "",
                  word: items.word_name,
                  symbol: items.word_explain.ph ? items.word_explain.ph : "",
                  paraList: items.word_explain.word_para_list,
                  type: items.word_explain.vl_level
                    ? items.word_explain.vl_level
                    : "",
                  typeCn: items.word_explain.vl_level_name
                    ? items.word_explain.vl_level_name
                    : "",
                  rate: items.word_explain.star
                    ? items.word_explain.star
                    : null,
                  originalObj: items,
                  hasVoice:
                    items.word_explain.ph_mp3_id ||
                    items.word_explain.ph_file_url
                      ? true
                      : false,
                };
                this.wordLit.push(obj);
              });
            }
            if (
              res.data.art.art_explain_data &&
              res.data.art.art_explain_data.length > 0
            ) {
              this.annotationList = res.data.art.art_explain_data;
            }
            if (
              res.data.art.art_phrase_data &&
              res.data.art.art_phrase_data.length > 0
            ) {
              this.phraseList = res.data.art.art_phrase_data;
            }
            if (res.data.art.page_no_in_pub === 0) {
              this.articleForm.page_no_in_pub = null;
            }
            this.subtitleLoading = false;
          }
        })
        .catch(() => {
          this.subtitleLoading = false;
        });
    },
    // 添加生词
    handleAddWords(obj) {
      if (obj) {
        this.newWordObj = obj.originalObj ? obj.originalObj : obj;
        this.newWordFlag = true;
      } else {
        this.handleSaveArticle("articleForm", "newWord");
      }
    },
    // 添加注释
    handleAddExplain(obj) {
      if (obj) {
        this.explainObj = obj;
        this.explainFlag = true;
      } else {
        this.handleSaveArticle("articleForm", "explain");
      }
    },
    handleAddPhrase(obj) {
      if (obj) {
        this.pharseObj = obj;
        this.pharseFlag = true;
      } else {
        this.handleSaveArticle("articleForm", "phrase");
      }
    },
    closeDialog(flag) {
      this[flag] = false;
      this.getArticleInfo();
    },
    closePreviewArticle() {
      this.previewArticle = false;
    },
    // 预览文章
    handlePreviewArt() {
      if (!this.id && !this.issueId) {
        this.handleSaveArticle("articleForm", "preview");
      } else {
        this.previewArticle = true;
      }
    },
    // 转成中文文章
    handleChangeCn(flag) {
      this.changeCnLoading = true;
      let MethodName =
        "/PaperServer/Manager/ArticleManager/ChangeArticleEnCnFlag";
      let data = {
        id: this.id,
        en_flag: flag,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.changeCnLoading = false;
          if (res.status === 1) {
            this.$message.success(res.msg);
            // this.handleSaveArticle("articleForm", "1");
          }
        })
        .catch((res) => {
          this.changeCnLoading = false;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableHeight();
    let lang_url = "";
    let language = "";
    let skin_url =
      process.env.NODE_ENV == "development"
        ? "/tinymce/skins/ui/oxide"
        : window.g.zh_CN_URL + "/tinymce/skins/ui/oxide";

    lang_url =
      process.env.NODE_ENV == "development"
        ? "/tinymce/langs/zh_CN.js"
        : window.g.zh_CN_URL + "/tinymce/langs/zh_CN.js";
    language = "zh_CN";

    this.init = {
      language_url: lang_url,
      language: language,
      skin_url: skin_url,
      height: 600,
      plugins: "link lists image code table wordcount  preview",
      toolbar:
        "preview bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
      branding: false,
      extended_valid_elements:
        "p[class|pno|sno|tsno|id|explain],span[class|pno|sno|tsno|id|explain],div[class|pno|sno|tsno|id|explain],ul[class|pno|sno|tsno|id|explain],ol[class|pno|sno|tsno|id|explain],li[class|pno|sno|tsno|id|explain],table[class|pno|sno|tsno|id|explain],th[class|pno|sno|tsno|id|explain],td[class|pno|sno|tsno|id|explain],b[class|pno|sno|tsno|id|explain],i[class|pno|sno|tsno|id|explain],strong[class|pno|sno|tsno|id|explain],em[class|pno|sno|tsno|id|explain]",
    }; //富文本初始化
    if (this.id) {
      this.getArticleInfo();
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    tinymce.init({
      selector: `#article-cn`,
    });
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.breadcrumb-box {
  left: 24px;
}
.manage-root-contain {
  margin: 56px 24px 24px;
  height: calc(100vh - 132px);
  border-radius: 4px;
  background: #fff;
  padding: 24px 24px 80px 24px;
  display: block;
  position: relative;
  &-inner {
    overflow-y: auto;
  }
  .save-btn,
  .preview-btn {
    position: absolute;
    bottom: 24px;
    left: 24px;
  }
  .preview-btn {
    right: 24px;
    left: auto;
  }
}
.el-form--inline {
  display: flex;
  width: 100%;
}
.title-box {
  flex: 1;
  .el-input {
    width: 100%;
  }
}
.source-box {
  .el-input {
    width: 205px;
  }
}
.page-box {
  .el-input {
    width: 190px;
  }
}
.item-label {
  color: #4e5969;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.article-mp3-box {
  display: flex;
  height: 32px;
  align-items: center;
  margin: 8px 0 20px 0;
}
.article-mp3 {
  width: 82px;
  height: 32px;
  &-has {
    width: 320px;
  }
}
.article-mp3-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 226px;
  li {
    padding: 5px 12px;
    height: 32px;
    border-radius: 2px 0px 0px 2px;
    background: #f2f3f5;
    display: flex;
    align-items: center;
    a {
      color: #1d2129;
      display: flex;
      align-items: center;
      flex: 1;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        display: block;
        font-size: 14px;
        line-height: 22px;
        width: 163px;
      }
      .svg-icon {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        color: #1d2129;
      }
    }
    .el-icon-error {
      color: #4e5969;
      cursor: pointer;
      margin-left: 4px;
    }
  }
}
.error-tips {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #f53f3f;
  margin-left: 16px;
  .svg-icon {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }
}
.resource-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  li {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    a,
    > div {
      width: 360px;
      padding: 7px 12px;
      background: #f7f8fa;
      border-radius: 2px;
      color: #1d2129;
      display: flex;
      align-items: center;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        display: block;
        font-size: 14px;
        line-height: 22px;
      }
      .svg-icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        color: #4e5969;
      }
    }
    .el-icon-delete {
      color: #4e5969;
      cursor: pointer;
      margin-left: 12px;
      &:hover {
        color: #165dff;
      }
    }
    > div {
      display: flex;
    }
  }
}
.add-btn {
  padding: 2px 12px;
  border-radius: 2px;
  border: 1px solid #165dff;
  color: #165dff;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  background: #fff;
  .el-icon-plus {
    margin-right: 8px;
  }
  &:hover {
    background: #fff;
    color: #165dff;
  }
}
</style>
<style lang="scss">
.create-article {
  .el-divider {
    width: 600px;
  }
}
</style>