From 7998d1b9c5d5d7504fabac969981e987c5bf3a22 Mon Sep 17 00:00:00 2001 From: chenwenchang <479999519@qq.com> Date: Tue, 26 Nov 2024 18:10:37 +0800 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8Dmysql?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0proxy=E9=87=8D=E5=A4=8D=E6=A0=A1=E9=AA=8C?= =?UTF-8?q?=E6=9C=AA=E6=A0=87=E7=BA=A2=E6=8F=90=E7=A4=BA=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20#8206=20#=20Reviewed,=20transaction=20id:=2025106?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dbm-ui/frontend/src/locales/zh-cn.json | 1 + .../edit-field/ClusterWithRelateCluster.vue | 30 +++++++++++++++---- .../mysql/proxy-add/pages/page1/Index.vue | 1 - .../components/RenderData/RenderProxy.vue | 9 +++++- .../pages/page1/components/RenderData/Row.vue | 12 ++++++-- .../page1/components/ReplaceHost/Index.vue | 13 +++++++- .../ReplaceHost/components/RenderData/Row.vue | 5 ++++ .../components/ReplaceInstance/Index.vue | 12 +++++++- .../components/RenderData/Row.vue | 4 +++ .../components/ReplaceInstance.vue | 4 +-- 10 files changed, 77 insertions(+), 14 deletions(-) diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json index 4e5da95705..569ac4af87 100644 --- a/dbm-ui/frontend/src/locales/zh-cn.json +++ b/dbm-ui/frontend/src/locales/zh-cn.json @@ -3654,5 +3654,6 @@ "每个分类最多显示 10 条记录，点击搜索可查看全部记录。": "每个分类最多显示 10 条记录，点击搜索可查看全部记录。", "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索": "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索", "全站搜索，支持多对象，Enter开启搜索": "全站搜索，支持多对象，Enter开启搜索", + "同主机关联的其他集群，勾选后一并添加": "同主机关联的其他集群，勾选后一并添加", "这行勿动！新增翻译请在上一行添加！": "" } diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue index 7b541422cc..e56784a575 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue @@ -23,6 +23,8 @@ v-model="localDomain" :placeholder="t('请输入集群域名或从表头批量选择')" :rules="rules" + @blur="handleEditBlur" + @clear="handleEditClear" @submit="handleEditSubmit" />
Array; + getValue: () => { + cluster_ids: number[]; + }; } interface IClusterData { @@ -333,16 +337,28 @@ }); }; + const handleEditBlur = () => { + editRef.value.getValue().then(() => { + isShowEdit.value = false; + nextTick(() => { + initRelateClusterPopover(); + }); + }); + }; + + const handleEditClear = () => { + clusterIdMemo[instanceKey] = {}; + realateCheckedMap.value = {}; + selectRelateClusterList.value = []; + }; + // 提交编辑 const handleEditSubmit = (value: string) => { if (!value) { + handleEditClear(); return; } - - isShowEdit.value = false; - nextTick(() => { - initRelateClusterPopover(); - }); + handleEditBlur(); }; // 显示管理集群列表 @@ -380,6 +396,8 @@ }; // 用户输入未完成验证 if (editRef.value) { + // 先切回编辑态才能正常校验 + handleShowEdit(); return editRef.value.getValue().then(() => result); } // 用户输入错误 diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/Index.vue index bbd4cfeda2..fa85f16b34 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/Index.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/Index.vue @@ -212,7 +212,6 @@ bk_biz_id: currentBizId, }).then((data) => { window.changeConfirm = false; - router.push({ name: 'MySQLProxyAdd', params: { diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/RenderProxy.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/RenderProxy.vue index eba10945f5..3adfda1bde 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/RenderProxy.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/RenderProxy.vue @@ -43,7 +43,14 @@ } interface Exposes { - getValue: () => Promise>; + getValue: () => Promise<{ + new_proxy: { + bk_biz_id: number; + bk_host_id: number; + bk_cloud_id: number; + ip: string; + }; + }>; } const props = defineProps(); diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/Row.vue index 0351d161a1..ed9db06a8d 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/Row.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/Row.vue @@ -85,7 +85,15 @@ } interface Exposes { - getValue: () => Promise; + getValue: () => Promise<{ + cluster_ids: number[]; + new_proxy: { + bk_biz_id: number; + bk_host_id: number; + bk_cloud_id: number; + ip: string; + }; + }>; } const props = defineProps(); @@ -128,7 +136,7 @@ emits('remove'); }; - const getRowData = () => [clusterRef.value.getValue(), proxyRef.value.getValue()]; + const getRowData = () => [clusterRef.value!.getValue(), proxyRef.value!.getValue()]; const handleClone = () => { Promise.allSettled(getRowData()).then((rowData) => { diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue index 2e13c0a7db..86af151730 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue @@ -52,7 +52,18 @@ import RenderDataRow, { createRowData, type IDataRow } from './components/RenderData/Row.vue'; interface Exposes { - getValue(): Promise; + getValue(): Promise< + { + cluster_ids: number[]; + origin_proxy: IDataRow['originProxy']; + target_proxy: IDataRow['targetProxy']; + display_info: { + type: string; + related_instances: string[]; + related_clusters: string[]; + }; + }[] + >; reset(): void; } diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue index ed121d6f0a..830edb7518 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue @@ -87,6 +87,11 @@ cluster_ids: number[]; origin_proxy: IDataRow['originProxy']; target_proxy: IDataRow['targetProxy']; + display_info: { + type: string; + related_instances: string[]; + related_clusters: string[]; + }; }>; } diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue index 8219c14159..4957b2f429 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue @@ -52,7 +52,17 @@ import RenderRow, { createRowData, type IDataRow } from './components/RenderData/Row.vue'; interface Exposes { - getValue(): Promise; + getValue(): Promise< + { + cluster_ids: number[]; + origin_proxy: IDataRow['originProxy']; + target_proxy: IDataRow['targetProxy']; + display_info: { + type: string; + related_clusters: string[]; + }; + }[] + >; reset(): void; } diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue index defcacb2f1..8a8caf4f60 100644 --- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue +++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue @@ -80,6 +80,10 @@ cluster_ids: number[]; origin_proxy: IDataRow['originProxy']; target_proxy: IDataRow['targetProxy']; + display_info: { + type: string; + related_clusters: string[]; + }; }>; } diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue index 4595d4bf55..07787923b6 100644 --- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue +++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue @@ -45,7 +45,7 @@ width: 220, }, { - label: t('同机关联集群'), + label: t('关联集群'), field: 'relatedClusters', width: 220, render: ({ data }: { data: RowData }) => data.relatedClusters.map((item) =>

{item}

), @@ -64,7 +64,7 @@ () => props.ticketDetails.details, () => { tableData.value = props.ticketDetails.details.infos.map(item => ({ - originProxy: item.origin_proxy.ip, + originProxy: `${item.origin_proxy.ip}:${item.origin_proxy.port}`, relatedClusters: item.display_info.related_clusters as string[], targetProxy: item.target_proxy.ip, }));