feat: 支持单独 matchKey 参数高亮

apps/bigmember_pc/src/components/article-item/ArticleItem.vue

@@ -1,7 +1,11 @@
 <template>
   <div
     class="article-item"
-    :class="{ 'style-for-gray': config.gray, 'style-for-table': config.table, 'style-for-push': config.push }"
+    :class="{
+      'style-for-gray': config.gray,
+      'style-for-table': config.table,
+      'style-for-push': config.push
+    }"
   >
     <div class="article-item-header">
       <input
@@ -32,7 +36,11 @@
         </div>
       </div>
     </div>
-    <div v-if="config.push && article.detail" class="a-i-detail ellipsis" v-html="calcDetail"></div>
+    <div
+      v-if="config.push && article.detail"
+      class="a-i-detail ellipsis"
+      v-html="calcDetail"
+    ></div>
     <div class="a-i-right">
       <div class="tags">
         <span
@@ -239,7 +247,12 @@
 
 <script>
 import { Tag, Popover, Table, TableColumn } from 'element-ui'
-import { moneyUnit, dateFromNow, replaceKeyword, extractKeywords } from '@/utils/'
+import {
+  moneyUnit,
+  dateFromNow,
+  replaceKeyword,
+  extractKeywords
+} from '@/utils/'
 import { mapGetters, mapState } from 'vuex'
 import { getPowerUrl } from '@/utils/power/redirect'
 export default {
@@ -299,6 +312,10 @@ export default {
     model: {
       type: String,
       default: 'S'
+    },
+    matchKeys: {
+      type: Array,
+      default: () => []
     }
   },
   computed: {
@@ -324,10 +341,13 @@ export default {
         return this.article.budget
       }
     },
+    getMatchKeys() {
+      return this.matchKeys.concat(this.article.matchKeys || [])
+    },
     calcTitle() {
       const hightLightedTitle = replaceKeyword(
         this.article.title,
-        this.article.matchKeys,
+        this.getMatchKeys,
         ['<span class="highlight-text">', '</span>']
       )
       if (this.article.filetext_search) {
@@ -338,21 +358,26 @@ export default {
     },
     // 处理正文显示
     calcDetail() {
-      const extractDetail = extractKeywords(this.article.detail, this.article.matchKeys)
-      return replaceKeyword(
-        extractDetail,
-        this.article.matchKeys,
-        ['<span class="highlight-text">', '</span>']
+      const extractDetail = extractKeywords(
+        this.article.detail,
+        this.getMatchKeys
       )
+      return replaceKeyword(extractDetail, this.getMatchKeys, [
+        '<span class="highlight-text">',
+        '</span>'
+      ])
     },
     // 处理关键词在附件中
     calcFileText() {
       const inFile = this.article.filetext_search
-      const keywords = this.article.matchKeys
+      const keywords = this.getMatchKeys
       if (inFile) {
         const keyword = keywords[0]
         if (keywords.length > 3) {
-          return `（<span class="highlight-text">${keyword.substring(0,3)}</span>...在附件中）`
+          return `（<span class="highlight-text">${keyword.substring(
+            0,
+            3
+          )}</span>...在附件中）`
         } else {
           return `（<span class="highlight-text">${keyword}</span>在附件中）`
         }
@@ -362,12 +387,14 @@ export default {
     },
     // 处理关键词在附件中
     calcFiletext_search() {
-      const extractFiletext = extractKeywords(this.article.filetext_search, this.article.matchKeys,)
-      return replaceKeyword(
-        extractFiletext,
-        this.article.matchKeys,
-        ['<span class="highlight-text">', '</span>']
+      const extractFiletext = extractKeywords(
+        this.article.filetext_search,
+        this.getMatchKeys
       )
+      return replaceKeyword(extractFiletext, this.getMatchKeys, [
+        '<span class="highlight-text">',
+        '</span>'
+      ])
     },
     // 处理关键词在附件中
     showDetailModel() {
@@ -509,7 +536,7 @@ $border-color: #ececec;
   &:border-top {
     border-top: 1px solid $border-color;
   }
-  .article-item-header{
+  .article-item-header {
     display: flex;
     align-items: center;
   }
@@ -616,7 +643,7 @@ $border-color: #ececec;
   .a-i-right {
     padding: 8px 0 0 30px;
   }
-  .a-i-detail{
+  .a-i-detail {
     width: calc(100% - 84px);
     padding: 6px 40px 0 30px;
     font-size: 14px;
@@ -672,20 +699,20 @@ $border-color: #ececec;
     line-height: 18px;
     flex-shrink: 0;
   }
-  &.style-for-push{
+  &.style-for-push {
     .custom-checkbox {
       margin-top: 4px;
     }
-    .a-i-left{
+    .a-i-left {
       font-size: 15px;
     }
-    .time-container{
+    .time-container {
       align-items: unset;
     }
-    .time-text{
+    .time-text {
       line-height: 24px;
     }
-    .article-item-header{
+    .article-item-header {
       display: flex;
       align-items: unset;
     }