校对文章

src/views/content_manage/newspaper_manage/CheckArticle.vue

@@ -1,20 +1,52 @@
 <template>
-  <div class="manage-root create-article">
+  <div class="manage-root create-article" v-loading="subtitleLoading">
     <Header/>
     <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
     <el-button type="primary" plain class="add-btn" @click="handleSaveCheck" :loading="loading" >保存</el-button>
-    <div class="manage-root-contain" v-loading="subtitleLoading">
-
-        <Editor
-            id="article-cn"
-            v-model="articleForm.art_content"
-            :init="init"
-        />
-        <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 class="manage-root-contain">
+        <div class="manage-left">
+            <template v-if="editArticleFlag">
+                <Editor
+                    id="article-cn"
+                    v-model="articleForm.art_content"
+                    :init="init"
+                />
+            </template>
+            <template v-else>
+                <div class="tokens-box">
+                    <div class="sentence-box" v-for="(item,index) in tokensArr" :key="index">
+                        <span :class="[item.type,item.token[9]===' '?'marginRight':'',item.highIndex?'fontWeight':'',wordId===item.word_id&&highInclude.indexOf(item.tokenIndex)>-1?'active':'']" @click="changeWordName(item)">
+                            {{item.token[2]}}
+                        </span>
+                    </div>
+                </div>
+            </template>
+        </div>
+        <div class="manage-right">
+            <div class="tabs">
+                <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">全部 {{allWordList.length}}</a>
+                <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">词汇 {{wordLit.length}}</a>
+                <a :class="[tabsIndex===2?'active':'']" @click="handleChangeTabs(2)">短语 {{phraseList.length}}</a>
+                <a :class="[tabsIndex===3?'active':'']" @click="handleChangeTabs(3)">注释 {{annotationList.length}}</a>
+            </div>
+            <ul class="word-list">
+                <li v-for="(item,index) in tabsIndex===0?allWordList:tabsIndex===1?wordLit:tabsIndex===2?phraseList:tabsIndex===3?annotationList:allWordList" :key="item.id" :class="['word-'+item.type, activeWordId===item.id?'active':'']" @click="selectItem(item)">
+                    <b>{{(index+1)+'.'}}</b>
+                    <div>
+                        <span>{{item.exp_title + ' ' + item.exp_content}}</span>
+                        <a @click="changeType(item)">{{item.type=='newWord'?'词汇':item.type=='phrase'?'短语':'注释'}}<svg-icon icon-class="arrow-left-right-line"></svg-icon></a>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        
+        <div class="save-btn" v-if="!editArticleFlag">
+            <el-button type="primary" size="small" @click="handleEdit">编辑内容</el-button>
+        </div>
+        <div class="save-btn" v-else>
+            <el-button size="small" @click="editArticleFlag=!editArticleFlag">取消</el-button>
+            <el-button type="primary" size="small" @click="handleSaveArticle('articleForm')" :loading="saveLoaing">保存修改</el-button>
         </div>
-        <el-button type="primary" size="small" class="preview-btn">预览</el-button>
     </div>
   </div>
 </template>
@@ -48,7 +80,6 @@ import "tinymce/plugins/preview";
 import "tinymce/plugins/contextmenu";
 import "tinymce/plugins/textcolor";
 import "tinymce/plugins/colorpicker";
