From b1b92cb40448754028e81005665ec9a7fa422e9b Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Thu, 10 Oct 2024 16:51:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20mysql=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=A0=BC=E5=AD=90=E8=A1=A8=E4=BD=BF=E7=94=A8=E6=9C=80=E6=96=B0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=BF=E6=8D=A2=20#7261=20#=20Reviewed,=20?=
 =?UTF-8?q?transaction=20id:=2020157?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../render-table/columns/select/index.vue     |  1 +
 dbm-ui/frontend/src/types/auto-imports.d.ts   |  2 +-
 .../components/RenderData/RenderEndTime.vue   |  2 +-
 .../components/common/RenderHostSource.vue    | 44 +++++++++++--------
 .../components/RenderData/RenderCluster.vue   | 14 +++---
 5 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/dbm-ui/frontend/src/components/render-table/columns/select/index.vue b/dbm-ui/frontend/src/components/render-table/columns/select/index.vue
index 268e8baa25..aa26025734 100644
--- a/dbm-ui/frontend/src/components/render-table/columns/select/index.vue
+++ b/dbm-ui/frontend/src/components/render-table/columns/select/index.vue
@@ -64,6 +64,7 @@
   export interface IListItem {
     value: IKey;
     label: string;
+    [x: string]: any;
   }
 </script>
 <script setup lang="ts">
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
index 7021ac5101..d0c217f6f1 100644
--- a/dbm-ui/frontend/src/types/auto-imports.d.ts
+++ b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -71,6 +71,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/components/RenderData/RenderEndTime.vue b/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/components/RenderData/RenderEndTime.vue
index 6593d1b899..8d43a66e41 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/components/RenderData/RenderEndTime.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/components/RenderData/RenderEndTime.vue
@@ -43,7 +43,7 @@
 
   import { useTimeZoneFormat } from '@hooks';
 
-  import TableEditDateTime from '@views/db-manage/tendb-cluster/common/edit/DateTime.vue';
+  import TableEditDateTime from '@components/render-table/columns/DateTime.vue';
 
   interface Props {
     startTime?: string;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue
index ef67ee922f..257fe831a5 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue
@@ -19,10 +19,10 @@
     :placeholder="t('请选择')"
     :rules="rules"
     @change="(value) => handleChange(value as string)">
-    <template #option="{ optionItem }">
-      <div :style="{ ...centerStyle, justifyContent: 'space-between' }">
-        <span>{{ optionItem.name }}</span>
-        <span :style="{ ...centerStyle, ...numberStyle }">{{ optionItem.count }}</span>
+    <template #default="{ optionItem }">
+      <div class="option-item">
+        <span>{{ optionItem.label }}</span>
+        <span class="option-count">{{ optionItem.count }}</span>
       </div>
     </template>
   </TableEditSelect>
@@ -33,7 +33,7 @@
 
   import { getHostTopo } from '@services/source/ipchooser';
 
-  import TableEditSelect from '@views/db-manage/tendb-cluster/common/edit/Select.vue';
+  import TableEditSelect from '@components/render-table/columns/select/index.vue';
 
   interface Props {
     modelValue: string;
@@ -52,18 +52,6 @@
 
   const { t } = useI18n();
 
-  const centerStyle = {
-    display: 'flex',
-    alignItems: 'center',
-  };
-  const numberStyle = {
-    width: '23px',
-    height: '17px',
-    background: '#EAEBF0',
-    borderRadius: '2px',
-    justifyContent: 'center',
-  };
-
   const bizId = window.PROJECT_CONFIG.BIZ_ID;
   const rules = [
     {
@@ -76,8 +64,8 @@
   const localValue = ref('');
   const list = ref([
     {
-      id: 'idle',
-      name: t('业务空闲机'),
+      value: 'idle',
+      label: t('业务空闲机'),
       count: 0,
     },
   ]);
@@ -123,3 +111,21 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .option-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+
+    .option-count {
+      display: flex;
+      align-items: center;
+      width: 23px;
+      height: 17px;
+      background: #eaebf0;
+      border-radius: 2px;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/RenderCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/RenderCluster.vue
index 1753f4fa65..81d8d4a42f 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/RenderCluster.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/RenderCluster.vue
@@ -12,13 +12,11 @@
 -->
 
 <template>
-  <BkLoading :loading="isLoading">
-    <TableEditInput
-      ref="editInputRef"
-      :model-value="localInstanceData?.master_domain"
-      :placeholder="t('根据实例生成')"
-      readonly />
-  </BkLoading>
+  <RenderText
+    ref="editInputRef"
+    :data="localInstanceData?.master_domain"
+    :is-loading="isLoading"
+    :placeholder="t('根据实例生成')" />
 </template>
 <script setup lang="ts">
   import { shallowRef } from 'vue';
@@ -29,7 +27,7 @@
 
   import { useGlobalBizs } from '@stores';
 
-  import TableEditInput from '@views/db-manage/tendb-cluster/common/edit/Input.vue';
+  import RenderText from '@components/render-table/columns/text-plain/index.vue';
 
   import type { IDataRow } from './Row.vue';