Skip to content

Commit

Permalink
optimization: ip选择器交互优化 (#7136)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ywywZhou
ywywZhou authored Nov 13, 2023
1 parent dce13b0 commit 40c0215
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 17 deletions.
19 changes: 15 additions & 4 deletions frontend/desktop/src/components/common/RenderForm/IpSelector/IpSelectorTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,10 @@
type: Array,
default: () => ([])
},
searchResult: {
type: Array,
default: () => ([])
},
listInPage: {
type: Array,
default: () => ([])
Expand Down Expand Up @@ -180,6 +184,12 @@
this.$emit('handleSelectionChange', val)
},
deep: true
},
isSearchMode (val) {
// 如果在搜索情况下全选，取消时则需要重新判断是否为全选
if (!val && this.listAllSelected) {
this.listAllSelected = this.selectedIp.length === this.staticIpList.length
}
}
},
created () {
Expand All @@ -188,6 +198,7 @@
item.checked = this.staticIpTableConfig.includes(item.id)
})
}
this.listAllSelected = this.selectedIp.length === this.staticIpList.length
},
methods: {
handleSelectionChange (data) {
Expand All @@ -206,7 +217,7 @@
return h('div', [
h('bk-checkbox', {
props: {
indeterminate: this.judegeIndeterminate(),
indeterminate: this.judgeIndeterminate(),
value: this.listAllSelected
},
on: {
Expand All @@ -217,7 +228,7 @@
})
])
},
judegeIndeterminate () {
judgeIndeterminate () {
let selectedIp = tools.deepClone(this.selectedIp)
if (selectedIp.length === 0) {
return false
Expand All @@ -233,7 +244,8 @@
this.selectedIp = []
this.listAllSelected = false
} else {
this.selectedIp = [...this.staticIpList]
const list = this.isSearchMode ? this.searchResult : this.staticIpList
this.selectedIp = [...list]
this.listAllSelected = true
}
},
Expand Down Expand Up @@ -322,7 +334,6 @@
text-align: center;
color: #c4c6cc;
.add-ip-btn {
margin: 0 -2px 0 -2px;
color: #3a84ff;
cursor: pointer;
}
Expand Down
49 changes: 36 additions & 13 deletions frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIpAddingPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,16 @@
@search="onIpSearch">
</ip-search-input>
<div class="ip-list-wrap">
<template v-if="type === 'select'">
<template v-if="type === 'select' || isManualParse">
<IpSelectorTable
:selection="true"
:editable="true"
:operate="false"
:is-search-mode="isSearchMode"
:default-selected="selectedIp"
:static-ip-list="staticIpList"
:list-in-page="listInPage"
:static-ip-list="isManualParse ? searchResult : staticIpList"
:search-result="searchResult"
:list-in-page="isManualParse ? searchResult : listInPage"
:static-ip-table-config="staticIpTableConfig"
@onIpSort="onIpSort"
@onHostNameSort="onHostNameSort"
Expand Down Expand Up @@ -62,7 +63,7 @@
</div>
<div class="adding-footer">
<div class="ip-list-btns">
<bk-button theme="primary" size="small" @click.stop="onAddIpConfirm">{{$t('添加')}}</bk-button>
<bk-button theme="primary" size="small" @click.stop="onAddIpConfirm">{{type === 'select' || isManualParse ? $t('添加') : $t('解析')}}</bk-button>
<bk-button theme="default" size="small" @click.stop="onAddIpCancel">{{$t('取消')}}</bk-button>
</div>
<div class="message-wrap">
Expand Down Expand Up @@ -122,7 +123,8 @@
content: '#error-ips-content',
placement: 'top'
},
isSearchInputFocus: false
isSearchInputFocus: false,
isManualParse: false
}
},
watch: {
Expand Down Expand Up @@ -233,14 +235,19 @@
onAddIpConfirm () {
const selectedIp = this.selectedIp.slice(0)
if (this.type === 'manual') {
if (this.type === 'manual' && !this.isManualParse) {
const ipInvalidList = []
const ipNotExistList = []
const ipPattern = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/ // ip 地址正则规则
const ipv6Regexp = tools.getIpv6Regexp() // ipv6 地址正则规则
const arr = this.ipString.split(/[\,|\n|\uff0c]/) // 按照中英文逗号、换行符分割
arr.forEach(item => {
const str = item.trim()
let str = item.trim()
let cloud = ''
if (str.indexOf(':') > -1) { // 云区域:IP
cloud = str.split(':')[0]
str = str.split(':')[1]
}
if (str) {
if (!ipPattern.test(str) && !ipv6Regexp.test(str)) { // 字符串不是合法 ip 地址
ipInvalidList.push(str)
Expand All @@ -249,14 +256,22 @@
if (ipv6Regexp.test(str)) { // 判断是否为ipv6地址
text = tools.tranSimIpv6ToFullIpv6(str) // 将缩写的ipv6转换为全写
}
const ipInList = this.list.find(i => [i.bk_host_innerip, i.bk_host_innerip_v6].includes(text))
if (!ipInList) { // ip 地址/ipv6地址不在可选列表里
const ipInList = this.list.filter(i => { // 过滤出所有符合的可选列表
const cloudMatch = cloud ? i.bk_cloud_id === Number(cloud) : true
return cloudMatch && [i.bk_host_innerip, i.bk_host_innerip_v6].includes(text)
})
if (!ipInList.length) { // ip 地址/ipv6地址不在可选列表里
ipNotExistList.push(str)
} else {
const ipInSelected = this.selectedIp.find(i => [i.bk_host_innerip, i.bk_host_innerip_v6].includes(text))
if (!ipInSelected) { // ip 地址/ipv6地址在可选列表并且不在已选列表
selectedIp.push(ipInList)
}
ipInList.forEach(item => {
const ipInSelected = this.selectedIp.find(i => {
const cloudMatch = cloud ? i.bk_cloud_id === Number(cloud) : true
return cloudMatch && [i.bk_host_innerip, i.bk_host_innerip_v6].includes(text)
})
if (!ipInSelected) { // ip 地址/ipv6地址在可选列表并且不在已选列表
selectedIp.push(item)
}
})
}
}
}
Expand All @@ -271,11 +286,19 @@
this.errorIpList = ipNotExistList
return
}
this.errorIpList = []
this.selectedIp = selectedIp
this.searchResult = selectedIp
this.setPanigation(selectedIp)
this.isManualParse = true
return
}
this.isManualParse = false
this.$emit('onAddIpConfirm', selectedIp)
},
onAddIpCancel () {
this.isManualParse = false
this.$emit('onAddIpCancel')
}
}
Expand Down

0 comments on commit 40c0215

Please sign in to comment.