Skip to content

Commit

Permalink
feat: 「管控区域」「agent版本」筛选能力优化 (closde TencentBlueKing#1752)
Browse files Browse the repository at this point in the history
  • Loading branch information
GONGONGONG authored and ZhuoZhuoCrayon committed Mar 18, 2024
1 parent a5243d6 commit a274490
Show file tree
Hide file tree
Showing 7 changed files with 209 additions and 83 deletions.
1 change: 1 addition & 0 deletions frontend/src/components/common/header-render-mixins.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export default class TableHeaderRenderMixin extends Vue {
width: item?.width,
align: item?.align,
filterList,
checkAll: !!item?.showCheckAll,
showSearch: !!item?.showSearch,
},
on: {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/store/modules/agent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/store/modules/plugin-new.ts
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,12 @@ export default class PluginStore extends VuexModule {
*/
@Action
public async getFilterList(params: any = { category: 'plugin_host' }): Promise<ISearchItem[]> {
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;
Expand All @@ -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';
Expand Down
80 changes: 57 additions & 23 deletions frontend/src/views/agent/agent-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
Expand All @@ -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;
Expand All @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}
/**
* 拉取拓扑
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
Expand Down
Loading

0 comments on commit a274490

Please sign in to comment.