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

jinquantianxia · Sep 23, 2024 · 71b665a · 71b665a
1 parent 568a73d
commit 71b665a
Show file tree

Hide file tree

Showing 60 changed files with 1,691 additions and 1,259 deletions.
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
@@ -385,6 +385,11 @@
     }
     const currentSelected = selectedMap.value[activeTab.value];
     const isChecked = !!(currentSelected && currentSelected[data.id]);
+    if (isChecked && !props.multiple) {
+      // 单选不允许取消
+      return;
+    }
+
     handleSelecteRow(data, !isChecked);
   };
 

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
@@ -408,6 +408,11 @@
     }
     const currentSelected = selectedMap.value[activeTab.value];
     const isChecked = !!(currentSelected && currentSelected[data.id]);
+    if (isChecked && !props.multiple) {
+      // 单选不允许取消
+      return;
+    }
+
     handleSelecteRow(data, !isChecked);
   };
 

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
@@ -396,6 +396,11 @@
     }
     const currentSelected = selectedMap.value[activeTab.value];
     const isChecked = !!(currentSelected && currentSelected[data.id]);
+    if (isChecked && !props.multiple) {
+      // 单选不允许取消
+      return;
+    }
+
     handleSelecteRow(data, !isChecked);
   };
 

diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -50,6 +50,7 @@
           :is-remote-pagination="activePanelObj?.tableConfig?.isRemotePagination"
           :last-values="lastValues"
           :manual-config="activePanelObj?.manualConfig"
+          :multiple="activePanelObj?.tableConfig?.multiple"
           :role-filter-list="activePanelObj?.tableConfig?.roleFilterList"
           :status-filter="activePanelObj?.tableConfig?.statusFilter"
           :table-setting="tableSettings"
@@ -292,7 +293,7 @@
   type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number];
 
   interface Props {
-    clusterTypes: (ClusterTypes | 'TendbhaHost' | 'TendbClusterHost' | 'RedisHost' | 'mongoCluster')[];
+    clusterTypes: string[];
     tabListConfig?: Record<string, PanelListType>;
     selected?: InstanceSelectorValues<T>;
     unqiuePanelValue?: boolean;

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mysql/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mysql/Index.vue
@@ -69,6 +69,7 @@
               :get-table-list="getTableList"
               :is-remote-pagination="isRemotePagination"
               :last-values="lastValues"
+              :multiple="multiple"
               :role-filter-list="roleFilterList"
               :status-filter="statusFilter"
               :table-setting="tableSetting"
@@ -99,6 +100,7 @@
   interface Props {
     lastValues: InstanceSelectorValues<T>;
     tableSetting: TableSetting;
+    multiple?: NonNullable<TableConfigType['multiple']>;
     firsrColumn?: TableConfigType['firsrColumn'];
     roleFilterList?: TableConfigType['roleFilterList'];
     isRemotePagination?: TableConfigType['isRemotePagination'];
@@ -127,6 +129,7 @@
     topoAlertContent: undefined,
     roleFilterList: undefined,
     filterClusterId: undefined,
+    multiple: true,
   });
   const emits = defineEmits<Emits>();
 

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue
@@ -69,6 +69,7 @@
   interface Props {
     lastValues: InstanceSelectorValues<T>,
     tableSetting: TableSetting,
+    multiple?: boolean,
     clusterId?: number,
     isRemotePagination?: TableConfigType['isRemotePagination'],
     firsrColumn?: TableConfigType['firsrColumn'],
@@ -92,6 +93,7 @@
     activePanelId: 'tendbcluster',
     disabledRowConfig: undefined,
     roleFilterList: undefined,
+    multiple: true,
   });
 
   const emits = defineEmits<Emits>();
@@ -165,7 +167,7 @@
     {
       minWidth: 70,
       fixed: 'left',
-      label: () => (
+      label: () => props.multiple && (
         <div style="display:flex;align-items:center">
           <bk-checkbox
             label={true}
@@ -202,13 +204,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)}
+          />
         );
       },
     },
@@ -380,11 +389,16 @@
     }
 
     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) as T;
     } else {