perf(frontend): redis工具箱重构 TencentBlueKing#8840

dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/spec-block-column/Index.vue

@@ -15,10 +15,20 @@
   <EditableColumn
     :label="t('当前规格')"
     :width="200">
+    <template
+      v-if="labelTip"
+      #head>
+      <BkPopover
+        :content="labelTip"
+        placement="top"
+        theme="dark">
+        <span class="spec-block-column-label-tip">{{ t('当前规格') }}</span>
+      </BkPopover>
+    </template>
     <EditableBlock :placeholder="placeholder">
       {{ data?.name ? `${data.name} ${showCounts ? t('((n))台', { n: data?.count }) : ''}` : '' }}
       <SpecPanel
-        v-if="data"
+        v-if="data.id"
         :data="data"
         :show-qps="showQps">
         <DbIcon
@@ -39,19 +49,25 @@
     placeholder?: string;
     showCounts?: boolean;
     showQps?: boolean;
+    labelTip?: string;
   }
 
   withDefaults(defineProps<Props>(), {
     data: undefined,
     placeholder: undefined,
     showCounts: true,
     showQps: false,
+    labelTip: '',
   });
 
   const { t } = useI18n();
 </script>
 
 <style lang="less" scoped>
+  .spec-block-column-label-tip {
+    border-bottom: 1px dashed #979ba5;
+  }
+
   .visible-icon {
     font-size: 16px;
     color: #3a84ff;

dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/spec-select-column/Index.vue

@@ -32,7 +32,12 @@
             :value="item.value">
             <div class="spec-select-column-spec-item">
               <span class="text-overflow">
-                {{ item.label }}
+                <slot
+                  :label="item.label"
+                  name="label"
+                  :value="item.value">
+                  {{ item.label }}
+                </slot>
                 <BkTag
                   v-if="currentSpecIds?.includes(item.value)"
                   size="small"
@@ -79,6 +84,7 @@
 
   const slots = defineSlots<{
     head?: (value: { label: string }) => VNode;
+    label?: (value: { value: number; label: string }) => VNode;
   }>();
 
   const { t } = useI18n();

dbm-ui/frontend/src/views/db-manage/redis/common/toolbox-field/cluster-column/Index.vue

@@ -0,0 +1,130 @@
+<template>
+  <EditableColumn
+    ref="editableTableColumn"
+    :append-rules="rules"
+    :field="field"
+    fixed="left"
+    :label="label || t('目标集群')"
+    :loading="isLoading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <BkButton
+        text
+        theme="primary"
+        @click="handleShowClusterSelector">
+        <DbIcon type="batch-host-select" />
+      </BkButton>
+    </template>
+    <EditableInput
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入或选择集群')" />
+    <ClusterSelector
+      v-model:is-show="isShowClusterSelector"
+      :cluster-types="[ClusterTypes.REDIS]"
+      :selected="selected as MappedProps"
+      :tab-list-config="tabListConfig"
+      @change="handelClusterChange" />
+  </EditableColumn>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
+
+  type MappedProps = {
+    [K in keyof Props['selected']]: RedisModel[];
+  };
+
+  interface Props {
+    selected: Record<
+      string,
+      {
+        id: number;
+        master_domain: string;
+      }[]
+    >;
+    label?: string;
+    field?: string;
+    tabListConfig?: Record<string, TabConfig>;
+  }
+
+  interface Emits {
+    (e: 'batch-edit', value: RedisModel[]): void;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    label: '',
+    field: 'cluster.master_domain',
+    tabListConfig: undefined,
+  });
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<Partial<ServiceReturnType<typeof filterClusters>[number]>>({
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      trigger: 'change',
+      message: t('目标集群输入格式有误'),
+    },
+    {
+      validator: () => Boolean(modelValue.value.id),
+      trigger: 'blur',
+      message: t('目标集群不存在'),
+    },
+  ];
+
+  const editableTableColumnRef = useTemplateRef('editableTableColumn');
+  const isShowClusterSelector = ref(false);
+  const isLoading = ref(false);
+
+  watch(
+    () => modelValue.value.master_domain,
+    () => {
+      if (!modelValue.value.id && modelValue.value.master_domain) {
+        isLoading.value = true;
+        modelValue.value.id = undefined;
+        filterClusters<RedisModel>({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          exact_domain: modelValue.value.master_domain,
+        })
+          .then((data) => {
+            if (data.length > 0) {
+              [modelValue.value] = data;
+            }
+          })
+          .finally(() => {
+            isLoading.value = false;
+            editableTableColumnRef.value!.validate();
+          });
+      }
+      if (!modelValue.value.master_domain) {
+        modelValue.value.id = undefined;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleShowClusterSelector = () => {
+    isShowClusterSelector.value = true;
+  };
+
+  const handelClusterChange = (selected: Record<string, RedisModel[]>) => {
+    const clusterList = Object.values(selected).flatMap((selectedList) => selectedList);
+    emits('batch-edit', clusterList);
+  };
+</script>