bug-知识分享Tag处增加展开功能

jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseList.vue

@@ -3,7 +3,7 @@
     <div class="search-detail-wrap">
       <div class="box-content-left">
         <div class="classification">{{$t('classification')}}:</div>
-        <template v-for="tag in tagList">
+        <template v-for='tag in tagList.slice(0,4)' v-if='!toggleSearchStatus'>
           <a-checkable-tag
             :key="tag.id"
             :title="tag.problemLabel"
@@ -13,6 +13,24 @@
             {{ tag.problemLabel }}
           </a-checkable-tag>
         </template>
+        <template v-for='tag in tagList' v-if='toggleSearchStatus'>
+          <a-checkable-tag
+            :key="tag.id"
+            :title="tag.problemLabel"
+            :checked="selectedTags.indexOf(tag.id) > -1"
+            @change="checked => handleChange(tag.id, checked)"
+          >
+            {{ tag.problemLabel }}
+          </a-checkable-tag>
+        </template>
+        <div style='display: inline-block;margin-bottom: 7px;'>
+        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+          <a @click="handleToggleSearch">
+            {{ !toggleSearchStatus ? $t('open') : $t('away') }}
+            <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+          </a>
+      </span>
+      </div>
       </div>
       <div class="box-content-content">
         <div class="box-content-content-index"
@@ -207,6 +225,7 @@
         total: 0,
         selectedTags: [],
         loading: false,
+        toggleSearchStatus: false,
         queryBase: {},
         pageSize: 10,
         queryForm: {},
@@ -444,6 +463,9 @@
           this.$refs.problemKnowledgeBaseListViewRef.getData(JSON.parse(JSON.stringify(val)))
         })
       },
+      handleToggleSearch() {
+        this.toggleSearchStatus = !this.toggleSearchStatus
+      }
     }
   }
 </script>