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

# Reviewed, transaction id: 24759
TencentBlueKing · Nov 25, 2024 · 3227e5e · 3227e5e
1 parent f5eb196
commit 3227e5e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 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/SpecId.vue b/...-manage/pool/host-list/components/search-box/components/com-factory/components/SpecId.vue
@@ -101,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) {
@@ -156,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,
@@ -181,6 +178,10 @@
     emits('change', value);
   };
 
+  onMounted(() => {
+    defaultValue.value = props.model.spec_id || '';
+  });
+
   defineExpose<Expose>({
     reset() {
       rerenderKey.value = Date.now();