gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hyx
2023-05-29 13:00:28 +08:00
parent 8ea82d0e34
commit b2c76aa2c7
12 changed files with 779 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/config.js
View File

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

78
src/assets/css/components/views/setting/knowledgeBase.scss
View File

@@ -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;
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;
display:flex;
flex-direction:row;
.card-category {
font-size: 12px;
line-height: 16px;
color: #38ACD2;
font-weight: 400;
border: 1px solid rgba(56,172,210,1);
height:20px;
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;

73
src/components/table/setting/KnowledgeBaseTableForRow.vue
View File

@@ -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'">
<span class="type-tag">{{tagTypeText(scope.row[item.prop])}}</span>
<template v-else-if="item.prop === 'category'">
<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'),
prop: 'tagType',
minWidth: 80,
label: this.$t('overall.category'),
prop: 'category',
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',
show: true
prop: 'opUser',
show: false
},
{
label: this.$t('config.user.createTime'),
@@ -120,17 +139,29 @@ export default {
},
{
label: this.$t('overall.updateTime'),
prop: 'utime',
show: false,
prop: 'opTime',
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 : ''
}
}

53
src/components/table/setting/knowledgeBaseTableForCard.vue
View File

@@ -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-desc" :title="data.remark">{{data.remark?data.remark:'—'}}</div>
<div class="card-id">ID:{{data.knowledgeId}}</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>

30
src/mixins/data-list.js
View File

@@ -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()
}
})

17
src/mixins/table.js
View File

@@ -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:

4
src/utils/api.js
View File

@@ -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',

91
src/utils/constants.js
View File

@@ -299,18 +299,97 @@ export const cycle = {
pre: 1
}
export const itemListHeight = {
hasData: 478,
noData: 250
}
export const knowledgeBaseType = [
{
name: 'IP',
value: 'ip'
label: 'IP',
value: 'cn_ip_tag_user_defined',
name: 'ip'
},
{
name: 'Domain',
value: 'domain'
label: 'Domain',
value: 'cn_domain_tag_user_defined',
name: 'domain'
},
{
name: 'APP',
value: 'app'
label: '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'
}
]

15
src/utils/http.js
View File

@@ -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 => {

93
src/views/setting/KnowledgeBase.vue
View File

@@ -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="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></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="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="tagType" label="Type" width="112"></el-table-column>
<el-table-column property="tagName" label="Name"></el-table-column>
<el-table-column property="knowledgeId" label="ID" width="50"></el-table-column>
<el-table-column property="category" label="Category" width="100"></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: {
}

341
src/views/setting/KnowledgeBaseForm.vue
View File

@@ -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-input class="form-input" maxlength="64" placeholder="" :disabled="!!editObject.id" show-word-limit
size="mini" type="text" v-model="editObject.tagName" @blur="tagNameBlur"></el-input>
<el-form-item :label="$t('config.roles.name')" prop="name">
<el-input class="form-input" maxlength="64" placeholder="" :disabled="!!editObject.knowledgeId" show-word-limit
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-select v-model="editObject.tagType"
<el-form-item :label="$t('overall.type')" prop="source">
<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">
<td class="imported-data-item" :title="d.tagItem">
<el-form-item v-if="(editObject.id && editIndex === i) || (addEditFlag && d.tagItem === '' && d.tagValue === '')" prop="tagItem">
<tr v-for="(d, i) in showImportedData" :key="importedType + d.tagName + d.tagValue + i">
<td class="imported-data-item" :title="d.tagName">
<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">
<i :class="d.status === 1 ? 'el-icon-success' : 'el-icon-error'"></i>&nbsp;&nbsp;{{ d.msg }}
<td v-if="!editObject.knowledgeId" class="imported-data-msg" :title="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">
<i v-if="editObject.id" class="cn-icon cn-icon-revoke imported-data-left-btn imported-data-back"
<td v-if="editObject.knowledgeId && backEditFlag && !addEditFlag && editIndex === i" class="imported-data-btn">
<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) {
this.$refs.form.clearValidate('tagType')
if (!this.editObject.knowledgeId) {
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) {
this.$refs.form.clearValidate('tagName')
if (!this.editObject.knowledgeId) {
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// 当前选中的类型
if (tagType === 'ip') {
const type = this.editObject.source// 当前选中的类型
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,
failed: originalImportedData.filter(d => d.status !== 1).length
succeeded: originalImportedData.filter(d => d.isValid === 1).length,
failed: originalImportedData.filter(d => d.isValid !== 1).length
}
this.isLoad = false
originalImportedData.sort((a, b) => b.status - a.status)
this.importedData = originalImportedData
originalImportedData.sort((a, b) => b.isValid - a.isValid)
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')
if (!this.uploaded && !this.editObject.id) {
this.$refs.form.validateField('name')
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,
tagType: this.editObject.tagType,
data: []
name: this.editObject.name,
category: 'user_defined',
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.showImportedData.push({ tagItem: '', tagValue: '', status: 1 })
this.importedData.push({ tagName: '', 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) {
return 2
if (this.editObject.knowledgeId) {
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: '',
tagType: 'ip',
remark: '',
updateTime: ''
knowledgeId: '',
source: 'cn_ip_tag_user_defined',
description: '',
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,

268
src/views/setting/KnowledgeFilter.vue
View File

@@ -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">
<div class="filter__checkbox-label">
<div class="filter-label" style="">
<span>All</span>
</div>
<div class="filter-count">{{allCount}}</div>
</div>
</el-checkbox>
<el-checkbox-group v-if="index === 0" v-model="filter.value" @change="handleCheckedItemChange">
<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>
<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>
<el-tree
:ref="`knowledgeTree${index}`"
:data="filter.data"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="[1,2,3]"
:render-content="renderContent"
@check="(data,checkinfo)=>handleCheckedItemChange(data,checkinfo,index)"
>
</el-tree>
</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) {
const values = []
this.filterData[0].data.forEach(d => {
values.push(d.value)
})
this.filterData[0].value = item ? values : []
this.isIndeterminateModel = false
if (item) {
this.$emit('reload', null, true)
} else {
this.$emit('clearList')
}
renderContent (h, { node, data, store }) {
return h('span', { class: 'custom-tree-node' }, [
h('span', {}, data.label),
h('span', { class: 'count-tree-node' }, data.count)
])
},
handleCheckedItemChange (values) {
const len = values.length
const allTypeLen = this.filterData[0].data.length
handleCheckedItemChange (data, checkinfo, index) {
let typeCheckedNodes = this.$refs.knowledgeTree0.getCheckedNodes()
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) {
this.isIndeterminateModel = false
this.checkAll = false
// this.$emit('reload',null,true)
if (typeCheckedLen === 0 || statusCheckedLen === 0) {
this.$emit('clearList')
} else if (len > 0 && len < allTypeLen) {
this.checkAll = true
this.isIndeterminateModel = true
const types = []
values.forEach(val => {
types.push(val)
} else {
const categorys = []
const sources = []
typeCheckedNodes.forEach(val => {
if (val.type === 0) {
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 },
{ label: 'Domain', value: 'domain', count: domainCount },
{ label: 'Application', value: 'app', count: appCount },
{ label: 'Built-in', value: 'builtIn', count: builtInCount }
{
id: 1,
label: 'WebSketch',
value: knowledgeCategoryValue.webSketch,
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 },
{ label: 'disable', value: 'ip', count: disableCount }
{ id: 1, label: 'enabled', value: 1, count: enableCount, type: 0 },
{ id: 2, label: 'disable', value: 0, count: disableCount, type: 0 }
]
},
reloadFilter () {