feat: 「管控区域」「agent版本」筛选能力优化 (closde TencentBlueKing#1752)

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: {

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;

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<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;
@@ -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';

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();
-  }
   /**
    * 拉取拓扑
    */

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));
   }

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));
   }