From 16cec25bb0cfae95128822cfaf5eb135eccf7f66 Mon Sep 17 00:00:00 2001 From: v_xugzhou <941071842@qq.com> Date: Thu, 29 Aug 2024 10:30:17 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20ip=E9=80=89=E6=8B=A9=E5=99=A8=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E8=B0=83=E7=94=A8=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96?= =?UTF-8?q?=20#7543=20#=20Reviewed,=20transaction=20id:=2016786?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/RenderForm/tags/TagIpSelector.vue | 124 ++++++++++-------- 1 file changed, 71 insertions(+), 53 deletions(-) diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue index c3468d97cb..2187e51bd4 100644 --- a/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue +++ b/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue @@ -75,22 +75,26 @@ { type: 'staticIp', id: 'ip', - name: i18n.t('静态 IP') + name: i18n.t('静态 IP'), + load: false }, { type: 'dynamicIp', id: 'topo', - name: i18n.t('动态拓扑') + name: i18n.t('动态拓扑'), + load: false }, { type: 'dynamicGroup', id: 'group', - name: i18n.t('动态分组') + name: i18n.t('动态分组'), + load: false }, { type: 'manualInput', id: 'manual', - name: i18n.t('手动输入') + name: i18n.t('手动输入'), + load: false } ] export default { @@ -139,9 +143,13 @@ return !this.validateSet.includes('required') } }, - mounted () { - if (!this.scheme.attrs.usedValue) { - this.getData() + watch: { + 'ipValue.selectors': { + handler (val, oldVal) { + if (!val.length || tools.isDataEqual(val, oldVal)) return + this.getData() + }, + immediate: true } }, methods: { @@ -152,61 +160,71 @@ 'getDynamicGroup' ]), getData () { + // 只展示文本时无需发起请求 + if (this.scheme.attrs.usedValue) return + const staticIpExtraFields = ['agent', 'bk_host_innerip_v6'] const urls = typeof this.remote_url === 'function' ? this.remote_url() : Object.assign({}, this.remote_url) if (!urls['cc_search_host'] || !urls['cc_search_topo_tree'] || !urls['cc_get_mainline_object_topo']) { return } + // 已经加载的tab，无需再次请求接口 + const selectorInfo = this.selectorTabs.find(item => item.id === this.ipValue.selectors[0]) + if (selectorInfo.load) return + this.loading = true - Promise.all([ - this.getHostInCC({ - url: urls['cc_search_host'], - fields: staticIpExtraFields - }), - this.getTopoTreeInCC({ - url: urls['cc_search_topo_tree'] - }), - this.getTopoModelInCC({ - url: urls['cc_get_mainline_object_topo'] - }), - this.getDynamicGroup({ - url: urls['cc_dynamic_group_list'] - }) - ]).then(values => { - if (Array.isArray(values)) { - let hasDiff = false - const { ip, group } = this.value - values.forEach((v, index) => { - switch (index) { - case 0: - 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) - this.$set(value, 'diff', hasDiff) - }) - } - break - case 1: - this.dynamicIpList = v.data - break - case 2: - this.topoModelList = v.data - break - case 3: - this.dynamicGroupList = v.data.info - // 判断动态分组数据与最新的CMDB动态分组配置是否存在差异 - const dynamicGroups = group || [] - dynamicGroups.some(value => { - hasDiff = this.dynamicGroupList.every(item => item.id !== value.id) + const requestList = [] + switch (selectorInfo.id) { + case 'ip': + requestList.push(this.getHostInCC({ url: urls['cc_search_host'], fields: staticIpExtraFields })) + break + case 'topo': + requestList.push(this.getTopoTreeInCC({ url: urls['cc_search_topo_tree'] })) + break + case 'group': + requestList.push(this.getDynamicGroup({ url: urls['cc_dynamic_group_list'] })) + break + } + // 这个接口只在初始化的时候调一次 + const isInit = this.selectorTabs.every(item => !item.load) + if (isInit) { + requestList.push(this.getTopoModelInCC({ url: urls['cc_get_mainline_object_topo'] })) + } + + Promise.all(requestList).then(values => { + let hasDiff = false + const { ip, group } = this.value + values.forEach((v) => { + 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) this.$set(value, 'diff', hasDiff) }) - break - } - }) - } + } + break + case 'topo': + this.dynamicIpList = v.data + break + case 'group': + this.dynamicGroupList = v.data.info + // 判断动态分组数据与最新的CMDB动态分组配置是否存在差异 + const dynamicGroups = group || [] + dynamicGroups.some(value => { + hasDiff = this.dynamicGroupList.every(item => item.id !== value.id) + this.$set(value, 'diff', hasDiff) + }) + break + default: + this.topoModelList = v.data + break + } + }) this.loading = false + selectorInfo.load = true }).catch(e => { this.loading = false console.log(e)