From 812a2af8c9ded49dcef8ef27c1e17647c265e774 Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Thu, 30 May 2024 09:11:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=B1=A1=E7=82=B9=E4=B8=BB?=
 =?UTF-8?q?=E6=9C=BA=E4=B8=8E=E8=B5=84=E6=BA=90=E6=93=8D=E4=BD=9C=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E6=90=9C=E7=B4=A2=E5=A2=9E=E5=BC=BA=20#4650?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cluster-selector/ClusterSelector.vue      |   2 +-
 .../src/hooks/useLinkQueryColumnSerach.ts     |  41 ++--
 dbm-ui/frontend/src/services/source/dbbase.ts |  19 ++
 .../es-manage/list/components/list/Index.vue  |   3 +-
 .../list/components/list/Index.vue            |   2 +
 .../list/components/list/Index.vue            |   2 +
 .../mysql/ha-cluster-list/components/List.vue |   2 +
 .../ha-instance-list/components/List.vue      |   1 +
 .../single-cluster-list/components/List.vue   |   2 +
 .../list/components/list/Index.vue            |   2 +
 .../redis/list/components/list/Index.vue      |   2 +
 .../resource-manage/dirty-machine/Index.vue   | 161 ++++++++++----
 .../views/resource-manage/record/Index.vue    | 209 +++++++++++++-----
 .../list/components/list/Index.vue            |   1 +
 .../list-instance/components/list/Index.vue   |   1 +
 .../list/components/list/Index.vue            |   2 +
 16 files changed, 334 insertions(+), 118 deletions(-)

diff --git a/dbm-ui/frontend/src/components/cluster-authorize/cluster-selector/ClusterSelector.vue b/dbm-ui/frontend/src/components/cluster-authorize/cluster-selector/ClusterSelector.vue
index 60e5924987..ebdb6e4115 100644
--- a/dbm-ui/frontend/src/components/cluster-authorize/cluster-selector/ClusterSelector.vue
+++ b/dbm-ui/frontend/src/components/cluster-authorize/cluster-selector/ClusterSelector.vue
@@ -135,9 +135,9 @@
                 class="table-box"
                 :columns="columns"
                 :data="state.tableData"
-                :height="500"
                 :is-anomalies="state.isAnomalies"
                 :is-searching="state.search.length > 0"
+                :max-height="528"
                 :pagination="{
                   ...state.pagination,
                   small: true,
diff --git a/dbm-ui/frontend/src/hooks/useLinkQueryColumnSerach.ts b/dbm-ui/frontend/src/hooks/useLinkQueryColumnSerach.ts
index ade46cc463..9491355953 100644
--- a/dbm-ui/frontend/src/hooks/useLinkQueryColumnSerach.ts
+++ b/dbm-ui/frontend/src/hooks/useLinkQueryColumnSerach.ts
@@ -14,7 +14,7 @@ import type { ISearchValue } from 'bkui-vue/lib/search-select/utils';
 import _ from 'lodash';
 import { useI18n } from 'vue-i18n';
 
-import { queryBizClusterAttrs } from '@services/source/dbbase';
+import { queryBizClusterAttrs, queryResourceAdministrationAttrs } from '@services/source/dbbase';
 
 import { useGlobalBizs } from '@stores';
 
