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 }) => {