Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ip选择器交互优化 #7136

Merged
merged 2 commits into from
Nov 13, 2023
Merged

ip选择器交互优化 #7136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5280030
optimization: ip选择器交互优化
ywywZhou Sep 29, 2023
55b2cfd
Merge branch 'release_humming_bird' into ip_selector_improve
ywywZhou Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 15 additions & 4 deletions frontend/desktop/src/components/common/RenderForm/IpSelector/IpSelectorTable.vue
View file
Open in desktop
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
Open in desktop
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
Loading