From 39a2b4f478ca3e09dcca23f5feee2da1232d129b Mon Sep 17 00:00:00 2001 From: GONGONGONG <506419689@qq.com> Date: Mon, 26 Feb 2024 17:54:45 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E3=80=8C=E7=AE=A1=E6=8E=A7?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E3=80=8D=E3=80=8Cagent=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E3=80=8D=E7=AD=9B=E9=80=89=E8=83=BD=E5=8A=9B=E4=BC=98=E5=8C=96?= =?UTF-8?q?=20(closde=20#1752)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/header-render-mixins.ts | 1 + frontend/src/store/modules/agent.ts | 4 +- frontend/src/store/modules/plugin-new.ts | 8 +- frontend/src/views/agent/agent-list.vue | 80 +++++--- .../plugin-list/plugin-list-operate.vue | 2 +- .../plugin/plugin-list/plugin-list-table.vue | 2 +- .../views/plugin/plugin-list/plugin-list.vue | 173 ++++++++++++------ 7 files changed, 186 insertions(+), 84 deletions(-) diff --git a/frontend/src/components/common/header-render-mixins.ts b/frontend/src/components/common/header-render-mixins.ts index a6d6de71a..87f4dd36b 100644 --- a/frontend/src/components/common/header-render-mixins.ts +++ b/frontend/src/components/common/header-render-mixins.ts @@ -49,6 +49,7 @@ export default class TableHeaderRenderMixin extends Vue { width: item?.width, align: item?.align, filterList, + checkAll: !!item?.showCheckAll, showSearch: !!item?.showSearch, }, on: { diff --git a/frontend/src/store/modules/agent.ts b/frontend/src/store/modules/agent.ts index 05a793000..c8dca4d6a 100644 --- a/frontend/src/store/modules/agent.ts +++ b/frontend/src/store/modules/agent.ts @@ -170,8 +170,8 @@ export default class AgentStore extends VuexModule { * @param {*} params */ @Action - public async getFilterCondition(category = 'host') { - let data: ISearchItem[] = await getFilterCondition({ category }).catch(() => []); + public async getFilterCondition(param) { + let data: ISearchItem[] = await getFilterCondition(param).catch(() => []); data = data.map((item) => { if (item.children && item.children.length) { item.multiable = true; diff --git a/frontend/src/store/modules/plugin-new.ts b/frontend/src/store/modules/plugin-new.ts index c51a8960a..f138f4409 100644 --- a/frontend/src/store/modules/plugin-new.ts +++ b/frontend/src/store/modules/plugin-new.ts @@ -176,7 +176,12 @@ export default class PluginStore extends VuexModule { */ @Action public async getFilterList(params: any = { category: 'plugin_host' }): Promise { - let data = await getFilterCondition(params).catch(() => []); + const config = { cancelPrevious: true }; + if (params.keepQuery) { + config.cancelPrevious = false; + delete params.keepQuery; + } + let data = await getFilterCondition(params, config).catch(() => []); data = data.map((item: any) => { if (item.children && item.children.length) { item.multiable = true; @@ -187,6 +192,7 @@ export default class PluginStore extends VuexModule { }); } if (item.id === 'bk_cloud_id') { + item.showCheckAll = true; item.showSearch = true; item.width = 180; item.align = 'right'; diff --git a/frontend/src/views/agent/agent-list.vue b/frontend/src/views/agent/agent-list.vue index bf75aef07..ca16cfa8a 100644 --- a/frontend/src/views/agent/agent-list.vue +++ b/frontend/src/views/agent/agent-list.vue @@ -645,6 +645,7 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth sort_type: '', }; private loading = true; + private loadingDelay = false; // 重新拉去过虑条件之后可能需要重置搜素框里的数据 private searchInputKey = 0; // 跨页全选loading private checkLoading = false; @@ -1011,6 +1012,47 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth this.agentTable.doLayout(); }); } + /** + * 业务变更 + */ + @Watch('selectedBiz') + private handleBizChange(newValue: number[]) { + if (newValue.length !== 1) { + // topo未选择时 清空biz不会触发 cascade组件change事件 + if (this.search.topo.length) { + this.topoSelect.clearData(); + return false; + } + } else { + const bizIdKey = newValue.join(''); + if (Object.prototype.hasOwnProperty.call(this.topoBizFormat, bizIdKey) + && this.topoBizFormat[bizIdKey].needLoad) { + this.topoRemotehandler(this.topoBizFormat[bizIdKey], null); + } + } + this.loadingDelay = true; + this.loading = true; + this.getFilterCondition().then(() => { + const copyValue: ISearchItem[] = []; + this.searchSelectValue.forEach((item) => { + const already = this.filterData.find(opt => opt.id === item.id); + if (already) { + if (already.children?.length) { + copyValue.push({ + ...item, + values: item.values?.filter(opt => already.children?.find(child => child.id === opt.id)), + }); + } else { + copyValue.push(item); + } + } + }); + this.handleSearchSelectChange(copyValue); + this.loadingDelay = false; + this.table.pagination.current = 1; + this.initAgentListDebounce(); + }); + } private created() { this.initRouterQuery(); @@ -1021,6 +1063,19 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth this.handleInit(); } + private async getFilterCondition() { + const param = { category: 'host' }; + if (this.selectedBiz.length) { + Object.assign(param, { bk_biz_ids: this.selectedBiz }); + } + const optSearchKeys = ['version', 'bk_cloud_id']; + const data = await AgentStore.getFilterCondition(param); + this.filterData.splice(0, this.filterData.length, ...data.map(item => (optSearchKeys.includes(item.id) + ? ({ ...item, showCheckAll: true, showSearch: true }) + : item))); + return data; + } + private async handleInit() { this.initCustomColStatus(); const { cloud, agentNum } = this.$route.params; @@ -1038,8 +1093,7 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth // this.search.biz = this.bk_biz_id.length ? [...this.bk_biz_id] : this.selectedBiz; const searchParams: ISearchItem[] = []; const { cloud } = this.$route.params; - AgentStore.getFilterCondition().then((data) => { - this.filterData = data; + this.getFilterCondition().then((data) => { if (cloud) { searchParams.push({ name: this.filter.bk_cloud_id.name, @@ -1147,6 +1201,7 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth * @param {Boolean} spreadChecked 是否是跨页操作 */ private async initAgentList(spreadChecked = false) { + if (this.loadingDelay) return; this.loading = true; if (!spreadChecked) { this.isSelectedAllPages = false; @@ -1349,27 +1404,6 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth return Object.assign(params, this.getCommonCondition()); } - /** - * 业务变更 - */ - @Watch('selectedBiz') - private handleBizChange(newValue: number[]) { - if (newValue.length !== 1) { - // topo未选择时 清空biz不会触发 cascade组件change事件 - if (this.search.topo.length) { - this.topoSelect.clearData(); - return false; - } - } else { - const bizIdKey = newValue.join(''); - if (Object.prototype.hasOwnProperty.call(this.topoBizFormat, bizIdKey) - && this.topoBizFormat[bizIdKey].needLoad) { - this.topoRemotehandler(this.topoBizFormat[bizIdKey], null); - } - } - this.table.pagination.current = 1; - this.initAgentListDebounce(); - } /** * 拉取拓扑 */ diff --git a/frontend/src/views/plugin/plugin-list/plugin-list-operate.vue b/frontend/src/views/plugin/plugin-list/plugin-list-operate.vue index e3b629770..3f23de83f 100644 --- a/frontend/src/views/plugin/plugin-list/plugin-list-operate.vue +++ b/frontend/src/views/plugin/plugin-list/plugin-list-operate.vue @@ -173,7 +173,7 @@ export default class PluginListOperate extends Mixins(HeaderFilterMixins) { // public handleBizSelect() { // this.handleBizChange(); // } - @Watch('searchSelectData') + @Watch('searchSelectData', { immediate: true }) public handleSearchSelectDataChange(data: ISearchItem[]) { this.filterData = JSON.parse(JSON.stringify(data)); } diff --git a/frontend/src/views/plugin/plugin-list/plugin-list-table.vue b/frontend/src/views/plugin/plugin-list/plugin-list-table.vue index d9c3d90a6..2544d29c8 100644 --- a/frontend/src/views/plugin/plugin-list/plugin-list-table.vue +++ b/frontend/src/views/plugin/plugin-list/plugin-list-table.vue @@ -250,7 +250,7 @@ export default class PluginRuleTable extends Mixins(HeaderRenderMixin) { return MainStore.windowHeight - 180 - (MainStore.noticeShow ? 40 : 0); } - @Watch('searchSelectData', { deep: true }) + @Watch('searchSelectData', { deep: true, immediate: true }) private handleSearchSelectDataChange(data: ISearchItem[]) { this.filterData = JSON.parse(JSON.stringify(data)); } diff --git a/frontend/src/views/plugin/plugin-list/plugin-list.vue b/frontend/src/views/plugin/plugin-list/plugin-list.vue index 43fbfdd6b..1cd22fbf7 100644 --- a/frontend/src/views/plugin/plugin-list/plugin-list.vue +++ b/frontend/src/views/plugin/plugin-list/plugin-list.vue @@ -1,6 +1,7 @@