From dede0996d8c26f2e087a0f31084bb80d158b16c6 Mon Sep 17 00:00:00 2001 From: GONGONGONG <506419689@qq.com> Date: Mon, 26 Feb 2024 17:54:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E3=80=8C=E7=AE=A1=E6=8E=A7=E5=8C=BA?= =?UTF-8?q?=E5=9F=9F=E3=80=8D=E3=80=8Cagent=E7=89=88=E6=9C=AC=E3=80=8D?= =?UTF-8?q?=E7=AD=9B=E9=80=89=E8=83=BD=E5=8A=9B=E4=BC=98=E5=8C=96=20(closd?= =?UTF-8?q?e=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 | 174 ++++++++++++------ 7 files changed, 187 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 1b7c42788..91a44067c 100644 --- a/frontend/src/views/agent/agent-list.vue +++ b/frontend/src/views/agent/agent-list.vue @@ -646,6 +646,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; @@ -1012,6 +1013,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(); @@ -1022,6 +1064,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; @@ -1039,8 +1094,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, @@ -1148,6 +1202,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; @@ -1350,27 +1405,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 0d4954c30..691082d24 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..9f32b83f3 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 @@