选择句子

src/views/content_manage/newspaper_manage/AddSentence.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="new-word-add">
+    <div class="new-word-add-top">
+        <h5>添加句子<span v-if="selectList.length>0">{{selectList.length}}<i class="el-icon-close" @click="clearList"></i></span></h5>
+        <div class="btn-box">
+            <el-button size="small" @click="onCancel()">取消</el-button>
+            <el-button type="primary" size="small" @click="handleSave()">确定</el-button>
+        </div>
+    </div>
+    <div class="new-word-add-bottom">
+        <ul>
+            <li v-for="(item,index) in sentenceList" :key="index" :class="[selectIndexArr.indexOf(index)>-1?'active':'']" @click="handleSelect(index)">
+                <b>{{index+1}}</b>
+                <div class="item-right">
+                    <p>{{item.text}}</p>
+                    <template v-if="item.pno===0">
+                        <span class="title">标题</span>
+                    </template>
+                    <template v-else>
+                        <span>段落 {{item.pno}}</span>
+                        <span class="sno">句子 {{item.sno}}</span>
+                    </template>
+                    
+                </div>
+            </li>
+        </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  name: "selectSentence",
+  props: ["sentenceList"],
+  data() {
+    return {
+        selectList: [],
+        selectIndexArr: []
+    };
+  },
+  watch: {},
+  computed: {
+  },
+  methods: {
+    onCancel(){
+        this.$emit("closeAddSentence")
+    },
+    handleSave(){
+        this.$emit("sureAddSentence",this.selectList)
+    },
+    handleSelect(index){
+        if(this.selectIndexArr.indexOf(index)>-1){
+            this.selectList.splice(this.selectIndexArr.indexOf(index),1)
+            this.selectIndexArr.splice(this.selectIndexArr.indexOf(index),1)
+        }else{
+            this.selectIndexArr.push(index)
+            this.selectList.push(this.sentenceList[index])
+        }
+    },
+    clearList(){
+        this.selectList = []
+        this.selectIndexArr = []
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.new-word-add{
+    &-top{
+        display: flex;
+        border-bottom: 1px solid #E5E6EB;
+        padding: 9px 12px;
+        justify-content: space-between;
+        align-items: center;
+        h5{
+            margin: 0;
+            color: #1D2129;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            display: flex;
+            span{
+                display: block;
+                padding: 0 8px;
+                margin: 0 6px;
+                border-radius: 2px;
+                background: #E8F3FF;
+                color: #165DFF;
+                font-size: 12px;
+                font-weight: 500;
+                line-height: 20px;
+            }
+            .el-icon-close{
+                cursor: pointer;
+                width: 14px;
+                height: 14px;
+                line-height: 14px;
+                text-align: center;
+                margin-left: 4px;
+                font-weight: 500;
+            }
+        }
+    }
+}
+ul{
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li{
+        display: flex;
+        color: #000;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        cursor: pointer;
+        b{
+            width: 40px;
+            text-align: center;
+            background: #F8F8F8;
+            flex-shrink: 0;
+            font-weight: 400;
+            padding: 4px;
+            margin-right: 8px;
+        }
+        .item-right{
+            background: #FFF;
+            padding: 4px 8px;
+            flex: 1;
+            border-radius: 2px;
+            margin: 1px 0;
+            display: flex;
+            p{
+                margin: 0;
+                flex: 1;
+                word-break: break-word;
+            }
+            span{
+                width: 56px;
+                height: 20px;
+                text-align: center;
+                border-radius: 2px;
+                background: #F5E8FF;
+                color: var(--purple-6, #722ED1);
+                font-size: 12px;
+                font-weight: 500;
+                line-height: 20px;
+                margin-left: 8px;
+                &.title{
+                    background: #FFF3E8;
+                    color: #F77234;
+                }
+                &.sno{
+                    background: #E8F7FF;
+                    color: #3491FA;
+                }
+            }
+        }
+        &.active{
+            .item-right{
+                background: #E8F3FF;
+                p{
+                    color: #175DFF;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/content_manage/newspaper_manage/CreateArticle.vue

@@ -119,7 +119,7 @@
         :visible.sync="newWordFlag"
         :show-close="false"
         :close-on-click-modal="false"
-        :modal-append-to-body="false"
+        :append-to-body="true"
         width="1200px"
         class="login-dialog"
         v-if="newWordFlag">

src/views/content_manage/newspaper_manage/NewWords.vue

@@ -78,7 +78,7 @@
             <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="handleSave('newWordFlag')"><i class="el-icon-plus"></i>添加句子</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">
@@ -104,14 +104,25 @@
             </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},
+  components: {Upload, AddSentence},
   name: "newwordstemplate",
   props: ["itemData","articleId","vlInfo", "sentenceList"],
   data() {
@@ -187,6 +198,7 @@ export default {
         }
       ],
       matchFlag: true,
+      selectSentFlag: false,
     };
   },
   watch: {},
@@ -409,6 +421,18 @@ export default {
         }else{
             this.$message.warning('至少保留一个词性释义')
         }
+    },
+    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() {