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')" >
                    </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')" >
                    </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">
                    </el-input>
                </el-form-item>
            </el-form>
            <template v-if="en_flag===1">
                <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> -->
                </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">预览</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>
  </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'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, Breadcrumb, Editor, Upload, NewWords, NewWordList, Explain, AnnotationList, PhraseList, Phrase },
  props: {},
  data() {
    //这里存放数据
    const validatePage = (rule, value, callback) => {
        if (value === null) {
            callback();
        } else {
            if (value<1) {
                callback(new Error('Page不能小于1'));
            } 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: []
    }
  },
  //计算属性 类似于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) {
                let MethodName = '/PaperServer/Manager/ArticleManager/AddArticle'
                let data = {
                    art_title: this.articleForm.art_title,
                    page_no_in_pub: this.articleForm.page_no_in_pub*1,
                    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_sounds = 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) => {
                    if(res.status===1){
                        if(flag){
                            this.articleId = res.data.art.id
                            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 === 'pharse'){
                                this.pharseObj = null
                                this.pharseFlag = true
                            }else if(flag === 'explain'){
                                this.explainObj = null
                                this.explainFlag = true
                            }
                        }else{
                            this.$message.success('文章保存成功')
                            this.$router.go(-1)
                        }
                    }
                })
            } 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.$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))
                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_sounds&&res.data.art.art_sounds.length>0){
                    this.articleForm.articleMp3_id = res.data.art.art_sounds[0]
                    if(res.data.art.art_sounds[0].indexOf('http')==-1){
                        getLogin('/FileServer/GetFileInfo', {file_id:res.data.art.art_sounds[0]})
                        .then((res) => {
                            if(res.status===1){
                                this.articleForm.articleMp3=[{
                                    name:res.file_name,

                                }]
                            }
                        })
                    }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=>{
                        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
                    
                }
                this.subtitleLoading = false
            }
        }).catch(()=>{
            this.subtitleLoading = false
        })
    },
    // 添加生词
    handleAddWords(obj){
        if(obj){
            this.newWordObj = obj.originalObj?obj.originalObj:obj
            this.newWordFlag = true
        }else{
            if(this.id||this.articleId){
                this.newWordObj = null
                this.newWordFlag = true
            }else{
                this.handleSaveArticle('articleForm','newWord')
            }
        }
    },
    // 添加注释
    handleAddExplain(obj){
        if(obj){
            this.explainObj = obj
            this.explainFlag = true
        }else{
            if(this.id||this.articleId){
                this.explainObj = null
                this.explainFlag = true
            }else{
                this.handleSaveArticle('articleForm','explain')
            }
        }
    },
    handleAddPhrase(obj){
        if(obj){
            this.pharseObj = obj
            this.pharseFlag = true
        }else{
            if(this.id||this.articleId){
                this.pharseObj = null
                this.pharseFlag = true
            }else{
                this.handleSaveArticle('articleForm','phrase')
            }
        }
    },
    closeDialog(flag){
        this[flag] = false
        this.getArticleInfo()
    },
  },
  //生命周期 - 创建完成（可以访问当前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;
            }
            .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>