feat(frontend): mysql工具箱支持格子内选择集群/实例/IP TencentBlueKing#6997

# Reviewed, transaction id: 19139

dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/Index.vue

@@ -67,6 +67,7 @@
               :get-table-list="getTableList"
               :is-remote-pagination="isRemotePagination"
               :last-values="lastValues"
+              :multiple="multiple"
               :role-filter-list="roleFilterList"
               :status-filter="statusFilter"
               :table-setting="tableSetting"
@@ -104,6 +105,7 @@
   interface Props {
     lastValues: InstanceSelectorValues<T>;
     tableSetting: TableSetting;
+    multiple?: NonNullable<TableConfigType['multiple']>;
     firsrColumn?: TableConfigType['firsrColumn'];
     roleFilterList?: TableConfigType['roleFilterList'];
     isRemotePagination?: TableConfigType['isRemotePagination'];
@@ -128,6 +130,7 @@
     topoAlertContent: undefined,
     roleFilterList: undefined,
     filterClusterId: undefined,
+    multiple: true,
   });
   const emits = defineEmits<Emits>();
 

dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue

@@ -30,7 +30,8 @@
         style="margin-top: 12px"
         @page-limit-change="handeChangeLimit"
         @page-value-change="handleChangePage"
-        @refresh="fetchResources" />
+        @refresh="fetchResources"
+        @row-click.stop.prevent="handleRowClick" />
     </BkLoading>
   </div>
 </template>
@@ -60,6 +61,7 @@
     lastValues: InstanceSelectorValues<T>,
     tableSetting: TableSetting,
     clusterId?: number,
+    multiple?: TableConfigType['multiple'],
     isRemotePagination?: TableConfigType['isRemotePagination'],
     firsrColumn?: TableConfigType['firsrColumn'],
     // eslint-disable-next-line vue/no-unused-properties
@@ -128,7 +130,7 @@
     {
       width: 60,
       fixed: 'left',
-      label: () => (
+      label: () => props.multiple && (
         <bk-checkbox
           label={true}
           model-value={isSelectedAll.value}
@@ -147,13 +149,20 @@
             </bk-popover>
           );
         }
-        return (
+        return props.multiple ? (
           <bk-checkbox
             style="vertical-align: middle;"
             label={true}
             model-value={Boolean(checkedMap.value[data[firstColumnFieldId.value]])}
             onChange={(value: boolean) => handleTableSelectOne(value, data)}
           />
+        ) : (
+          <bk-radio
+            style="vertical-align: middle;"
+            model-value={Boolean(checkedMap.value[data[firstColumnFieldId.value]])}
+            label={true}
+            onChange={(value: boolean) => handleTableSelectOne(value, data)}
+          />
         );
       },
     },
@@ -276,8 +285,22 @@
     }
   };
 
+  const handleRowClick = (row: unknown, data: T) => {
+    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+      return;
+    }
+
+    const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    if (isChecked && !props.multiple) {
+      // 单选不允许取消
+      return;
+    }
+
+    handleTableSelectOne(!isChecked, data);
+  };
+
   const handleTableSelectOne = (checked: boolean, data: T) => {
-    const lastCheckMap = { ...checkedMap.value };
+    const lastCheckMap = props.multiple ? { ...checkedMap.value } : {};
     if (checked) {
       lastCheckMap[data[firstColumnFieldId.value]] = formatValue(data);
     } else {

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3529,5 +3529,11 @@
   "不允许输入系统库和特殊库，如mysql、sys 等": "不允许输入系统库和特殊库，如mysql、sys 等",
   "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符": "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符",
   "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用",
+  "选择实例": "选择实例",
+  "格式不正确": "格式不正确",
+  "ip不存在": "ip不存在",
+  "请输入或选择主机": "请输入或选择主机",
+  "实例/IP重复": "实例/IP重复",
+  "同主机关联的其他集群，勾选后一同克隆": "同主机关联的其他集群，勾选后一同克隆",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/types/auto-imports.d.ts

@@ -3,7 +3,6 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: (typeof import('vue'))['EffectScope'];

dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue

@@ -124,6 +124,7 @@
       id: 0,
     },
     version: '',
+    is_stand_by: false,
   });
 
   export type IDataRowBatchKey = keyof Pick<IDataRow, 'dbPatterns' | 'ignoreDbs' | 'tablePatterns' | 'ignoreTables'>;

dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue

@@ -49,20 +49,22 @@
     @change="handleInstancesChange" />
 </template>
 <script lang="ts">
