From a6460facf1d895e88f44639e8407d0306d384edc Mon Sep 17 00:00:00 2001
From: v_xugzhou <941071842@qq.com>
Date: Fri, 1 Nov 2024 15:24:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20IP=E9=80=89=E6=8B=A9=E5=99=A8=E9=9D=99?=
 =?UTF-8?q?=E6=80=81ip=E6=94=AF=E6=8C=81=E5=90=8E=E7=AB=AF=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=20#7550=20#=20Reviewed,=20transaction=20id:=2022555?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RenderForm/IpSelector/IpSelectorTable.vue |  83 ++----
 .../IpSelector/SingleIpSelector.vue           |   2 -
 .../common/RenderForm/IpSelector/StaticIp.vue | 195 +++++--------
 .../IpSelector/StaticIpAddingPanel.vue        | 260 ++++++++----------
 .../common/RenderForm/IpSelector/index.vue    |   9 -
 .../common/RenderForm/tags/TagIpSelector.vue  |  20 +-
 frontend/desktop/src/store/index.js           |  18 +-
 7 files changed, 231 insertions(+), 356 deletions(-)

diff --git a/frontend/desktop/src/components/common/RenderForm/IpSelector/IpSelectorTable.vue b/frontend/desktop/src/components/common/RenderForm/IpSelector/IpSelectorTable.vue
index f433b6446d..9bf61d4351 100644
--- a/frontend/desktop/src/components/common/RenderForm/IpSelector/IpSelectorTable.vue
+++ b/frontend/desktop/src/components/common/RenderForm/IpSelector/IpSelectorTable.vue
@@ -3,8 +3,7 @@
         ref="ipSeletorTable"
         :row-auto-height="true"
         :class="['ip-seletor-table', { 'disabled': !editable }]"
-        :data="listInPage"
-        @sort-change="handleSortChange">
+        :data="staticIpList">
         <bk-table-column v-if="selection" width="60" fixed="left" :render-header="renderHeaderCheckbox">
             <template slot-scope="props">
                 <bk-checkbox :value="selectedIp.findIndex(el => el.bk_host_id === props.row.bk_host_id) > -1" @change="onHostItemClick(props.row)"></bk-checkbox>
@@ -18,7 +17,6 @@
                 :width="columnInfo.width"
                 :min-width="columnInfo.minWidth"
                 :fixed="columnInfo.fixed"
-                :sortable="columnInfo.sortable"
                 :prop="columnInfo.id">
                 <template slot-scope="{ row }">
                     <div v-if="columnInfo.id === 'bk_host_innerip'" class="host-inner-ip">
@@ -107,9 +105,9 @@
                 type: Array,
                 default: () => ([])
             },
-            listInPage: {
-                type: Array,
-                default: () => ([])
+            listCount: {
+                type: Number,
+                default: 0
             }
         },
         data () {
@@ -120,7 +118,6 @@
                         id: 'bk_host_innerip',
                         width: 180,
                         fixed: true,
-                        sortable: true,
                         checked: true
                     },
                     {
@@ -146,7 +143,6 @@
                         name: this.$t('主机名称'),
                         id: 'bk_host_name',
                         minWidth: 120,
-                        sortable: true,
                         checked: true
                     },
                     {
@@ -158,8 +154,7 @@
                 ],
                 ipSortActive: '', // ip 排序方式
                 hostNameSortActive: '', // hostname 排序方式
-                selectedIp: this.defaultSelected.slice(0),
-                listAllSelected: false
+                selectedIp: this.defaultSelected.slice(0)
             }
         },
         computed: {
@@ -172,12 +167,25 @@
                     }
                 }
                 return key
