diff --git a/dbm-ui/frontend/src/components/cluster-spec-plan-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-spec-plan-selector/Index.vue
index 5aeb2f9f0e..a011f95d1d 100644
--- a/dbm-ui/frontend/src/components/cluster-spec-plan-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-spec-plan-selector/Index.vue
@@ -234,8 +234,14 @@
- {data.spec_name}
+ style="display: flex"
+ onClick={() => handleRowClick(data)}>
+ {event.stopPropagation()}}>
+ {data.spec_name}
+
),
},
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/components/MongoConfigSpec.vue b/dbm-ui/frontend/src/views/mongodb-manage/components/MongoConfigSpec.vue
index 27a72bd864..240037f7c0 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/components/MongoConfigSpec.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/components/MongoConfigSpec.vue
@@ -164,10 +164,12 @@
v-model={modelValue.value.spec_id}
label={data.spec_id}
key={index}
- class="spec-radio">
+ class="spec-radio"
+ onClick={(event: Event) => handleRowClick(event, data)}>
+ v-overflow-tips
+ onClick={(event: Event) => {event.stopPropagation()}}>
{data.spec_name}
diff --git a/dbm-ui/frontend/src/views/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue b/dbm-ui/frontend/src/views/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
index 2620b908a4..70ee89318e 100644
--- a/dbm-ui/frontend/src/views/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
+++ b/dbm-ui/frontend/src/views/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
@@ -345,27 +345,29 @@
const { t } = useI18n();
const handleBeforeClose = useBeforeClose();
+ const createDefaultTargetInfo = () => ({
+ capacity: 0,
+ spec: {
+ name: '',
+ cpu: {} as ClusterSpecModel['cpu'],
+ id: 0,
+ mem: {} as ClusterSpecModel['mem'],
+ qps: {} as ClusterSpecModel['qps'],
+ storage_spec: [] as ClusterSpecModel['storage_spec']
+ },
+ groupNum: 0,
+ requireMachineGroupNum: 0,
+ shardNum: 0,
+ updateMode: ''
+ })
+
const capacityNeed = ref();
const radioValue = ref(-1);
const radioChoosedId = ref(''); // 标记,sort重新定位index用
const isTableLoading = ref(false);
const isConfirmLoading = ref(false);
const tableData = ref([]);
- const targetInfo = ref({
- capacity: 0,
- spec: {
- name: '',
- cpu: {} as ClusterSpecModel['cpu'],
- id: 0,
- mem: {} as ClusterSpecModel['mem'],
- qps: {} as ClusterSpecModel['qps'],
- storage_spec: [] as ClusterSpecModel['storage_spec']
- },
- groupNum: 0,
- requireMachineGroupNum: 0,
- shardNum: 0,
- updateMode: ''
- });
+ const targetInfo = ref(createDefaultTargetInfo());
const specDisabledMap = shallowRef>({})
@@ -418,7 +420,7 @@
label={index}
v-model={radioValue.value}
disabled={specDisabledMap.value[row.spec_id]}>
- {row.spec_name}
+ {row.spec_name}
),
@@ -442,6 +444,12 @@
let rawTableData: ClusterSpecModel[] = [];
+ watch(radioValue, () => {
+ if (radioValue.value !== -1) {
+ getUpdateInfo(tableData.value[radioValue.value])
+ }
+ })
+
const handleSearchClusterSpec = async () => {
if (capacityNeed.value === undefined) {
return;
@@ -463,6 +471,7 @@
isTableLoading.value = false;
});
radioValue.value = -1
+ targetInfo.value = createDefaultTargetInfo()
tableData.value = retArr;
rawTableData = _.cloneDeep(retArr);
specDisabledMap.value = {}
@@ -485,7 +494,7 @@
emits('clickCancel');
}
- const getUpdateInfo = (row: ClusterSpecModel, index: number) => {
+ const getUpdateInfo = (row: ClusterSpecModel) => {
getRedisClusterCapacityUpdateInfo({
cluster_id: props.clusterId!,
new_storage_version: props.targetVerison!,
@@ -515,20 +524,16 @@
shardNum: row.cluster_shard_num,
updateMode: updateInfo.capacity_update_type
}
- radioValue.value = index;
radioChoosedId.value = row.spec_name;
})
}
- const getUpdateInfoDebounce = _.debounce(getUpdateInfo, 200)
-
const handleRowClick = (event: PointerEvent, row: ClusterSpecModel, index: number) => {
if (index === radioValue.value || specDisabledMap.value[row.spec_id]) {
return
}
- // TODO 这里暂时通过防抖,来防止触发两次请求
- getUpdateInfoDebounce(row, index)
+ radioValue.value = index
};
const handleColumnSort = (data: { column: { field: string }, index: number, type: string }) => {