fix(frontend): mysql部分格子表使用最新组件替换 TencentBlueKing#7261

# Reviewed, transaction id: 20157
JustaCattt · Oct 10, 2024 · b1b92cb · b1b92cb
1 parent c242435
commit b1b92cb
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 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
@@ -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
@@ -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/...d/src/views/db-manage/mysql/flashback/pages/page1/components/RenderData/RenderEndTime.vue b/...d/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/...end/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue b/...end/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/...lave-rebuild/pages/page1/components/original-host/components/RenderData/RenderCluster.vue b/...lave-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';