-import { mapState } from 'vuex';
 import { getToken } from '@/utils/auth'
 
 export default {
@@ -59,7 +90,6 @@ export default {
     //这里存放数据
     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',
@@ -90,7 +120,16 @@ export default {
         articleId: null,
         wordLit:[],
         annotationList: [],
-        phraseList: []
+        phraseList: [],
+        editArticleFlag: false,
+        tokensArr: [],
+        allWordList: [], // 生词短语注释总列表
+        tabsIndex: 0,
+        activeWordId: '', // 当前选中内容的id
+        saveLoaing: false,
+        wordId:'',
+        activeItem: null,
+        highInclude: null
     }
   },
   //计算属性 类似于data概念
@@ -100,6 +139,17 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    selectItem(item){
+        this.activeWordId=item.id
+        this.activeItem = item
+        this.wordId = item.id
+        item.highIndex = true
+        this.highInclude = item.bind_sent_data.bind_sents[0].sel_token_idxes
+        this.$forceUpdate()
+    },
+    handleChangeTabs(value){
+        this.tabsIndex = value
+    },
     getTableHeight() {
       let tableH = 236; //距离页面下方的高度
       let tableHeightDetil = window.innerHeight - tableH;
@@ -113,45 +163,38 @@ export default {
     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){
-                    MethodName = '/PaperServer/Manager/ArticleManager/EditArticle'
-                    data.id = this.id,
-                    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.articleForm.art_content:null
-                    data.art_org_content = this.articleForm.art_content.trim()
-                }
-                getLogin(MethodName, data)
-                .then((res) => {
-                    if(res.status===1){
-                        this.$message.success('文章保存成功')
-                        this.$router.go(-1)
-                    }
-                })
-            } else {
-                return false;
+    handleSaveArticle(){
+        this.saveLoaing= true
+        let MethodName = '/PaperServer/Manager/ArticleManager/AddArticle'
+        let data = {
+            art_title: this.articleForm.art_title,
+            art_content: this.articleForm.art_content,
+            iss_id: this.$route.query.issueId,
+            chn_item: this.$route.query.chn_name,
+            en_flag: 1
+        }
+        if(this.id){
+            MethodName = '/PaperServer/Manager/ArticleManager/EditArticle'
+            data.id = this.id
+            // data.updater_id = JSON.parse(getToken()).user_id
+        }
+        if(!this.articleForm.art_content.trim()){
+            this.$message.warning('文章内容不能为空')
+            return false
+        }
+        data.art_content = this.id?this.articleForm.art_content:null
+        data.art_org_content = this.articleForm.art_content.trim()
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.saveLoaing = false
+            if(res.status===1){
+                this.$message.success('文章内容修改成功')
+                this.getArticleInfo()
+                this.editArticleFlag = !this.editArticleFlag
             }
-        });
+        }).catch(()=>{
+            this.saveLoaing = false
+        })
     },
     // 去掉前后空格
     handleTrim(form,fild){
@@ -167,6 +210,24 @@ export default {
         getLogin(MethodName, data)
         .then((res) => {
             if(res.status===1){
+                this.breadcrumbList = [
+                    {
+                        icon:'file-list-line',
+                        url:'',
+                        text:''
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        notLink: true,
+                        text:'...'
+                    },
+                    {
+                        icon:'',
+                        url:'',
+                        text:'校对'
+                    },
+                ]
                 let obj = {
                     icon:'',
                     url:'',
@@ -175,6 +236,29 @@ export default {
                 this.breadcrumbList.push(obj)
                 this.articleForm = JSON.parse(JSON.stringify(res.data.art))
                 this.articleForm.articleEn = JSON.parse(JSON.stringify(res.data.art)).art_org_content
+                this.sentenceList = res.data.art.art_corpus_data?JSON.parse(JSON.stringify(res.data.art.art_corpus_data.sentList)):[]
+                this.wordLit = res.data.art.art_voc_data?JSON.parse(JSON.stringify(res.data.art.art_voc_data)):[]
+                this.annotationList = res.data.art.art_phrase_data?JSON.parse(JSON.stringify(res.data.art.art_explain_data)):[]
+                this.phraseList = res.data.art.art_explain_data?JSON.parse(JSON.stringify(res.data.art.art_phrase_data)):[]
+                this.wordLit.forEach(item=>{
+                    item.type='newWord'
+                    item.exp_title = item.word_name
+                    let paraStr = ''
+                    if(item.word_explain&&item.word_explain.word_para_list){
+                        item.word_explain.word_para_list.forEach(items=>{
+                            paraStr += items.para
+                        })
+                    }
+                    item.exp_content = paraStr
+                })
+                this.phraseList.forEach(item=>{
+                    item.type='phrase'
+                })
+                this.annotationList.forEach(item=>{
+                    item.type='explain'
+                })
+                this.allWordList = this.wordLit.concat(this.phraseList).concat(this.annotationList)
+                this.handleData()
                 this.subtitleLoading = false
             }
         }).catch(()=>{
@@ -191,39 +275,214 @@ export default {
         getLogin(MethodName, data)
         .then((res) => {
             if(res.status===1){
-                this.loading = false
+                this.$message.success('保存成功')
+                this.$router.go(-1)
             }
         }).catch(()=>{
             this.loading = false
         })
-    }
+    },
+    handleData(){
+        let arr = []
+        this.sentenceList.forEach((item,index) => {
+            item.tokens.forEach((items,indexs)=>{
+                let obj = {
+                    sent_id: item.id,
+                    pno: item.pno,
+                    sno: item.sno,
+                    tsno: item.tsno,
+                    token: items,
+                    sentences: index,
+                    tokenIndex: indexs
+                }
+                this.allWordList.forEach((itema,indexa)=>{
+                    itema.bind_sent_data.bind_sents.forEach((itemb,indexb)=>{
+                        if(itemb.sent_id===item.id){
+                            itemb.sel_token_idxes.forEach(itemi=>{
+                                obj.word_id = itema.id // 生词注释短语的id
+                                if(indexs===itemi){
+                                    obj.highIndex = true
+                                    obj.type = itema.type
+                                }
+                            })
+                        }
+                    })
+                })
+                arr.push(obj)
+            })
+        });
+        this.tokensArr = arr
+    },
+    handleEdit(){
+        this.editArticleFlag = !this.editArticleFlag
+        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: window.innerHeight - 235,
+            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,
+        }; //富文本初始化
+    },
+    // 切换类型
+    changeType(item){
+        let MethodName = '/PaperServer/Manager/ArticleManager/CheckWordExplainInArt'
+        let data = null
+        if(item.type==='newWord'){
+            item.type = 'phrase'
+            data={
+                phraseExplain:{
+                    id: item.id,
+                    art_id: this.id,
+                    exp_type: 1,
+                    exp_title: item.exp_title,
+                    exp_content: item.exp_content,
+                    bind_sent_data: item.bind_sent_data
+                }
+            }
+        }else if(item.type==='phrase'){
+            item.type = 'explain'
+            data={
+                phraseExplain:{
+                    id: item.id,
+                    art_id: this.id,
+                    exp_type: 2,
+                    exp_title: item.exp_title,
+                    exp_content: item.exp_content,
+                    bind_sent_data: item.bind_sent_data
+                }
+            }
+        }else if(item.type==='explain'){
+            item.type = 'newWord'
+            data={
+                wordExplain:{
+                    id: item.id,
+                    art_id: this.id,
+                    word_name: item.exp_title,
+                    vl_level: null, // 类别
+                    ph: '', // 音标
+                    ph_mp3: [], // 发音数组
+                    ph_mp3_id: '', // 发音文件id
+                    ph_file_url: '', // 发音url
+                    star: null, // 星级
+                    word_explain: {
+                        word_para_list:[
+                            {
+                                cixing: item.bind_sent_data.bind_sents[0].sent_bean.tokens[item.bind_sent_data.bind_sents[0].sel_token_idxes[0]][7],
+                                para: item.exp_content
+                            }
+                        ]
+                    },
+                    bind_sent_data: item.bind_sent_data
+                }
+            }
+        }
+        this.$forceUpdate()
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                this.getArticleInfo()
+            }
+        }).catch(()=>{
+            
+        })
+    },
+    changeWordName(item){
+        let highArr = this.activeItem.bind_sent_data.bind_sents[0].sel_token_idxes
+        if(highArr.indexOf(item.tokenIndex)==-1){
+            highArr.push(item.tokenIndex)
+        }else{
+            highArr.splice(highArr.indexOf(item.tokenIndex),1)
+        }
+        let word_name = ''
+        highArr.sort().forEach(item=>{
+            word_name=word_name+this.activeItem.bind_sent_data.bind_sents[0].sent_bean.tokens[item][2]+this.activeItem.bind_sent_data.bind_sents[0].sent_bean.tokens[item][9]
+        })
+        this.activeItem.exp_title = word_name
+        this.activeItem.bind_sent_data.bind_sents[0].sel_token_idxes = highArr.sort()
+        this.highInclude = highArr
+        item.highIndex = !item.highIndex
+        item.word_id = this.activeItem.id
+        item.type = this.activeItem.type
+        this.changeTypes(this.activeItem)
+    },
+    changeTypes(item){
+        let MethodName = '/PaperServer/Manager/ArticleManager/CheckWordExplainInArt'
+        let data = null
+        if(item.type==='phrase'){
+            data={
+                phraseExplain:{
+                    id: item.id,
+                    art_id: this.id,
+                    exp_type: 1,
+                    exp_title: item.exp_title,
+                    exp_content: item.exp_content,
+                    bind_sent_data: item.bind_sent_data
+                }
+            }
+        }else if(item.type==='explain'){
+            data={
+                phraseExplain:{
+                    id: item.id,
+                    art_id: this.id,
+                    exp_type: 2,
+                    exp_title: item.exp_title,
+                    exp_content: item.exp_content,
+                    bind_sent_data: item.bind_sent_data
+                }
+            }
+        }else if(item.type==='newWord'){
+            data={
+                wordExplain:{
+                    id: item.id,
+                    art_id: this.id,
+                    word_name: item.exp_title,
+                    vl_level: null, // 类别
+                    ph: '', // 音标
+                    ph_mp3: [], // 发音数组
+                    ph_mp3_id: '', // 发音文件id
+                    ph_file_url: '', // 发音url
+                    star: null, // 星级
+                    word_explain: {
+                        word_para_list:[
+                            {
+                                cixing: item.bind_sent_data.bind_sents[0].sent_bean.tokens[item.bind_sent_data.bind_sents[0].sel_token_idxes[0]][7],
+                                para: item.exp_content
+                            }
+                        ]
+                    },
+                    bind_sent_data: item.bind_sent_data
+                }
+            }
+        }
+        this.$forceUpdate()
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                // this.getArticleInfo()
+            }
+        }).catch(()=>{
+            
+        })
+    },
   },
   //生命周期 - 创建完成（可以访问当前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,
