From f608c987ba000029b490e5df3ed346cdf03d351c Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 12 Jul 2021 20:31:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20entity=E5=88=97=E8=A1=A8filter=20more?=
 =?UTF-8?q?=E5=92=8C=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/entities/LeftFilter.vue |  26 +++++-
 src/views/entities/EntityExplorer.vue  | 117 +++++++++++++++++++------
 2 files changed, 114 insertions(+), 29 deletions(-)

diff --git a/src/components/entities/LeftFilter.vue b/src/components/entities/LeftFilter.vue
index 23c565b7..7caaf421 100644
--- a/src/components/entities/LeftFilter.vue
+++ b/src/components/entities/LeftFilter.vue
@@ -11,7 +11,7 @@
         >
           <el-tree
               :data="f.data"
-              :load="(node, resolve) => f.load(node, resolve, f.filterType, f.childrenKey ? f.childrenKey : f.key)"
+              :load="(node, resolve) => f.loadFilter(node, resolve, f.filterType, f.childrenKey ? f.childrenKey : f.key)"
               :node-key="f.key"
               :props="{ isLeaf: 'leaf' }"
               :expand-on-click-node="false"
@@ -26,6 +26,7 @@
               </div>
             </template>
           </el-tree>
+          <div class="filter__more" :class="{'filter__more--disabled': f.hasnotMore}" @click="showMore(f.key, f.hasnotMore)">{{$t('common.showMore')}}</div>
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -40,16 +41,22 @@ export default {
   },
   data () {
     return {
-      active: ['1']
+      active: ['0', '1']
     }
   },
   methods: {
     nodeClick (data, node) {
-      this.$emit('select', data)
+      this.$emit('select', node, data)
+    },
+    showMore (key, hasnotMore) {
+      if (!hasnotMore) {
+        this.$emit('showMore', key)
+      }
     }
   },
   watch: {
     filterData (n) {
+      this.active = ['0', '1']
     }
   }
 }
@@ -91,12 +98,25 @@ export default {
       .el-collapse-item__wrap {
         padding-top: 6px !important;
 
+        .el-collapse-item__content {
+          padding-bottom: 15px;
+        }
         .filter-item {
           display: flex;
           justify-content: space-between;
           padding-right: 6px;
           width: 100%;
         }
+        .filter__more {
+          padding-left: 24px;
+          line-height: 36px;
+          color: $--color-primary;
+          cursor: pointer;
+        }
+        .filter__more.filter__more--disabled {
+          color: #999;
+          cursor: default;
+        }
       }
     }
   }
diff --git a/src/views/entities/EntityExplorer.vue b/src/views/entities/EntityExplorer.vue
index 25e53701..3ff6ac96 100644
--- a/src/views/entities/EntityExplorer.vue
+++ b/src/views/entities/EntityExplorer.vue
@@ -22,6 +22,7 @@
       <left-filter
           :filter-data="filterData"
           @select="select"
+          @showMore="showMore"
       ></left-filter>
       <!-- 内容区域 -->
       <entity-list