@@ -37,7 +37,7 @@ export type SearchAttrs = Record<string, {
 type ColumnCheckedMap = Record<string, string[]>;
 
 export const useLinkQueryColumnSerach = (
-  clusterType: ClusterTypes,
+  searchType: string,
   attrs: string[],
   fetchDataFn = () => {},
   isCluster = true,
@@ -60,23 +60,34 @@ export const useLinkQueryColumnSerach = (
     return [];
   });
 
+  const resourceTypes = ['spotty_host', 'resource_record'];
+
   const sortValue: {
     ordering?: string,
   } = {};
 
   if (isQueryAttrs) {
-    const attrsObj = isCluster ? {
-      cluster_attrs: attrs.join(','),
-    } : {
-      instances_attrs: attrs.join(','),
-    };
+    let requestHandler;
+    if (resourceTypes.includes(searchType)) {
+      requestHandler = queryResourceAdministrationAttrs({
+        resource_type: searchType,
+      });
+    } else {
+      const attrsObj = isCluster ? {
+        cluster_attrs: attrs.join(','),
+      } : {
+        instances_attrs: attrs.join(','),
+      };
+
+      // 查询表头筛选列表
+      requestHandler = queryBizClusterAttrs({
+        bk_biz_id: currentBizId,
+        cluster_type: searchType as ClusterTypes,
+        ...attrsObj,
+      });
+    }
 
-    // 查询表头筛选列表
-    queryBizClusterAttrs({
-      bk_biz_id: currentBizId,
-      cluster_type: clusterType,
-      ...attrsObj,
-    }).then((resultObj) => {
+    requestHandler.then((resultObj) => {
       columnAttrs.value = resultObj;
       searchAttrs.value = Object.entries(resultObj).reduce((results, item) => {
         Object.assign(results, {
@@ -202,8 +213,8 @@ export const useLinkQueryColumnSerach = (
         return;
       }
       const values = item.values ? item.values.reduce((results, value) => {
-        const idList = _.uniq(`${value.id}`.split(batchSplitRegex));
-        const nameList = _.uniq(`${value.name}`.split(batchSplitRegex));
+        const idList = _.uniq(`${value.id.trim()}`.split(batchSplitRegex));
+        const nameList = _.uniq(`${value.name.trim()}`.split(batchSplitRegex));
         results.push(...idList.map((id, index) => ({
           id,
           name: nameList[index],
diff --git a/dbm-ui/frontend/src/services/source/dbbase.ts b/dbm-ui/frontend/src/services/source/dbbase.ts
index bc2cf1af10..648b7a9b86 100644
--- a/dbm-ui/frontend/src/services/source/dbbase.ts
+++ b/dbm-ui/frontend/src/services/source/dbbase.ts
@@ -81,3 +81,22 @@ export function queryBizClusterAttrs(params: {
     >
   >(`${path}/query_biz_cluster_attrs/`, params);
 }
+
+/**
+ * 查询资源池,污点主机管理表头筛选数据
+ */
+export function queryResourceAdministrationAttrs(params: {
+  resource_type: string;
+  limit?: number;
+  offset?: number;
+}) {
+  return http.get<
+    Record<
+      string,
+      {
+        value: string;
+        text: string;
+      }[]
+    >
+  >(`${path}/query_resource_administration_attrs/`, params);
+}
diff --git a/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
index d553a67ca4..e4fe41b799 100644
--- a/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
@@ -188,10 +188,12 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
       id: 'domain',
+      multiple: true,
     },
     {
       name: 'ID',
@@ -200,7 +202,6 @@
     {
       name: t('集群名称'),
       id: 'name',
-      logical: ',',
     },
     {
       name: t('管控区域'),
diff --git a/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
index 7fb60c7a78..b9cdf3c887 100644
--- a/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
@@ -228,10 +228,12 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
       id: 'domain',
+      multiple: true,
     },
     {
       name: 'ID',
diff --git a/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
index 03b4c0a670..90fd340ef6 100644
--- a/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
@@ -223,10 +223,12 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
       id: 'domain',
+      multiple: true,
     },
     {
       name: 'ID',
diff --git a/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
index 2258f8e569..02a5ad1030 100644
--- a/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
@@ -245,10 +245,12 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
       id: 'domain',
+      multiple: true,
     },
     {
       name: 'ID',
diff --git a/dbm-ui/frontend/src/views/mysql/ha-instance-list/components/List.vue b/dbm-ui/frontend/src/views/mysql/ha-instance-list/components/List.vue
index 7ae575c740..a6c4f8505a 100644
--- a/dbm-ui/frontend/src/views/mysql/ha-instance-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/mysql/ha-instance-list/components/List.vue
@@ -117,6 +117,7 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
diff --git a/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
index a91ea5e82a..0b2cfd8141 100644
--- a/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
@@ -209,10 +209,12 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
       id: 'domain',
+      multiple: true,
     },
     {
       name: 'ID',
diff --git a/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
index 279dc36250..5b5d6677f4 100644
--- a/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
@@ -548,10 +548,12 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
       id: 'domain',
+      multiple: true,
     },
     {
       name: t('集群名称'),
diff --git a/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
index f5345352dd..cba988debe 100644
--- a/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
@@ -329,10 +329,12 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
       id: 'domain',
+      multiple: true,
     },
     {
       name: 'ID',
diff --git a/dbm-ui/frontend/src/views/resource-manage/dirty-machine/Index.vue b/dbm-ui/frontend/src/views/resource-manage/dirty-machine/Index.vue
index a9f9cbf081..a6b2d89684 100644
--- a/dbm-ui/frontend/src/views/resource-manage/dirty-machine/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/dirty-machine/Index.vue
@@ -44,29 +44,29 @@
         </BkButton>
       </span>
       <DbSearchSelect
-        v-model="searchValues"
         class="ml-8"
-        :data="serachData"
-        :placeholder="t('请输入操作人或选择条件搜索')"
+        :data="searchSelectData"
+        :get-menu-list="getMenuList"
+        :model-value="searchValue"
+        :placeholder="t('请输入或选择条件搜索')"
         style="width: 500px"
         unique-select
-        :validate-values="serachValidateValues"
-        value-split-code=","
-        @change="handleSearch" />
+        :validate-values="validateSearchValues"
+        @change="handleSearchValueChange" />
     </div>
     <DbTable
       ref="tableRef"
       :columns="tableColumn"
       :data-source="dataSource"
-      releate-url-query
-      @clear-search="handleClearSearch"
+      @clear-search="clearSearchValue"
+      @column-filter="columnFilterChange"
+      @column-sort="columnSortChange"
       @select="handleSelect"
       @select-all="handleSelectAll" />
   </div>
 </template>
 <script setup lang="tsx">
   import { InfoBox } from 'bkui-vue';
-  import _ from 'lodash';
   import {
     onMounted,
     ref,
@@ -81,54 +81,85 @@
     transferDirtyMachines,
   } from '@services/source/dbdirty';
   import { getTicketTypes } from '@services/source/ticket';
+  import { getUserList } from '@services/source/user';
 
-  import { useCopy } from '@hooks';
+  import {
+    useCopy,
+    useLinkQueryColumnSerach,
+  } from '@hooks';
 
   import { useGlobalBizs } from '@stores';
 
-  import { ipv4 } from '@common/regex';
-
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import {
+    getMenuListSearch,
     getSearchSelectorParams,
     messageSuccess,
   } from '@utils';
 
+  import type { SearchSelectItem } from '@/types/bkui-vue';
+
   const router = useRouter();
   const copy = useCopy();
   const { t } = useI18n();
   const useGlobalBizsStore = useGlobalBizs();
 
+  const {
+    columnAttrs,
+    searchAttrs,
+    searchValue,
+    columnCheckedMap,
+    columnFilterChange,
+    columnSortChange,
+    clearSearchValue,
+    validateSearchValues,
+    handleSearchValueChange,
+  } = useLinkQueryColumnSerach('spotty_host', [], () => fetchData());
+
   const dataSource = getDirtyMachines;
 
   const tableRef = ref();
-  const searchValues = ref([]);
   const ticketTypes = ref<Array<{id: string, name: string}>>([]);
+
   const selectedTransferHostMap = shallowRef<Record<number, DirtyMachinesModel>>({});
+
   const selectedHosts = computed(() => Object.values(selectedTransferHostMap.value));
 
   const enableWaitForRecycle = computed(() => selectedHosts.value.length > 0 && selectedHosts.value.every(item => item.is_dirty));
   const enableMarkProcess = computed(() => selectedHosts.value.length > 0 && selectedHosts.value.every(item => !item.is_dirty));
 
-  const serachData = computed(() => [
+  const searchSelectData = computed(() => [
     {
       name: 'IP',
-      id: 'ip_list',
+      id: 'ip',
+      multiple: true,
     },
     {
-      name: t('关联单据'),
-      id: 'ticket_ids',
+      name: t('管控区域'),
+      id: 'bk_cloud_id',
+      multiple: true,
+      children: searchAttrs.value.bk_cloud_id,
     },
     {
-      name: t('关联任务'),
-      id: 'task_ids',
+      name: t('业务'),
+      id: 'bk_cloud_id',
+      multiple: true,
+      children: searchAttrs.value.bk_biz_ids,
     },
     {
       name: t('单据类型'),
       id: 'ticket_types',
       multiple: true,
-      children: ticketTypes.value,
+      children: searchAttrs.value.ticket_types,
+    },
+    {
+      name: t('关联单据'),
+      id: 'ticket_ids',
+    },
+    {
+      name: t('关联任务'),
+      id: 'task_ids',
     },
     {
       name: t('操作人'),
@@ -138,7 +169,7 @@
 
   const bizName = useGlobalBizsStore.currentBizInfo?.name;
 
-  const tableColumn = [
+  const tableColumn = computed(() => [
     {
       type: 'selection',
       width: 48,
@@ -165,15 +196,30 @@
     },
     {
       label: t('管控区域'),
-      field: 'bk_cloud_name',
+      field: 'bk_cloud_id',
+      filter: {
+        list: columnAttrs.value.bk_cloud_id,
+        checked: columnCheckedMap.value.bk_cloud_id,
+      },
+      render: ({ data }: {data: DirtyMachinesModel}) => <span>{data.bk_cloud_name || '--'}</span>,
     },
     {
       label: t('业务'),
-      field: 'bk_biz_name',
+      field: 'bk_biz_id',
+      filter: {
+        list: columnAttrs.value.bk_biz_ids,
+        checked: columnCheckedMap.value.bk_biz_id,
+      },
+      render: ({ data }: {data: DirtyMachinesModel}) => <span>{data.bk_biz_name || '--'}</span>,
     },
     {
       label: t('单据类型'),
-      field: 'ticket_type_display',
+      field: 'ticket_types',
+      filter: {
+        list: columnAttrs.value.ticket_types,
+        checked: columnCheckedMap.value.ticket_types,
+      },
+      render: ({ data }: {data: DirtyMachinesModel}) => <span>{data.ticket_type_display || '--'}</span>,
     },
     {
       label: t('关联单据'),
@@ -259,27 +305,56 @@
           </bk-pop-confirm>
       ),
     },
-  ];
-
-  const serachValidateValues = (
-    payload: Record<'id'|'name', string>,
-    values: Array<Record<'id'|'name', string>>,
-  ) => {
-    if (payload.id === 'ip_list') {
-      const [{ id }] = values;
-      return Promise.resolve(_.every(id.split(','), item => ipv4.test(item)));
-    }
-    return Promise.resolve(true);
-  };
+  ]);
+
+  // const serachValidateValues = (
+  //   payload: Record<'id'|'name', string>,
+  //   values: Array<Record<'id'|'name', string>>,
+  // ) => {
+  //   if (payload.id === 'ip_list') {
+  //     const [{ id }] = values;
+  //     return Promise.resolve(_.every(id.split(','), item => ipv4.test(item)));
+  //   }
+  //   return Promise.resolve(true);
+  // };
 
   // 获取数据
   const fetchData = () => {
-    const searchParams = getSearchSelectorParams(searchValues.value);
+    const searchParams = getSearchSelectorParams(searchValue.value);
     tableRef.value.fetchData({
       ...searchParams,
     });
   };
 
+  const getMenuList = async (item: SearchSelectItem | undefined, keyword: string) => {
+    if (item?.id !== 'operator' && keyword) {
+      return getMenuListSearch(item, keyword, searchSelectData.value, searchValue.value);
+    }
+
+    // 没有选中过滤标签
+    if (!item) {
+      // 过滤掉已经选过的标签
+      const selected = (searchValue.value || []).map(value => value.id);
+      return searchSelectData.value.filter(item => !selected.includes(item.id));
+    }
+
+    // 远程加载执行人
+    if (item.id === 'operator') {
+      if (!keyword) {
+        return [];
+      }
+      return getUserList({
+        fuzzy_lookups: keyword,
+      }).then(res => res.results.map(item => ({
+        id: item.username,
+        name: item.username,
+      })));
+    }
+
+    // 不需要远层加载
+    return searchSelectData.value.find(set => set.id === item.id)?.children || [];
+  };
+
   // 获取单据类型
   const fetchTicketTypes = () => getTicketTypes({
     is_apply: 1,
@@ -288,20 +363,8 @@
       id: item.key,
       name: item.value,
     }));
-    return ticketTypes.value;
   });
 
-  // 搜索
-  const handleSearch = () => {
-    fetchData();
-  };
-
-  // 清空搜索条件
-  const handleClearSearch = () => {
-    searchValues.value = [];
-    fetchData();
-  };
-
   // 选择单台
   const handleSelect = (data: { checked: boolean, row: DirtyMachinesModel }) => {
     const selectedMap = { ...selectedTransferHostMap.value };
diff --git a/dbm-ui/frontend/src/views/resource-manage/record/Index.vue b/dbm-ui/frontend/src/views/resource-manage/record/Index.vue
index c22b149716..2efab330d6 100644
--- a/dbm-ui/frontend/src/views/resource-manage/record/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/record/Index.vue
@@ -9,45 +9,60 @@
         type="datetimerange"
         @change="handleDateChange" />
       <DbSearchSelect
-        v-model="searchValues"
         class="ml-8"
-        :data="serachData"
-        :placeholder="$t('请输入操作人或选择条件搜索')"
+        :data="searchSelectData"
+        :get-menu-list="getMenuList"
+        :model-value="searchValue"
+        :placeholder="t('请输入或选择条件搜索')"
         style="width: 500px"
         unique-select
-        :validate-values="serachValidateValues"
-        @change="handleSearch" />
+        :validate-values="validateSearchValues"
+        @change="handleSearchValueChange" />
     </div>
     <DbTable
       ref="tableRef"
       :columns="tableColumn"
       :data-source="dataSource"
       releate-url-query
-      @clear-search="handleClearSearch" />
+      @clear-search="handleClearSearch"
+      @column-filter="columnFilterChange"
+      @column-sort="columnSortChange" />
   </div>
 </template>
 <script setup lang="tsx">
   import dayjs from 'dayjs';
-  import _ from 'lodash';
-  import {
-    ref,
-  } from 'vue';
   import { useI18n } from 'vue-i18n';
-  import { useRoute , useRouter } from 'vue-router';
+  import { useRequest } from 'vue-request';
+  import { useRoute } from 'vue-router';
 
   import OperationModel from '@services/model/db-resource/Operation';
   import { fetchOperationList } from '@services/source/dbresourceResource';
+  import { getTicketTypes } from '@services/source/ticket';
+  import { getUserList } from '@services/source/user';
 
-  import { ipv4 } from '@common/regex';
+  import { useLinkQueryColumnSerach } from '@hooks';
 
-  import { getSearchSelectorParams } from '@utils';
+  import { getMenuListSearch, getSearchSelectorParams } from '@utils';
 
   import HostDetail from './components/HostDetail.vue';
 
-  const router = useRouter();
+  // const router = useRouter();
+  import type { SearchSelectItem } from '@/types/bkui-vue';
+
   const route = useRoute();
   const { t } = useI18n();
 
+  const {
+    searchValue,
+    sortValue,
+    columnCheckedMap,
+    columnFilterChange,
+    columnSortChange,
+    clearSearchValue,
+    validateSearchValues,
+    handleSearchValueChange,
+  } = useLinkQueryColumnSerach('resource_record', [], () => fetchData());
+
   const dataSource = fetchOperationList;
 
   const tableRef = ref();
@@ -56,13 +71,9 @@
       .format('YYYY-MM-DD HH:mm:ss'),
     dayjs().format('YYYY-MM-DD HH:mm:ss'),
   ]);
-  const searchValues = ref([]);
+  const ticketTypes = ref<Array<{id: string, name: string}>>([]);
 
-  const serachData = [
-    {
-      name: 'IP',
-      id: 'ip_list',
-    },
+  const searchSelectData = computed(() => [
     {
       name: t('操作类型'),
       id: 'operation_type',
@@ -78,6 +89,12 @@
         },
       ],
     },
+    {
+      name: t('单据类型'),
+      id: 'ticket_types',
+      multiple: true,
+      children: ticketTypes.value,
+    },
     {
       name: t('关联单据'),
       id: 'ticket_ids',
@@ -120,9 +137,9 @@
       name: t('操作人'),
       id: 'operator',
     },
-  ];
+  ]);
 
-  const tableColumn = [
+  const tableColumn = computed(() => [
     {
       label: t('操作时间'),
       field: 'update_time',
@@ -134,18 +151,39 @@
     {
       label: t('操作主机明细（台）'),
       field: 'total_count',
+      sort: true,
       render: ({ data }: {data: OperationModel}) => (
         <HostDetail data={data} />
       ),
     },
     {
       label: t('操作类型'),
-      field: 'operationTypeText',
+      field: 'operation_type',
+      filter: {
+        list: [
+          {
+            value: [OperationModel.OPERATIN_TYPE_IMPORTED],
+            text: t('导入主机'),
+          },
+          {
+            value: [OperationModel.OPERATIN_TYPE_CONSUMED],
+            text: t('消费主机'),
+          },
+        ],
+        checked: columnCheckedMap.value.operation_type,
+      },
       render: ({ data }: {data: OperationModel}) => data.operationTypeText,
     },
     {
       label: t('单据类型'),
-      field: 'ticket_type_display',
+      field: 'ticket_types',
+      filter: {
+        list: ticketTypes.value.map(item => ({
+          value: item.id,
+          text: item.name,
+        })),
+        checked: columnCheckedMap.value.ticket_types,
+      },
       render: ({ data }: {data: OperationModel}) => data.ticket_type_display || '--',
     },
     {
@@ -198,6 +236,35 @@
       label: t('操作结果'),
       field: 'status',
       width: 150,
+      filter: {
+        list: [
+          {
+            value: [OperationModel.STATUS_PENDING],
+            text: t('等待执行'),
+
+          },
+          {
+            value: [OperationModel.STATUS_RUNNING],
+            text: t('执行中'),
+
+          },
+          {
+            value: [OperationModel.STATUS_SUCCEEDED],
+            text: t('执行成功'),
+
+          },
+          {
+            value: [OperationModel.STATUS_FAILED],
+            text: t('执行失败'),
+
+          },
+          {
+            value: [OperationModel.STATUS_REVOKED],
+            text: t('执行失败'),
+          },
+        ],
+        checked: columnCheckedMap.value.status,
+      },
       render: ({ data }: {data: OperationModel}) => (
         <div style="display: flex; align-items: center;">
           <db-icon
@@ -214,32 +281,74 @@
         </div>
       ),
     },
-  ];
+  ]);
+
+  useRequest(getTicketTypes, {
+    defaultParams: [{
+      is_apply: 1,
+    }],
+    onSuccess(data) {
+      ticketTypes.value = data.map(item => ({
+        id: item.key,
+        name: item.value,
+      }));
+    },
+  });
+
+  const getMenuList = async (item: SearchSelectItem | undefined, keyword: string) => {
+    if (item?.id !== 'operator' && keyword) {
+      return getMenuListSearch(item, keyword, searchSelectData.value, searchValue.value);
+    }
 
-  const serachValidateValues = (
-    payload: Record<'id'|'name', string>,
-    values: Array<Record<'id'|'name', string>>,
-  ) => {
-    if (payload.id === 'ticket_ids') {
-      const [{ id }] = values;
-      return Promise.resolve(_.every(id.split(','), item => /^\d+?/.test(item)));
+    // 没有选中过滤标签
+    if (!item) {
+      // 过滤掉已经选过的标签
+      const selected = (searchValue.value || []).map(value => value.id);
+      return searchSelectData.value.filter(item => !selected.includes(item.id));
     }
-    if (payload.id === 'ip_list') {
-      const [{ id }] = values;
-      return Promise.resolve(_.every(id.split(','), item => ipv4.test(item)));
+
+    // 远程加载执行人
+    if (item.id === 'operator') {
+      if (!keyword) {
+        return [];
+      }
+      return getUserList({
+        fuzzy_lookups: keyword,
+      }).then(res => res.results.map(item => ({
+        id: item.username,
+        name: item.username,
+      })));
     }
-    return Promise.resolve(true);
+
+    // 不需要远层加载
+    return searchSelectData.value.find(set => set.id === item.id)?.children || [];
   };
 
+  // const serachValidateValues = (
+  //   payload: Record<'id'|'name', string>,
+  //   values: Array<Record<'id'|'name', string>>,
+  // ) => {
+  //   if (payload.id === 'ticket_ids') {
+  //     const [{ id }] = values;
+  //     return Promise.resolve(_.every(id.split(','), item => /^\d+?/.test(item)));
+  //   }
+  //   if (payload.id === 'ip_list') {
+  //     const [{ id }] = values;
+  //     return Promise.resolve(_.every(id.split(','), item => ipv4.test(item)));
+  //   }
+  //   return Promise.resolve(true);
+  // };
+
   // 获取数据
   const fetchData = () => {
-    const searchParams = getSearchSelectorParams(searchValues.value);
+    const searchParams = getSearchSelectorParams(searchValue.value);
     const [
       beginTime,
       endTime,
     ] = operationDateTime.value;
     tableRef.value.fetchData({
       ...searchParams,
+      ...sortValue,
       begin_time: beginTime ? dayjs(beginTime).format('YYYY-MM-DD HH:mm:ss') : '',
       end_time: endTime ? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss') : '',
     });
@@ -249,26 +358,22 @@
   const handleDateChange = () => {
     fetchData();
   };
-  // 搜索
-  const handleSearch = () => {
-    fetchData();
-  };
+
   // 清空搜索条件
   const handleClearSearch = () => {
     operationDateTime.value = ['', ''];
-    searchValues.value = [];
-    fetchData();
+    clearSearchValue();
   };
 
-  const handleGoTicketDetail = (data: OperationModel) => {
-    const { href } = router.resolve({
-      name: 'bizTicketManage',
-      query: {
-        id: data.ticket_id,
-      },
-    });
-    window.open(href.replace(/(\d)+/, `${data.bk_biz_id}`));
-  };
+  // const handleGoTicketDetail = (data: OperationModel) => {
+  //   const { href } = router.resolve({
+  //     name: 'bizTicketManage',
+  //     query: {
+  //       id: data.ticket_id,
+  //     },
+  //   });
+  //   window.open(href.replace(/(\d)+/, `${data.bk_biz_id}`));
+  // };
 </script>
 
 <style lang="less">
diff --git a/dbm-ui/frontend/src/views/riak-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/riak-manage/list/components/list/Index.vue
index 4740763891..c998112ed3 100644
--- a/dbm-ui/frontend/src/views/riak-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/riak-manage/list/components/list/Index.vue
@@ -163,6 +163,7 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('集群名称'),
diff --git a/dbm-ui/frontend/src/views/spider-manage/list-instance/components/list/Index.vue b/dbm-ui/frontend/src/views/spider-manage/list-instance/components/list/Index.vue
index 09029e27c3..ba664aa4a6 100644
--- a/dbm-ui/frontend/src/views/spider-manage/list-instance/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/list-instance/components/list/Index.vue
@@ -290,6 +290,7 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
diff --git a/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
index d81ea82299..5045e02337 100644
--- a/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
@@ -248,10 +248,12 @@
     {
       name: t('IP 或 IP:Port'),
       id: 'instance',
+      multiple: true,
     },
     {
       name: t('访问入口'),
       id: 'domain',
+      multiple: true,
     },
     {
       name: 'ID',