+            },
+            isIndeterminate () {
+                let selectedIp = tools.deepClone(this.selectedIp)
+                if (selectedIp.length === 0) {
+                    return false
+                }
+                // 有的主机可能在列表中不存在
+                selectedIp = selectedIp.filter(item => !item.diff)
+                return !!selectedIp.length && selectedIp.length < this.listCount
+            },
+            isAllSelected () {
+                const half = this.selectedIp.length > 0 && this.selectedIp.length < this.listCount
+                return this.selectedIp.length !== 0 && !half
             }
         },
         watch: {
-            selectedIp: {
-                handler (val) {
-                    this.$emit('handleSelectionChange', val)
+            defaultSelected: {
+                handler () {
+                    this.selectedIp = this.defaultSelected.slice(0)
                 },
                 deep: true
             }
@@ -190,24 +198,13 @@
             }
         },
         methods: {
-            handleSelectionChange (data) {
-                this.$emit('handleSelectionChange', data)
-            },
-            handleSortChange ({ column, prop, order }) {
-                const way = order === 'descending' ? 'down' : 'up'
-                if (prop === 'bk_host_innerip') {
-                    this.$emit('onIpSort', way)
-                } else {
-                    this.$emit('onHostNameSort', way)
-                }
-            },
             renderHeaderCheckbox (h) {
                 const self = this
                 return h('div', [
                     h('bk-checkbox', {
                         props: {
-                            indeterminate: this.judegeIndeterminate(),
-                            value: this.listAllSelected
+                            indeterminate: this.isIndeterminate,
+                            value: this.isAllSelected
                         },
                         on: {
                             change: function (val) {
@@ -217,39 +214,11 @@
                     })
                 ])
             },
-            judegeIndeterminate () {
-                let selectedIp = tools.deepClone(this.selectedIp)
-                if (selectedIp.length === 0) {
-                    return false
-                }
-                // 有的主机可能在列表中不存在
-                selectedIp = selectedIp.filter(item => {
-                    return this.staticIpList.find(el => el.bk_host_id === item.bk_host_id)
-                })
-                return !!selectedIp.length && selectedIp.length < this.staticIpList.length
-            },
-            onSelectAllClick () {
-                if (this.listAllSelected) {
-                    this.selectedIp = []
-                    this.listAllSelected = false
-                } else {
-                    this.selectedIp = [...this.staticIpList]
-                    this.listAllSelected = true
-                }
+            onSelectAllClick (val) {
+                this.$emit('onSelectAllClick', val)
             },
             onHostItemClick (host) {
-                const index = this.selectedIp.findIndex(el => el.bk_host_id === host.bk_host_id)
-                if (index > -1) {
-                    this.selectedIp.splice(index, 1)
-                } else {
-                    this.selectedIp.push(host)
-                }
-                const half = this.selectedIp.length > 0 && this.selectedIp.length < this.staticIpList.length
-                if (half || this.selectedIp.length === 0) {
-                    this.listAllSelected = false
-                } else {
-                    this.listAllSelected = true
-                }
+                this.$emit('onHostItemClick', host)
             },
             handleSettingChange (selectedList) {
                 this.tableColumnList.forEach(item => {
diff --git a/frontend/desktop/src/components/common/RenderForm/IpSelector/SingleIpSelector.vue b/frontend/desktop/src/components/common/RenderForm/IpSelector/SingleIpSelector.vue
index 6ae7c3d615..4c5f7679d0 100644
--- a/frontend/desktop/src/components/common/RenderForm/IpSelector/SingleIpSelector.vue
+++ b/frontend/desktop/src/components/common/RenderForm/IpSelector/SingleIpSelector.vue
@@ -27,7 +27,6 @@
                 ref="ip"
                 :allow-unfold-input="allowUnfoldInput"
                 :editable="editable"
-                :static-ip-list="staticIpList"
                 :static-ips="staticIps"
                 :static-ip-table-config="staticIpTableConfig"
                 @onTableConfigChange="onStaticIpTableSettingChange"
@@ -79,7 +78,6 @@
             editable: Boolean,
             selectorTabs: Array,
             selectors: Array,
-            staticIpList: Array,
             dynamicIpList: Array,
             dynamicGroupList: Array,
             staticIpTableConfig: Array,
diff --git a/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIp.vue b/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIp.vue
index 3ae5e43a23..42467a6c6b 100644
--- a/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIp.vue
+++ b/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIp.vue
@@ -49,30 +49,26 @@
                 <IpSelectorTable
                     :editable="editable"
                     :is-search-mode="isSearchMode"
-                    :list-in-page="listInPage"
+                    :static-ip-list="staticIpList"
                     :static-ip-table-config="staticIpTableConfig"
-                    @onIpSort="onIpSort"
-                    @onHostNameSort="onHostNameSort"
                     @onAddPanelShow="onAddPanelShow"
                     @onTableConfigChange="onTableConfigChange"
                     @onRemoveIpClick="onRemoveIpClick">
                 </IpSelectorTable>
-                <div class="table-footer" v-if="isShowQuantity || isPaginationShow">
-                    <div v-if="isShowQuantity" class="selected-num">{{$t('共')}}
+                <div class="table-footer">
+                    <div v-if="staticIps.length" class="selected-num">{{$t('共')}}
                         <span class="total-ip">{{staticIps.length}}</span>
                         {{$t('个静态IP，')}}
                         {{$t('其中')}}
                         <span class="total-not-installed">{{abnormalLength}}</span>
                         {{$t('个')}}{{$t('异常')}}
                     </div>
-                    <div class="table-pagination" v-if="isPaginationShow">
+                    <div class="table-pagination">
                         <bk-pagination
                             size="small"
                             align="right"
-                            :current="currentPage"
-                            :count="totalCount"
-                            :limit="listCountPerPage"
-                            :limit-list="[listCountPerPage]"
+                            v-bind="pagination"
+                            :limit-list="[pagination.limit]"
                             :show-limit="false"
                             @change="onPageChange">
                         </bk-pagination>
@@ -84,7 +80,6 @@
         <static-ip-adding-panel
             v-if="isIpAddingPanelShow"
             :allow-unfold-input="allowUnfoldInput"
-            :static-ip-list="staticIpList"
             :static-ips="staticIps"
             :type="addingType"
             :static-ip-table-config="staticIpTableConfig"
@@ -112,28 +107,25 @@
         props: {
             allowUnfoldInput: Boolean,
             editable: Boolean,
-            staticIpList: Array,
             staticIpTableConfig: Array,
             staticIps: Array
         },
         data () {
-            const listCountPerPage = 5
-            const totalPage = Math.ceil(this.staticIps.length / listCountPerPage)
             return {
                 isDropdownShow: false,
                 isIpAddingPanelShow: false,
                 addingType: '',
                 isSearchMode: false,
                 copyText: '',
-                ipSortActive: '', // ip 排序方式
-                hostNameSortActive: '', // hostname 排序方式
+                pagination: {
+                    limit: 5,
+                    count: 0,
+                    current: 1
+                },
+                keyword: '',
+                isRemoved: false,
+                staticIpList: [],
                 searchResult: [],
-                list: this.staticIps,
-                isPaginationShow: totalPage > 1,
-                currentPage: 1,
-                totalCount: this.staticIps.length,
-                listCountPerPage: listCountPerPage,
-                listInPage: this.staticIps.slice(0, listCountPerPage),
                 dataError: false,
                 operations: [
                     {
@@ -159,46 +151,30 @@
         computed: {
             abnormalLength () {
                 return this.staticIps.filter(item => item.agent !== 1 || item.diff).length
-            },
-            isShowQuantity () {
-                return this.staticIps.length
             }
         },
         watch: {
-            staticIps (val) {
-                this.setDisplayList()
-                if (this.staticIps.length !== 0) {
-                    this.dataError = false
-                }
-            },
-            isSearchMode () {
-                this.setDisplayList()
-            },
-            ipSortActive () {
-                this.setDisplayList()
-            },
-            hostNameSortActive () {
-                this.setDisplayList()
+            staticIps: {
+                handler () {
+                    if (this.isRemoved) {
+                        this.isRemoved = false
+                        this.searchResult = this.getSearchResult()
+                        this.updateStaticIpList({ list: this.searchResult, current: this.pagination.current })
+                    } else {
+                        this.updateStaticIpList()
+                    }
+                    this.dataError = this.staticIps.length === 0
+                },
+                deep: true,
+                immediate: true
             }
         },
         methods: {
-            setDisplayList () {
-                let list = this.isSearchMode ? this.searchResult : this.staticIps
-                if (this.ipSortActive) {
-                    list = this.getSortIpList(list, this.ipSortActive)
-                }
-                if (this.hostNameSortActive) {
-                    list = this.getSortHostNameList(list, this.hostNameSortActive)
-                }
-                this.list = list
-                this.setPanigation(list)
-            },
-            setPanigation (list = []) {
-                this.listInPage = list.slice(0, this.listCountPerPage)
-                const totalPage = Math.ceil(list.length / this.listCountPerPage)
-                this.isPaginationShow = totalPage > 1
-                this.totalCount = list.length
-                this.currentPage = 1
+            updateStaticIpList ({ list = this.staticIps, current = 1 } = {}) {
+                this.pagination.current = current
+                this.pagination.count = list.length
+                const offset = current === 1 ? 0 : ((current - 1) * this.pagination.limit)
+                this.staticIpList = list.slice(offset, current * this.pagination.limit)
             },
             onAddPanelShow (type) {
                 if (!this.editable) {
@@ -243,30 +219,27 @@
             onStaticIpFocus () {
                 this.isUnfold = this.allowUnfoldInput
             },
-            onStaticIpSearch (keyword) {
-                if (keyword) {
-                    const keyArr = keyword.split(',').map(item => item.trim()).filter(item => {
-                        return item !== ''
-                    })
-                    const ipv6Regexp = tools.getIpv6Regexp()
-                    const list = this.staticIps.filter(item => {
-                        const { bk_host_innerip: ipv4, bk_host_innerip_v6: ipv6 } = item
-                        return keyArr.some(str => {
-                            let text = str
-                            if (ipv6Regexp.test(str)) { // 判断是否为ipv6地址
-                                text = tools.tranSimIpv6ToFullIpv6(str) // 将缩写的ipv6转换为全写
-                            }
-                            return ipv4.indexOf(text) > -1
-                                || (ipv6 && ipv6.indexOf(text) > -1)
-                        })
+            getSearchResult (keyword = this.keyword) {
+                const ipv6Regexp = tools.getIpv6Regexp()
+                const keyArr = keyword.split(',').map(item => item.trim()).filter(Boolean)
+
+                if (!keyword) return this.staticIps
+
+                return this.staticIps.filter(item => {
+                    const { bk_host_innerip: ipv4, bk_host_innerip_v6: ipv6 } = item
+                    return keyArr.some(str => {
+                        const text = ipv6Regexp.test(str) ? tools.tranSimIpv6ToFullIpv6(str) : str
+                        return ipv4.includes(text) || (ipv6 && ipv6.includes(text))
                     })
-                    this.searchResult = list
-                    this.setPanigation(list)
-                    this.isSearchMode = true
-                } else {
-                    this.setPanigation(this.staticIps)
-                    this.isSearchMode = false
-                }
+                })
+            },
+            onStaticIpSearch (keyword) {
+                this.keyword = keyword
+                const list = this.getSearchResult()
+
+                this.searchResult = list
+                this.updateStaticIpList({ list })
+                this.isSearchMode = Boolean(keyword)
             },
             onOperationClick (operation) {
                 const { type, name } = operation
@@ -280,31 +253,29 @@
                 this.$emit('onTableConfigChange', data)
             },
             onRemoveIpClick (id) {
-                if (!this.editable) {
-                    return
-                }
+                if (!this.editable) return
                 const index = this.staticIps.findIndex(item => item.bk_host_id === id)
-                const staticIps = this.staticIps.slice(0)
-                staticIps.splice(index, 1)
-                if (this.isSearchMode) { // 搜索模式下移除 ip
-                    this.searchResult = []
-                    this.setDisplayList()
+                if (index === -1) return
+
+                const updatedIps = [...this.staticIps]
+                updatedIps.splice(index, 1)
+                // 如果当前删除的ip是本页最后一条数据，则页数-1
+                if (this.staticIpList.length === 1 && this.pagination.current > 1) {
+                    this.pagination.current -= 1
                 }
-                this.$emit('change', staticIps)
+                this.isRemoved = true
+                this.$emit('change', updatedIps)
             },
             onAddIpConfirm (data) {
                 this.$emit('change', data)
                 this.isIpAddingPanelShow = false
-                this.$nextTick(() => {
-                    this.$refs.ipSearchInput.handleSearch()
-                })
             },
             onAddIpCancel () {
                 this.isIpAddingPanelShow = false
             },
             onPageChange (page) {
-                this.currentPage = page
-                this.listInPage = this.list.slice((page - 1) * this.listCountPerPage, page * this.listCountPerPage)
+                const list = this.searchResult.length ? this.searchResult : this.staticIps
+                this.updateStaticIpList({ list, current: page })
             },
             validate () {
                 if (this.staticIps.length) {
@@ -315,42 +286,6 @@
                     this.onAddIpCancel()
                     return false
                 }
-            },
-            getSortIpList (list, way = 'up') {
-                const srotList = list.slice(0)
-                const sortVal = way === 'up' ? 1 : -1
-                srotList.sort((a, b) => {
-                    const srotA = a.bk_host_innerip.split('.')
-                    const srotB = b.bk_host_innerip.split('.')
-                    for (let i = 0; i < 4; i++) {
-                        if (srotA[i] * 1 > srotB[i] * 1) {
-                            return sortVal
-                        } else if (srotA[i] * 1 < srotB[i] * 1) {
-                            return -sortVal
-                        }
-                    }
-                })
-                return srotList
-            },
-            getSortHostNameList (list, way = 'up') {
-                const sortList = list.slice(0)
-                const sortVal = way === 'up' ? 1 : -1
-                sortList.sort((a, b) => {
-                    if (a.bk_host_name > b.bk_host_name) {
-                        return sortVal
-                    } else {
-                        return -sortVal
-                    }
-                })
-                return sortList
-            },
-            onIpSort (way) {
-                this.hostNameSortActive = ''
-                this.ipSortActive = way
-            },
-            onHostNameSort (way) {
-                this.ipSortActive = ''
-                this.hostNameSortActive = way
             }
         }
     }
@@ -407,7 +342,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 10px;
+    transform: translateY(10px);
     .selected-num {
         font-size: 12px;
         .total-ip {
diff --git a/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIpAddingPanel.vue b/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIpAddingPanel.vue
index c18a54e4d9..e3a28acc3d 100644
--- a/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIpAddingPanel.vue
+++ b/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIpAddingPanel.vue
@@ -16,7 +16,7 @@
             :class="['ip-search-wrap', { 'static-ip-unfold': allowUnfoldInput }]"
             @search="onIpSearch">
         </ip-search-input>
-        <div class="ip-list-wrap">
+        <div class="ip-list-wrap" v-bkloading="{ isLoading: isLoading }">
             <template v-if="type === 'select'">
                 <IpSelectorTable
                     :selection="true"
@@ -25,23 +25,19 @@
                     :is-search-mode="isSearchMode"
                     :default-selected="selectedIp"
                     :static-ip-list="staticIpList"
-                    :list-in-page="listInPage"
+                    :list-count="pagination.count"
                     :static-ip-table-config="staticIpTableConfig"
-                    @onIpSort="onIpSort"
-                    @onHostNameSort="onHostNameSort"
-                    @onTableConfigChange="onTableConfigChange"
-                    @handleSelectionChange="handleSelectionChange">
+                    @onSelectAllClick="onSelectAllClick"
+                    @onHostItemClick="onHostItemClick"
+                    @onTableConfigChange="onTableConfigChange">
                 </IpSelectorTable>
-                
                 <bk-pagination
                     v-if="isPaginationShow"
                     class="table-pagination"
                     size="small"
                     align="right"
-                    :current="currentPage"
-                    :count="totalCount"
-                    :limit="listCountPerPage"
-                    :limit-list="[listCountPerPage]"
+                    v-bind="pagination"
+                    :limit-list="[pagination.limit]"
                     :show-limit="false"
                     @change="onPageChange">
                 </bk-pagination>
@@ -52,7 +48,8 @@
                         type="textarea"
                         :rows="10"
                         :placeholder="$t('请输入IP，多个以逗号或者换行符隔开')"
-                        v-model="ipString">
+                        :value="ipString"
+                        @change="onManualInputChange">
                     </bk-input>
                 </div>
             </template>
@@ -81,6 +78,7 @@
     import IpSearchInput from './IpSearchInput.vue'
     import IpSelectorTable from './IpSelectorTable.vue'
     import tools from '@/utils/tools.js'
+    import { mapActions } from 'vuex'
 
     export default {
         name: 'StaticIpAddingPanel',
@@ -90,29 +88,18 @@
         },
         props: {
             allowUnfoldInput: Boolean,
-            staticIpList: Array,
             staticIpTableConfig: Array,
             staticIps: Array,
             type: String
         },
+        inject: ['remoteUrl'],
         data () {
-            const listCountPerPage = 5
-            const listInPage = this.staticIpList.slice(0, listCountPerPage)
-            const totalPage = Math.ceil(this.staticIpList.length / listCountPerPage)
-
             return {
-                isPaginationShow: totalPage > 1,
                 selectedIp: this.staticIps.slice(0),
                 isSearchMode: false,
-                searchResult: [],
-                currentPage: 1,
-                totalCount: this.staticIpList.length,
-                listCountPerPage,
-                listInPage,
-                ipSortActive: '',
+                staticIpList: [],
                 hostNameSortActive: '',
                 ipString: '',
-                list: this.staticIpList, // 筛选/排序后存放列表
                 errorStr: '',
                 errorIpList: [],
                 tooltipConfig: {
@@ -122,157 +109,138 @@
                     content: '#error-ips-content',
                     placement: 'top'
                 },
-                isSearchInputFocus: false
+                isSearchInputFocus: false,
+                isLoading: false,
+                pagination: {
+                    current: 1,
+                    count: 0,
+                    limit: 5
+                }
             }
         },
-        watch: {
-            staticIpList (val) {
-                this.setDisplayList()
-            },
-            isSearchMode () {
-                this.setDisplayList()
+        computed: {
+            isPaginationShow () {
+                const { count, limit } = this.pagination
+                const totalPage = Math.ceil(count / limit)
+                return totalPage > 1
             },
-            ipSortActive () {
-                this.setDisplayList()
-            },
-            hostNameSortActive () {
-                this.setDisplayList()
+            urls () {
+                return typeof this.remoteUrl === 'function' ? this.remoteUrl() : Object.assign({}, this.remoteUrl)
             }
         },
+        created () {
+            this.getStaticIpList()
+        },
         methods: {
-            setDisplayList () {
-                let list = this.isSearchMode ? this.searchResult : this.staticIpList
-                if (this.ipSortActive) {
-                    list = this.getSortIpList(list, this.ipSortActive)
-                }
-                if (this.hostNameSortActive) {
-                    list = this.getSortHostNameList(list, this.hostNameSortActive)
-                }
-                this.list = list
-                this.setPanigation(list)
-            },
-            setPanigation (list = []) {
-                this.listInPage = list.slice(0, this.listCountPerPage)
-                const totalPage = Math.ceil(list.length / this.listCountPerPage)
-                this.isPaginationShow = totalPage > 1
-                this.totalCount = list.length
-                this.currentPage = 1
-            },
-            onIpSearch (keyword) {
-                if (keyword) {
-                    const keyArr = keyword.split(',').map(item => item.trim()).filter(item => {
-                        return item.trim() !== ''
-                    })
-                    const ipv6Regexp = tools.getIpv6Regexp()
-                    const list = this.staticIpList.filter(item => {
-                        const { bk_host_innerip: ipv4, bk_host_innerip_v6: ipv6 } = item
-                        return keyArr.some(str => {
-                            let text = str
-                            if (ipv6Regexp.test(str)) { // 判断是否为ipv6地址
-                                text = tools.tranSimIpv6ToFullIpv6(str) // 将缩写的ipv6转换为全写
-                            }
-                            return ipv4.indexOf(text) > -1
-                                || (ipv6 && ipv6.indexOf(text) > -1)
-                        })
+            ...mapActions([
+                'getHostInCC'
+            ]),
+            async getStaticIpList () {
+                try {
+                    if (!this.urls['cc_search_host']) return
+
+                    this.isLoading = true
+                    const { limit, current } = this.pagination
+                    const resp = await this.getHostInCC({
+                        url: this.urls['cc_search_host'],
+                        fields: ['agent', 'bk_host_innerip_v6'],
+                        start: (current - 1) * limit,
+                        limit,
+                        ip_str: this.ipString || undefined
                     })
-                    this.searchResult = list
-                    this.setPanigation(list)
-                    this.isSearchMode = true
-                } else {
-                    this.setPanigation(this.staticIpList)
-                    this.isSearchMode = false
+                    const { result, data } = resp
+                    if (!result) return
+                    // 如果传了分页返回的数据结构会多包一层
+                    this.staticIpList = data.data
+                    this.pagination.count = data.count
+                } catch (error) {
+                    console.error(error)
+                } finally {
+                    this.isLoading = false
                 }
             },
-            handleSelectionChange (ips) {
-                this.selectedIp = ips
+            onIpSearch (keyword) {
+                this.ipString = keyword
+                this.pagination.current = 1
+                this.getStaticIpList()
             },
             onTableConfigChange (data) {
                 this.$emit('onTableConfigChange', data)
             },
-            getSortIpList (list, way = 'up') {
-                const srotList = list.slice(0)
-                const sortVal = way === 'up' ? 1 : -1
-                srotList.sort((a, b) => {
-                    const srotA = a.bk_host_innerip.split('.')
-                    const srotB = b.bk_host_innerip.split('.')
-                    for (let i = 0; i < 4; i++) {
-                        if (srotA[i] * 1 > srotB[i] * 1) {
-                            return sortVal
-                        } else if (srotA[i] * 1 < srotB[i] * 1) {
-                            return -sortVal
-                        }
-                    }
-                })
-                return srotList
-            },
-            getSortHostNameList (list, way = 'up') {
-                const sortList = list.slice(0)
-                const sortVal = way === 'up' ? 1 : -1
-                sortList.sort((a, b) => {
-                    if (a.bk_host_name > b.bk_host_name) {
-                        return sortVal
-                    } else {
-                        return -sortVal
-                    }
-                })
-                return sortList
+            onPageChange (page) {
+                this.pagination.current = page
+                this.getStaticIpList()
             },
-            onIpSort (way) {
-                this.hostNameSortActive = ''
-                this.ipSortActive = way
+            // 全选
+            async onSelectAllClick (val) {
+                if (!val) {
+                    this.selectedIp = []
+                } else {
+                    const resp = await this.getHostInCC({
+                        url: this.urls['cc_search_host'],
+                        fields: ['agent', 'bk_host_innerip_v6'],
+                        ip_str: this.ipString || undefined
+                    })
+                    this.selectedIp = [...resp.data]
+                }
             },
-            onHostNameSort (way) {
-                this.ipSortActive = ''
-                this.hostNameSortActive = way
+            // 单选
+            onHostItemClick (host) {
+                const index = this.selectedIp.findIndex(el => el.bk_host_id === host.bk_host_id)
+                if (index > -1) {
+                    this.selectedIp.splice(index, 1)
+                } else {
+                    this.selectedIp.push(host)
+                }
             },
-            onPageChange (page) {
-                const list = this.isSearchMode ? this.searchResult : this.list
-                this.currentPage = page
-                this.listInPage = list.slice((page - 1) * this.listCountPerPage, page * this.listCountPerPage)
+            onManualInputChange (val) {
+                const ipString = val.split(/[\,|\n|\uff0c]/) // 按照中英文逗号、换行符分割
+                this.ipString = ipString.join(',')
             },
-            onAddIpConfirm () {
+            async onAddIpConfirm () {
                 const selectedIp = this.selectedIp.slice(0)
 
                 if (this.type === 'manual') {
-                    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()
-                        if (str) {
-                            if (!ipPattern.test(str) && !ipv6Regexp.test(str)) { // 字符串不是合法 ip 地址
-                                ipInvalidList.push(str)
-                            } else {
-                                let text = str
-                                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地址不在可选列表里
-                                    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)
-                                    }
-                                }
-                            }
-                        }
-                    })
+                    const strArr = this.ipString.split(',')
+
+                    // 校验是否为合法 ip 地址
+                    const ipInvalidList = strArr.filter(str => !ipPattern.test(str) && !ipv6Regexp.test(str))
                     if (ipInvalidList.length > 0) {
                         this.errorStr = ` ${this.$t('个')} ${this.$t('IP地址不合法，')}`
                         this.errorIpList = ipInvalidList
                         return
                     }
-                    if (ipNotExistList.length > 0) {
-                        this.errorStr = ` ${this.$t('个')} ${this.$t('IP地址不存在，')}`
-                        this.errorIpList = ipNotExistList
+
+                    // 检查ip是否存在
+                    if (!this.urls['cc_search_host']) return
+                    try {
+                        const resp = await this.getHostInCC({
+                            url: this.urls['cc_search_host'],
+                            fields: ['agent', 'bk_host_innerip_v6'],
+                            ip_str: this.ipString || undefined
+                        })
+                        const ipNotExistList = strArr.filter(str => !resp.data.find(i => [i.bk_host_innerip, i.bk_host_innerip_v6].includes(str)))
+                        if (ipNotExistList.length > 0) {
+                            this.errorStr = ` ${this.$t('个')} ${this.$t('IP地址不存在，')}`
+                            this.errorIpList = ipNotExistList
+                            return
+                        }
+
+                        // 判断输入的ip是否已经选中
+                        strArr.forEach(str => {
+                            const ipInSelected = this.selectedIp.find(i => [i.bk_host_innerip, i.bk_host_innerip_v6].includes(str))
+                            if (!ipInSelected) { // ip 地址/ipv6地址在可选列表并且不在已选列表
+                                const ipInfo = resp.data.find(i => [i.bk_host_innerip, i.bk_host_innerip_v6].includes(str))
+                                selectedIp.push(ipInfo)
+                            }
+                        })
+                    } catch (error) {
+                        console.error(error)
                         return
                     }
                 }
-
                 this.$emit('onAddIpConfirm', selectedIp)
             },
             onAddIpCancel () {
diff --git a/frontend/desktop/src/components/common/RenderForm/IpSelector/index.vue b/frontend/desktop/src/components/common/RenderForm/IpSelector/index.vue
index 7654962b3a..ac2da72376 100644
--- a/frontend/desktop/src/components/common/RenderForm/IpSelector/index.vue
+++ b/frontend/desktop/src/components/common/RenderForm/IpSelector/index.vue
@@ -17,7 +17,6 @@
                 ref="multipleIpSelector"
                 :editable="editable"
                 :selector-tabs="selectorTabs"
-                :static-ip-list="staticIpList"
                 :dynamic-ip-list="dynamicIpList"
                 :dynamic-group-list="dynamicGroupList"
                 :selectors="selectors"
@@ -33,7 +32,6 @@
                 :editable="editable"
                 :allow-unfold-input="allowUnfoldInput"
                 :selector-tabs="selectorTabs"
-                :static-ip-list="staticIpList"
                 :dynamic-ip-list="dynamicIpList"
                 :dynamic-group-list="dynamicGroupList"
                 :selectors="selectors"
@@ -124,13 +122,6 @@
                 type: Boolean,
                 default: true
             },
-            // 静态IP可选列表
-            staticIpList: {
-                type: Array,
-                default () {
-                    return []
-                }
-            },
             // 动态IP可选列表
             dynamicIpList: {
                 type: Array,
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue
index e94676148d..0fa69a1990 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue
@@ -18,7 +18,6 @@
                 :editable="editable && !disabled"
                 :is-multiple="isMultiple"
                 :selector-tabs="selectorTabs"
-                :static-ip-list="staticIpList"
                 :dynamic-ip-list="dynamicIpList"
                 :topo-model-list="topoModelList"
                 :dynamic-group-list="dynamicGroupList"
@@ -103,12 +102,16 @@
             IpSelector
         },
         mixins: [getFormMixins(attrs)],
+        provide () {
+            return {
+                remoteUrl: this.remote_url
+            }
+        },
         data () {
             return {
                 loading: false,
                 isvalidate: false,
                 selectorTabs: tools.deepClone(selectorTabs),
-                staticIpList: [],
                 dynamicIpList: [],
                 topoModelList: [],
                 dynamicGroupList: [] // 动态分组的首页数据，如果大于 200 条，在组件内部单独请求
@@ -176,7 +179,15 @@
                 const requestList = []
                 switch (selectorInfo.id) {
                     case 'ip':
-                        requestList.push(this.getHostInCC({ url: urls['cc_search_host'], fields: staticIpExtraFields }))
+                        // 该接口默认不调，如果有ip已经选中了则过滤出对应的host_id列表
+                        if (this.value.ip.length) {
+                            const hostIds = this.value.ip.map(item => item.bk_host_id).join(',')
+                            requestList.push(this.getHostInCC({
+                                url: urls['cc_search_host'],
+                                fields: staticIpExtraFields,
+                                host_id_str: hostIds || undefined
+                            }))
+                        }
                         break
                     case 'topo':
                         requestList.push(this.getTopoTreeInCC({ url: urls['cc_search_topo_tree'] }))
@@ -198,11 +209,10 @@
                         if (index === 0) {
                             switch (selectorInfo.id) {
                                 case 'ip':
-                                    this.staticIpList = v.data
                                     if (!this.hook) { // 表单没有被勾选
                                         ip.forEach(value => {
                                             // 拿到新的静态ip列表后替换对应的已保存ip属性，如果已保存ip在新列表中不存在，则提示用户手动更新
-                                            hasDiff = this.staticIpList.every(item => item.bk_host_id !== value.bk_host_id)
+                                            hasDiff = v.data.every(item => item.bk_host_id !== value.bk_host_id)
                                             this.$set(value, 'diff', hasDiff)
                                         })
                                     }
diff --git a/frontend/desktop/src/store/index.js b/frontend/desktop/src/store/index.js
index 1edf3251ce..6aaf34e094 100644
--- a/frontend/desktop/src/store/index.js
+++ b/frontend/desktop/src/store/index.js
@@ -170,13 +170,17 @@ const store = new Vuex.Store({
         // ip 选择器接口 start --->
         // 查询业务在 CMDB 的主机
         getHostInCC ({ commmit }, data) {
-            const { url, fields, topo, search_host_lock } = data
-            return axios.get(url, {
-                params: {
-                    fields: JSON.stringify(fields),
-                    topo: JSON.stringify(topo),
-                    search_host_lock
-                },
+            const { url, fields, topo, search_host_lock, host_id_str, start, limit, ip_str } = data
+            const params = {
+                fields,
+                topo,
+                search_host_lock,
+                host_id_str,
+                start,
+                limit,
+                ip_str
+            }
+            return axios.post(url, params, {
                 baseURL: '/'
             }).then(response => response.data)
         },