@@ -70,19 +71,60 @@ export default {
     EntityList
   },
   methods: {
-    async loadData (filterType, key) {
+    async showMore (key) {
+      let index = 0
+      switch (key) {
+        case 'country':
+        case 'categoryGroup':
+        case 'appCategory': {
+          this.pageObjLeftTop.pageNo++
+          break
+        }
+        case 'asn':
+        case 'reputationLevel':
+        case 'appRisk': {
+          this.pageObjLeftBottom.pageNo++
+          index = 1
+          break
+        }
+        default: break
+      }
+      const data = await this.loadFilterData(this.filterType, key)
+      if (this.$_.isEmpty(data)) {
+        this.filterData[index].hasnotMore = true
+      } else {
+        this.filterData[index].data = this.$_.concat(this.filterData[index].data, data)
+      }
+    },
+    async loadFilterData (filterType, key) {
       let data
+      let params = { type: key }
+      switch (key) {
+        case 'country':
+        case 'categoryGroup':
+        case 'appCategory': {
+          params = { ...params, ...this.pageObjLeftTop }
+          break
+        }
+        case 'asn':
+        case 'reputationLevel':
+        case 'appRisk': {
+          params = { ...params, ...this.pageObjLeftBottom }
+          break
+        }
+        default: break
+      }
       switch (filterType) {
         case 'ip': {
-          data = await getEntityIpFilterList({ type: key })
+          data = await getEntityIpFilterList(params)
           break
         }
         case 'domain': {
-          data = await getEntityDomainFilterList({ type: key })
+          data = await getEntityDomainFilterList(params)
           break
         }
         case 'app': {
-          data = await getEntityAppFilterList({ type: key })
+          data = await getEntityAppFilterList(params)
           break
         }
         default: break
@@ -95,10 +137,10 @@ export default {
       const data = []
       switch (n) {
         case 'ip': {
-          requests.push(this.loadData(n, 'country'))
-          requests.push(this.loadData(n, 'asn'))
-          data.push({ title: this.$t('entities.countryOrRegion'), key: 'country', childrenKey: 'region', type: 'country', childrenType: 'region', load })
-          data.push({ title: this.$t('entities.asn'), key: 'asn', type: 'asn', load })
+          requests.push(this.loadFilterData(n, 'country'))
+          requests.push(this.loadFilterData(n, 'asn'))
+          data.push({ title: this.$t('entities.countryOrRegion'), key: 'country', childrenKey: 'region', type: 'country', childrenType: 'region', loadFilter })
+          data.push({ title: this.$t('entities.asn'), key: 'asn', type: 'asn', loadFilter })
           getEntityIpList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -106,10 +148,10 @@ export default {
           break
         }
         case 'domain': {
-          requests.push(this.loadData(n, 'categoryGroup'))
-          requests.push(this.loadData(n, 'reputationLevel'))
-          data.push({ title: this.$t('entities.groupAndName'), key: 'categoryGroup', childrenKey: 'categoryName', load })
-          data.push({ title: this.$t('entities.creditLevel'), key: 'reputationLevel', load })
+          requests.push(this.loadFilterData(n, 'categoryGroup'))
+          requests.push(this.loadFilterData(n, 'reputationLevel'))
+          data.push({ title: this.$t('entities.groupAndName'), key: 'categoryGroup', childrenKey: 'categoryName', loadFilter })
+          data.push({ title: this.$t('entities.creditLevel'), key: 'reputationLevel', loadFilter })
           getEntityDomainList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -117,10 +159,10 @@ export default {
           break
         }
         case 'app': {
-          requests.push(this.loadData(n, 'appCategory'))
-          requests.push(this.loadData(n, 'appRisk'))
-          data.push({ title: this.$t('entities.categoryAndSub'), key: 'appCategory', childrenKey: 'appSubcategory', load })
-          data.push({ title: this.$t('entities.riskLevel'), key: 'appRisk', load })
+          requests.push(this.loadFilterData(n, 'appCategory'))
+          requests.push(this.loadFilterData(n, 'appRisk'))
+          data.push({ title: this.$t('entities.categoryAndSub'), key: 'appCategory', childrenKey: 'appSubcategory', loadFilter })
+          data.push({ title: this.$t('entities.riskLevel'), key: 'appRisk', loadFilter })
           getEntityAppList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -136,8 +178,9 @@ export default {
         this.filterData = data
       })
     },
-    select (data) {
-
+    async select (node, data) {
+      const res = await loadList(node, data, this.filterType, this.pageObjRight)
+      this.listData = res.data.result
     },
     getEntityData (param) {
 
@@ -169,8 +212,8 @@ export default {
     }
   },
   async mounted () {
-    const country = await this.loadData(this.filterType, 'country')
-    const asn = await this.loadData(this.filterType, 'asn')
+    const country = await this.loadFilterData(this.filterType, 'country')
+    const asn = await this.loadFilterData(this.filterType, 'asn')
     const res = await getEntityIpList({ ...this.pageObjRight })
     this.listData = res.data.result
     this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -180,14 +223,14 @@ export default {
       childrenKey: 'region',
       data: country,
       filterType: this.filterType,
-      load
+      loadFilter
     })
     this.filterData.push({
       title: this.$t('entities.asn'),
       key: 'asn',
       data: asn,
       filterType: this.filterType,
-      load
+      loadFilter
     })
   },
   setup () {
@@ -198,22 +241,24 @@ export default {
     }
   }
 }
-const load = (node, resolve, filterType, key) => {
+const loadFilter = (node, resolve, filterType, key) => {
   if (node.level === 0) {
     resolve(node.data)
   } else {
+    const param = { type: key }
+    param[key] = (node.data)[key]
     let req = null
     switch (filterType) {
       case 'ip': {
-        req = getEntityIpFilterList({ type: key })
+        req = getEntityIpFilterList(param)
         break
       }
       case 'domain': {
-        req = getEntityDomainFilterList({ type: key })
+        req = getEntityDomainFilterList(param)
         break
       }
       case 'app': {
-        req = getEntityAppFilterList({ type: key })
+        req = getEntityAppFilterList(param)
         break
       }
       default: break
@@ -228,6 +273,26 @@ const load = (node, resolve, filterType, key) => {
     }
   }
 }
+const loadList = async (node, data, filterType, pageObj) => {
+  let res
+  const param = { ...pageObj, ...data }
+  switch (filterType) {
+    case 'ip': {
+      res = await getEntityIpList(param)
+      break
+    }
+    case 'domain': {
+      res = await getEntityDomainList(param)
+      break
+    }
+    case 'app': {
+      res = await getEntityAppList(param)
+      break
+    }
+    default: break
+  }
+  return res
+}
 </script>
 
 <style lang="scss">