CN-1016 知识库支持卡片和table切换

public/config.js

@@ -1,4 +1,5 @@
 var BASE_CONFIG = {
-  baseUrl: 'http://192.168.44.54:8090/',
+  baseUrl: 'http://192.168.44.54:8091/',
-  version: '2.0.2021.05.11.19.43'
+  version: '23.06',
-}
+  apiVersion:'v1'
+}

src/assets/css/components/views/setting/knowledgeBase.scss

@@ -95,8 +95,29 @@
           }
         }
         .filter__body {
-          padding: 0 0 0 20px;
+          padding: 3px 0 0 20px;
-
+          .el-tree {
+            font-size:14px;
+            color: #353636;
+            font-weight: 400;
+            .el-tree-node {
+              .el-tree-node__content {
+                margin-bottom: 2px;
+                .custom-tree-node {
+                  flex: 1;
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  padding-right: 20px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  .count-tree-node {
+                    color: #717171;
+                  }
+                }
+              }
+            }
+          }
           .el-checkbox-group {
             display: flex;
             flex-direction: column;
@@ -113,6 +134,15 @@
                 border-radius: 2px;
               }
             }
+            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+              border-color: #38ACD2;
+              background: #38ACD2;
+              border-radius: 2px;
+            }
+            .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
+              background: #FFFFFF;
+              border-radius: 1px;
+            }
             .el-checkbox__input.is-checked {
               .el-checkbox__inner {
                 border-color: #38ACD2;
@@ -526,16 +556,34 @@
             padding-right:16px;
             padding-bottom:20px;
             .card-type {
-              height:20px;
+              display:flex;
-              width: fit-content;
+              flex-direction:row;
-              padding-left:11px;
+              .card-category {
-              padding-right:11px;
+                font-size: 12px;
-              background: rgba(56,172,210,0.10);
+                line-height: 16px;
-              box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                color: #38ACD2;
-              border-radius: 10px;
+                font-weight: 400;
-              font-size: 12px;
+                border: 1px solid rgba(56,172,210,1);
-              color: #046ECA;
+                height:20px;
-              font-weight: 400;
+                width: fit-content;
+                padding-left:11px;
+                padding-right:11px;
+                box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                border-radius: 10px;
+                margin-right:4px;
+              }
+              .card-source {
+                height:20px;
+                width: fit-content;
+                padding-left:11px;
+                padding-right:11px;
+                background: rgba(56,172,210,0.10);
+                box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                border-radius: 10px;
+                font-size: 12px;
+                color: #046ECA;
+                font-weight: 400;
+              }
             }
             .card-enable {
             }
@@ -576,6 +624,12 @@
     padding-left: 20px;
     overflow: auto;
 
+    .enable-form__mt {
+      .el-form {
+        margin-top:6px;
+      }
+    }
+
     .el-steps {
       margin-left: 10px;
 

src/components/table/setting/KnowledgeBaseTableForRow.vue

@@ -33,21 +33,24 @@
         <div class="col-resize-area"></div>
       </template>
       <template  #default="scope" :column="item">
-        <template v-if="item.prop === 'name'">
+        <template v-if="item.prop === 'name'" >
           <template v-if="scope.row.i18n">
-            <span>{{$t(scope.row.i18n)}}</span>
+            <span :title="scope.row[item.prop]">{{$t(scope.row.i18n)}}</span>
           </template>
           <template v-else-if="scope.row.name">
-            <span>{{scope.row.name}}</span>
+            <span :title="scope.row[item.prop]">{{scope.row.name}}</span>
           </template>
           <template v-else>
             <span>-</span>
           </template>
         </template>
-        <template v-else-if="item.prop === 'tagType'">
+        <template v-else-if="item.prop === 'category'">
-          <span class="type-tag">{{tagTypeText(scope.row[item.prop])}}</span>
+          <span >{{tagCategoryText(scope.row[item.prop])}}</span>
         </template>
-        <template v-else-if="item.prop === 'utime' || item.prop === 'ctime'">
+        <template v-else-if="item.prop === 'source'">
+          <span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
+        </template>
+        <template v-else-if="item.prop === 'opTime' || item.prop === 'ctime'">
           <template v-if="scope.row[item.prop]">
             {{dateFormatByAppearance(scope.row[item.prop])}}
           </template>
@@ -63,9 +66,18 @@
             <span>-</span>
           </template>
         </template>
-        <template v-else-if="item.prop === 'remark'">
+        <template v-else-if="item.prop === 'description'">
           <span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         </template>
+        <template v-else-if="item.prop === 'status'">
+          <el-switch class="card-enable"
+                     v-model="scope.row['status']"
+                     active-color="#38ACD2"
+                     inactive-color="#C0CEDB"
+                     @change="changeStatus($event,scope.row.knowledgeId)"
+          >
+          </el-switch>
+        </template>
         <span v-else>{{scope.row[item.prop] || '-'}}</span>
       </template>
     </el-table-column>
@@ -74,7 +86,7 @@
 
 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseType } from '@/utils/constants'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
 export default {
   name: 'KnowledgeBaseTableForRow',
   mixins: [table],
@@ -83,29 +95,36 @@ export default {
       tableTitle: [ // 原table列
         {
           label: 'ID',
-          prop: 'id',
+          prop: 'knowledgeId',
           show: true,
-          width: 100,
+          width: 60,
           sortable: 'custom'
         }, {
           label: this.$t('config.roles.name'),
-          prop: 'tagName',
+          prop: 'name',
+          minWidth: 100,
           show: true,
           sortable: 'custom'
         }, {
-          label: this.$t('overall.type'),
+          label: this.$t('overall.category'),
-          prop: 'tagType',
+          prop: 'category',
-          minWidth: 80,
+          width: 100,
+          show: true
+        }, {
+          label: this.$t('overall.source'),
+          prop: 'source',
+          width: 130,
           show: true
         }, {
           label: this.$t('overall.remark'),
-          prop: 'remark',
+          prop: 'description',
+          minWidth: 150,
           show: true
         },
         {
           label: this.$t('overall.createdBy'),
-          prop: 'cuser',
+          prop: 'opUser',
-          show: true
+          show: false
         },
         {
           label: this.$t('config.user.createTime'),
@@ -120,17 +139,29 @@ export default {
         },
         {
           label: this.$t('overall.updateTime'),
-          prop: 'utime',
+          prop: 'opTime',
-          show: false,
+          show: true,
           sortable: 'custom'
+        },
+        {
+          label: this.$t('knowledge.status'),
+          prop: 'status',
+          show: true,
+          minWidth: 40
         }
       ]
     }
   },
   computed: {
-    tagTypeText () {
+    tagCategoryText () {
       return function (type) {
-        const t = knowledgeBaseType.find(t => t.value === type)
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
         return t ? t.name : ''
       }
     }

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -1,29 +1,32 @@
 <template>
   <el-checkbox-group v-model="checkList">
-    <div @click="isSelectedStatus && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.id" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+    <div @click="isSelectedStatus && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
       <div class="card-content">
         <div class="card-title">
-          <div class="card-title-name" :title="data.tagName">{{data.tagName}}</div>
+          <div class="card-title-name" :title="data.name">{{data.name}}</div>
           <div class="card-title-more">
             <span v-show="!isSelectedStatus && data.showMore"><i class="cn-icon cn-icon-more-dark" @mouseenter="mouseenterMore(data)" test-id="mouseenter-dark"></i></span>
             <div class="card-operate" v-show="!isSelectedStatus && data.moreOptions" @mouseleave="mouseleaveMore(data)">
-              <div class="card-title-more-edit" @click="edit(data.id)" >{{$t('overall.edit')}}</div>
+              <div class="card-title-more-edit" @click="edit(data.knowledgeId)" >{{$t('overall.edit')}}</div>
               <div class="card-title-more-delete" @click="del(data)" >{{$t('overall.delete')}}</div>
             </div>
-            <el-checkbox @click.stop="" @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.id" :label="data"><br></el-checkbox>
+            <el-checkbox @click.stop="" @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.knowledgeId" :label="data"><br></el-checkbox>
 
           </div>
         </div>
-        <div class="card-id">ID:{{data.id}}</div>
+        <div class="card-id">ID:{{data.knowledgeId}}</div>
-        <div class="card-desc" :title="data.remark">{{data.remark?data.remark:'—'}}</div>
+        <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
       </div>
       <div class="card-operate__footer">
-        <div class="card-type">{{data.tagType}}</div>
+        <div class="card-type">
+          <div class="card-category">{{tagCategoryText(data.category)}}</div>
+          <div class="card-source">{{tagSourceText(data.source)}}</div>
+        </div>
         <el-switch class="card-enable"
-                   disabled
                    v-model="data.status"
                    active-color="#38ACD2"
                    inactive-color="#C0CEDB"
+                   @change="changeStatus($event,data.knowledgeId)"
         >
         </el-switch>
       </div>
@@ -33,7 +36,7 @@
 
 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseType } from '@/utils/constants'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
 export default {
   name: 'knowledgeBaseTableForCard',
   mixins: [table],
@@ -53,7 +56,7 @@ export default {
       handler (n) {
         if (this.tableData && this.tableData.length > 0) {
           this.tableData.forEach(item => {
-            item.status = true
+            // item.status = true
           })
         }
       }
@@ -98,28 +101,28 @@ export default {
     },
     mouseenterMore (card) {
       this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
           t.moreOptions = true
         }
       })
     },
     mouseleaveMore (card) {
       this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
           t.moreOptions = false
         }
       })
     },
     mouseenter (card) {
       this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
           t.showMore = true
         }
       })
     },
     mouseleave (card) {
       this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
           t.showMore = false
           t.moreOptions = false
         }
