对话课文角色名关联生词

src/views/book/courseware/create/components/question/dialogue_article/ArticleSetting.vue

@@ -80,7 +80,20 @@
         <el-input v-model="item.fullName" class="NPC-role-input" placeholder="姓名" @blur="onBlur(item, 'fullName')" />
         <el-button type="danger" @click="segWord(item)">拼音</el-button>
         <el-input v-model="item.fullPinyin" class="NPC-role-input" placeholder="拼音" />
+        <el-button type="danger" @click="partWord(item)">分词</el-button>
+        <template v-if="item.segList">
+          <div class="user-seg">
+            <p>关联生词</p>
+            <div class="user-seg-list">
+              <div v-for="(items, indexs) in item.segList" :key="indexs">
+                <label>{{ items.chs }}:</label>
+                <el-input v-model="items.matchWords"></el-input>
+              </div>
+            </div>
+          </div>
+        </template>
       </el-form-item>
+
       <el-form-item label="">
         <el-button type="primary" @click="getRole(property.role_list.length)">增加角色</el-button>
       </el-form-item>
@@ -123,6 +136,8 @@
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 import { getToken } from '@/utils/auth';
+import { BatchSegContent } from '@/api/article';
+const Base64 = require('js-base64').Base64;
 
 import {
   getArticleProperty,
@@ -134,7 +149,6 @@ import {
   multilingualList,
   pinyinPositionList,
 } from '@/views/book/courseware/data/dialogueArticle';
-const Base64 = require('js-base64').Base64;
 import cnchar from 'cnchar';
 
 export default {
@@ -179,6 +193,28 @@ export default {
       }
       this.$set(item, 'fullPinyin', cnchar.spell(item.fullName, 'low', 'tone'));
     },
+    // 角色名分词
+    partWord(item) {
+      if (!item.fullName) {
+        this.$message.warning('姓名不能为空');
+        return;
+      }
+      BatchSegContent({ textList: [Base64.encode(item.fullName)] })
+        .then((res) => {
+          let list = [];
+          res.data.result.list[0].forEach((item) => {
+            let obj = {
+              chs: item,
+              matchWords: '',
+            };
+            list.push(obj);
+          });
+          this.$set(item, 'segList', list);
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
     // 增加角色
     getRole(index) {
       this.property.role_list.push(getRole(index));
@@ -284,5 +320,28 @@ export default {
       }
     }
   }
+
+  .user-seg {
+    display: flex;
+    margin-left: -72px;
+
+    p {
+      flex-shrink: 0;
+      width: 72px;
+      margin: 0;
+    }
+
+    &-list {
+      flex: 1;
+
+      div {
+        margin-bottom: 4px;
+
+        label {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/book/courseware/preview/components/dialogue_article/PhraseModelChs.vue

@@ -76,7 +76,19 @@
                 <span class="chs">{{ item.roleDetail.detail.wordsList | handleChs }}</span>
               </div> -->
                 <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
-                  <span class="chs">{{ item.roleDetail.fullName }}</span>
+                  <template v-if="item.roleDetail.segList && item.roleDetail.segList.length > 0">
+                    <span
+                      class="chs"
+                      :style="{
+                        color: items.matchWords ? (attrib ? attrib.topic_color : '') : '',
+                      }"
+                      v-for="(items, indexs) in item.roleDetail.segList"
+                      :key="indexs"
+                      @click="showWordDetail($event, items.matchWords)"
+                      >{{ items.chs }}</span
+                    >
+                  </template>
+                  <span class="chs" v-else>{{ item.roleDetail.fullName }}</span>
                   <span class="pinyin">{{ item.roleDetail.fullPinyin }}</span>
                 </div>
                 <div class="para-con" :style="{ background: item.roleDetail.color.bg }">