fix(frontend): 资源池主机列表交互优化 TencentBlueKing#8149

# Reviewed, transaction id: 24766
jinquantianxia · Nov 25, 2024 · 5d865bd · 5d865bd
1 parent 7d51cce
commit 5d865bd
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue
@@ -126,7 +126,7 @@
   const isShowBatchSetting = ref(false);
   const isShowImportHost = ref(false);
 
-  let searchParams = {};
+  let searchParams: Record<string, any> = {};
   let selectionListWholeDataMemo: DbResourceModel[] = [];
   const tableColumn = [
     {

diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/Index.vue
@@ -13,13 +13,11 @@
 
 <template>
   <div class="resource-pool-search-box">
-    <KeepAlive>
-      <Component
-        :is="renderCom"
-        :key="renderKey"
-        v-model="searchParams"
-        @submit="handleSubmit" />
-    </KeepAlive>
+    <Component
+      :is="renderCom"
+      :key="renderKey"
+      v-model="searchParams"
+      @submit="handleSubmit" />
     <div
       class="toggle-btn"
       @click="handleToggle">
@@ -28,6 +26,7 @@
   </div>
 </template>
 <script setup lang="ts">
+  import _ from 'lodash';
   import { computed, onMounted, ref } from 'vue';
 
   import fieldConfig from './components/field-config';
@@ -57,6 +56,8 @@
 
   const renderCom = computed(() => comMap[renderStatus.value]);
 
+  let localSearchParams: Record<string, any> = {};
+
   // 切换搜索展示样式
   const handleToggle = () => {
     renderStatus.value = renderStatus.value === 'input' ? 'tag' : 'input';
@@ -107,7 +108,14 @@
 
       return acc;
     }, {});
-
+    if (
+      localSearchParams.resource_type &&
+      searchParams.value?.resource_type &&
+      localSearchParams.resource_type !== searchParams.value.resource_type
+    ) {
+      delete params.spec_id;
+    }
+    localSearchParams = _.cloneDeep(params);
     emits('change', params);
   };
 

diff --git a/...-manage/pool/host-list/components/search-box/components/com-factory/components/ForBiz.vue b/...-manage/pool/host-list/components/search-box/components/com-factory/components/ForBiz.vue
@@ -13,17 +13,21 @@
 
 <template>
   <BkSelect
+    display-key="display_name"
+    enable-virtual-render
     filterable
+    id-key="bk_biz_id"
     :input-search="false"
+    :list="bizList"
     :model-value="defaultValue"
     :placeholder="t('请选择所属业务')"
     show-selected-icon
     @change="handleChange">
-    <BkOption
+    <!-- <BkOption
       v-for="bizItem in bizList"
       :key="bizItem.bk_biz_id"
       :label="bizItem.display_name"
-      :value="bizItem.bk_biz_id" />
+      :value="bizItem.bk_biz_id" /> -->
     <template
       v-if="simple"
       #extension>

diff --git a/...-manage/pool/host-list/components/search-box/components/com-factory/components/SpecId.vue b/...-manage/pool/host-list/components/search-box/components/com-factory/components/SpecId.vue
@@ -17,7 +17,6 @@
       <BkSelect
         v-model="currentDbType"
         :clearable="false"
-        :disabled="isDbTypeDisabled"
         filterable
         :input-search="false"
         style="width: 150px"
@@ -102,8 +101,6 @@
   const currentMachine = ref('');
   const clusterMachineList = shallowRef<InfoItem['machineList']>([]);
 
-  const isDbTypeDisabled = computed(() => props.model.resource_type && props.model.resource_type !== 'PUBLIC');
-
   const { loading: isResourceSpecLoading, run: fetchResourceSpecDetail } = useRequest(getResourceSpec, {
     manual: true,
     onSuccess(data) {
@@ -157,14 +154,13 @@
     () => props.model,
     () => {
       const dbType = props.model.resource_type;
-      if (dbType && currentDbType.value && dbType !== currentDbType.value && dbType !== 'PUBLIC') {
+      if (dbType && dbType !== currentDbType.value) {
         currentDbType.value = dbType;
         clusterMachineList.value = DBTypeInfos[dbType as DBTypes]?.machineList || [];
         currentMachine.value = '';
         defaultValue.value = '';
         return;
       }
-      defaultValue.value = props.model.spec_id;
     },
     {
       immediate: true,
@@ -182,6 +178,10 @@
     emits('change', value);
   };
 
+  onMounted(() => {
+    defaultValue.value = props.model.spec_id || '';
+  });
+
   defineExpose<Expose>({
     reset() {
       rerenderKey.value = Date.now();