|
|
@@ -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>
|
natasha