+  type InstanceInfo = ServiceReturnType<typeof checkMysqlInstances>[number];
+
   const instanceWithSelectorMemo: { [key: string]: Record<string, boolean> } = {};
 </script>
 <script setup lang="ts">
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import TendbhaInstanceModel from '@services/model/mysql/tendbha-instance';
   import { checkMysqlInstances } from '@services/source/instances';
 
   import { ClusterTypes } from '@common/const';
   import { ipPort, ipv4 } from '@common/regex';
 
   import InstanceSelector, {
     type InstanceSelectorValues,
+    type IValue,
     type PanelListType,
   } from '@components/instance-selector/Index.vue';
   import TableEditInput from '@components/render-table/columns/input/index.vue';
@@ -81,6 +83,11 @@
     db_module_name?: string;
     master_domain?: string;
     cluster_type?: string;
+    related_clusters?: InstanceInfo['related_clusters'];
+    related_instances?: {
+      cluster_id: number;
+      instance_address: string;
+    }[];
   }
 
   interface Props {
@@ -97,7 +104,7 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<InstanceBasicInfo>;
+    getValue: () => Promise<Required<InstanceBasicInfo>>;
     focus: () => void;
   }
 
@@ -119,9 +126,10 @@
   const isFocused = ref(false);
   const isShowInstanceSelecotr = ref(false);
   const localValue = ref('');
-  const selectedIntances = shallowRef<InstanceSelectorValues<TendbhaInstanceModel>>({ [ClusterTypes.TENDBHA]: [] });
+  const selectedIntances = shallowRef<InstanceSelectorValues<IValue>>({ [ClusterTypes.TENDBHA]: [] });
 
   const instanceKey = `instance_${random()}`;
+  let modelValueLocal: InstanceBasicInfo;
   instanceWithSelectorMemo[instanceKey] = {};
 
   const rules = [
@@ -155,10 +163,17 @@
           instanceWithSelectorMemo[instanceKey][instanceData.instance_address] = true;
           if (
             !modelValue.value?.instance_address ||
-            modelValue.value.instance_address !== instanceData.instance_address
+            modelValueLocal?.instance_address !== instanceData.instance_address
           ) {
-            modelValue.value = instanceData;
-            emits('instanceChange', instanceData);
+            modelValueLocal = _.cloneDeep({
+              ...instanceData,
+              related_instances: data.map((item) => ({
+                cluster_id: item.cluster_id,
+                instance_address: item.instance_address,
+              })),
+            });
+            modelValue.value = modelValueLocal;
+            emits('instanceChange', modelValueLocal as Required<InstanceBasicInfo>);
           }
           return true;
         }),
@@ -207,6 +222,11 @@
       } else {
         localValue.value = `${modelValue.value.bk_cloud_id}:${modelValue.value.ip}:${modelValue.value.port}`;
       }
+      if (modelValueLocal?.ip !== modelValue.value?.ip) {
+        setTimeout(() => {
+          inputRef.value.getValue();
+        });
+      }
     },
     {
       immediate: true,
@@ -218,9 +238,9 @@
   };
 
   // 批量选择
-  const handleInstancesChange = (selected: InstanceSelectorValues<TendbhaInstanceModel>) => {
+  const handleInstancesChange = (selected: InstanceSelectorValues<IValue>) => {
     selectedIntances.value = selected;
-    const list = selected[ClusterTypes.TENDBHA];
+    const list = _.flatMap(Object.values(selected));
     if (props.type === 'instance') {
       localValue.value = list[0].instance_address;
     } else if (props.type === 'ip') {

dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/Index.vue

@@ -127,17 +127,18 @@
 
   const handleSubmit = () => {
     isSubmitting.value = true;
-    tableRef.value!.getValue().then((infos: MySQLProxySwitchDetails['infos']) => {
-      createTicket({
-        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-        ticket_type: TicketTypes.MYSQL_PROXY_SWITCH,
-        remark: '',
-        details: {
-          infos,
-          is_safe: isSafe.value,
-        },
-      })
-        .then((data) => {
+    tableRef
+      .value!.getValue()
+      .then((infos: MySQLProxySwitchDetails['infos']) =>
+        createTicket({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          ticket_type: TicketTypes.MYSQL_PROXY_SWITCH,
+          remark: '',
+          details: {
+            infos,
+            is_safe: isSafe.value,
+          },
+        }).then((data) => {
           window.changeConfirm = false;
           router.push({
             name: 'MySQLProxyReplace',
@@ -148,11 +149,11 @@
               ticketId: data.id,
             },
           });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
-    });
+        }),
+      )
+      .finally(() => {
+        isSubmitting.value = false;
+      });
   };
 
   const handleReset = () => {