-    }; //富文本初始化
     if(this.id){
         this.getArticleInfo()
     }
@@ -261,185 +520,167 @@ export default {
     border-radius: 4px;
     background: #FFF;
     padding: 24px 24px 80px 24px;
-    display: block;
+    display: flex;
     position: relative;
-    &-inner{
-        overflow-y: auto;
+    .manage-left{
+        flex: 1;
+        .tokens-box{
+            border-radius: 2px;
+            background: #F2F3F5;
+            padding: 24px;
+            height: 100%;
+            overflow-y: auto;
+            .sentence-box{
+                display: inline-block;
+                span{
+                    color: #1D2129;
+                    font-size: 16px;
+                    font-weight: 400;
+                    line-height: 32px;
+                    word-break: break-word;
+                    cursor: pointer;
+                    &.marginRight{
+                        margin-right: 4px; 
+                    }
+                    &.fontWeight{
+                        font-weight: bold;
+                    }
+                    &.newWord.active{
+                        color: #264EFF;
+                    }
+                    &.phrase.active{
+                        color: #EA5939;
+                    }
+                    &.explain.active{
+                        color: #23C847;
+                    }
+                }
+            }
+        }
+    }
+    .manage-right{
+        width: 455px;
+        padding-left: 31px;
     }
-    .save-btn,.preview-btn{
+    .save-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%;
+        text-align: center;
+        width: 913px;
     }
 }
-.source-box{
-    .el-input{
-        width: 205px;
+.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;
+    position: fixed;
+    top: 64px;
+    right: 24px;
+    .el-icon-plus{
+        margin-right: 8px;
     }
-}
-.page-box{
-    .el-input{
-        width: 190px;
+    &:hover{
+        background: #FFF;
+        color: #165DFF;
     }
-    
 }
-.item-label{
-    color: #4E5969;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-}
-.article-mp3-box{
+.tabs{
     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;
-            }
+    padding: 16px 0 0 28px;
+    a{
+        font-size: 14px;
+        line-height: 22px;
+        color: #4E5969;
+        border-radius: 100px;
+        padding: 5px 16px;
+        margin-right: 12px;
+        &:hover{
+            background: #F2F3F5;
         }
-        .el-icon-error{
-            color: #4E5969;
-            cursor: pointer;
-            margin-left: 4px;
+        &.active{
+            background: #F2F3F5;
+            font-weight: 500;
+            color: #165DFF;
         }
     }
 }
-.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{
+.word-list{
     list-style: none;
-    margin: 12px 0;
     padding: 0;
+    margin: 16px 0;
     li{
         display: flex;
         align-items: center;
-        margin-bottom: 16px;
-        a,>div{
-            width: 360px;
-            padding: 7px 12px;
-            background: #F7F8FA;
+        color: #1D2129;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        margin-bottom: 8px;
+        border-radius: 2px;
+        cursor: pointer;
+        b{
+            width: 21px;
+            font-weight: 400;
+            text-align: center;
+            margin-right: 7px;
+            color: rgba($color: #000000, $alpha: 0.37);
+        }
+        >div{
+            padding: 5px 8px;
             border-radius: 2px;
-            color: #1D2129;
+            flex: 1;
             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;
+            justify-content: space-between;
+            a{
+                padding: 0px 5px;
+                border-radius: 3px;
+                background: #264EFF;
+                color: #FFF;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 20px;
+                .svg-icon{
+                    margin-left: 2px;
+                }
             }
         }
-        .el-icon-delete{
-            color: #4E5969;
-            cursor: pointer;
-            margin-left: 12px;
-            &:hover{
-                color: #165DFF;
+        &:hover{
+            background: #F4F4F4;
+        }
+        &.active{
+            background: #EDF2FF;
+            color: #264EFF;
+        }
+        &.word-phrase{
+            >div{
+                a{
+                    background: #EA5939;
+                }
+            }
+            &.active{
+                background: #FFF4F1;;
+                color: #EA5939;
             }
         }
-        >div{
-            display: flex;
+        &.word-explain{
+            >div{
+                a{
+                    background: #23C847;
+                }
+            }
+            &.active{
+                background: #ECF8EF;
+                color: #23C847;
+            }
         }
     }
 }
-.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;
-    position: fixed;
-    top: 64px;
-    right: 24px;
-    .el-icon-plus{
-        margin-right: 8px;
-    }
-    &:hover{
-        background: #FFF;
-        color: #165DFF;
-    }
-}
 </style>
 <style lang="scss">
-.create-article{
-    .el-divider{
-        width: 600px;
-    }
-}
 </style>

src/views/content_manage/newspaper_manage/CreateArticle.vue

@@ -62,7 +62,7 @@
                         <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">
+                    <!-- <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">
@@ -78,7 +78,7 @@
                                     <i class="el-icon-delete" @click="handleDelPicture(indexR)"></i>
                                 </li>
                             </ul>   
-                        </el-form-item>
+                        </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')" >
@@ -378,16 +378,16 @@ export default {
                     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)
-                        }
+                    // 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
+                    // });
+                    // data.art_images = resource_file_id_list
                 }
                 getLogin(MethodName, data)
                 .then((res) => {
@@ -427,14 +427,14 @@ export default {
             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
+            // 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]){
@@ -513,15 +513,20 @@ export default {
     // 预览文件
     handlePreview(item){
         let MethodName = '/FileServer/GetFileInfo'
-        let data = {
-            file_id: item.file_id
-        }
-        getLogin(MethodName, data)
-        .then((res) => {
-            if(res.status===1){
-                window.open(res.file_url, "_blank");
+        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(){
@@ -534,50 +539,64 @@ export default {
         .then((res) => {
             if(res.status===1){
                 this.articleForm = JSON.parse(JSON.stringify(res.data.art))
-                this.vlInfo = res.data.vl.levelList
+                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]
-                    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_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=>{
-                        getLogin('/FileServer/GetFileInfo', {file_id:item})
+                    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.articleRecourseForm.pictureList.push({
+                                this.articleForm.articleMp3=[{
                                     name:res.file_name,
-                                    url:res.file_url,
-                                    file_id: item
-                                })
+
+                                }]
                             }
                         })
-                    })
+                    }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,
+                            src: items.ph_file_url?items.ph_file_url:'',
                             word: items.word_name,
-                            symbol: items.word_explain.ph,
+                            symbol: items.word_explain.ph?items.word_explain.ph:'',
                             paraList: items.word_explain.word_para_list,
-                            type: items.word_explain.vl_level,
-                            typeCn: items.word_explain.vl_level_name,
-                            rate: items.word_explain.star,
+                            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
                         }
                         this.wordLit.push(obj)
@@ -599,7 +618,7 @@ export default {
     // 添加生词
     handleAddWords(obj){
         if(obj){
-            this.newWordObj = obj.originalObj
+            this.newWordObj = obj.originalObj?obj.originalObj:obj
             this.newWordFlag = true
         }else{
             if(this.id||this.articleId){
@@ -667,7 +686,7 @@ export default {
         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]'
+        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()

src/views/content_manage/newspaper_manage/CreateNewspaper.vue

@@ -818,7 +818,7 @@ export default {
         })
     },
     //开始拖拽事件
-    onStart() {
+    onStart(val) {
       this.drag = true;
     },
     //拖拽结束事件
@@ -1057,7 +1057,7 @@ export default {
                     cursor: pointer;
                     padding: 8px;
                     width: 32px;
-                    height: 32px;
+                    height: 48px;
                 }
                 .items{
                     flex: 1;
@@ -1087,6 +1087,8 @@ export default {
                     font-weight: bold;
                     cursor: pointer;
                     padding: 8px;
+                    height: 48px;
+                    line-height: 32px;
                 }
             }
         }

src/views/content_manage/newspaper_manage/NewWords.vue

@@ -51,6 +51,7 @@
                     <el-rate v-model="data.star"></el-rate>
                 </el-form-item>
                 <el-divider></el-divider>
+
                 <div v-for="(item,index) in data.word_para_list" :key="'cixing'+index" class="para-list">
                     <el-form-item label="词性" :prop="'word_para_list.'+index+'.cixing'" 
                         :rules="{
@@ -329,7 +330,7 @@ export default {
                         }
                     }
                     this.data.star = res.data.star?res.data.star:null
-                    this.data.btStr = this.data.word_name
+                    this.data.btStr = res.data.wordVariants&&res.data.wordVariants.length>0?res.data.wordVariants.join('/'):this.data.word_name
                     this.handleSentence()
                 }   
             }).catch(()=>{
@@ -443,7 +444,40 @@ export default {
   created() {
     if(this.itemData){
         let data = JSON.parse(JSON.stringify(this.itemData))
-        this.data = data.word_explain
+        if(data.word_explain&&data.word_explain.word_name){
+            this.data = data.word_explain
+        }else{
+            this.data = {
+                word_name: data.word_name, // 词头
+                vl_level: data.vl_level?data.vl_level:null, // 类别
+                vl_level_name:data.vl_level_name?data.vl_level_name:'',
+                ph: data.ph?data.ph:'', // 音标
+                ph_mp3: [], // 发音数组
+                ph_mp3_id: '', // 发音文件id
+                ph_file_url: '', // 发音url
+                star: data.star?data.star:null, // 星级
+                word_para_list: data.word_explain&&data.word_explain.word_para_list?data.word_explain.word_para_list:[],
+                bind_sents: [],
+                btStr: '', // 本体变体字符串
+            }
+            if(data.bind_sent_data&&data.bind_sent_data.bind_sents){
+                let arr = []
+                data.bind_sent_data.bind_sents.forEach(item=>{
+                    arr.push({
+                        show: false,
+                        sel_token_idxes: item.sel_token_idxes,
+                        id: item.sent_bean.id,
+                        sent_id: item.sent_bean.id,
+                        pno: item.sent_bean.pno,
+                        sno: item.sent_bean.sno,
+                        text: item.sent_bean.text,
+                        tokens: item.sent_bean.tokens,
+                        tsno: item.sent_bean.tsno
+                    })
+                })
+                this.data.bind_sents = arr
+            }
+        }
     }
   },
   mounted() {

src/views/content_manage/newspaper_manage/index.vue

@@ -541,6 +541,7 @@ export default {
             getLogin(Mname, data).then(res => {
                 this.$message.success("操作成功");
                 this.getList()
+
             });
         }).catch(() => {
                
@@ -588,6 +589,7 @@ export default {
       }
     },
     getList(val){
+        this.getNumberData()
         if(val){
             this.pageNumber = val
         }
@@ -680,7 +682,6 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getNumberData()
     this.getYearList()
     this.getTableHeight();
     this.getList()