|
|
@@ -0,0 +1,451 @@
|
|
|
+<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('pharseFlag')" :loading="loading">保存</el-button>
|
|
|
+ <el-button size="small" @click="onCancel('pharseFlag')">取消</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="searchWordInfo">
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ <div class="new-word-add-bottom-right">
|
|
|
+ <div class="sentence-config">
|
|
|
+ <el-input v-model="data.btStr" placeholder="请输入词头本体变体信息，用/隔开"></el-input>
|
|
|
+ <el-button type="primary" size="small" @click="handleSentence">匹配句子</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="selectSentFlag=true"><i class="el-icon-plus"></i>添加句子</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="channel-item" v-for="(item,index) in data.bind_sents" :key="index">
|
|
|
+ <div class="channel-top">
|
|
|
+ <i class="el-icon-caret-bottom" v-if="item.show" @click="handleChangeStatus(item)"></i>
|
|
|
+ <i class="el-icon-caret-top" v-else @click="handleChangeStatus(item)"></i>
|
|
|
+ <div class="channel-top-name">
|
|
|
+ {{(index+1)+'. '+item.text}}
|
|
|
+ </div>
|
|
|
+ <i class="el-icon-delete" @click="handleDeleteSents(index)"></i>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <template v-if="item.show">
|
|
|
+ <div class="channel-bottom">
|
|
|
+ <p>匹配结果</p>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(itent,indext) in item.tokens" :key="indext" :class="[item.sel_token_idxes.indexOf(indext)>-1?'active':'']" @click="handleHighIndex(item,indext)">
|
|
|
+ {{itent[2]}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </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: [],
|
|
|
+ btStr: '', // 本体变体字符串
|
|
|
+ },
|
|
|
+ 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/AddPhraseInArt'
|
|
|
+ let data = {
|
|
|
+ art_id: this.articleId,
|
|
|
+ exp_content: this.data.exp_content,
|
|
|
+ exp_title: this.data.exp_title,
|
|
|
+ bind_sent_data: {
|
|
|
+ bind_sents: this.data.bind_sents
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.itemData){
|
|
|
+ MethodName = '/PaperServer/Manager/ArticleManager/EditPhraseInArt'
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleHighIndex(item,index){
|
|
|
+ if(item.sel_token_idxes.indexOf(index)>-1){
|
|
|
+ item.sel_token_idxes.splice(item.sel_token_idxes.indexOf(index),1)
|
|
|
+ }else{
|
|
|
+ item.sel_token_idxes.push(index)
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ onCancel(flag){
|
|
|
+ this.$emit('closeDialog',flag)
|
|
|
+ },
|
|
|
+ // 去掉前后空格
|
|
|
+ handleTrim(form,fild){
|
|
|
+ this[form][fild] = this[form][fild].trim()
|
|
|
+ },
|
|
|
+ // 查找单词信息
|
|
|
+ searchWordInfo(){
|
|
|
+ this.data.exp_title = this.data.exp_title.trim()
|
|
|
+ if(this.data.exp_title){
|
|
|
+ this.data.btStr = this.data.exp_title
|
|
|
+ this.handleSentence()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleChangeStatus(item){
|
|
|
+ item.show = !item.show
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ // 匹配句子
|
|
|
+ handleSentence(){
|
|
|
+ if(!this.data.btStr){
|
|
|
+ this.data.btStr = this.data.exp_title.trim()
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+ let _this = this
|
|
|
+ let searchSentence = []
|
|
|
+ let wordArr = this.data.btStr.split('/')
|
|
|
+ wordArr.forEach(itemw=>{
|
|
|
+ for(let i = 0; i < _this.sentenceList.length; i++){
|
|
|
+ let items = _this.sentenceList[i]
|
|
|
+ if(items.text.indexOf(itemw)>-1){
|
|
|
+ let sel_token_idxes = []
|
|
|
+ let flag = true
|
|
|
+ if(items.tokens){
|
|
|
+ for(let j=0; j<items.tokens.length; j++){
|
|
|
+ let itemt = items.tokens[j]
|
|
|
+ let itemb = itemw.split(' ')
|
|
|
+ if(itemt[2]===itemb[0]){
|
|
|
+ itemb.forEach((itembs,indexbs)=>{
|
|
|
+ if(itembs!==items.tokens[j+indexbs][2]){
|
|
|
+ flag = false
|
|
|
+ }else{
|
|
|
+ sel_token_idxes.push(j+indexbs)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // items.tokens.forEach((itemss,index)=>{
|
|
|
+ // if(itemss[2]===itemw){
|
|
|
+ // sel_token_idxes.push(index)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ items.sel_token_idxes = flag?sel_token_idxes:[]
|
|
|
+ this.$set(items,'show',searchSentence.length===0?true:false)
|
|
|
+ searchSentence.push(items)
|
|
|
+ // break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.data.bind_sents = searchSentence
|
|
|
+ },
|
|
|
+ handleDeleteSents(index){
|
|
|
+ this.data.bind_sents.splice(index,1)
|
|
|
+ },
|
|
|
+ closeAddSentence(){
|
|
|
+ this.selectSentFlag = false
|
|
|
+ },
|
|
|
+ sureAddSentence(list){
|
|
|
+ let arr = JSON.parse(JSON.stringify(list))
|
|
|
+ arr.forEach(item=>{
|
|
|
+ item.show = false
|
|
|
+ item.sel_token_idxes = []
|
|
|
+ })
|
|
|
+ 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;
|
|
|
+ border-right: 1px solid #E5E6EB;
|
|
|
+ }
|
|
|
+ &-right{
|
|
|
+ width: 695px;
|
|
|
+ padding: 32px 48px;
|
|
|
+ .sentence-config{
|
|
|
+ .el-input{
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+ }
|
|
|
+}
|
|
|
+.para-list{
|
|
|
+ position: relative;
|
|
|
+ padding-right: 42px;
|
|
|
+ .el-icon-delete{
|
|
|
+ position: absolute;
|
|
|
+ right: 24px;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+ }
|
|
|
+}
|
|
|
+.channel-item{
|
|
|
+ border: 1px solid #E5E6EB;
|
|
|
+ margin: 12px 0;
|
|
|
+ .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;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .el-button--text{
|
|
|
+ padding: 2px 12px;
|
|
|
+ color: #165DFF;
|
|
|
+ .el-icon-plus{
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .channel-bottom{
|
|
|
+ padding: 24px 40px;
|
|
|
+ border-top: 1px solid #E5E6EB;
|
|
|
+ p{
|
|
|
+ margin: 0 0 4px 0;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ li{
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 0 4px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #F2F3F5;
|
|
|
+ margin: 4px 2px 0 0;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active{
|
|
|
+ background: #175DFF;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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