添加注释

src/views/content_manage/newspaper_manage/CreateArticle.vue

@@ -49,17 +49,18 @@
                     v-model="articleForm.articleEn"
                     @blur="handleTrim('articleForm', 'articleEn')"
                 ></el-input> -->
-                <el-form :model="articleRecourseForm" ref="articleResourceForm" label-width="80px" class="registerForm" style="margin-top:16px">
+                <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"></new-word-list>
+                    <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"><i class="el-icon-plus"></i> 添加短语</el-button>
                     </el-form-item>
                     <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">
@@ -125,6 +126,16 @@
         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>
   </div>
 </template>
 
@@ -163,10 +174,12 @@ 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'
 
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { Header, Breadcrumb, Editor, Upload, NewWords, NewWordList },
+  components: { Header, Breadcrumb, Editor, Upload, NewWords, NewWordList, Explain, AnnotationList },
   props: {},
   data() {
     //这里存放数据
@@ -298,7 +311,8 @@ export default {
             audiobg:'#FFFFFF',
             audioBorder:'#EBEBEB'
         },
-        wordLit:[]
+        wordLit:[],
+        annotationList: []
     }
   },
   //计算属性 类似于data概念
@@ -555,6 +569,9 @@ export default {
                         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
+                }
                 this.subtitleLoading = false
             }
         }).catch(()=>{
@@ -578,11 +595,16 @@ export default {
     // 添加注释
     handleAddExplain(obj){
         if(obj){
-            this.newWordObj = obj
+            this.explainObj = obj
+            this.explainFlag = true
         }else{
-            this.newWordObj = null
+            if(this.id||this.articleId){
+                this.explainObj = null
+                this.explainFlag = true
+            }else{
+                this.handleSaveArticle('articleForm','explain')
+            }
         }
-        this.newWordFlag = true
     },
     closeDialog(flag){
         this[flag] = false

src/views/content_manage/newspaper_manage/Explain.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="new-word-add">
+    <div class="new-word-add-top">
+        <h5>{{itemData?'编辑注释':'添加注释'}}</h5>
+        <div class="btn-box">
+            <el-button type="primary" size="small" @click="handleSave('explainFlag')" :loading="loading">保存</el-button>
+            <el-button size="small" @click="onCancel('explainFlag')">取消</el-button>
+        </div>
+    </div>
+    <div class="new-word-add-bottom">
+        <div class="new-word-add-bottom-left">
+            <el-form :model="data" :rules="dataRules" ref="articleForm" label-width="100px" class="registerForm">
+                <el-form-item label="注释" prop="exp_title">
+                    <el-input v-model="data.exp_title" autocomplete="off" placeholder="请输入注释" @blur="handleTrim('data','exp_title')">
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="释义" prop="exp_content">
+                    <el-input type="textarea" v-model="data.exp_content" placeholder="请输入" maxlength="500" :rows="4" show-word-limit @blur="handleTrim('data','exp_content')"></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" size="small" @click="selectSentFlag=true"><i class="el-icon-plus"></i>选择句子</el-button>
+                </el-form-item>
+            </el-form>
+            <div class="channel-item" v-for="(item,index) in data.bind_sents" :key="index">
+                <div class="channel-top-name">
+                    {{item.text}}
+                </div>
+                <i class="el-icon-delete" @click="handleDeleteSents(index)"></i>
+            </div>
+        </div>
+    </div>
+    <el-dialog
+        :visible.sync="selectSentFlag"
+        :show-close="false"
+        :close-on-click-modal="false"
+        :append-to-body="true"
+        width="696px"
+        class="login-dialog"
+        v-if="selectSentFlag">
+        <add-sentence @closeAddSentence="closeAddSentence" :sentenceList="sentenceList" @sureAddSentence="sureAddSentence"></add-sentence>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getLogin } from "@/api/ajax";
+import Upload from "../../../components/Upload.vue"
+import AddSentence from "./AddSentence.vue"
+export default {
+  components: {Upload, AddSentence},
+  name: "newwordstemplate",
+  props: ["itemData","articleId", "sentenceList"],
+  data() {
+    return {
+      data: {
+        exp_title: '',
+        exp_content: '',
+        bind_sents: [],
+      },
+      loading: false,
+      dataRules: {
+        exp_title: [
+            { required: true, message: '请输入注释', trigger: 'blur' }
+        ],
+        exp_content: [
+            { required: true, message: '请输入释义', trigger: 'blur' }
+        ],
+      },
+      selectSentFlag: false,
+    };
+  },
+  watch: {},
+  computed: {
+  },
+  methods: {
+    handleSave(flag){
+        this.$refs['articleForm'].validate((valid) => {
+            if (valid) {
+                this.loading = true
+                let MethodName = '/PaperServer/Manager/ArticleManager/AddExplainInArt'
+                let data = {
+                    art_id: this.articleId,
+                    exp_title: this.data.exp_title,
+                    exp_content: this.data.exp_content,
+                    bind_sent_data: {
+                        bind_sents: this.data.bind_sents
+                    }
+                }
+                if(this.itemData){
+                    MethodName = '/PaperServer/Manager/ArticleManager/EditExplainInArt'
+                    data.id = this.itemData.id
+                }
+                getLogin(MethodName, data)
+                .then((res) => {
+                    if(res.status===1){
+                        this.loading = false
+                        this.$message.success('保存成功')
+                        this.$emit('closeDialog',flag)
+                    }
+                }).catch(()=>{
+                    this.loading = false
+                })
+                
+            }else {
+                return false;
+            }
+        });
+    },
+    onCancel(flag){
+        this.$emit('closeDialog',flag)
+    },
+    // 去掉前后空格
+    handleTrim(form,fild){
+        this[form][fild] = this[form][fild].trim()
+    },
+    handleDeleteSents(index){
+        this.data.bind_sents.splice(index,1)
+    },
+    // 删除课程视频/音频
+    handleDelCourseResource(){
+        this.data.ph_mp3 = []
+        this.data.ph_mp3_id = ''
+        this.data.ph_file_url = ''
+        if(this.player) this.player.destroy()
+        this.audio = {
+            // 该字段是音频是否处于播放状态的属性
+            playing: false,
+            loading: false,
+            playbackRate: 1,
+            volume: 100
+        }
+    },
+    closeAddSentence(){
+        this.selectSentFlag = false
+    },
+    sureAddSentence(list){
+        let arr = JSON.parse(JSON.stringify(list))
+        arr.forEach(item=>{
+            item.show = false
+            item.highIndexArr = []            
+        })
+        this.data.bind_sents = this.data.bind_sents.concat(arr)
+        this.selectSentFlag = false
+    }
+  },
+  created() {
+    if(this.itemData){
+        let data = JSON.parse(JSON.stringify(this.itemData))
+        this.data = data
+        if(!this.data.bind_sents){
+            this.data.bind_sents = []
+        }
+    }
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.new-word-add{
+    &-top{
+        display: flex;
+        border-bottom: 1px solid #E5E6EB;
+        padding: 16px 24px;
+        justify-content: space-between;
+        align-items: center;
+        h5{
+            margin: 0;
+            color: #1D2129;
+            font-size: 20px;
+            font-weight: 500;
+            line-height: 28px;
+        }
+    }
+}
+.new-word-add-bottom{
+    display: flex;
+    &-left{
+        width: 504px;
+        padding: 40px 0;
+    }
+}
+.level-box{
+    .el-radio{
+        padding: 5px 0 8px 0;
+        line-height: 22px;
+    }
+}
+.voice-box{
+    display: flex;
+    >button{
+        margin-top: 2px;
+    }
+    .voice-upload{
+        margin-left: 8px;
+        height: 32px;
+        width: 90px;
+    }
+    .error-tips{
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 34px;
+        color: #F53F3F;
+        margin: 0;
+        .svg-icon{
+            width: 12px;
+            height: 12px;
+            margin-right: 4px;
+        }
+    }
+}
+.resource-list{
+    list-style: none;
+    margin: 12px 0 0 0;
+    padding: 0;
+    li{
+        display: flex;
+        align-items: center;
+        a{
+            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: #F53F3F;
+    cursor: pointer;
+    margin-left: 12px;
+    &:hover{
+        color: #F53F3F;
+    }
+}
+.channel-item{
+        border: 1px solid #E5E6EB;
+        margin: 20px 43px 20px 96px;
+        display: flex;
+        align-items: center;
+        padding: 9px 12px;
+        .channel-top{
+            display: flex;
+            padding: 0 12px;
+            height: 42px;
+            align-items: center;
+            .el-icon-caret-bottom,.el-icon-caret-top{
+                color: #4E5969;
+                width: 14px;
+                height: 14px;
+                cursor: pointer;
+            }
+            &-name{
+                margin-left: 6px;
+                flex: 1;
+                color: #1D2129;
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 22px;
+            }
+        }
+}
+</style>
+<style lang="scss">
+.new-word-add{
+    .el-rate{
+        padding: 4px 0;
+        .el-rate__item{
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+            .el-rate__icon{
+                font-size: 24px;
+            }
+        }
+    }
+    .el-divider{
+        width: 100% !important;
+    }
+    .upload-demo{
+        width: 90px !important;
+    }
+}
+</style>

src/views/content_manage/newspaper_manage/components/AnnotationList.vue

@@ -0,0 +1,133 @@
+<template>
+    <ul>
+        <li v-for="(itemW,indexW) in list" :key="indexW">
+            <div>
+                <b class="prefix" :style="{color:colorObj.phraseOhterColor}">{{itemW.exp_title}}</b>
+                <div class="para-list" :style="{color:colorObj.newWordOtherColor}" v-html="itemW.exp_content"></div>
+            </div>
+            <b class="border"></b>
+            <el-button
+                @click="handleEdit(itemW,indexW)"
+                type="text"
+                size="small"
+                class="primary-btn">
+                编辑
+            </el-button>
+            <el-button
+                @click="handleDelete(itemW, indexW)"
+                type="text"
+                size="small"
+                class="red-btn">
+                删除
+            </el-button>
+        </li>
+    </ul>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import { getLogin } from "@/api/ajax";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ["list","colorObj"],
+  data() {
+    //这里存放数据
+    return {
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {
+
+  },
+  //方法集合
+  methods: {
+    // 删除
+    handleDelete(item,index){
+        this.$confirm('确定删除吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+           let Mname = "/PaperServer/Manager/ArticleManager/DelExplainInArt";
+            let data = {
+                id: item.id,
+            };
+            getLogin(Mname, data).then(res => {
+                this.$message({
+                    type: 'success',
+                    message: '删除成功!'
+                });
+                this.list.splice(index,1)
+            });
+        }).catch(() => {
+               
+        });
+    },
+    handleEdit(item){
+        this.$emit('handleAddExplain',item)
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+ul{
+    padding: 4px;
+    margin: 0 0 16px 0;
+    border-radius: 4px;
+    background: #F7F8FA;
+    list-style: none;
+    li{
+        padding: 8px;
+        margin: 4px 0;
+        display: flex;
+        align-items: center;
+        >div{
+            flex: 1;
+        }
+        .prefix{
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+        }
+        .para-list{
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            word-break: break-word;
+            margin-top: 8px;
+        }
+        .border{
+            margin: 7px 10px;
+            background: #E5E6EB;
+            width: 1px;
+            height: 12px;
+        }
+    }
+}
+</style>

src/views/content_manage/newspaper_manage/components/NewWordList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="wordList.length>0">
         <ul>
             <li v-for="(itemW,indexW) in wordList" :key="indexW" :class="['li-'+colorObj.type]">
                 <svg-icon icon-class="voice" className="icon-voice"></svg-icon>