@@ -130,12 +133,14 @@ export default {
     },
     edit (id) {
       const pageNo = this.$router.currentRoute.value.query.pageNo
+      const listMode = this.$router.currentRoute.value.query.listMode
       this.$router.push({
         path: '/knowledgeBase/edit',
         query: {
           t: +new Date(),
           pageNoForTable: pageNo || 1,
-          id: id
+          id: id,
+          listMode: listMode
         }
       })
     }
@@ -144,9 +149,23 @@ export default {
     this.tableData.forEach(item => {
       item.showMore = false
       item.moreOptions = false
-      item.status = true
+      // item.status = true
     })
   },
-  computed: {}
+  computed: {
+    tagCategoryText () {
+      return function (type) {
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    }
+
+  }
 }
 </script>

src/mixins/data-list.js

@@ -74,29 +74,6 @@ export default {
           break
       }
     },
-    checkboxStatusChange (isCheck, data) {
-      if (isCheck) {
-        const delObj = this.batchDeleteObjs.find(item => item.id === data.id)
-        if (delObj === undefined) {
-          this.batchDeleteObjs.push(data)
-        }
-      } else {
-        const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.id === data.id)
-        if (cancleObjIndex > -1) {
-          this.batchDeleteObjs.splice(cancleObjIndex, 1)
-        }
-      }
-      if (this.batchDeleteObjs.length > 1) {
-        this.disableEdit = true
-      } else {
-        this.disableEdit = false
-      }
-      if (this.batchDeleteObjs.length >= 1) {
-        this.disableDelete = false
-      } else {
-        this.disableDelete = true
-      }
-    },
     selectionChange (objs) {
       this.batchDeleteObjs = []
       objs.forEach(obj => {
@@ -120,7 +97,8 @@ export default {
       if (isAll) {
         this.searchLabel = null
       } else if (isClearType) {
-        this.searchLabel.tagType = ''
+        // this.searchLabel.tagType = ''
+        this.searchLabel.type = ''// 换新接口需要修改的属性名称
       }
       if (params) {
         this.searchLabel = { ...this.searchLabel, ...params }
@@ -136,7 +114,7 @@ export default {
         this.tools.loading = false
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
-            response.data.list[i].status = response.data.list[i].status + ''
+            response.data.list[i].status = response.data.list[i].status === 1
           }
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
@@ -364,7 +342,7 @@ export default {
     },
     dragend () {
       this.$nextTick(() => {
-        if (this.$refs.dataTable.$refs.dataTable) {
+        if (this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
           this.$refs.dataTable.$refs.dataTable.doLayout()
         }
       })

src/mixins/table.js

@@ -1,5 +1,7 @@
 import { chartTableOrderOptionsMapping, storageKey } from '@/utils/constants'
 import { getWidthByLanguage } from '@/utils/tools'
+import { put, patch } from '@/utils/http'
+import { api } from '@/utils/api'
 export default {
   props: {
     tableData: {
@@ -99,6 +101,21 @@ export default {
         })
       }
     },
+    changeStatus (status, id) {
+      const statusNum = status ? 1 : 0
+      patch(api.knowledgeBaseEnable, { list: [{ knowledgeId: id, status: 0 }] }).then(response => {
+        if (response.code === 200) {
+
+        } else {
+          console.error(response)
+          if (response.message) {
+            this.$message.error(response.message)
+          } else {
+            this.$message.error('Something went wrong...')
+          }
+        }
+      })
+    },
     tableOperation ([command, row]) {
       switch (command) {
         default:

src/utils/api.js

@@ -35,7 +35,9 @@ export const api = {
   // galaxyProxy
   galaxyProxy: '/galaxy/setting',
   // 知识库
-  knowledgeBase: '/knowledgeBase',
+  knowledgeBase: BASE_CONFIG.apiVersion + '/knowledgeBase',
+  knowledgeBaseList: BASE_CONFIG.apiVersion + '/knowledgeBase/list',
+  knowledgeBaseEnable: BASE_CONFIG.apiVersion + '/knowledgeBase/status',
 
   // 报告相关
   reportJob: '/report/job',

src/utils/constants.js

@@ -299,18 +299,97 @@ export const cycle = {
   pre: 1
 }
 
+export const itemListHeight = {
+  hasData: 478,
+  noData: 250
+}
+
 export const knowledgeBaseType = [
   {
-    name: 'IP',
+    label: 'IP',
-    value: 'ip'
+    value: 'cn_ip_tag_user_defined',
+    name: 'ip'
   },
   {
-    name: 'Domain',
+    label: 'Domain',
-    value: 'domain'
+    value: 'cn_domain_tag_user_defined',
+    name: 'domain'
   },
   {
-    name: 'APP',
+    label: 'APP',
-    value: 'app'
+    value: 'cn_app_tag_user_defined',
+    name: 'app'
+  }
+]
+
+export const knowledgeBaseCategory = [
+  {
+    name: 'WebSketch',
+    value: 'websketch'
+  },
+  {
+    name: 'AI Tagging',
+    value: 'ai_tagging'
+  },
+  {
+    name: 'User-defined',
+    value: 'user_defined'
+  }
+]
+
+export const knowledgeCategoryValue = {
+  webSketch: 'websketch',
+  aiTagging: 'ai_tagging',
+  userDefined: 'user_defined'
+}
+export const knowledgeSourceValue = {
+  fqdnCategory: 'cn_fqdn_category_built_in',
+  iocMalware: 'cn_ioc_malware',
+  iocDarkweb: 'cn_ioc_darkweb',
+  ipLocation: 'cn_ip_location_built_in',
+  asn: 'cn_ip_asn_built_in',
+  psiphon3: 'cn_psiphon3_ip',
+  ipTag: 'cn_ip_tag_user_defined',
+  domainTag: 'cn_domain_tag_user_defined',
+  appTag: 'cn_app_tag_user_defined'
+}
+
+export const knowledgeBaseSource = [
+  {
+    name: 'FQDN Category',
+    value: 'cn_fqdn_category_built_in'
+  },
+  {
+    name: 'Ioc Malware',
+    value: 'cn_ioc_malware'
+  },
+  {
+    name: 'Ioc Darkweb',
+    value: 'cn_ioc_darkweb'
+  },
+  {
+    name: 'IP Location',
+    value: 'cn_ip_location_built_in'
+  },
+  {
+    name: 'ASN',
+    value: 'cn_ip_asn_built_in'
+  },
+  {
+    name: 'Psiphon3',
+    value: 'cn_psiphon3_ip'
+  },
+  {
+    name: 'IP Tag',
+    value: 'cn_ip_tag_user_defined'
+  },
+  {
+    name: 'Domain Tag',
+    value: 'cn_domain_tag_user_defined'
+  },
+  {
+    name: 'APP Tag',
+    value: 'cn_app_tag_user_defined'
   }
 ]
 

src/utils/http.js

@@ -142,6 +142,21 @@ export function put (url, params, headers) {
   })
 }
 
+export function patch (url, params, headers) {
+  return new Promise((resolve) => {
+    axios.patch(url, params, { headers: headers }).then(response => {
+      resolve(response.data, response)
+    }).catch(err => {
+      if (err.response) {
+        resolve(err.response.data)
+        console.error(err)
+      } else if (err.message) {
+        resolve(err.message)
+      }
+    })
+  })
+}
+
 export function del (url, params) {
   return new Promise((resolve) => {
     axios.delete(url, params).then(response => {

src/views/setting/KnowledgeBase.vue

@@ -18,12 +18,18 @@
               <i class="cn-icon-xinjian cn-icon"></i>
               <span>{{$t('overall.create')}}</span>
             </button>
-            <button v-if="listMode === 'block'" id="knowledge-base-edit" :title="$t('knowledgeBase.select')" class="top-tool-btn margin-r-10"
+            <button v-if="listMode === 'block'" id="knowledge-base-select" :title="$t('knowledgeBase.select')" class="top-tool-btn margin-r-10"
                     style="width:72px;"
                     @click="toSelect">
               <i class="cn-icon-select cn-icon" ></i>
               <span>{{$t('overall.select')}}</span>
             </button>
+            <button v-if="listMode === 'list'" id="knowledge-base-edit" :title="$t('knowledgeBase.editKnowledgeBase')" class="top-tool-btn margin-r-10"  :disabled="disableEdit"
+                    style="width:72px;"
+                    @click="editSelectRecord">
+              <i class="cn-icon-edit cn-icon" ></i>
+              <span>{{$t('overall.edit')}}</span>
+            </button>
             <button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
                     style="width:72px;" :disabled="disableDelete"
                     @click="toDelete">
@@ -39,8 +45,8 @@
           </div>
           <div class="top-tools__right" >
             <el-button-group size="mini">
-              <el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
+              <el-button size="mini" @click="modeChange('list')" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
-              <el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
+              <el-button size="mini" @click="modeChange('block')" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
             </el-button-group>
           </div>
         </div>
@@ -68,7 +74,7 @@
         <template v-else-if="listMode === 'block'">
           <div class="list-mode__card" >
             <knowledge-base-table-for-card
-                    ref="dataTable"
+                    ref="dataTableCard"
                     v-loading="tools.loading"
                     :api="url"
                     :custom-table-title="tools.customTableTitle"
@@ -110,9 +116,10 @@
               type="selection"
               width="50">
       </el-table-column>
-      <el-table-column property="id" label="ID" width="112"></el-table-column>
+      <el-table-column property="knowledgeId" label="ID" width="50"></el-table-column>
-      <el-table-column property="tagType" label="Type" width="112"></el-table-column>
+      <el-table-column property="category" label="Category" width="100"></el-table-column>
-      <el-table-column property="tagName" label="Name"></el-table-column>
+      <el-table-column property="source" label="Source" width="110"></el-table-column>
+      <el-table-column property="name" label="Name"></el-table-column>
     </el-table>
     <template #footer>
         <span class="dialog-footer">
@@ -128,6 +135,7 @@ import dataListMixin from '@/mixins/data-list'
 import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
 import KnowledgeBaseTableForRow from '@/components/table/setting/KnowledgeBaseTableForRow'
 import { api } from '@/utils/api'
+import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import axios from 'axios'
 import KnowledgeFilter from '@/views/setting/KnowledgeFilter'
 
@@ -143,6 +151,7 @@ export default {
   data () {
     return {
       url: api.knowledgeBase,
+      listUrl: api.knowledgeBaseList,
       tableId: 'knowledgeBaseTable', // 需要分页的table的id，用于记录每页数量
       isSelectedStatus: false,
       keyWord: '',
@@ -176,12 +185,53 @@ export default {
     secondSelectionChange (objs) {
       this.secondBatchDeleteObjs = objs
     },
-
+    selectionChange (objs) {
+      this.batchDeleteObjs = []
+      objs.forEach(obj => {
+        const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === obj.knowledgeId)
+        if (delObj === undefined) {
+          this.batchDeleteObjs.push(obj)
+        }
+      })
+      if (this.batchDeleteObjs.length > 1) {
+        this.disableEdit = true
+      } else {
+        this.disableEdit = false
+      }
+      if (this.batchDeleteObjs.length >= 1) {
+        this.disableDelete = false
+      } else {
+        this.disableDelete = true
+      }
+    },
+    checkboxStatusChange (isCheck, data) {
+      if (isCheck) {
+        const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === data.knowledgeId)
+        if (delObj === undefined) {
+          this.batchDeleteObjs.push(data)
+        }
+      } else {
+        const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
+        if (cancleObjIndex > -1) {
+          this.batchDeleteObjs.splice(cancleObjIndex, 1)
+        }
+      }
+      if (this.batchDeleteObjs.length > 1) {
+        this.disableEdit = true
+      } else {
+        this.disableEdit = false
+      }
+      if (this.batchDeleteObjs.length >= 1) {
+        this.disableDelete = false
+      } else {
+        this.disableDelete = true
+      }
+    },
     delBatchKnowledge () {
       const ids = []
       if (this.secondBatchDeleteObjs && this.secondBatchDeleteObjs.length > 0) {
         this.secondBatchDeleteObjs.forEach(item => {
-          ids.push(item.id)
+          ids.push(item.knowledgeId)
         })
       }
       if (ids.length === 0) {
@@ -191,7 +241,7 @@ export default {
         }).catch(() => {})
       } else {
         this.tools.loading = true
-        axios.delete(this.url + '?ids=' + ids).then(response => {
+        axios.delete(this.url + '?knowledgeIds=' + ids).then(response => {
           if (response.data.code === 200) {
             this.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -260,7 +310,7 @@ export default {
       this.pageObj.total = 0
     },
     toSelect () {
-      this.$refs.dataTable.clearSelect()
+      this.$refs.dataTableCard.clearSelect()
       this.isSelectedStatus = !this.isSelectedStatus
       this.disableDelete = true
       this.batchDeleteObjs = []
@@ -273,11 +323,11 @@ export default {
           type: 'warning'
         }).catch(() => {})
       } else {
-        this.jumpToEditPage(this.batchDeleteObjs[0].id)
+        this.jumpToEditPage(this.batchDeleteObjs[0].knowledgeId)
       }
     },
     toDelete (data) {
-      if (data && data.id) {
+      if (data && data.knowledgeId) {
         this.secondBatchDeleteObjs = []
         this.batchDeleteObjs = []
         this.secondBatchDeleteObjs.push(data)
@@ -285,6 +335,12 @@ export default {
       }
       this.showDelDialog()
     },
+    modeChange (mode) {
+      this.listMode = mode
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, { listMode: mode })
+      overwriteUrl(newUrl)
+    },
     del (row) {
       this.$confirm(this.$t('tip.confirmDelete'), {
         confirmButtonText: this.$t('tip.yes'),
@@ -292,7 +348,7 @@ export default {
         type: 'warning'
       }).then(() => {
         this.tools.loading = true
-        axios.delete(this.url + '?ids=' + row.id).then(response => {
+        axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
           if (response.data.code === 200) {
             this.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -317,7 +373,8 @@ export default {
         path: '/knowledgeBase/edit',
         query: {
           t: +new Date(),
-          id: id
+          id: id,
+          listMode: this.listMode
         }
       })
     },
@@ -325,13 +382,15 @@ export default {
       this.$router.push({
         path: '/knowledgeBase/create',
         query: {
-          t: +new Date()
+          t: +new Date(),
+          listMode: this.listMode
         }
       })
     }
   },
   mounted () {
-
+    const curMode = this.$router.currentRoute.value.query.listMode
+    this.listMode = curMode || 'list'
   },
   computed: {
   }

src/views/setting/KnowledgeBaseForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="edit-knowledge-base">
     <loading :loading="initLoading"></loading>
-    <div class="edit-knowledge-base__header">{{ editObject.id ? $t('overall.edit') : $t('overall.create') }}</div>
+    <div class="edit-knowledge-base__header">{{ editObject.knowledgeId ? $t('overall.edit') : $t('overall.create') }}</div>
     <div class="edit-knowledge-base__body">
       <el-steps direction="vertical" :active="activeStep">
         <el-step v-for="(height, index) in stepHeights" :style="`flex-basis: ${height}px; flex-shrink: 0;`"
@@ -14,26 +14,26 @@
           </template>
           <el-form :model="editObject" label-position="top" ref="form" :rules="rules">
             <!--name-->
-            <el-form-item :label="$t('config.roles.name')" prop="tagName">
+            <el-form-item :label="$t('config.roles.name')" prop="name">
-              <el-input class="form-input" maxlength="64" placeholder="" :disabled="!!editObject.id" show-word-limit
+              <el-input class="form-input" maxlength="64" placeholder="" :disabled="!!editObject.knowledgeId" show-word-limit
-                        size="mini" type="text" v-model="editObject.tagName" @blur="tagNameBlur"></el-input>
+                        size="mini" type="text" v-model="editObject.name" @blur="tagNameBlur"></el-input>
             </el-form-item>
-            <el-form-item :label="$t('overall.type')" prop="tagType">
+            <el-form-item :label="$t('overall.type')" prop="source">
-              <el-select v-model="editObject.tagType"
+              <el-select v-model="editObject.source"
                          class="form-select"
                          placeholder=" "
                          popper-class="form-select-popper"
-                         :disabled="!!editObject.id || typeSelectDisable"
+                         :disabled="!!editObject.knowledgeId || typeSelectDisable"
                          size="mini"
               >
                 <template v-for="type in knowledgeBaseType" :key="type.name">
-                  <el-option :label="type.name" :value="type.value"></el-option>
+                  <el-option :label="type.label" :value="type.value"></el-option>
                 </template>
               </el-select>
             </el-form-item>
-            <el-form-item :label="$t('overall.remark')" prop="remark">
+            <el-form-item :label="$t('overall.remark')" prop="description">
               <el-input maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
-                        v-model="editObject.remark" id="role-box-input-remark"/>
+                        v-model="editObject.description" id="role-box-input-remark"/>
             </el-form-item>
           </el-form>
         </el-collapse-item>
@@ -42,7 +42,7 @@
             <div class="form-sub-title">{{ $t('overall.importFromFile') }}</div>
           </template>
           <loading :loading="uploadLoading"></loading>
-          <el-upload :action="`${baseUrl}knowledge/import`"
+          <el-upload :action="`${baseUrl}${apiVersion}/knowledgeBase/parser`"
                      :headers="uploadHeaders"
                      :data="uploadParams"
                      :multiple="false"
@@ -72,7 +72,7 @@
           <template #title>
             <div class="form-sub-title">{{ $t('overall.preview') }}</div>
           </template>
-          <div class="skeleton-border" v-if="!uploaded && !editObject.id">
+          <div class="skeleton-border" v-if="!uploaded && !editObject.knowledgeId">
             <el-skeleton>
               <template #template>
                 <div v-for="item of 6" :key="item" class="skeleton-item-row">
@@ -86,7 +86,7 @@
           </div>
           <template v-else>
             <div class="imported-tip"><i class="cn-icon cn-icon-baocuo"/>
-              &nbsp;&nbsp;{{ editObject.id && isLoad? $t('knowledgeBase.loadTip', {
+              &nbsp;&nbsp;{{ editObject.knowledgeId && isLoad? $t('knowledgeBase.loadTip', {
               load: originalImportInfo.total
               }) : $t('knowledgeBase.importTip', {
               total: originalImportInfo.total,
@@ -100,45 +100,45 @@
                   <tr>
                     <th style="width: 230px">{{ importedTableFirstColumn }}</th>
                     <th style="width: 180px">Label</th>
-                    <th v-if="!editObject.id">{{ $t('overall.import') }}</th>
+                    <th v-if="!editObject.knowledgeId">{{ $t('overall.import') }}</th>
                     <th style="width: 16px"></th>
                   </tr>
-                  <tr v-for="(d, i) in showImportedData" :key="importedType + d.tagItem + d.tagValue + i">
+                  <tr v-for="(d, i) in showImportedData" :key="importedType + d.tagName + d.tagValue + i">
-                    <td class="imported-data-item" :title="d.tagItem">
+                    <td class="imported-data-item" :title="d.tagName">
-                      <el-form-item v-if="(editObject.id && editIndex === i)  || (addEditFlag && d.tagItem === '' && d.tagValue === '')" prop="tagItem">
+                      <el-form-item v-if="(editObject.knowledgeId && editIndex === i)  || (addEditFlag && d.tagName === '' && d.tagValue === '')" prop="tagName">
                         <span class="imported-data-item-edit__input">
-                          <el-input v-model="editTagForm.tagItem" @blur="onBlurTagItem"></el-input>
+                          <el-input v-model="editTagForm.tagName" @blur="onBlurTagItem"></el-input>
                         </span>
                       </el-form-item>
-                      <span v-else>{{ d.tagItem }}</span>
+                      <span v-else>{{ d.tagName }}</span>
                     </td>
                     <td class="imported-data-value" :title="d.tagValue">
-                      <el-form-item v-if="(editObject.id && editIndex === i) || (addEditFlag && d.tagItem === '' && d.tagValue === '')" prop="tagValue">
+                      <el-form-item v-if="(editObject.knowledgeId && editIndex === i) || (addEditFlag && d.tagName === '' && d.tagValue === '')" prop="tagValue">
                         <span class="imported-data-item-edit__input">
                           <el-input v-model="editTagForm.tagValue" @blur="onBlurTagItem"></el-input>
                         </span>
                       </el-form-item>
                       <span v-else>{{ d.tagValue }}</span>
                     </td>
-                    <td v-if="!editObject.id" class="imported-data-msg" :title="d.msg">
+                    <td v-if="!editObject.knowledgeId" class="imported-data-msg" :title="d.msg">
-                      <i :class="d.status === 1 ? 'el-icon-success' : 'el-icon-error'"></i>&nbsp;&nbsp;{{ d.msg }}
+                      <i :class="d.isValid === 1 ? 'el-icon-success' : 'el-icon-error'"></i>&nbsp;&nbsp;{{ d.msg }}
                     </td>
                     <td v-else></td>
                     <!--返回和保存按钮-->
-                    <td v-if="editObject.id && backEditFlag && !addEditFlag && editIndex === i" class="imported-data-btn">
+                    <td v-if="editObject.knowledgeId && backEditFlag && !addEditFlag && editIndex === i" class="imported-data-btn">
-                      <i v-if="editObject.id" class="cn-icon cn-icon-revoke imported-data-left-btn imported-data-back"
+                      <i v-if="editObject.knowledgeId" class="cn-icon cn-icon-revoke imported-data-left-btn imported-data-back"
                          @click="backImportedData"></i>
                       <i class="cn-icon cn-icon-save imported-data-save" @click="saveImportedData(i)"></i>
                     </td>
                     <!--保存和删除按钮-->
-                    <td v-else-if="(editObject.id && addEditFlag && editIndex === i) || (addEditFlag && d.tagItem === '' && d.tagValue === '')" class="imported-data-btn">
+                    <td v-else-if="(editObject.knowledgeId && addEditFlag && editIndex === i) || (addEditFlag && d.tagName === '' && d.tagValue === '')" class="imported-data-btn">
                       <i class="cn-icon cn-icon-save imported-data-save" style="margin: 0 7px"
                          @click="saveImportedData(i)"></i>
                       <i class="el-icon-close" @click="removeImportedData(i)"></i>
                     </td>
                     <!--编辑和删除按钮-->
                     <td v-else class="imported-data-btn">
-                      <i v-if="editObject.id" class="cn-icon cn-icon-edit1 imported-data-left-btn"
+                      <i v-if="editObject.knowledgeId" class="cn-icon cn-icon-edit1 imported-data-left-btn"
                          @click="editImportedData(i)"></i>
                       <i class="el-icon-close" @click="removeImportedData(i)"></i>
                     </td>
@@ -148,7 +148,7 @@
               </el-form>
               <Pagination
                   class="imported-pagination"
-                  :style="{'bottom': editObject.id ? '48px' : '0'}"
+                  :style="{'bottom': editObject.knowledgeId ? '48px' : '0'}"
                   :page-obj="importedPageObj"
                   :store-page-no-on-url="false"
                   layout="prev,pager,next"
@@ -168,6 +168,18 @@
             </transition>
           </template>
         </el-collapse-item>
+        <el-collapse-item name="3" class="enable-form__mt">
+          <template #title>
+            <div class="form-sub-title">{{ $t('knowledge.enable') }}</div>
+          </template>
+
+              <el-switch class="card-enable"
+                         v-model="status"
+                         active-color="#38ACD2"
+                         inactive-color="#C0CEDB"
+              >
+              </el-switch>
+        </el-collapse-item>
       </el-collapse>
     </div>
     <div class="edit-knowledge-base__footer">
@@ -186,7 +198,7 @@
 import { useRoute } from 'vue-router'
 import { nextTick, reactive, ref } from 'vue'
 import _ from 'lodash'
-import { knowledgeBaseType, storageKey, unitTypes } from '@/utils/constants'
+import { knowledgeBaseType, storageKey, unitTypes, knowledgeSourceValue, itemListHeight } from '@/utils/constants'
 import Pagination from '@/components/common/Pagination'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import axios from 'axios'
@@ -210,11 +222,11 @@ export default {
     }
     const nameAndTypeValidator = async (rule, value, callback) => {
       let validate = true
-      if (!this.editObject.id) {
+      if (!this.editObject.knowledgeId) {
-        this.$refs.form.clearValidate('tagType')
+        this.$refs.form.clearValidate('type')
         const response = await this.getKnowledgeBaseList()
         if (response.data.code === 200) {
-          const find = response.data.data.list.find(d => d.tagName === value && d.tagType === this.editObject.tagType)
+          const find = response.data.data.list.find(d => d.name === value && d.source === this.editObject.source)
           if (find) {
             validate = false
             callback(new Error())
@@ -225,11 +237,11 @@ export default {
     }
     const typeAndNameValidator = async (rule, value, callback) => {
       let validate = true
-      if (!this.editObject.id) {
+      if (!this.editObject.knowledgeId) {
-        this.$refs.form.clearValidate('tagName')
+        this.$refs.form.clearValidate('name')
         const response = await this.getKnowledgeBaseList()
         if (response.data.code === 200) {
-          const find = response.data.data.list.find(d => d.tagName === this.editObject.tagName && d.tagType === value)
+          const find = response.data.data.list.find(d => d.name === this.editObject.name && d.source === value)
           if (find) {
             validate = false
             callback(new Error())
@@ -241,10 +253,10 @@ export default {
     const nameAndLabelDuplicateValidator = (rule, value, callback) => {
       let validate = true
       let index = -1 // 当前编辑的键值index
-      // 查看是否重名前，需要对名称进行校验，分别是IP、domain、APP的校验
+      //查看是否重名前，需要对名称进行校验，分别是IP、domain、APP的校验
       const findData = this.importedData.find((item, i) => {
         index = i
-        return (item.tagItem === this.editTagForm.tagItem && item.tagValue === this.editTagForm.tagValue)
+        return (item.tagName === this.editTagForm.tagName && item.tagValue === this.editTagForm.tagValue)
       })
       if (findData) { // 找到1条记录
         // 如果name重复的第一个键值不是当前编辑item的index，即代表后续有重名的项了，提示重名
@@ -279,8 +291,8 @@ export default {
     }
     const nameFormatValidator = (rule, value, callback) => {
       let validate = true
-      const tagType = this.editObject.tagType// 当前选中的类型
+      const type = this.editObject.source// 当前选中的类型
-      if (tagType === 'ip') {
+      if (type === knowledgeSourceValue.ipTag) {
         const formal = value.replace(/\s+/g, '')// 去掉空格
         if (formal.indexOf('/') !== -1) {
           if (!(regular.ipv4CIDR.test(formal)) && !(regular.ipv6CIDR.test(formal))) {
@@ -295,14 +307,14 @@ export default {
             callback(new Error())
           }
         }
-      } else if (tagType === 'app') {
+      } else if (type === knowledgeSourceValue.appTag) {
         const pattern = /.*[*?!&$%#^,.;:<>/@\"{}\-\]\[=+_\\|].*$/
         if (pattern.test(value)) {
           validate = false
           this.editTagErrorTip = rule.message
           callback(new Error())
         }
-      } else if (tagType === 'domain') { // 域名只支持 字母数字.-_
+      } else if (type === knowledgeSourceValue.domainTag) { // 域名只支持 字母数字.-_
         if ((value.substr(0, 1) === '*' || value.substr(0, 1) === '$') &&
             !(value.substr(-1) === '*' || value.substr(-1) === '$')) {
           if (value.substr(0, 1) === '$') { // 处理$开头的情况
@@ -348,7 +360,7 @@ export default {
     }
     return {
       rules: {
-        tagName: [
+        name: [
           {
             required: true,
             message: this.$t('validate.required'),
@@ -365,7 +377,7 @@ export default {
             trigger: 'blur'
           }
         ],
-        tagType: [
+        source: [
           {
             required: true,
             message: this.$t('validate.required'),
@@ -379,7 +391,7 @@ export default {
         ]
       },
       editTagFormRules: {
-        tagItem: [
+        tagName: [
           {
             // required: true,
             validator: requiredItemValidator,
@@ -412,7 +424,9 @@ export default {
       isShowUploadTips: false,
       isPreviewChange: false,
       isClick: false,
-      pageNoForTable: 1
+      pageNoForTable: 1,
+      listMode: 'list',
+      status: true
     }
   },
   methods: {
@@ -435,29 +449,47 @@ export default {
       this.uploadLoading = false
       this.$message.error(this.$t('tip.uploadFailed', { msg: 'error' }))
     },
+    handleSpeticalTypeData (originalImportedData) {
+      originalImportedData.forEach(item => {
+        const names = item.tagNames
+        if (this.editObject.source === knowledgeSourceValue.ipTag && names) {
+          const format = names.addrFormat
+          if (format === 'Single') {
+            item.tagName = names.ip1
+          } else if (format === 'CIDR') {
+            item.tagName = names.ip1 + '/' + names.ip2
+          } else if (format === 'Range') {
+            item.tagName = names.ip1 + '~' + names.ip2
+          }
+        }
+      })
+      return originalImportedData
+    },
     uploadSuccess (response) {
       this.uploaded = response.code === 200
       if (response.code === 200) {
         // 上传成功后去掉upload和preview的错误提示
         this.uploadErrorTip = ''
         this.previewErrorTip = ''
-        this.importedType = this.editObject.tagType
+        this.importedType = this.editObject.source
         const originalImportedData = _.cloneDeep(response.data.data)
         this.importedDataNoData = originalImportedData.length === 0
         this.originalImportInfo = {
           total: originalImportedData.length,
-          succeeded: originalImportedData.filter(d => d.status === 1).length,
+          succeeded: originalImportedData.filter(d => d.isValid === 1).length,
-          failed: originalImportedData.filter(d => d.status !== 1).length
+          failed: originalImportedData.filter(d => d.isValid !== 1).length
         }
         this.isLoad = false
-        originalImportedData.sort((a, b) => b.status - a.status)
+        originalImportedData.sort((a, b) => b.isValid - a.isValid)
-        this.importedData = originalImportedData
+        this.importedData = this.handleSpeticalTypeData(originalImportedData)
 
         this.handleShowImportedData()
         this.addEditFlag = false
         this.editTagErrorTip = ''
         this.editIndex = -1
         this.isPreviewChange = true
+        this.stepHeights[2] = itemListHeight.hasData
+        this.stepHeightConstant.third = itemListHeight.hasData
       } else {
         this.uploadLoading = false
         this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
@@ -479,6 +511,11 @@ export default {
         this.editIndex = -1
         this.isPreviewChange = true
         this.importedDataNoData = true
+
+        if (!this.editObject.knowledgeId) { // 新增且删除文件时，高度变为250
+          this.stepHeights[2] = itemListHeight.noData
+          this.stepHeightConstant.third = itemListHeight.noData
+        }
       }
       if (this.fileListBack !== undefined && this.fileListBack.status === 'success' &&
             this.importedData.length > 0) {
@@ -582,7 +619,7 @@ export default {
       // 删除内容为空的新增记录
       const lastIndex = this.importedData.length - 1
       const lastData = this.importedData[lastIndex]
-      if (lastData !== undefined && lastData.tagItem === '' && lastData.tagValue === '') {
+      if (lastData !== undefined && lastData.tagName === '' && lastData.tagValue === '') {
         this.importedData.pop()
       }
       this.importedPageObj.total = this.importedData.length
@@ -618,7 +655,8 @@ export default {
             path: '/knowledgeBase',
             query: {
               pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-              t: +new Date()
+              t: +new Date(),
+              listMode: this.listMode
             }
           })
         }).catch(() => {})
@@ -627,7 +665,8 @@ export default {
           path: '/knowledgeBase',
           query: {
             pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-            t: +new Date()
+            t: +new Date(),
+            listMode: this.listMode
           }
         })
       }
@@ -639,8 +678,8 @@ export default {
       this.blockOperation.save = true
       // 校验form + upload + preview
       this.$refs.form.validate(valid => {
-        this.$refs.form.validateField('tagName')
+        this.$refs.form.validateField('name')
-        if (!this.uploaded && !this.editObject.id) {
+        if (!this.uploaded && !this.editObject.knowledgeId) {
           this.uploadErrorTip = this.$t('validate.required')
         } else {
           this.uploadErrorTip = ''
@@ -658,38 +697,54 @@ export default {
               if (validImportData) {
                 // 校验通过后组织数据、请求接口
                 if (valid && !this.uploadErrorTip && !this.previewErrorTip) {
-                  if (this.importedData.length === 1 && this.importedData[0].tagItem === '') {
+                  if (this.importedData.length === 1 && this.importedData[0].tagName === '') {
                     // this.blockOperation.save = false
                   } else {
+                    const t = this.knowledgeBaseType.find(t => t.value === this.editObject.source)
                     const postData = {
-                      tagName: this.editObject.tagName,
+                      name: this.editObject.name,
-                      tagType: this.editObject.tagType,
+                      category: 'user_defined',
-                      data: []
+                      type: t ? t.name : '',
+                      description: this.editObject.description,
+                      status: this.status ? 1 : 0
                     }
                     // 避免点击新增后，并没有保存新增项就点击了save，此时删除新增的空白项
-                    if (this.importedData[this.importedData.length - 1].tagItem === '') {
+                    if (this.importedData[this.importedData.length - 1].tagName === '') {
                       this.importedData.pop()
                     }
-                    this.importedData.forEach(d => {
+
-                      const findData = postData.data.find(d2 => d2.tagValue === d.tagValue)
-                      if (findData) {
-                        findData.itemList.add(d.tagItem)
-                      } else {
-                        const set = new Set()
-                        set.add(d.tagItem)
-                        postData.data.push({
-                          tagValue: d.tagValue,
-                          itemList: set
-                        })
-                      }
-                    })
-                    postData.data.forEach(d => {
-                      // d.itemList = [...d.itemList]
-                      d.itemList = Array.from(d.itemList)
-                    })
-                    postData.remark = this.editObject.remark
                     const self = this
-                    if (!this.editObject.id) {
+                    if (!this.editObject.knowledgeId) {
+                      postData.addItemList = []
+                      this.importedData.forEach(d => {
+                        if (this.editObject.source === knowledgeSourceValue.ipTag) {
+                          const sepIndex = d.tagName.indexOf('/')
+                          if (sepIndex > -1) { // CIDR
+                            postData.addItemList.push({
+                              tagValue: d.tagValue,
+                              tagNames: {
+                                addrFormat: 'CIDR',
+                                ip1: d.tagName.substring(0, sepIndex),
+                                ip2: d.tagName.substring(sepIndex + 1)
+                              }
+                            })
+                          } else { // Single
+                            postData.addItemList.push({
+                              tagValue: d.tagValue,
+                              tagNames: {
+                                addrFormat: 'Single',
+                                ip1: d.tagName,
+                                ip2: ''
+                              }
+                            })
+                          }
+                        } else {
+                          postData.addItemList.push({
+                            tagValue: d.tagValue,
+                            tagName: d.tagName
+                          })
+                        }
+                      })
                       axios.post(this.url, postData).then(response => {
                         if (response.data.code === 200) {
                           this.$message({
@@ -701,7 +756,8 @@ export default {
                             path: '/knowledgeBase',
                             query: {
                               pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-                              t: +new Date()
+                              t: +new Date(),
+                              listMode: this.listMode
                             }
                           })
                         } else {
@@ -714,7 +770,37 @@ export default {
                         this.blockOperation.save = false
                       })
                     } else {
-                      postData.id = this.editObject.id
+                      postData.updateItemList = []
+                      this.importedData.forEach(d => {
+                        if (this.editObject.source === knowledgeSourceValue.ipTag) {
+                          const sepIndex = d.tagName.indexOf('/')
+                          if (sepIndex > -1) { // CIDR
+                            postData.updateItemList.push({
+                              tagValue: d.tagValue,
+                              tagNames: {
+                                addrFormat: 'CIDR',
+                                ip1: d.tagName.substring(0, sepIndex),
+                                ip2: d.tagName.substring(sepIndex + 1)
+                              }
+                            })
+                          } else { // Single
+                            postData.updateItemList.push({
+                              tagValue: d.tagValue,
+                              tagNames: {
+                                addrFormat: 'Single',
+                                ip1: d.tagName,
+                                ip2: ''
+                              }
+                            })
+                          }
+                        } else {
+                          postData.updateItemList.push({
+                            tagValue: d.tagValue,
+                            tagName: d.tagName
+                          })
+                        }
+                      })
+                      postData.knowledgeId = this.editObject.knowledgeId
                       axios.put(this.url, postData).then(response => {
                         if (response.data.code === 200) {
                           this.$message({
@@ -726,7 +812,8 @@ export default {
                             path: '/knowledgeBase',
                             query: {
                               pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-                              t: +new Date()
+                              t: +new Date(),
+                              listMode: this.listMode
                             }
                           })
                         } else {
@@ -756,16 +843,16 @@ export default {
       })
     },
     hasErrorImportedData () {
-      return this.importedData.filter(d => d.status !== 1).length > 0
+      return this.importedData.filter(d => d.isValid !== 1).length > 0
     },
     async getKnowledgeBaseList () {
-      return await axios.get(this.url, { params: { pageSize: 999 } }).catch(e => {
+      return await axios.get(this.listUrl, { params: { pageSize: 999 } }).catch(e => {
         console.error(e)
         this.errorMsgHandler(e)
       })
     },
     editImportedData (index) {
-      this.editTagForm.tagItem = this.showImportedData[index].tagItem
+      this.editTagForm.tagName = this.showImportedData[index].tagName
       this.editTagForm.tagValue = this.showImportedData[index].tagValue
 
       // 点击编辑时，如正处于新增状态，则去除新增项（此时新增并为保存，不必保留）
@@ -785,7 +872,7 @@ export default {
     },
     backImportedData () {
       this.editTagForm = reactive({
-        tagItem: '',
+        tagName: '',
         tagValue: ''
       })
 
@@ -796,18 +883,18 @@ export default {
     saveImportedData (index) {
       this.$refs.editForm.validate(valid => {
         if (valid) {
-          this.showImportedData[index].tagItem = this.editTagForm.tagItem
+          this.showImportedData[index].tagName = this.editTagForm.tagName
           this.showImportedData[index].tagValue = this.editTagForm.tagValue
-          this.showImportedData[index].status = 1
+          this.showImportedData[index].isValid = 1
           let num = -1
           const findData = this.importedData.find((item, i) => {
             num = i
-            return (item.tagItem === this.editTagForm.tagItem && item.tagValue === this.editTagForm.tagValue)
+            return (item.tagName === this.editTagForm.tagName && item.tagValue === this.editTagForm.tagValue)
           })
           if (!findData) {
-            this.importedData[num].tagItem = this.editTagForm.tagItem
+            this.importedData[num].tagName = this.editTagForm.tagName
             this.importedData[num].tagValue = this.editTagForm.tagValue
-            this.importedData[num].status = 1
+            this.importedData[num].isValid = 1
           }
 
           this.addEditFlag = false
@@ -825,18 +912,18 @@ export default {
       })
     },
     addTagAtLast () {
-      this.editTagForm.tagItem = ''
+      this.editTagForm.tagName = ''
       this.editTagForm.tagValue = ''
       const total = this.importedData.length
       this.addEditFlag = true
       // 如果已经有新增空白项，则不再进行新增操作
-      if (this.importedData.length === 0 || (this.importedData[this.importedData.length - 1].tagItem !== '' && this.importedData[this.importedData.length - 1].tagValue !== '')) {
+      if (this.importedData.length === 0 || (this.importedData[this.importedData.length - 1].tagName !== '' && this.importedData[this.importedData.length - 1].tagValue !== '')) {
         if (total >= 10) {
           const lastPageSize = Math.ceil((total + 1) / 10)
           this.pageNo(lastPageSize)
         }
-        this.importedData.push({ tagItem: '', tagValue: '', status: 1 })
+        this.importedData.push({ tagName: '', tagValue: '', status: 1 })
-        this.showImportedData.push({ tagItem: '', tagValue: '', status: 1 })
+        this.showImportedData.push({ tagName: '', tagValue: '', status: 1 })
         this.importedDataNoData = false
 
         this.importedPageObj.total = this.importedData.length
@@ -848,8 +935,9 @@ export default {
   },
   computed: {
     uploadParams () {
+      const t = this.knowledgeBaseType.find(t => t.value === this.editObject.source)
       return {
-        type: this.editObject.tagType
+        type: t ? t.name : ''
       }
     },
     importedTableFirstColumn () {
@@ -857,9 +945,10 @@ export default {
       return t ? t.name : ''
     },
     activeStep () {
-      if (this.editObject.id) {
+      if (this.editObject.knowledgeId) {
-        return 2
+        return 3
       } else if (this.tagNameFirstBlur) {
+        // return this.uploaded ? 2 : 1
         return this.uploaded ? 2 : 1
       } else {
         return 0
@@ -868,7 +957,9 @@ export default {
   },
   mounted () {
     const pageNo = this.$router.currentRoute.value.query.pageNoForTable
+    const listMode = this.$router.currentRoute.value.query.listMode
     this.pageNoForTable = pageNo || 1
+    this.listMode = listMode || 'list'
     const div = document.getElementsByClassName('el-upload-dragger')[0]
     const self = this
     div.addEventListener('click', function (event) {
@@ -878,6 +969,8 @@ export default {
       self.uploadTip(event)
     })
     if (this.knowledgeBaseId) {
+      this.stepHeights[2] = itemListHeight.hasData// 修改的时候一直是478
+      this.stepHeightConstant.third = itemListHeight.hasData// 修改的时候一直是478
       this.isLoad = true
       axios.get(`${api.knowledgeBase}/${this.knowledgeBaseId}`).then(response => {
         if (response.data.code === 200) {
@@ -885,7 +978,10 @@ export default {
             throw new Error('No data found, id: ' + this.knowledgeBaseId)
           }
           this.editObject = response.data.data
-          this.importedData = this.revertImportedData(this.editObject.data)
+          this.status = this.editObject.isValid === 1
+          // this.importedData = this.revertImportedData(this.editObject.data)
+          this.importedData = this.handleSpeticalTypeData(this.editObject.list)
+
           this.handleShowImportedData()
           this.originalImportInfo = {
             total: this.importedData.length,
@@ -893,7 +989,7 @@ export default {
             failed: 0
           }
           this.importedPageObj.total = this.importedData.length
-          this.importedType = this.editObject.tagType
+          this.importedType = this.editObject.source
           this.initLoading = false
         } else {
           this.$message.error(this.errorMsgHandler(response))
@@ -905,17 +1001,21 @@ export default {
           path: '/knowledgeBase',
           query: {
             pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-            t: +new Date()
+            t: +new Date(),
+            listMode: this.listMode
           }
         })
       })
+    } else {
+      this.stepHeightConstant.third = itemListHeight.noData// 进入新增时为250
     }
   },
   watch: {
     activeCollapses (n) {
       const index0 = n.indexOf('0')
       const index1 = n.indexOf('1')
-      if (index0 > -1) {
+      const index2 = n.indexOf('2')
+      if (index0 > -1) { // 第一个折叠为发开状态
         if (this.stepHeights[0] === this.stepHeightConstant.collapse) {
           this.stepHeights.splice(0, 1, this.stepHeightConstant.first)
         }
@@ -933,6 +1033,15 @@ export default {
           this.stepHeights.splice(1, 1, this.stepHeightConstant.collapse)
         }
       }
+      if (index2 > -1) {
+        if (this.stepHeights[2] === this.stepHeightConstant.collapse) {
+          this.stepHeights.splice(2, 1, this.stepHeightConstant.third)
+        }
+      } else {
+        if (this.stepHeights[2] === this.stepHeightConstant.third) {
+          this.stepHeights.splice(2, 1, this.stepHeightConstant.collapse)
+        }
+      }
     },
     importedData (n) {
       this.importedPageObj.total = n.length
@@ -941,7 +1050,7 @@ export default {
       if (!n) {
         const lastIndex = this.importedData.length - 1
         const lastData = this.importedData[lastIndex]
-        if (lastData && lastData.tagItem === '' && lastData.tagValue === '') {
+        if (lastData && lastData.tagName === '' && lastData.tagValue === '') {
           this.importedData.pop()
         }
       }
@@ -956,14 +1065,16 @@ export default {
     const { query } = useRoute()
     const knowledgeBaseId = query.id || ''
     const url = api.knowledgeBase
+    const listUrl = api.knowledgeBaseList
     // 空白对象
     const blankObject = {
-      tagName: '',
+      name: '',
       buildIn: '',
-      id: '',
+      knowledgeId: '',
-      tagType: 'ip',
+      source: 'cn_ip_tag_user_defined',
-      remark: '',
+      description: '',
-      updateTime: ''
+      updateTime: '',
+      status: true
     }
     /* 将组织后的数据还原拉平 */
     const revertImportedData = (data) => {
@@ -971,9 +1082,9 @@ export default {
       data.forEach(d => {
         d.itemList.forEach(item => {
           importedData.push({
-            tagItem: item,
+            tagName: item,
             tagValue: d.tagValue,
-            status: 1
+            isValid: 1
           })
         })
       })
@@ -1008,14 +1119,16 @@ export default {
       uploadLoading.value = false
     }
     // 折叠组件控制
-    const activeCollapses = ref(['0', '1', '2'])
+    const activeCollapses = ref(['0', '1', '2', '3'])
     // 步骤条控制
     const stepHeightConstant = {
       collapse: 58,
       first: 333,
-      second: 284
+      second: 284,
+      third: itemListHeight.noData
     }
-    const stepHeights = ref([stepHeightConstant.first, stepHeightConstant.second, stepHeightConstant.collapse])
+
+    const stepHeights = ref([stepHeightConstant.first, stepHeightConstant.second, stepHeightConstant.third, stepHeightConstant.collapse])
 
     // 没上传过文件的提示
     const uploadErrorTip = ref('')
@@ -1023,7 +1136,7 @@ export default {
     const previewErrorTip = ref('')
     // 编辑项的form表单内容
     const editTagForm = reactive({
-      tagItem: '', // 待编辑的item项，如ip、domain、app等
+      tagName: '', // 待编辑的item项，如ip、domain、app等
       tagValue: '' // 待编辑的label
     })
 
@@ -1045,6 +1158,7 @@ export default {
       revertImportedData,
       handleShowImportedData,
       baseUrl: BASE_CONFIG.baseUrl,
+      apiVersion: BASE_CONFIG.apiVersion,
       fileList: ref([]),
       fileListBack: ref(),
       uploadHeaders: {
@@ -1053,6 +1167,7 @@ export default {
       uploaded: ref(false),
       importedDataNoData: ref(false),
       url,
+      listUrl,
       originalImportInfo,
       uploadErrorTip,
       previewErrorTip,

src/views/setting/KnowledgeFilter.vue

@@ -11,34 +11,17 @@
         </div>
         <el-collapse-transition>
           <div class="filter__body" v-show="!filter.collapse">
-            <el-checkbox style="padding-bottom: 5px;" label="all" v-if="index === 0" key="all" @change="handleCheckedAllChange" v-model="checkAll" :indeterminate="isIndeterminateModel">
+            <el-tree
-              <div class="filter__checkbox-label">
+                    :ref="`knowledgeTree${index}`"
-                <div class="filter-label" style="">
+                    :data="filter.data"
-                  <span>All</span>
+                    show-checkbox
-                </div>
+                    node-key="id"
-                <div class="filter-count">{{allCount}}</div>
+                    default-expand-all
-              </div>
+                    :default-checked-keys="[1,2,3]"
-            </el-checkbox>
+                    :render-content="renderContent"
-            <el-checkbox-group v-if="index === 0" v-model="filter.value" @change="handleCheckedItemChange">
+                    @check="(data,checkinfo)=>handleCheckedItemChange(data,checkinfo,index)"
-              <el-checkbox checked="true"  v-for="(d, i) in filter.data"  :label="d.value" :key="d.value" >
+                    >
-                <div class="filter__checkbox-label">
+            </el-tree>
-                  <div class="filter-label" style="">
-                    <span>{{d.label}}</span>
-                  </div>
-                  <div class="filter-count" v-if="d.count || d.count === 0">{{d.count}}</div>
-                </div>
-              </el-checkbox>
-            </el-checkbox-group>
-            <el-checkbox-group v-else v-model="filter.value" >
-              <el-checkbox checked="true" v-for="(d, i) in filter.data" :label="d.value" :key="d.value" >
-                <div class="filter__checkbox-label">
-                  <div class="filter-label" style="">
-                    <span>{{d.label}}</span>
-                  </div>
-                  <div class="filter-count" v-if="d.count || d.count === 0">{{d.count}}</div>
-                </div>
-              </el-checkbox>
-            </el-checkbox-group>
           </div>
         </el-collapse-transition>
       </div>
@@ -49,6 +32,7 @@
 <script>
 import { api } from '@/utils/api'
 import { get } from '@/utils/http'
+import { knowledgeCategoryValue, knowledgeSourceValue } from '@/utils/constants'
 
 export default {
   name: 'KnowledgeFilter',
@@ -56,7 +40,7 @@ export default {
   },
   data () {
     return {
-      url: api.knowledgeBase,
+      url: api.knowledgeBaseList,
       checkAll: true,
       isIndeterminateModel: false,
       filterData: [
@@ -73,6 +57,10 @@ export default {
           data: []
         }
       ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
       allTableData: [],
       allCount: 0
     }
@@ -80,43 +68,43 @@ export default {
   watch: {
   },
   methods: {
-    handleCheckedAllChange (item) {
+    renderContent (h, { node, data, store }) {
-      const values = []
+      return h('span', { class: 'custom-tree-node' }, [
-      this.filterData[0].data.forEach(d => {
+        h('span', {}, data.label),
-        values.push(d.value)
+        h('span', { class: 'count-tree-node' }, data.count)
-      })
+      ])
-      this.filterData[0].value = item ? values : []
-      this.isIndeterminateModel = false
-      if (item) {
-        this.$emit('reload', null, true)
-      } else {
-        this.$emit('clearList')
-      }
     },
-    handleCheckedItemChange (values) {
+    handleCheckedItemChange (data, checkinfo, index) {
-      const len = values.length
+      let typeCheckedNodes = this.$refs.knowledgeTree0.getCheckedNodes()
-      const allTypeLen = this.filterData[0].data.length
+      const typeHalfCheckedNodes = checkinfo.halfCheckedNodes
+      typeCheckedNodes = typeCheckedNodes.concat(typeHalfCheckedNodes)
+      const statusCheckedNodes = this.$refs.knowledgeTree1.getCheckedNodes()
+      const typeCheckedLen = typeCheckedNodes.length
+      const statusCheckedLen = statusCheckedNodes.length
       let params = {}
-      if (len === 0) {
+      if (typeCheckedLen === 0 || statusCheckedLen === 0) {
-        this.isIndeterminateModel = false
-        this.checkAll = false
-        // this.$emit('reload',null,true)
         this.$emit('clearList')
-      } else if (len > 0 && len < allTypeLen) {
+      } else {
-        this.checkAll = true
+        const categorys = []
-        this.isIndeterminateModel = true
+        const sources = []
-        const types = []
+        typeCheckedNodes.forEach(val => {
-        values.forEach(val => {
+          if (val.type === 0) {
-          types.push(val)
+            categorys.push(val.value)
+          } else if (val.type === 1) {
+            sources.push(val.value)
+          }
         })
         params = {
-          tagType: types.toString()
+          category: categorys.toString(),
+          source: sources.toString()
+        }
+        if (statusCheckedLen === 1) {
+          params = {
+            ...params,
+            status: statusCheckedNodes[0].value
+          }
         }
         this.$emit('reload', params, true)
-      } else if (len === allTypeLen) {
-        this.isIndeterminateModel = false
-        this.checkAll = true
-        this.$emit('reload', null, true)
       }
     },
     getAllTableData (params) {
@@ -127,51 +115,181 @@ export default {
       get(this.url, searchParams).then(response => {
         if (response.code === 200) {
           this.allTableData = response.data.list
-          this.initAllData()
-          this.initStatusData()
         } else {
           console.error(response)
         }
+      }).finally(() => {
+        this.initAllData()
+        this.initStatusData()
       })
     },
     initAllData () {
       this.allCount = this.allTableData.length
+      let webSketchCount = 0
+      let fqdnCategoryCount = 0
+      let iocMalwareCount = 0
+      let iocDarkwebCount = 0
+      let ipLocationCount = 0
+      let asnCount = 0
+      const fqdnWhoCount = 0
+      const fqdnIcpCount = 0
+      const appCategoryCount = 0
+
+      let aiTaggingCount = 0
+      let psiphon3Count = 0
+
+      let userDefinedCount = 0
       let ipCount = 0
       let domainCount = 0
       let appCount = 0
-      let builtInCount = 0
+
+      const builtInCount = 0
       this.allTableData.forEach(data => {
-        if (data.tagType === 'ip') {
+        if (data.category === knowledgeCategoryValue.webSketch) {
+          webSketchCount++
+        } else if (data.category === knowledgeCategoryValue.aiTagging) {
+          aiTaggingCount++
+        } else if (data.category === knowledgeCategoryValue.userDefined) {
+          userDefinedCount++
+        }
+
+        if (data.source === knowledgeSourceValue.fqdnCategory) {
+          fqdnCategoryCount++
+        } else if (data.source === knowledgeSourceValue.iocMalware) {
+          iocMalwareCount++
+        } else if (data.source === knowledgeSourceValue.iocDarkweb) {
+          iocDarkwebCount++
+        } else if (data.source === knowledgeSourceValue.ipLocation) {
+          ipLocationCount++
+        } else if (data.source === knowledgeSourceValue.asn) {
+          asnCount++
+        } else if (data.source === knowledgeSourceValue.psiphon3) {
+          psiphon3Count++
+        } else if (data.source === knowledgeSourceValue.ipTag) {
           ipCount++
-        } else if (data.tagType === 'domain') {
+        } else if (data.source === knowledgeSourceValue.domainTag) {
           domainCount++
-        } else if (data.tagType === 'app') {
+        } else if (data.source === knowledgeSourceValue.appTag) {
           appCount++
-        } else if (data.tagType === 'builtIn') {
-          builtInCount++
         }
       })
       this.filterData[0].data = [
-        // { label: 'All', value: 'all', count: 18 },
+        {
-        { label: 'IP', value: 'ip', count: ipCount },
+          id: 1,
-        { label: 'Domain', value: 'domain', count: domainCount },
+          label: 'WebSketch',
-        { label: 'Application', value: 'app', count: appCount },
+          value: knowledgeCategoryValue.webSketch,
-        { label: 'Built-in', value: 'builtIn', count: builtInCount }
+          count: webSketchCount,
+          type: 0,
+          children: [{
+            id: 11,
+            label: 'FQDN Category',
+            value: knowledgeSourceValue.fqdnCategory,
+            count: fqdnCategoryCount,
+            type: 1
+          }, {
+            id: 12,
+            label: 'Ioc Malware',
+            value: knowledgeSourceValue.iocMalware,
+            count: iocMalwareCount,
+            type: 1
+          }, {
+            id: 13,
+            label: 'Ioc Darkweb',
+            value: knowledgeSourceValue.iocDarkweb,
+            count: iocDarkwebCount,
+            type: 1
+          }, {
+            id: 14,
+            label: 'IP Location',
+            value: knowledgeSourceValue.ipLocation,
+            count: ipLocationCount,
+            type: 1
+          }, {
+            id: 15,
+            label: 'ASN',
+            value: knowledgeSourceValue.asn,
+            count: asnCount,
+            type: 1
+          }/*, {
+            id: 16,
+            label: 'FQDN Who',
+            value: 'cn_fqdn_who_isBuiltIn',
+            count:fqdnWhoCount,
+            children: []
+          },{
+            id: 17,
+            label: 'FQDN Icp',
+            value: 'cn_fqdn_icp_built_in',
+            count:fqdnIcpCount,
+            children: []
+          },{
+            id: 18,
+            label: 'APP Category',
+            value: 'cn_app_category_built_indad',
+            count:appCategoryCount,
+            children: []
+          } */
+          ]
+        },
+        {
+          id: 2,
+          label: 'AI Tagging',
+          value: knowledgeCategoryValue.aiTagging,
+          count: aiTaggingCount,
+          type: 0,
+          children: [
+            {
+              id: 21,
+              label: 'Psiphon3',
+              value: knowledgeSourceValue.psiphon3,
+              count: psiphon3Count,
+              type: 1
+            }
+          ]
+        },
+        {
+          id: 3,
+          label: 'User-defined',
+          value: knowledgeCategoryValue.userDefined,
+          count: userDefinedCount,
+          type: 0,
+          children: [
+            {
+              id: 31,
+              label: 'IP Tag',
+              value: knowledgeSourceValue.ipTag,
+              count: ipCount,
+              type: 1
+            }, {
+              id: 32,
+              label: 'Domain Tag',
+              value: knowledgeSourceValue.domainTag,
+              count: domainCount,
+              type: 1
+            }, {
+              id: 33,
+              label: 'APP Tag',
+              value: knowledgeSourceValue.appTag,
+              count: appCount,
+              type: 1
+            }
+          ]
+        }
       ]
     },
     initStatusData () {
       let enableCount = 0
       let disableCount = 0
       this.allTableData.forEach(data => {
-        if (data.status === 'disable') {
+        if (data.status === 0) {
           disableCount++
         } else {
           enableCount++
         }
       })
       this.filterData[1].data = [
-        { label: 'enabled', value: 'enabled', count: enableCount },
+        { id: 1, label: 'enabled', value: 1, count: enableCount, type: 0 },
-        { label: 'disable', value: 'ip', count: disableCount }
+        { id: 2, label: 'disable', value: 0, count: disableCount, type: 0 }
       ]
     },
     reloadFilter () {